feat: 图片广场优化

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

@@ -4,9 +4,9 @@ import type { TaskItem, TaskListRequest } from '@/api/aiImage/types';
 import { Check, CircleCloseFilled, CollectionTag, CopyDocument, Download, Filter, Loading, MagicStick, Picture, Refresh, Search, Share, User, WarningFilled, ZoomIn } from '@element-plus/icons-vue';
 import { useClipboard } from '@vueuse/core';
 import { format } from 'date-fns';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { getMyTasks, publishImage } from '@/api/aiImage';
+import { deleteMyTasks, getMyTasks, publishImage } from '@/api/aiImage';
 import TaskCard from './TaskCard.vue';
 
 const emit = defineEmits(['use-prompt', 'use-reference']);
@@ -19,6 +19,10 @@ const noMore = ref(false);
 const dialogVisible = ref(false);
 const currentTask = ref<TaskItem | null>(null);
 
+// Batch selection
+const batchMode = ref(false);
+const selectedTaskIds = ref<Set<string>>(new Set());
+
 // Mobile detection
 const isMobile = ref(false);
 
@@ -29,6 +33,7 @@ function checkMobile() {
 onMounted(() => {
   checkMobile();
   window.addEventListener('resize', checkMobile);
+  loadMore();
 });
 
 onUnmounted(() => {
@@ -47,6 +52,8 @@ const searchForm = reactive({
   Prompt: '',
   TaskStatus: '' as 'Processing' | 'Success' | 'Fail' | '',
   PublishStatus: '' as 'Unpublished' | 'Published' | '',
+  OrderByColumn: '',
+  IsAscending: true,
 });
 const dateRange = ref<[string, string] | null>(null);
 
@@ -71,13 +78,15 @@ async function loadMore() {
   loading.value = true;
   try {
     const params: TaskListRequest = {
-      SkipCount: (pageIndex.value - 1) * pageSize.value,
+      SkipCount: pageIndex.value,
       MaxResultCount: pageSize.value,
       Prompt: searchForm.Prompt || undefined,
       TaskStatus: searchForm.TaskStatus || undefined,
       PublishStatus: searchForm.PublishStatus || undefined,
       StartTime: dateRange.value ? dateRange.value[0] : undefined,
       EndTime: dateRange.value ? dateRange.value[1] : undefined,
+      OrderByColumn: searchForm.OrderByColumn || undefined,
+      IsAscending: searchForm.IsAscending,
     };
 
     const res = await getMyTasks(params);
@@ -87,10 +96,6 @@ async function loadMore() {
     const items = data.items || [];
     const total = data.total || 0;
 
-    if (items.length < pageSize.value) {
-      noMore.value = true;
-    }
-
     if (pageIndex.value === 1) {
       taskList.value = items;
     }
@@ -100,16 +105,13 @@ async function loadMore() {
       taskList.value.push(...newItems);
     }
 
-    // Check if we reached total
-    if (taskList.value.length >= total) {
+    // Check if we should stop loading more
+    if (items.length === 0 || items.length < pageSize.value || taskList.value.length >= total) {
       noMore.value = true;
     }
-
-    if (items.length > 0) {
-      pageIndex.value++;
-    }
     else {
-      noMore.value = true;
+      // Increment pageIndex for next load only if there's more data
+      pageIndex.value++;
     }
   }
   catch (error) {
@@ -165,6 +167,11 @@ async function copyPrompt(text: string) {
   ElMessage.success('提示词已复制');
 }
 
+async function copyErrorInfo(text: string) {
+  await copy(text);
+  ElMessage.success('错误信息已复制');
+}
+
 function openPublishDialog(task: TaskItem) {
   taskToPublish.value = task;
   publishTags.value = [];
@@ -187,6 +194,12 @@ function showInput() {
 
 function handleInputConfirm() {
   if (inputValue.value) {
+    if (publishTags.value.length >= 3) {
+      ElMessage.warning('最多只能添加3个标签');
+      inputValue.value = '';
+      inputVisible.value = false;
+      return;
+    }
     if (!publishTags.value.includes(inputValue.value)) {
       publishTags.value.push(inputValue.value);
     }
@@ -242,6 +255,69 @@ async function downloadImage(url: string) {
   }
 }
 
+// Batch selection functions
+function toggleBatchMode() {
+  batchMode.value = !batchMode.value;
+  if (!batchMode.value) {
+    selectedTaskIds.value.clear();
+  }
+}
+
+function toggleTaskSelection(taskId: string) {
+  if (selectedTaskIds.value.has(taskId)) {
+    selectedTaskIds.value.delete(taskId);
+  }
+  else {
+    selectedTaskIds.value.add(taskId);
+  }
+  // Force reactivity update
+  selectedTaskIds.value = new Set(selectedTaskIds.value);
+}
+
+function selectAll() {
+  taskList.value.forEach(task => selectedTaskIds.value.add(task.id));
+  // Force reactivity update
+  selectedTaskIds.value = new Set(selectedTaskIds.value);
+}
+
+function clearSelection() {
+  selectedTaskIds.value.clear();
+  // Force reactivity update
+  selectedTaskIds.value = new Set(selectedTaskIds.value);
+}
+
+async function batchDelete() {
+  if (selectedTaskIds.value.size === 0) {
+    ElMessage.warning('请先选择要删除的图片');
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedTaskIds.value.size} 张图片吗？`,
+      '批量删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    const ids = Array.from(selectedTaskIds.value);
+    await deleteMyTasks(ids);
+    ElMessage.success('删除成功');
+    selectedTaskIds.value.clear();
+    batchMode.value = false;
+    handleSearch();
+  }
+  catch (e: any) {
+    if (e !== 'cancel') {
+      console.error(e);
+      ElMessage.error('删除失败');
+    }
+  }
+}
+
 // Expose refresh method
 defineExpose({
   refresh: () => {
@@ -266,7 +342,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
 </script>
 
 <template>
-  <div class="h-full flex flex-col md:flex-row bg-gray-50">
+  <div class="h-full flex flex-col md:flex-row bg-gray-50 overflow-hidden">
     <!-- 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">
@@ -361,6 +437,30 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
               class="w-full"
             />
           </el-form-item>
+
+          <el-form-item v-if="false" label="排序方式">
+            <el-select
+              v-model="searchForm.OrderByColumn"
+              placeholder="默认排序"
+              class="w-full"
+              clearable
+            >
+              <el-option label="创建时间" value="CreationTime" />
+              <el-option label="任务状态" value="TaskStatus" />
+              <el-option label="发布状态" value="PublishStatus" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
+            <el-radio-group v-model="searchForm.IsAscending">
+              <el-radio :value="true">
+                升序
+              </el-radio>
+              <el-radio :value="false">
+                降序
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
         </el-form>
       </div>
 
@@ -377,6 +477,12 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
           </el-icon>
           重置
         </el-button>
+        <el-button class="w-full refresh-btn" type="success" @click="handleSearch">
+          <el-icon class="mr-1">
+            <Refresh />
+          </el-icon>
+          刷新
+        </el-button>
       </div>
     </div>
 
@@ -436,6 +542,30 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
             class="w-full"
           />
         </el-form-item>
+
+        <el-form-item label="排序方式">
+          <el-select
+            v-model="searchForm.OrderByColumn"
+            placeholder="默认排序"
+            class="w-full"
+            clearable
+          >
+            <el-option label="创建时间" value="CreationTime" />
+            <el-option label="任务状态" value="TaskStatus" />
+            <el-option label="发布状态" value="PublishStatus" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="searchForm.OrderByColumn" label="排序方向">
+          <el-radio-group v-model="searchForm.IsAscending">
+            <el-radio :value="true">
+              升序
+            </el-radio>
+            <el-radio :value="false">
+              降序
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
       </el-form>
 
       <template #footer>
@@ -446,18 +576,53 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
             </el-icon>
             搜索
           </el-button>
-          <el-button class="w-full" @click="handleReset(); showMobileFilter = false">
+          <el-button class="w-full refresh-btn" @click="handleReset(); showMobileFilter = false">
             <el-icon class="mr-1">
               <Refresh />
             </el-icon>
             重置
           </el-button>
+          <el-button class="w-full refresh-btn" type="success" @click="handleSearch(); 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">
+      <!-- Batch Operation Toolbar -->
+      <div v-if="false" class="bg-white border-b border-gray-200 p-3 flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <el-button
+            :type="batchMode ? 'primary' : 'default'"
+            size="small"
+            @click="toggleBatchMode"
+          >
+            {{ batchMode ? '取消批量' : '批量管理' }}
+          </el-button>
+          <template v-if="batchMode">
+            <el-button size="small" @click="selectAll">
+              全选
+            </el-button>
+            <el-button size="small" @click="clearSelection">
+              清空
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              :disabled="selectedTaskIds.size === 0"
+              @click="batchDelete"
+            >
+              删除选中 ({{ selectedTaskIds.size }})
+            </el-button>
+          </template>
+        </div>
+      </div>
+
       <div
         v-infinite-scroll="loadMore"
         class="flex-1 overflow-y-auto p-4 md:p-6 custom-scrollbar"
@@ -470,7 +635,10 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
             :key="task.id"
             :task="task"
             show-publish-status
-            @click="handleCardClick(task)"
+            :batch-mode="batchMode"
+            :selected="selectedTaskIds.has(task.id)"
+            @click="batchMode ? toggleTaskSelection(task.id) : handleCardClick(task)"
+            @toggle-select="toggleTaskSelection"
             @use-prompt="$emit('use-prompt', $event)"
             @use-reference="$emit('use-reference', $event)"
             @publish="openPublishDialog(task)"
@@ -631,7 +799,9 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
             <div v-if="currentTask.publishStatus === 'Published'" class="flex justify-between text-sm items-center">
               <span class="text-gray-500">发布状态</span>
               <div class="flex items-center gap-1">
-                <el-tag size="small" type="warning" effect="dark">已发布</el-tag>
+                <el-tag size="small" type="warning" effect="dark">
+                  已发布
+                </el-tag>
                 <span v-if="!currentTask.isAnonymous && currentTask.userName" class="text-blue-500 text-xs flex items-center gap-1">
                   <el-icon><User /></el-icon> {{ currentTask.userName }}
                 </span>
@@ -642,7 +812,9 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
             </div>
             <div v-else class="flex justify-between text-sm items-center">
               <span class="text-gray-500">发布状态</span>
-              <el-tag size="small" type="info" effect="plain">未发布</el-tag>
+              <el-tag size="small" type="info" effect="plain">
+                未发布
+              </el-tag>
             </div>
 
             <!-- 操作按钮 - 所有状态都可以使用提示词 -->
@@ -661,7 +833,7 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
               <el-button
                 v-if="currentTask.taskStatus === 'Success' && currentTask.publishStatus === 'Unpublished'"
                 type="success"
-                class="w-full"
+                class="w-full refresh-btn"
                 :icon="Share"
                 @click="openPublishDialog(currentTask)"
               >
@@ -705,9 +877,10 @@ watch([() => searchForm.TaskStatus, () => searchForm.PublishStatus, dateRange],
               @keydown.enter.prevent="handleInputConfirm"
               @blur="handleInputConfirm"
             />
-            <el-button v-else class="button-new-tag" size="small" @click="showInput">
+            <el-button v-else-if="publishTags.length < 3" class="button-new-tag" size="small" @click="showInput">
               + New Tag
             </el-button>
+            <span v-else class="text-xs text-gray-400">最多3个标签</span>
           </div>
         </el-form-item>
         <el-form-item>