feat: 图片广场优化

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