src/layout/components/Header/RecycleModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Masonry from 'masonry-layout'
 import { useDialog, useMessage } from 'naive-ui'
-import { computed, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
+import { computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, unref, watch } from 'vue'
 
 import { dubiousfilelist, removeFiles } from '@/api/task/task'
 import { viewOptions } from '@/config/home'
@@ -22,7 +22,13 @@ const cardStyle = {
 
 const message = useMessage()
 const timeRange = ref('')
+const similarRange = ref('')
 const batch = ref(false)
+let filterId = null;
+let sortObj: any = {
+  orderByUptime: 'desc'
+};
+
 const timeOptions = [{
   label: '升序',
   value: 'asc',
@@ -30,6 +36,14 @@ const timeOptions = [{
   label: '降序',
   value: 'desc',
 }]
+// const similarOptions = [{
+//   label: '升序',
+//   value: 'asc',
+// }, {
+//   label: '降序',
+//   value: 'desc',
+// }]
+
 const timeLabel = computed(() => {
   const item = timeOptions.find((option) => {
     return option.value === timeRange.value
@@ -104,7 +118,8 @@ useInfiniteScroll(
 async function featchList() {
   loading = true
   try {
-    const result = await dubiousfilelist({ ...pagination, orderbyname: timeRange.value })
+    // const result = await dubiousfilelist({ ...pagination, orderbyname: timeRange.value })
+    const result = await dubiousfilelist({ ...pagination, ...sortObj })
     // TODO：测试数据
     // result.data = Array.from({ length: 30 })
     result.pageCount = 1
@@ -209,7 +224,18 @@ function upHandler(event: MouseEvent) {
 }
 
 const gridHeight = computed(() => {
-  return viewMode.value !== 'masonry' ? '157px' : ''
+  // return viewMode.value !== 'masonry' ? '157px' : ''
+  let height = "";
+  if (viewMode.value === "masonry") {
+    height = "";
+  } else if (viewMode.value === "horizontalVersion") {
+    height = "145px";
+  } else if (viewMode.value === "verticalVersion") {
+    height = "300px";
+  } else if (viewMode.value === "3:4") {
+    height = "240px";
+  }
+  return height;
 })
 
 function addListeners() {
@@ -247,7 +273,23 @@ async function showModal() {
   layout()
 }
 
-async function onChange() {
+async function onChange(val) {
+  console.log("val------------------------", val);
+  sortObj = {
+    // orderbyname: val,
+    orderByUptime: val
+  }
+  pagination.pageNo = 1
+  const list = await featchList()
+  listData.value = list
+}
+
+async function onChangeView(val) {
+  console.log("val------------------------", val);
+  sortObj = {
+    // orderbyname: val,
+    orderBySimilarity: val
+  }
   pagination.pageNo = 1
   const list = await featchList()
   listData.value = list
@@ -388,11 +430,30 @@ function doAudit(param: any) {
 function reloadList() {
   refreshHandler()
 }
-async function refreshHandler() {
+async function refreshHandler(filtersearchId?: any) {
-  reset()
+  // 注释 rao start
-  const list = await featchList()
+  // reset()
-  listData.value = list
+  // const list = await featchList()
-  layout()
+  // listData.value = list
+  // layout()
+// 注释 rao end
+  reset();
+
+  if (filtersearchId) {
+    filterId = filtersearchId;
+  }
+
+  nextTick(() => {
+    setTimeout(() => {
+      useInfiniteScroll(
+        el as any,
+        () => {
+          loadMore();
+        },
+        { distance: 10, canLoadMore: () => canloadMore }
+      );
+    }, 300);
+  });
 }
 
 </script>
@@ -421,6 +482,12 @@ async function refreshHandler() {
                     <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
                   </div>
                 </n-popselect>
+                <n-popselect v-model:value="similarRange" :options="timeOptions" trigger="click" @change="onChangeView">
+                  <div class="wrapper-content-form-dropdown">
+                    <span>相似度排序</span>
+                    <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
+                  </div>
+                </n-popselect>
                 <n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
                   <div class="wrapper-form-dropdown">
                     <span>视图模式</span>
@@ -460,8 +527,13 @@ async function refreshHandler() {
                 <div v-for="(item, index) in listData" :key="item.pictureId" :data-id="item.pictureId"
                   :class="{ 'grid-item-selected': isSelected(item.pictureId) }" :style="{ height: gridHeight }"
                   class="grid-item">
-                  <n-image :src="item.imgUrl" class="img "
+                  <n-image 
-                    :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
+                  :src="item.imgUrl"
+                  class="img "
+                    :class="{ 
+                      'img-fit': viewMode === 'horizontalVersion', 
+                      'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" 
+                    />
                   <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
                     style="position:absolute;left:20px;top:20px" @click.prevent
                     @update:checked="onCheckChange($event, item)" />
@@ -549,7 +621,9 @@ async function refreshHandler() {
 }
 
 .img {
-  border-radius: 8px;
+  border-radius: 7px;
+  display: block;
+  height: calc(100%);
 }
 
 .wrapper {