feat: 图片广场优化

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="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>

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">
-    <!-- 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>

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">
-    <!-- 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;
 }

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

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