feat: 图片广场优化

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

@@ -26,7 +26,7 @@ const emit = defineEmits(['use-prompt', 'use-reference']);
 
 const taskList = ref<TaskItem[]>([]);
 const pageIndex = ref(1);
-const pageSize = ref(20);
+const pageSize = ref(10);
 const loading = ref(false);
 const noMore = ref(false);
 const dialogVisible = ref(false);
@@ -42,6 +42,7 @@ function checkMobile() {
 onMounted(() => {
   checkMobile();
   window.addEventListener('resize', checkMobile);
+  loadMore();
 });
 
 onUnmounted(() => {
@@ -60,6 +61,8 @@ const searchForm = reactive({
   Prompt: '',
   Categories: '',
   UserName: '',
+  OrderByColumn: '',
+  IsAscending: true,
 });
 const dateRange = ref<[string, string] | null>(null);
 
@@ -74,7 +77,7 @@ async function loadMore() {
   loading.value = true;
   try {
     const params: TaskListRequest = {
-      SkipCount: (pageIndex.value - 1) * pageSize.value,
+      SkipCount: pageIndex.value,
       MaxResultCount: pageSize.value,
       TaskStatus: 'Success',
       Prompt: searchForm.Prompt || undefined,
@@ -82,6 +85,8 @@ async function loadMore() {
       UserName: searchForm.UserName || 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 getImagePlaza(params);
@@ -91,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;
     }
@@ -104,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) {
@@ -223,7 +221,7 @@ watch(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">
@@ -298,6 +296,28 @@ watch(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-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>
 
@@ -308,12 +328,18 @@ watch(dateRange, () => {
           </el-icon>
           搜索
         </el-button>
-        <el-button class="w-full refresh-btn " @click="handleReset">
+        <el-button class="w-full refresh-btn" @click="handleReset">
           <el-icon class="mr-1">
             <Refresh />
           </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>
 
@@ -372,6 +398,28 @@ watch(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-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>
@@ -382,12 +430,18 @@ watch(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>