feat: 图片广场优化

Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue

@@ -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%);

Yi.Ai.Vue3/src/layouts/components/Header/components/AiTutorialBtn.vue

@@ -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>

Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue

@@ -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>

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -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;
+  .mobile-header {
-    height: 32px;
+    display: flex;
-  }
+    align-items: center;
-
+    justify-content: space-between;
-  .menu-left {
+    height: 100%;
-    margin-left: 12px;
+    padding: 0 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;
   }
 }
 
 @media (max-width: 480px) {
-  .menu-right {
+  .mobile-header {
-    gap: 0;
+    padding: 0 8px;
+  }
 
-    :deep(.el-menu-item),
+  .mobile-brand-text {
-    :deep(.el-sub-menu__title) {
+    font-size: 16px;
-      padding: 0 6px !important;
+  }
-    }
+
+  .mobile-logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  .mobile-actions {
+    gap: 4px;
   }
 }
 </style>

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

@@ -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="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-4">
+      <div class="space-y-3 md:space-y-4">
-        <h2 class="text-lg font-bold text-gray-800 flex items-center gap-2">
+        <h2 class="text-base md:text-lg font-bold text-gray-800 flex items-center gap-2">
           <el-icon><MagicStick /></el-icon>
           配置
         </h2>

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

@@ -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">
+  <div class="h-full flex flex-col md:flex-row bg-gray-50">
-    <!-- Left Sidebar - Filters -->
+    <!-- Mobile Filter Button -->
-    <div class="w-72 bg-white border-r border-gray-200 flex flex-col shadow-sm">
+    <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>

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

@@ -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">
+  <div class="h-full flex flex-col md:flex-row bg-gray-50">
-    <!-- Left Sidebar - Filters -->
+    <!-- Mobile Filter Button -->
-    <div class="w-72 bg-white border-r border-gray-200 flex flex-col shadow-sm">
+    <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;
 }

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

@@ -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"
+        v-if="task.taskStatus === 'Success' && task.storeUrl"
-         class="absolute inset-0 bg-cover bg-center blur-xl opacity-60 scale-125"
+        class="absolute inset-0 bg-cover bg-center blur-xl opacity-60 scale-125"
-         :style="{ backgroundImage: `url(${task.storeUrl})` }"
+        :style="{ backgroundImage: `url(${task.storeUrl})` }"
-      ></div>
+      />
 
       <el-image
         v-if="task.taskStatus === 'Success' && task.storeUrl"
@@ -18,13 +69,17 @@
       >
         <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>
@@ -32,11 +87,15 @@
       <!-- 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'">
+      <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>
+        <el-tag type="success" effect="dark" size="small" round>
+          已发布
+        </el-tag>
       </div>
     </div>
 
@@ -114,54 +176,6 @@
   </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;

Yi.Ai.Vue3/src/pages/chat/index.vue

@@ -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 }">

Yi.Ai.Vue3/src/pages/console/index.vue

@@ -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 }">

Yi.Ai.Vue3/src/styles/var.scss

@@ -187,34 +187,34 @@
   --button-padding: 12px 24px;
 
   /* ========== 覆盖 element-plus 样式 ========== */
-  //--el-border-radius-base: 12px !important;
+  --el-border-radius-base: 12px !important;
-  //--el-messagebox-border-radius: 16px !important;
+  --el-messagebox-border-radius: 16px !important;
-  //--el-color-primary: var(--color-primary) !important;
+  --el-color-primary: var(--color-primary) !important;
-  //--el-color-success: var(--color-success) !important;
+  --el-color-success: var(--color-success) !important;
-  //--el-color-warning: var(--color-warning) !important;
+  --el-color-warning: var(--color-warning) !important;
-  //--el-color-danger: var(--color-danger) !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-size-base: var(--font-size-base) !important;
-  //--el-font-family: var(--font-family-sans) !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-form-label-font-size: var(--font-size-sm);
-  //--el-input-height: var(--input-height);
+  --el-input-height: var(--input-height);
-  //--el-input-border-color: var(--border-color-light);
+  --el-input-border-color: var(--border-color-light);
-  //--el-input-hover-border-color: var(--color-primary-light);
+  --el-input-hover-border-color: var(--color-primary-light);
-  //--el-input-focus-border-color: var(--color-primary);
+  --el-input-focus-border-color: var(--color-primary);
 
   /* 按钮相关 */
-  //--el-button-border-radius-base: var(--border-radius-md);
+  --el-button-border-radius-base: var(--border-radius-md);
-  //--el-button-hover-bg-color: var(--color-primary-dark);
+  --el-button-hover-bg-color: var(--color-primary-dark);
-  //--el-button-active-bg-color: var(--color-primary-darker);
+  --el-button-active-bg-color: var(--color-primary-darker);
 }
 
 /* ========== 暗色模式变量 ========== */