xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片广场优化

Browse Source
This commit is contained in:
Gsh
2026-01-03 20:53:17 +08:00
parent 6cc14c1e32
commit f164b7dccc
11 changed files with 563 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue
View File

@@ -759,6 +759,7 @@ function toggleSidebar() {
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
background: #fff;
&.aside-collapsed {
transform: translateX(-100%);

36
Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue
View File

@@ -14,27 +14,6 @@ function openTutorial() {
>
<!-- PC端显示文字 -->
<span class="pc-text">文档</span>
<!-- 移动端显示图标 -->
<svg
class="mobile-icon w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l6.16-3.422A12.083 12.083 0 0118 13.5c0 2.579-3.582 4.5-6 4.5s-6-1.921-6-4.5c0-.432.075-.85.198-1.244L12 14z"
/>
</svg>
</div>
</div>
</template>
@@ -70,19 +49,4 @@ function openTutorial() {
}
}
}
// 移动端显示图标，隐藏文字
@media (max-width: 768px) {
.ai-tutorial-btn-container {
.ai-tutorial-btn {
.pc-text {
display: none;
}
.mobile-icon {
display: inline;
}
}
}
}
</style>

40
Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
View File

@@ -17,24 +17,6 @@ function openAnnouncement() {
>
<!-- PC端显示文字 -->
<span class="pc-text">公告</span>
<!-- 移动端显示图标 -->
<div class="mobile-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
</div>
</div>
</div>
</template>
@@ -151,26 +133,4 @@ function openAnnouncement() {
box-shadow: 0 1px 2px rgba(245, 108, 108, 0.2);
}
}
/* 移动端显示图标，隐藏文字 */
@media (max-width: 768px) {
.pc-text {
display: none;
}
.mobile-icon {
display: block;
}
.announcement-btn {
padding: 8px;
}
}
/* 响应式调整 */
@media (min-width: 769px) {
.mobile-icon {
display: none;
}
}
</style>

281
Yi.Ai.Vue3/src/layouts/components/Header/index.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import logo from '@/assets/images/logo.png';
import ConsoleBtn from '@/layouts/components0/Header/components/ConsoleBtn.vue';
@@ -16,6 +16,9 @@ const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
// 移动端菜单抽屉状态
const mobileMenuVisible = ref(false);
// 当前激活的菜单项
const activeIndex = computed(() => {
if (route.path.startsWith('/console'))
@@ -31,6 +34,7 @@ const activeIndex = computed(() => {
function handleSelect(key: string) {
if (key && key !== 'no-route') {
router.push(key);
mobileMenuVisible.value = false; // 移动端导航后关闭菜单
}
}
@@ -38,20 +42,28 @@ function handleSelect(key: string) {
function handleAIClick(e: MouseEvent) {
e.stopPropagation(); // 阻止事件冒泡
router.push('/chat/conversation');
mobileMenuVisible.value = false;
}
// 修改控制台菜单的点击事件
function handleConsoleClick(e: MouseEvent) {
e.stopPropagation(); // 阻止事件冒泡
router.push('/console/user');
mobileMenuVisible.value = false;
}
// 切换移动端菜单
function toggleMobileMenu() {
mobileMenuVisible.value = !mobileMenuVisible.value;
}
</script>
<template>
<div class="header-container">
<!-- 桌面端菜单 -->
<el-menu
:default-active="activeIndex"
class="header-menu"
class="header-menu desktop-menu"
mode="horizontal"
:ellipsis="false"
:router="false"
@@ -153,6 +165,97 @@ function handleConsoleClick(e: MouseEvent) {
</el-menu-item>
</div>
</el-menu>
<!-- 移动端头部 -->
<div class="mobile-header">
<div class="mobile-brand" @click="router.push('/')">
<el-image :src="logo" alt="logo" fit="contain" class="mobile-logo" />
<span class="mobile-brand-text">意心AI</span>
</div>
<div class="mobile-actions">
<!-- 用户头像或登录按钮 -->
<div v-if="userStore.userInfo" class="mobile-avatar">
<Avatar />
</div>
<LoginBtn v-else :is-menu-item="false" />
<!-- 汉堡菜单按钮 -->
<el-button class="menu-toggle" text @click="toggleMobileMenu">
<el-icon :size="24">
<component :is="mobileMenuVisible ? 'Close' : 'Menu'" />
</el-icon>
</el-button>
</div>
</div>
<!-- 移动端抽屉菜单 -->
<el-drawer
v-model="mobileMenuVisible"
direction="rtl"
:size="280"
:show-close="false"
class="mobile-drawer"
>
<template #header>
<div class="drawer-header">
<span class="drawer-title">菜单</span>
</div>
</template>
<el-menu
:default-active="activeIndex"
class="mobile-menu"
@select="handleSelect"
>
<!-- AI应用 -->
<el-sub-menu index="chat">
<template #title>
<el-icon><ChatDotRound /></el-icon>
<span>AI应用</span>
</template>
<el-menu-item index="/chat/conversation">AI对话</el-menu-item>
<el-menu-item index="/chat/image">AI图片</el-menu-item>
<el-menu-item index="/chat/video">AI视频</el-menu-item>
<el-menu-item index="/chat/agent">AI智能体</el-menu-item>
</el-sub-menu>
<!-- 模型库 -->
<el-menu-item index="/model-library">
<el-icon><Box /></el-icon>
<span>模型库</span>
</el-menu-item>
<!-- 控制台 -->
<el-sub-menu index="console">
<template #title>
<el-icon><Setting /></el-icon>
<span>控制台</span>
</template>
<el-menu-item index="/console/user">用户信息</el-menu-item>
<el-menu-item index="/console/apikey">API密钥</el-menu-item>
<el-menu-item index="/console/recharge-log">充值记录</el-menu-item>
<el-menu-item index="/console/usage">用量统计</el-menu-item>
<el-menu-item index="/console/premium">尊享服务</el-menu-item>
<el-menu-item index="/console/daily-task">每日任务</el-menu-item>
<el-menu-item index="/console/invite">每周邀请</el-menu-item>
<el-menu-item index="/console/activation">激活码兑换</el-menu-item>
</el-sub-menu>
<!-- 其他功能 -->
<div class="mobile-menu-actions">
<div class="action-item">
<AnnouncementBtn :is-menu-item="false" />
</div>
<div class="action-item">
<AiTutorialBtn />
</div>
<div v-if="userStore.userInfo" class="action-item">
<BuyBtn :is-menu-item="false" />
</div>
</div>
</el-menu>
</el-drawer>
</div>
</template>
@@ -166,7 +269,12 @@ function handleConsoleClick(e: MouseEvent) {
height: var(--header-container-default-height, 64px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
user-select: none;
position: relative;
}
// 移动端头部（默认隐藏）
.mobile-header {
display: none;
}
.header-menu {
@@ -294,6 +402,112 @@ function handleConsoleClick(e: MouseEvent) {
margin-left: 4px;
}
// 移动端头部样式
.mobile-brand {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: background-color 0.2s;
&:hover {
background-color: var(--menu-hover-bg);
}
}
.mobile-logo {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.mobile-brand-text {
font-size: 18px;
font-weight: 600;
color: var(--brand-color, #000000);
}
.mobile-actions {
display: flex;
align-items: center;
gap: 8px;
}
.mobile-avatar {
display: flex;
align-items: center;
}
.menu-toggle {
padding: 8px;
color: var(--el-text-color-primary);
&:hover {
color: var(--el-color-primary);
}
}
// 移动端抽屉样式
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.drawer-title {
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.mobile-menu {
border: none;
:deep(.el-sub-menu__title),
:deep(.el-menu-item) {
height: 48px;
line-height: 48px;
padding: 0 20px !important;
margin: 4px 0;
border-radius: 8px;
transition: all 0.2s;
&:hover {
background-color: var(--el-color-primary-light-9);
}
&.is-active {
color: var(--el-color-primary);
background-color: var(--el-color-primary-light-9);
font-weight: 500;
}
}
:deep(.el-icon) {
margin-right: 12px;
font-size: 18px;
}
}
.mobile-menu-actions {
margin-top: 20px;
padding: 16px 0;
border-top: 1px solid var(--el-border-color-light);
.action-item {
padding: 8px 20px;
margin: 4px 0;
&:hover {
background-color: var(--el-color-primary-light-9);
border-radius: 8px;
}
}
}
// 响应式设计
@media (max-width: 1280px) {
.brand-text {
@@ -340,52 +554,37 @@ function handleConsoleClick(e: MouseEvent) {
}
@media (max-width: 768px) {
.brand-text {
display: none;
// 隐藏桌面端菜单
.desktop-menu {
display: none !important;
}
.logo-img {
width: 32px;
height: 32px;
}
.menu-left {
margin-left: 12px;
}
.menu-right {
margin-right: 8px;
// 隐藏按钮文字
:deep(.button-text) {
display: none;
}
.menu-title {
display: none;
}
// 显示图标
:deep(.el-icon) {
font-size: 18px;
}
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
padding: 0 8px !important;
min-width: auto !important;
// 显示移动端头部
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 12px;
}
}
@media (max-width: 480px) {
.menu-right {
gap: 0;
.mobile-header {
padding: 0 8px;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
padding: 0 6px !important;
}
.mobile-brand-text {
font-size: 16px;
}
.mobile-logo {
width: 28px;
height: 28px;
}
.mobile-actions {
gap: 4px;
}
}
</style>

8
Yi.Ai.Vue3/src/pages/chat/image/components/ImageGenerator.vue
View File

@@ -351,11 +351,11 @@ onUnmounted(() => {
</script>
<template>
<div class="flex flex-col h-full md:flex-row gap-6 p-4 bg-white rounded-lg shadow-sm">
<div class="flex flex-col h-full md:flex-row gap-4 md:gap-6 p-3 md:p-4 bg-white rounded-lg shadow-sm">
<!-- Left Config Panel -->
<div class="w-full md:w-[400px] flex flex-col gap-6 overflow-y-auto pr-2 custom-scrollbar">
<div class="space-y-4">
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
<div class="w-full md:w-[400px] flex flex-col gap-4 md:gap-6 overflow-y-auto pr-0 md:pr-2 custom-scrollbar">
<div class="space-y-3 md:space-y-4">
<h2 class="text-base md:text-lg font-bold text-gray-800 flex items-center gap-2">
<el-icon><MagicStick /></el-icon>
配置
</h2>

127
Yi.Ai.Vue3/src/pages/chat/image/components/ImagePlaza.vue
View File

@@ -1,6 +1,19 @@
<script setup lang="ts">
import type { TaskItem, TaskListRequest } from '@/api/aiImage/types';
import { CircleCloseFilled, CollectionTag, CopyDocument, Download, Filter, Loading, MagicStick, Picture, Refresh, Search, User, WarningFilled } from '@element-plus/icons-vue';
import {
CircleCloseFilled,
CollectionTag,
CopyDocument,
Download,
Filter,
Loading,
MagicStick,
Picture,
Refresh,
Search,
User,
WarningFilled,
} from '@element-plus/icons-vue';
import { useClipboard } from '@vueuse/core';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';
@@ -18,6 +31,9 @@ const noMore = ref(false);
const dialogVisible = ref(false);
const currentTask = ref<TaskItem | null>(null);
// Mobile filter drawer
const showMobileFilter = ref(false);
// Viewer State
const showViewer = ref(false);
const previewUrl = ref('');
@@ -190,9 +206,22 @@ watch(dateRange, () => {
</script>
<template>
<div class="h-full flex bg-gray-50">
<!-- Left Sidebar - Filters -->
<div class="w-72 bg-white border-r border-gray-200 flex flex-col shadow-sm">
<div class="h-full flex flex-col md:flex-row bg-gray-50">
<!-- Mobile Filter Button -->
<div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-800">
图片广场
</h2>
<el-button type="primary" @click="showMobileFilter = true">
<el-icon class="mr-1">
<Filter />
</el-icon>
筛选
</el-button>
</div>
<!-- Left Sidebar - Filters (Desktop) -->
<div class="hidden md:flex w-72 bg-white border-r border-gray-200 flex-col shadow-sm">
<div class="p-6 border-b border-gray-100">
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
<el-icon><Filter /></el-icon>
@@ -262,7 +291,7 @@ watch(dateRange, () => {
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset">
<el-button class="w-full refresh-btn " @click="handleReset">
<el-icon class="mr-1">
<Refresh />
</el-icon>
@@ -271,15 +300,90 @@ watch(dateRange, () => {
</div>
</div>
<!-- Mobile Filter Drawer -->
<el-drawer
v-model="showMobileFilter"
title="筛选条件"
direction="ltr"
size="80%"
>
<el-form :model="searchForm" label-position="top" class="space-y-4">
<el-form-item label="提示词">
<el-input
v-model="searchForm.Prompt"
placeholder="搜索提示词..."
clearable
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="分类标签">
<el-input
v-model="searchForm.Categories"
placeholder="搜索分类..."
clearable
>
<template #prefix>
<el-icon><CollectionTag /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input
v-model="searchForm.UserName"
placeholder="搜索用户..."
clearable
>
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
class="w-full"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="space-y-2">
<el-button type="primary" class="w-full" @click="handleSearch(); showMobileFilter = false">
<el-icon class="mr-1">
<Search />
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
<el-icon class="mr-1">
<Refresh />
</el-icon>
重置
</el-button>
</div>
</template>
</el-drawer>
<!-- Right Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<div
v-infinite-scroll="loadMore"
class="flex-1 overflow-y-auto p-6 custom-scrollbar"
class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
:infinite-scroll-disabled="disabled"
:infinite-scroll-distance="50"
>
<div v-if="taskList.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<div v-if="taskList.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<TaskCard
v-for="task in taskList"
:key="task.id"
@@ -404,7 +508,7 @@ watch(dateRange, () => {
</el-tag>
</div>
<div class="grid grid-cols-2 gap-2 mt-2">
<div class="grid grid-cols-1 gap-1 mt-2">
<el-button
type="primary"
:icon="MagicStick"
@@ -413,6 +517,7 @@ watch(dateRange, () => {
使用提示词
</el-button>
<el-button
v-if="false"
type="primary"
plain
:icon="Picture"
@@ -434,3 +539,9 @@ watch(dateRange, () => {
/>
</div>
</template>
<style lang="scss" scoped>
.refresh-btn {
margin: 20px 0;
}
</style>

110
Yi.Ai.Vue3/src/pages/chat/image/components/MyImages.vue
View File

@@ -19,6 +19,9 @@ const noMore = ref(false);
const dialogVisible = ref(false);
const currentTask = ref<TaskItem | null>(null);
// Mobile filter drawer
const showMobileFilter = ref(false);
// Viewer State
const showViewer = ref(false);
const previewUrl = ref('');
@@ -247,9 +250,22 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</script>
<template>
<div class="h-full flex bg-gray-50">
<!-- Left Sidebar - Filters -->
<div class="w-72 bg-white border-r border-gray-200 flex flex-col shadow-sm">
<div class="h-full flex flex-col md:flex-row bg-gray-50">
<!-- Mobile Filter Button -->
<div class="md:hidden p-4 bg-white border-b border-gray-200 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-800">
我的图库
</h2>
<el-button type="primary" @click="showMobileFilter = true">
<el-icon class="mr-1">
<Filter />
</el-icon>
筛选
</el-button>
</div>
<!-- Left Sidebar - Filters (Desktop) -->
<div class="hidden md:flex w-72 bg-white border-r border-gray-200 flex-col shadow-sm">
<div class="p-6 border-b border-gray-100">
<h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
<el-icon><Filter /></el-icon>
@@ -339,7 +355,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset">
<el-button class="w-full refresh-btn" @click="handleReset">
<el-icon class="mr-1">
<Refresh />
</el-icon>
@@ -348,15 +364,91 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</div>
</div>
<!-- Mobile Filter Drawer -->
<el-drawer
v-model="showMobileFilter"
title="筛选条件"
direction="ltr"
size="80%"
>
<el-form :model="searchForm" label-position="top" class="space-y-4">
<el-form-item label="提示词">
<el-input
v-model="searchForm.Prompt"
placeholder="搜索提示词..."
clearable
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="任务状态">
<el-select
v-model="searchForm.TaskStatus"
placeholder="全部状态"
class="w-full"
clearable
>
<el-option label="进行中" value="Processing" />
<el-option label="成功" value="Success" />
<el-option label="失败" value="Fail" />
</el-select>
</el-form-item>
<el-form-item label="发布状态">
<el-select
v-model="searchForm.PublishStatus"
placeholder="全部状态"
class="w-full"
clearable
>
<el-option label="未发布" value="Unpublished" />
<el-option label="已发布" value="Published" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
class="w-full"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="space-y-2">
<el-button type="primary" class="w-full" @click="handleSearch(); showMobileFilter = false">
<el-icon class="mr-1">
<Search />
</el-icon>
搜索
</el-button>
<el-button class="w-full" @click="handleReset(); showMobileFilter = false">
<el-icon class="mr-1">
<Refresh />
</el-icon>
重置
</el-button>
</div>
</template>
</el-drawer>
<!-- Right Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<div
v-infinite-scroll="loadMore"
class="flex-1 overflow-y-auto p-6 custom-scrollbar"
class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
:infinite-scroll-disabled="disabled"
:infinite-scroll-distance="50"
>
<div v-if="taskList.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<div v-if="taskList.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<TaskCard
v-for="task in taskList"
:key="task.id"
@@ -496,7 +588,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</div>
<div v-if="currentTask.taskStatus === 'Success'" class="pt-2 space-y-2">
<div class="grid grid-cols-2 gap-2">
<div class="grid grid-cols-1 gap-1">
<el-button
type="primary"
plain
@@ -506,6 +598,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
使用提示词
</el-button>
<el-button
v-if="false"
type="primary"
plain
:icon="Picture"
@@ -590,6 +683,9 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
</template>
<style scoped>
.refresh-btn {
margin: 20px 0;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}

140
Yi.Ai.Vue3/src/pages/chat/image/components/TaskCard.vue
View File

@@ -1,13 +1,64 @@
<script setup lang="ts">
import type { TaskItem } from '@/api/aiImage/types';
import { Check, CircleCloseFilled, Download, Loading, MagicStick, Picture, Picture as PictureIcon, Share, User, ZoomIn } from '@element-plus/icons-vue';
import { format } from 'date-fns';
import { defineEmits, defineProps } from 'vue';
const props = defineProps<{
task: TaskItem;
showPublishStatus?: boolean;
}>();
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview']);
function formatTime(time: string) {
try {
return format(new Date(time), 'MM-dd HH:mm');
}
catch (e) {
return '';
}
}
function handlePreview() {
if (props.task.storeUrl) {
emit('preview', props.task.storeUrl);
}
}
async function handleDownload() {
if (!props.task.storeUrl)
return;
try {
const response = await fetch(props.task.storeUrl);
const blob = await response.blob();
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = `image-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
}
catch (e) {
console.error('Download failed', e);
window.open(props.task.storeUrl, '_blank');
}
}
</script>
<template>
<div class="task-card group relative flex flex-col bg-white rounded-xl overflow-hidden border border-gray-100 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer">
<!-- Image Area -->
<div class="aspect-square w-full relative bg-gray-100 overflow-hidden">
<!-- Blurred Background -->
<div
v-if="task.taskStatus === 'Success' && task.storeUrl"
class="absolute inset-0 bg-cover bg-center blur-xl opacity-60 scale-125"
:style="{ backgroundImage: `url(${task.storeUrl})` }"
></div>
<div
v-if="task.taskStatus === 'Success' && task.storeUrl"
class="absolute inset-0 bg-cover bg-center blur-xl opacity-60 scale-125"
:style="{ backgroundImage: `url(${task.storeUrl})` }"
/>
<el-image
v-if="task.taskStatus === 'Success' && task.storeUrl"
@@ -18,25 +69,33 @@
>
<template #error>
<div class="flex flex-col justify-center items-center w-full h-full text-gray-400 bg-gray-50">
<el-icon class="text-3xl mb-2"><Picture /></el-icon>
<el-icon class="text-3xl mb-2">
<Picture />
</el-icon>
<span class="text-xs">加载失败</span>
</div>
</template>
<template #placeholder>
<div class="flex justify-center items-center w-full h-full bg-gray-50">
<el-icon class="is-loading text-gray-400"><Loading /></el-icon>
<el-icon class="is-loading text-gray-400">
<Loading />
</el-icon>
</div>
</template>
</el-image>
<!-- Non-Success States -->
<div v-else class="w-full h-full flex flex-col justify-center items-center p-4 text-center relative z-10 bg-gray-50">
<div v-if="task.taskStatus === 'Processing'" class="flex flex-col items-center text-blue-500">
<el-icon class="is-loading text-2xl mb-2"><Loading /></el-icon>
<el-icon class="is-loading text-2xl mb-2">
<Loading />
</el-icon>
<span class="text-xs font-medium">生成中...</span>
</div>
<div v-else-if="task.taskStatus === 'Fail'" class="flex flex-col items-center text-red-500">
<el-icon class="text-2xl mb-2"><CircleCloseFilled /></el-icon>
<el-icon class="text-2xl mb-2">
<CircleCloseFilled />
</el-icon>
<span class="text-xs font-medium">生成失败</span>
</div>
<div v-else class="text-gray-400">
@@ -49,7 +108,7 @@
<el-button type="primary" round size="small" class="transform scale-90 group-hover:scale-100 transition-transform shadow-lg" @click.stop="$emit('click')">
查看详情
</el-button>
<div class="flex gap-2" v-if="task.taskStatus === 'Success'">
<div v-if="task.taskStatus === 'Success'" class="flex gap-2">
<el-tooltip content="放大查看" placement="top" :show-after="500">
<el-button circle size="small" :icon="ZoomIn" @click.stop="handlePreview" />
</el-tooltip>
@@ -59,7 +118,8 @@
<el-tooltip content="使用提示词" placement="top" :show-after="500">
<el-button circle size="small" :icon="MagicStick" @click.stop="$emit('use-prompt', task.prompt)" />
</el-tooltip>
<el-tooltip content="做参考图" placement="top" :show-after="500">
<el-tooltip v-if="false" content="做参考图" placement="top" :show-after="500">
<el-button circle size="small" :icon="PictureIcon" @click.stop="$emit('use-reference', task.storeUrl)" />
</el-tooltip>
<el-tooltip v-if="task.publishStatus === 'Unpublished'" content="发布到广场" placement="top" :show-after="500">
@@ -69,8 +129,10 @@
</div>
<!-- Status Tag -->
<div class="absolute top-2 right-2 z-20" v-if="showPublishStatus && task.publishStatus === 'Published'">
<el-tag type="success" effect="dark" size="small" round>已发布</el-tag>
<div v-if="showPublishStatus && task.publishStatus === 'Published'" class="absolute top-2 right-2 z-20">
<el-tag type="success" effect="dark" size="small" round>
已发布
</el-tag>
</div>
</div>
@@ -114,56 +176,8 @@
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';
import { Picture, Loading, CircleCloseFilled, Check, MagicStick, Picture as PictureIcon, Share, ZoomIn, Download, User } from '@element-plus/icons-vue';
import type { TaskItem } from '@/api/aiImage/types';
import { format } from 'date-fns';
const props = defineProps<{
task: TaskItem;
showPublishStatus?: boolean;
}>();
const emit = defineEmits(['click', 'use-prompt', 'use-reference', 'publish', 'preview']);
const formatTime = (time: string) => {
try {
return format(new Date(time), 'MM-dd HH:mm');
} catch (e) {
return '';
}
};
const handlePreview = () => {
if (props.task.storeUrl) {
emit('preview', props.task.storeUrl);
}
};
const handleDownload = async () => {
if (!props.task.storeUrl) return;
try {
const response = await fetch(props.task.storeUrl);
const blob = await response.blob();
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = `image-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
} catch (e) {
console.error('Download failed', e);
window.open(props.task.storeUrl, '_blank');
}
};
</script>
<style scoped>
.task-card {
backface-visibility: hidden;
}
</style>
</style>

2
Yi.Ai.Vue3/src/pages/chat/index.vue
View File

@@ -93,7 +93,7 @@ window.addEventListener('resize', checkIsMobile);
<div v-if="isMobile" class="content-header">
<div class="mobile-toggle" @click="isCollapsed = false">
<el-icon><i-ep-expand /></el-icon>
<span>菜单</span>
<span>AI应用</span>
</div>
</div>
<router-view v-slot="{ Component }">

2
Yi.Ai.Vue3/src/pages/console/index.vue
View File

@@ -116,7 +116,7 @@ window.addEventListener('resize', checkIsMobile);
<div v-if="isMobile" class="content-header">
<div class="mobile-toggle" @click="isCollapsed = false">
<el-icon><Expand /></el-icon>
<span>菜单</span>
<span>控制台</span>
</div>
</div>
<router-view v-slot="{ Component }">

34
Yi.Ai.Vue3/src/styles/var.scss
View File

@@ -187,34 +187,34 @@
--button-padding: 12px 24px;
/* ========== 覆盖 element-plus 样式 ========== */
//--el-border-radius-base: 12px !important;
//--el-messagebox-border-radius: 16px !important;
//--el-color-primary: var(--color-primary) !important;
//--el-color-success: var(--color-success) !important;
//--el-color-warning: var(--color-warning) !important;
//--el-color-danger: var(--color-danger) !important;
--el-border-radius-base: 12px !important;
--el-messagebox-border-radius: 16px !important;
--el-color-primary: var(--color-primary) !important;
--el-color-success: var(--color-success) !important;
--el-color-warning: var(--color-warning) !important;
--el-color-danger: var(--color-danger) !important;
//--el-color-info: var(--color-info) !important;
//--el-font-size-base: var(--font-size-base) !important;
//--el-font-family: var(--font-family-sans) !important;
--el-font-size-base: var(--font-size-base) !important;
--el-font-family: var(--font-family-sans) !important;
/* Element Plus 组件特定变量 */
--el-menu-item-height: 48px;
//--el-menu-bg-color: var(--sidebar-background-color);
//--el-menu-text-color: var(--text-color-secondary);
//--el-menu-active-color: var(--color-primary);
--el-menu-active-color: var(--color-primary);
//--el-menu-hover-bg-color: var(--color-gray-100);
/* 表单相关 */
//--el-form-label-font-size: var(--font-size-sm);
//--el-input-height: var(--input-height);
//--el-input-border-color: var(--border-color-light);
//--el-input-hover-border-color: var(--color-primary-light);
//--el-input-focus-border-color: var(--color-primary);
--el-form-label-font-size: var(--font-size-sm);
--el-input-height: var(--input-height);
--el-input-border-color: var(--border-color-light);
--el-input-hover-border-color: var(--color-primary-light);
--el-input-focus-border-color: var(--color-primary);
/* 按钮相关 */
//--el-button-border-radius-base: var(--border-radius-md);
//--el-button-hover-bg-color: var(--color-primary-dark);
//--el-button-active-bg-color: var(--color-primary-darker);
--el-button-border-radius-base: var(--border-radius-md);
--el-button-hover-bg-color: var(--color-primary-dark);
--el-button-active-bg-color: var(--color-primary-darker);
}
/* ========== 暗色模式变量 ========== */