From cad7cea19f49811a80de25e8c396de5673c4b605 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Tue, 2 Apr 2024 17:39:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=BB=E8=BE=91=E8=A1=A5=E5=85=A8,?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/right_arrow.svg    |  18 +
 src/views/final/aside/Aside.vue     |   4 +-
 src/views/final/content/Content.vue |   6 +-
 src/views/home/content/Content.vue  | 711 ++++++++++++++++------------
 src/views/login/index.vue           |   8 +-
 5 files changed, 430 insertions(+), 317 deletions(-)
 create mode 100644 src/assets/icons/right_arrow.svg

diff --git a/src/assets/icons/right_arrow.svg b/src/assets/icons/right_arrow.svg
new file mode 100644
index 0000000..c3da58b
--- /dev/null
+++ b/src/assets/icons/right_arrow.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>右箭头</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="64" height="64"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrevailCloud-Design-图标集" transform="translate(-2504.000000, -8416.000000)">
+            <g id="右箭头" transform="translate(2536.000000, 8448.000000) scale(-1, 1) translate(-2536.000000, -8448.000000) translate(2504.000000, 8416.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="蒙版"></g>
+                <path d="M28.2032063,13.8205721 C28.5937306,13.4300478 29.2268955,13.4300478 29.6174198,13.8205721 L29.6174198,13.8205721 L31.7387402,15.9418924 C32.1292645,16.3324167 32.1292645,16.9655817 31.7387402,17.356106 L31.7387402,17.356106 L20.0942055,28.9996789 L52.663654,29 C53.2159388,29 53.663654,29.4477153 53.663654,30 L53.663654,33 C53.663654,33.5522847 53.2159388,34 52.663654,34 L20.0952055,33.9996789 L31.7387402,45.643894 C32.1292645,46.0344183 32.1292645,46.6675833 31.7387402,47.0581076 L29.6174198,49.1794279 C29.2268955,49.5699522 28.5937306,49.5699522 28.2032063,49.1794279 L11.9379919,32.9142136 C11.1569433,32.133165 11.1569433,30.866835 11.9379919,30.0857864 L13.3522055,28.6715729 L13.3592055,28.6636789 Z" id="形状结合" fill="#FFFFFF" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/final/aside/Aside.vue b/src/views/final/aside/Aside.vue
index d8fa596..9148a2d 100644
--- a/src/views/final/aside/Aside.vue
+++ b/src/views/final/aside/Aside.vue
@@ -138,6 +138,9 @@ const showSearch = ref(false);
 
 function setShowSearch(value: boolean) {
   showSearch.value = value;
+  if(!value){
+    inputChange('')
+  }
 }
 
 // 滚动容器，让key对应模块处于可视区域
@@ -161,7 +164,6 @@ watch(asideValue, (newVal) => {
 });
 
 const inputChange = (keyword) => {
-  console.log("Search Component", keyword);
   emit("inputChange", keyword);
 };
 </script>
diff --git a/src/views/final/content/Content.vue b/src/views/final/content/Content.vue
index 7c20fca..99a15ae 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -765,7 +765,11 @@ async function refreshHandler(searchId?: any) {
 }
 
 function filterTableData(keyword) {
-  tableData.value = tableData.value.filter(item => item.id.includes(keyword))
+  if(keyword){
+    tableData.value = tableData.value.filter(item => item.id.includes(keyword))
+  }else{
+    query(pagination.page, pagination.pageSize)
+  }
 }
 defineExpose({
   filterTableData,
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 9eb7323..6399f37 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -1,207 +1,240 @@
 <script lang="ts" setup>
-import { createPackage, getCheckDuplicateStatus, getLastCheckNo, getPictureList, oneClickCheckTaskPackage, queryPageListByCheckNo, removeCheckDuplicate } from '@/api/home/main'
-import avatar from '@/assets/images/avatar.jpg'
-import { timeOptions, viewOptions } from '@/config/home'
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
-import { useConfig } from '@/store/modules/asideConfig'
-import { getViewportOffset } from '@/utils/domUtils'
-import { hideDownload } from '@/utils/image'
-import emitter from '@/utils/mitt'
-import { getImgUrl } from '@/utils/urlUtils'
 import {
-EllipsisHorizontal, EyeOutline as EyeOutlineIcon
-} from '@vicons/ionicons5'
+  createPackage,
+  getCheckDuplicateStatus,
+  getLastCheckNo,
+  getPictureList,
+  oneClickCheckTaskPackage,
+  queryPageListByCheckNo,
+  removeCheckDuplicate,
+} from "@/api/home/main";
+import avatar from "@/assets/images/avatar.jpg";
+import { timeOptions, viewOptions } from "@/config/home";
+import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
+import { useConfig } from "@/store/modules/asideConfig";
+import { getViewportOffset } from "@/utils/domUtils";
+import { hideDownload } from "@/utils/image";
+import emitter from "@/utils/mitt";
+import { getImgUrl } from "@/utils/urlUtils";
+import { EllipsisHorizontal, EyeOutline as EyeOutlineIcon } from "@vicons/ionicons5";
+import { Download as DownloadIcon, Upload as UploadIcon } from "@vicons/tabler";
+import { Icon } from "@vicons/utils";
+import { useInfiniteScroll } from "@vueuse/core";
+import dayjs from "dayjs";
+import imagesloaded from "imagesloaded";
+import { cloneDeep, debounce } from "lodash-es";
+import Masonry from "masonry-layout";
+import { NIcon, useMessage } from "naive-ui";
+import type { Component } from "vue";
 import {
-Download as DownloadIcon, Upload as UploadIcon
-} from '@vicons/tabler'
-import { Icon } from '@vicons/utils'
-import { useInfiniteScroll } from '@vueuse/core'
-import dayjs from 'dayjs'
-import imagesloaded from 'imagesloaded'
-import { cloneDeep, debounce } from 'lodash-es'
-import Masonry from 'masonry-layout'
-import { NIcon, useMessage } from 'naive-ui'
-import type { Component } from 'vue'
-import { computed, h, nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue'
-import CheckingTaskModal from './modal/CheckingTaskModal.vue'
-import FinishPackageModal from './modal/FinishPackageModal.vue'
-import GeneratePackageModal from './modal/GeneratePackageModal.vue'
-import LoginSuccessModal from './modal/LoginSuccessModal.vue'
-import PackageSettingsModal from './modal/PackageSettingsModal.vue'
-import QueryRepeatedTasksModal from './modal/QueryRepeatedTasksModal.vue'
-import type { PictureSortParam } from "/#/api"
-import defaultAvatar from '@/assets/icons/avatar.svg'
-
-const deviceHeight = ref(600)
-let _masonry: null | Masonry = null
-let _imagesload: any
-const masonryRef = ref<ComponentRef>(null)
-const el = ref<HTMLDivElement | null>(null)
-const viewMode = ref('masonry')
+  computed,
+  h,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+  reactive,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import CheckingTaskModal from "./modal/CheckingTaskModal.vue";
+import FinishPackageModal from "./modal/FinishPackageModal.vue";
+import GeneratePackageModal from "./modal/GeneratePackageModal.vue";
+import LoginSuccessModal from "./modal/LoginSuccessModal.vue";
+import PackageSettingsModal from "./modal/PackageSettingsModal.vue";
+import QueryRepeatedTasksModal from "./modal/QueryRepeatedTasksModal.vue";
+import type { PictureSortParam } from "/#/api";
+import defaultAvatar from "@/assets/icons/avatar.svg";
+
+const deviceHeight = ref(600);
+let _masonry: null | Masonry = null;
+let _imagesload: any;
+const masonryRef = ref<ComponentRef>(null);
+const el = ref<HTMLDivElement | null>(null);
+const viewMode = ref("masonry");
 const pagination = reactive({
   pageNo: 0,
   pageSize: 30,
-})
-const configStore = useConfig()
-const packageModalRef = ref(null)
-const generateModalRef = ref(null)
-const queryRepeatedTasksModalRef = ref(null)
-const LoginSuccessModalRef = ref(null)
-const checkingTaskModalRef = ref(null)
-const finishPackageModal = ref(null)
-const loading = ref(false)
-const message = useMessage()
-const totalCount = ref(0)
+});
+const configStore = useConfig();
+const packageModalRef = ref(null);
+const generateModalRef = ref(null);
+const queryRepeatedTasksModalRef = ref(null);
+const LoginSuccessModalRef = ref(null);
+const checkingTaskModalRef = ref(null);
+const finishPackageModal = ref(null);
+const loading = ref(false);
+const message = useMessage();
+const totalCount = ref(0);
 const sortBy: PictureSortParam = {
   orderbyname: "desc",
   orderbyvalue: "pictureResult",
 };
-const imageRef = ref<ComponentElRef | null>()
-const checkDuplicateNo = ref('')
-const checkTaskStatus = ref(null) // 1.执行中 2.执行完毕  3.执行失败
-const isRefresh = ref(true) // 生成任务包前，点击刷新数据，并将【一键查重】切换按钮为【生成任务包】
+const imageRef = ref<ComponentElRef | null>();
+const checkDuplicateNo = ref("");
+const checkTaskStatus = ref(null); // 1.执行中 2.执行完毕  3.执行失败
+const isRefresh = ref(true); // 生成任务包前，点击刷新数据，并将【一键查重】切换按钮为【生成任务包】
 
-let canloadMore = true
-let filterId = null
+let canloadMore = true;
+let filterId = null;
 
 async function computeListHeight() {
-  const headEl = document.querySelector('.wrapper-content')!
-  const { bottomIncludeBody } = getViewportOffset(headEl)
-  const height = bottomIncludeBody
-  deviceHeight.value = height - 40 - 16 - 24
+  const headEl = document.querySelector(".wrapper-content")!;
+  const { bottomIncludeBody } = getViewportOffset(headEl);
+  const height = bottomIncludeBody;
+  deviceHeight.value = height - 40 - 16 - 24;
 }
 
-useWindowSizeFn(computeListHeight)
+useWindowSizeFn(computeListHeight);
 
 const listStyle = computed(() => {
   return {
     height: `${deviceHeight.value}px`,
-  }
-})
+  };
+});
 
 const layout = debounce(() => {
-  if (masonryRef.value == null || el.value == null)
-    return
+  if (masonryRef.value == null || el.value == null) return;
 
-  if (_masonry !== null)
-    (_masonry as any).addItems()
+  if (_masonry !== null) (_masonry as any).addItems();
 
   _masonry = new Masonry(masonryRef.value as any, {
-    itemSelector: '.grid-item',
+    itemSelector: ".grid-item",
     gutter: 17,
     columnWidth: 182,
     percentPosition: true,
     stagger: 10,
-  })
+  });
 
-  _imagesload = imagesloaded('.grid-item')
+  _imagesload = imagesloaded(".grid-item");
 
-  _imagesload.on('done', (instance) => {
-    (_masonry as any).layout()
-    if (!el.value)
-      return
-    loading.value = false
-  })
+  _imagesload.on("done", (instance) => {
+    (_masonry as any).layout();
+    if (!el.value) return;
+    loading.value = false;
+  });
 
-  _imagesload.on('fail', (instance) => {
-    message.error('图片错误')
-    loading.value = false
-  })
-}, 300)
+  _imagesload.on("fail", (instance) => {
+    message.error("图片错误");
+    loading.value = false;
+  });
+}, 300);
 
 useInfiniteScroll(
   el as any,
   () => {
-    loadMore()
+    loadMore();
   },
-  { distance: 10, canLoadMore: () => canloadMore },
-)
+  { distance: 10, canLoadMore: () => canloadMore }
+);
 
 onUpdated(() => {
-  layout()
-})
+  layout();
+});
 
-const timeRange = ref('')
+const timeRange = ref("");
 const timeLabel = computed(() => {
   const item = timeOptions.find((option) => {
-    return option.value === timeRange.value
-  })
+    return option.value === timeRange.value;
+  });
 
-  return item?.label
-})
+  return item?.label;
+});
 
 const viewLabel = computed(() => {
   const item = viewOptions.find((option) => {
-    return option.value === viewMode.value
-  })
+    return option.value === viewMode.value;
+  });
 
-  return item?.label
-})
+  return item?.label;
+});
 
-let isAllowDownload = ref(true)
+let isAllowDownload = ref(true);
 let calNum = ref(0);
-const searchValue = ref('');
-const isInitSeaerch = ref(false);// 是否初始化搜索
+const searchValue = ref("");
+const isInitSeaerch = ref(false); // 是否初始化搜索
 
 configStore.$subscribe(() => {
+  console.log("subscribe", "configStore");
   isAllowDownload.value = configStore.isAllowDownload;
   calNum.value = configStore.getTimeNum;
   // console.log("calNum.value----------", calNum.value);
   searchValue.value = configStore.getSearchValue;
-})
-
+  console.log(configStore.getSearchValue, "getSearchValue");
+});
 
-watch(() => searchValue.value,
+watch(
+  () => searchValue.value,
   async (newVal, oldVal) => {
-    if(newVal) {
+    if (newVal) {
       isInitSeaerch.value = true;
       pagination.pageNo = 0;
-      const more = await featchList()
+      const more = await featchList();
       listData.value = more;
       isInitSeaerch.value = false;
       // configStore.setSearchValue("");
+    } else {
+      isInitSeaerch.value = true;
+      pagination.pageNo = 0;
+      const more = await featchList();
+      listData.value = more;
+      isInitSeaerch.value = false;
     }
-  },
+  }
 );
 
-const listData = ref<any[]>([])
+const listData = ref<any[]>([]);
 
 async function featchList() {
-  loading.value = true
+  loading.value = true;
   try {
     const contentParams = {
       search_month: timeRange.value,
       search_history: 0,
-    }
+    };
 
-    pagination.pageNo += 1
-    const searchValue = configStore.getSearchValue // rao
-    const asideParams = unref(configStore.getAsideValue)
-    const params = filterId ? { userSearchId: filterId } : cloneDeep(asideParams)
+    pagination.pageNo += 1;
+    const searchValue = configStore.getSearchValue; // rao
+    const asideParams = unref(configStore.getAsideValue);
+    const params = filterId ? { userSearchId: filterId } : cloneDeep(asideParams);
     let result = {
       pageCount: 0,
       data: [],
       total: 0,
+    };
+    let sortObj: any = {}; // rao start
+    if (sortBy.orderbyvalue == "pictureResult") {
+      sortObj.ordertype = sortBy.orderbyname;
+    } else if (sortBy.orderbyvalue == "fromuptime") {
+      sortObj.orderByTime = sortBy.orderbyname;
     }
-    let sortObj: any = {} // rao start
-    if(sortBy.orderbyvalue == "pictureResult") {
-      sortObj.ordertype = sortBy.orderbyname
-    }else if(sortBy.orderbyvalue == "fromuptime") {
-      sortObj.orderByTime = sortBy.orderbyname
-    }
-    if(params['izsimilarity'] && typeof params['izsimilarity'] != "string") {
-      params['izsimilarity'] = params['izsimilarity'].join('-');
+    if (params["izsimilarity"] && typeof params["izsimilarity"] != "string") {
+      params["izsimilarity"] = params["izsimilarity"].join("-");
     }
     // rao end
-    
+
     if (checkTaskStatus.value === 2 && isRefresh) {
-      result = await queryPageListByCheckNo({ ...pagination, ...contentParams, ...params, ...sortObj, checkDuplicateNo: checkDuplicateNo.value, upUserName: searchValue })
+      result = await queryPageListByCheckNo({
+        ...pagination,
+        ...contentParams,
+        ...params,
+        ...sortObj,
+        checkDuplicateNo: checkDuplicateNo.value,
+        upUserName: searchValue,
+      });
     } else {
-      result = await getPictureList({ ...pagination, ...contentParams, ...params, ...sortObj, upUserName: searchValue })
+      result = await getPictureList({
+        ...pagination,
+        ...contentParams,
+        ...params,
+        ...sortObj,
+        upUserName: searchValue,
+      });
     }
-    const { data, pageCount, total } = result
-    totalCount.value = total
-    canloadMore = pageCount >= pagination.pageNo && pageCount > 0
+    const { data, pageCount, total } = result;
+    totalCount.value = total;
+    canloadMore = pageCount >= pagination.pageNo && pageCount > 0;
 
     const list = data.map((item) => {
       return {
@@ -211,240 +244,245 @@ async function featchList() {
         ocrPictureclass: item.ocrPictureclass,
         uphead: item.uphead,
         similar: item.similarityscore || -1,
-        imgName: item.imgname
-      }
-    })
+        imgName: item.imgname,
+      };
+    });
 
-    return list
-  }
-  catch (error) {
-    canloadMore = false
-    return []
+    return list;
+  } catch (error) {
+    canloadMore = false;
+    return [];
   }
 }
 
 async function loadMore() {
-  if (loading.value || el.value == null)
-    return
+  if (loading.value || el.value == null) return;
 
-  const more = await featchList()
+  const more = await featchList();
   // if(isInitSeaerch.value) {
   //   listData.value = [];
   //   isInitSeaerch.value = false;
   // }
-  listData.value.push(...more)
+  listData.value.push(...more);
 }
 
 const gridHeight = computed(() => {
-  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'
+  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
-})
+  return height;
+});
 
 async function oneCheck() {
-  const asideVal = cloneDeep(configStore.getAsideValue)
-  if(asideVal.izyear && asideVal.izyear.length == 2) {
-    asideVal.izyear = dayjs(asideVal.izyear[0]).format("YYYY/MM/DD") + '-' + dayjs(asideVal.izyear[1]).format("YYYY/MM/DD")
+  const asideVal = cloneDeep(configStore.getAsideValue);
+  if (asideVal.izyear && asideVal.izyear.length == 2) {
+    asideVal.izyear =
+      dayjs(asideVal.izyear[0]).format("YYYY/MM/DD") +
+      "-" +
+      dayjs(asideVal.izyear[1]).format("YYYY/MM/DD");
   }
-  if(asideVal['izsimilarity'] && typeof asideVal['izsimilarity'] != "string") {
-    asideVal['izsimilarity'] = asideVal['izsimilarity'].join('-');
+  if (asideVal["izsimilarity"] && typeof asideVal["izsimilarity"] != "string") {
+    asideVal["izsimilarity"] = asideVal["izsimilarity"].join("-");
   }
-  const tasksLoadingModal = queryRepeatedTasksModalRef.value as any
-  
-  console.log('calNum.value111111111111111', calNum.value, checkTaskStatus.value);
-  if(calNum.value == 0 && isRefresh.value) {
-    if(timer.value) {
+  const tasksLoadingModal = queryRepeatedTasksModalRef.value as any;
+
+  console.log("calNum.value111111111111111", calNum.value, checkTaskStatus.value);
+  if (calNum.value == 0 && isRefresh.value) {
+    if (timer.value) {
       clearInterval(timer.value);
     }
     timer.value = setInterval(() => {
-      console.log('calNum.value2222222222222', calNum.value,checkTaskStatus.value);
+      console.log("calNum.value2222222222222", calNum.value, checkTaskStatus.value);
       if (checkDuplicateNo.value) {
         getCheckDuplicateStatus(checkDuplicateNo.value).then((res) => {
           if (res.code === "OK") {
             checkTaskStatus.value = res.data.status;
-            if(calNum.value < 90) {
+            if (calNum.value < 90) {
               calNum.value = calNum.value + 10;
             }
             configStore.setTimeNum(calNum.value);
-            if(checkTaskStatus.value === 2 || checkTaskStatus.value === 3) {
-              if(checkTaskStatus.value === 2) {
-                message.success('任务执行完毕，正在刷新数据...');
-              }else {
-                message.error('查询异常');
+            if (checkTaskStatus.value === 2 || checkTaskStatus.value === 3) {
+              if (checkTaskStatus.value === 2) {
+                message.success("任务执行完毕，正在刷新数据...");
+              } else {
+                message.error("查询异常");
               }
               tasksLoadingModal.closeOnlyModal();
               configStore.setTimeNum(100);
-              if(timer.value) {
+              if (timer.value) {
                 clearInterval(timer.value);
               }
               setTimeout(() => {
                 configStore.setTimeNum(0);
               }, 1000);
-              reset()
-              loadMore()
+              reset();
+              loadMore();
             }
-          }else {
-            if(timer.value) {
+          } else {
+            if (timer.value) {
               clearInterval(timer.value);
             }
-          }})
+          }
+        });
       }
     }, 1000);
   }
   // 查重任务编号,状态不为空,或者状态执行中..
-  if(checkDuplicateNo.value && checkTaskStatus.value && checkTaskStatus.value===1){// 暂时rao
-    tasksLoadingModal.showModal()
-	  return;
+  if (checkDuplicateNo.value && checkTaskStatus.value && checkTaskStatus.value === 1) {
+    // 暂时rao
+    tasksLoadingModal.showModal();
+    return;
   }
   //调用查重任务开启流程
   oneClickCheckTaskPackage(asideVal).then((res) => {
     if (res.code === "OK") {
-      checkDuplicateNo.value = res.data.checkDuplicateNo
-  	  checkTaskStatus.value = res.data.status
-  	  tasksLoadingModal.showModal() // 暂时rao
+      checkDuplicateNo.value = res.data.checkDuplicateNo;
+      checkTaskStatus.value = res.data.status;
+      tasksLoadingModal.showModal(); // 暂时rao
     } else {
-      message.error(res.message || '查重失败')
+      message.error(res.message || "查重失败");
     }
-  })
+  });
 }
 
 /**
  * 显示添加任务包
  */
 async function showAddPackage() {
-	const modal = packageModalRef.value as any
-	modal.showModal()
+  const modal = packageModalRef.value as any;
+  modal.showModal();
 }
 
 //查重任务加载提示框,关闭回调
 async function tasksLoadingCloseCallback() {
-	const checkingTaskModal = checkingTaskModalRef.value as any
-	checkingTaskModal.showModal()
-  if(isRefresh.value) {
+  const checkingTaskModal = checkingTaskModalRef.value as any;
+  checkingTaskModal.showModal();
+  if (isRefresh.value) {
     refresh(true);
   }
 }
 
 async function showLoginSuccessModal() {
-  const modal = LoginSuccessModalRef.value as any
+  const modal = LoginSuccessModalRef.value as any;
   // modal.showModal()
 }
 
 // 包id
-const packageIdRef = ref('');
+const packageIdRef = ref("");
 
 async function commitHandler(settingParam) {
   const params = {
     name: settingParam.packagename,
-    checkDuplicateNo: checkDuplicateNo.value
-  }
-  const modal = generateModalRef.value as any
-  const finishModal = finishPackageModal.value as any
-  modal.showModal()
+    checkDuplicateNo: checkDuplicateNo.value,
+  };
+  const modal = generateModalRef.value as any;
+  const finishModal = finishPackageModal.value as any;
+  modal.showModal();
   createPackage(params).then((res) => {
     if (res.code === "OK") {
       message.success(res.data);
       packageIdRef.value = res.data.id;
-      modal.closeModal()
-      finishModal.showModal()
-	  //清空查重任务状态和编号
-	  checkDuplicateNo.value='';
-	  checkTaskStatus.value = null;
+      modal.closeModal();
+      finishModal.showModal();
+      //清空查重任务状态和编号
+      checkDuplicateNo.value = "";
+      checkTaskStatus.value = null;
     }
-  })
-  const asideVal = configStore.getAsideValue
-  const finalParam = { ...asideVal }
-  finalParam.buessinessno = settingParam.packagename
-  finalParam.search_history = settingParam.comparehistory ? 1 : 0
-
+  });
+  const asideVal = configStore.getAsideValue;
+  const finalParam = { ...asideVal };
+  finalParam.buessinessno = settingParam.packagename;
+  finalParam.search_history = settingParam.comparehistory ? 1 : 0;
 }
 
 onMounted(() => {
-  emitter.on('filter', refreshHandler)
+  emitter.on("filter", refreshHandler);
   // 一件键重——获取任务编号
   getLastCheckNo().then((res) => {
     if (res.code === "OK") {
-      checkDuplicateNo.value = res.data
+      checkDuplicateNo.value = res.data;
     }
-  })
+  });
   nextTick(() => {
-    computeListHeight()
+    computeListHeight();
     // 登录后展示成功
     // showLoginSuccessModal()
-  })
-})
+  });
+});
 
 onUnmounted(() => {
-  emitter.off('filter', refreshHandler)
-})
+  emitter.off("filter", refreshHandler);
+});
 
 watch(timeRange, () => {
-  refreshHandler()
-})
+  refreshHandler();
+});
 
-watch(() => configStore.asideValue, (newVal, oldVal) => {
-  refreshHandler()
-}, { deep: true })
+watch(
+  () => configStore.asideValue,
+  (newVal, oldVal) => {
+    refreshHandler();
+  },
+  { deep: true }
+);
 
 function reset() {
-  pagination.pageNo = 0
-  pagination.pageSize = 30
-  listData.value.length = 0
-  loading.value = false
-  canloadMore = true
-  filterId = null
-
-  layout()
+  pagination.pageNo = 0;
+  pagination.pageSize = 30;
+  listData.value.length = 0;
+  loading.value = false;
+  canloadMore = true;
+  filterId = null;
+
+  layout();
 }
 
 async function refreshHandler(filtersearchId?: any) {
-  reset()
+  reset();
 
-  if (filtersearchId)
-    filterId = filtersearchId
+  if (filtersearchId) filterId = filtersearchId;
 
   nextTick(() => {
     setTimeout(() => {
       useInfiniteScroll(
         el as any,
         () => {
-          loadMore()
+          loadMore();
         },
-        { distance: 10, canLoadMore: () => canloadMore },
-      )
-    }, 300)
-  })
+        { distance: 10, canLoadMore: () => canloadMore }
+      );
+    }, 300);
+  });
 }
 
 function getAvatar(url: string): string {
-  return url ? getImgUrl(url) : avatar
+  return url ? getImgUrl(url) : avatar;
 }
 
 function sortHandler(orderby: "pictureResult" | "fromuptime") {
   sortBy.orderbyvalue = orderby;
   sortBy.orderbyname = sortBy.orderbyname === "asc" ? "desc" : "asc";
 
-  refreshHandler()
+  refreshHandler();
 }
 async function downloadImage(item) {
   if (!item.thumburl) {
-    message.error('请输入有效的图片链接地址')
+    message.error("请输入有效的图片链接地址");
     return;
   }
   try {
     // 使用 fetch 发送 GET 请求获取图片
     const response = await fetch(item.thumburl, {
-      method: 'GET',
-      mode: 'cors', // 确保跨域请求被正确处理
-      cache: 'default',
+      method: "GET",
+      mode: "cors", // 确保跨域请求被正确处理
+      cache: "default",
     });
     // 检查响应状态码，确保请求成功
     if (!response.ok) {
@@ -455,10 +493,10 @@ async function downloadImage(item) {
     const blob = await response.blob();
 
     // 创建一个新的a标签
-    const link = document.createElement('a');
+    const link = document.createElement("a");
     link.href = URL.createObjectURL(blob);
     link.download = item.imgName; // 设置下载的文件名
-    link.style.display = 'none'; // 隐藏链接
+    link.style.display = "none"; // 隐藏链接
 
     // 将链接添加到 DOM 中
     document.body.appendChild(link);
@@ -470,7 +508,7 @@ async function downloadImage(item) {
     URL.revokeObjectURL(link.href);
     document.body.removeChild(link);
   } catch (error) {
-    console.error('下载图片时发生错误:', error);
+    console.error("下载图片时发生错误:", error);
   }
 }
 
@@ -488,38 +526,41 @@ const timer = ref();
  */
 function refresh(val?: any) {
   // delete asideVal.izsimilarity
-  const checkingTaskModal = checkingTaskModalRef.value as any
+  const checkingTaskModal = checkingTaskModalRef.value as any;
   if (checkDuplicateNo.value) {
     getCheckDuplicateStatus(checkDuplicateNo.value).then((res) => {
       if (res.code === "OK") {
-        checkTaskStatus.value = res.data.status // 1.执行中 2.执行完毕
+        checkTaskStatus.value = res.data.status; // 1.执行中 2.执行完毕
         // if (isRefresh.value === false) {
         //   const modal = packageModalRef.value as any
         //   modal.showModal()
         //   return
         // }
-        
-        if ((checkTaskStatus.value === 2 || checkTaskStatus.value === 3) && isRefresh.value) {
+
+        if (
+          (checkTaskStatus.value === 2 || checkTaskStatus.value === 3) &&
+          isRefresh.value
+        ) {
           configStore.setTimeNum(100);
-          checkingTaskModal.closeModal()
-          isRefresh.value = false
-          if(checkTaskStatus.value === 2) {
-            message.success('任务执行完毕，正在刷新数据...');
-          }else {
-            message.error('查询异常');
+          checkingTaskModal.closeModal();
+          isRefresh.value = false;
+          if (checkTaskStatus.value === 2) {
+            message.success("任务执行完毕，正在刷新数据...");
+          } else {
+            message.error("查询异常");
           }
-          if(timer.value) {
+          if (timer.value) {
             clearInterval(timer.value);
           }
-          reset()
-          loadMore()
+          reset();
+          loadMore();
           configStore.setTimeNum(0);
         } else if (checkTaskStatus.value === 1) {
-          return
+          return;
         }
       }
-    })
-    return
+    });
+    return;
   }
 }
 /**
@@ -529,40 +570,39 @@ function cancel(val) {
   if (checkTaskStatus.value === 1) {
     removeCheckDuplicate(checkDuplicateNo.value).then((res) => {
       if (res.code === "OK") {
-		checkDuplicateNo.value='';
-		checkTaskStatus.value = null;
-        message.success("查重任务取消成功")
+        checkDuplicateNo.value = "";
+        checkTaskStatus.value = null;
+        message.success("查重任务取消成功");
       }
-    })
+    });
   }
 }
 
 const renderIcon = (icon: Component) => {
   return () => {
     return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
-}
+      default: () => h(icon),
+    });
+  };
+};
 
 const dropdownOptions = ref([
   {
-    label: '导入任务数据',
-    key: 'profile',
-    icon: renderIcon(UploadIcon)
+    label: "导入任务数据",
+    key: "profile",
+    icon: renderIcon(UploadIcon),
   },
   {
-    label: '导出任务数据',
-    key: 'editProfile',
-    icon: renderIcon(DownloadIcon)
+    label: "导出任务数据",
+    key: "editProfile",
+    icon: renderIcon(DownloadIcon),
   },
   {
-    label: '查看导入记录',
-    key: 'logout',
-    icon: renderIcon(EyeOutlineIcon)
-  }
+    label: "查看导入记录",
+    key: "logout",
+    icon: renderIcon(EyeOutlineIcon),
+  },
 ]);
-
 </script>
 
 <template>
@@ -573,27 +613,33 @@ const dropdownOptions = ref([
         <span class="font">AI一键查重</span>
       </div>
       <div class="flex-btn-icon">
-        <SvgIcon v-show="checkTaskStatus !== 2" style="cursor: pointer;" size="105" name="yijianchachong"
-          @click="oneCheck" />
-        <SvgIcon v-show="checkTaskStatus === 2" style="cursor: pointer;" size="105" name="shengchengrenwubao"
-          @click="showAddPackage" />
-        <n-dropdown
-          trigger="hover"
-          placement="bottom-start"
-          :options="dropdownOptions"
-        >
+        <SvgIcon
+          v-show="checkTaskStatus !== 2"
+          style="cursor: pointer"
+          size="105"
+          name="yijianchachong"
+          @click="oneCheck"
+        />
+        <SvgIcon
+          v-show="checkTaskStatus === 2"
+          style="cursor: pointer"
+          size="105"
+          name="shengchengrenwubao"
+          @click="showAddPackage"
+        />
+        <n-dropdown trigger="hover" placement="bottom-start" :options="dropdownOptions">
           <span class="expand-icon">
-            <Icon style="position: relative; top: 2px;">
-              <EllipsisHorizontal style="color: #507afd;"/>
+            <Icon style="position: relative; top: 2px">
+              <EllipsisHorizontal style="color: #507afd" />
             </Icon>
           </span>
         </n-dropdown>
       </div>
     </div>
     <div class="wrapper-content">
-      <div style="display: flex;justify-content: space-between;">
+      <div style="display: flex; justify-content: space-between">
         <div class="form">
-<!--          <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click">
+          <!--          <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click">
             <div class="dropdown">
               <span>{{ timeLabel || '请选择' }}</span>
               <SvgIcon class="gap" name="arrow-botton" size="14" />
@@ -606,40 +652,65 @@ const dropdownOptions = ref([
               <SvgIcon class="gap" name="arrow-botton" size="14" />
             </div>
           </n-popselect>
-          <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('fromuptime')">
+          <div
+            style="margin-left: 15px; cursor: pointer; color: #323233"
+            @click="sortHandler('fromuptime')"
+          >
             <span>时间排序</span>
-            <SvgIcon style="margin-left: 8px;" name="sort" size="12" />
+            <SvgIcon style="margin-left: 8px" name="sort" size="12" />
           </div>
-          <div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('pictureResult')">
+          <div
+            style="margin-left: 15px; cursor: pointer; color: #323233"
+            @click="sortHandler('pictureResult')"
+          >
             <span>相似度排序</span>
-            <SvgIcon style="margin-left: 8px;" name="sort" size="12" />
+            <SvgIcon style="margin-left: 8px" name="sort" size="12" />
           </div>
         </div>
-        <span style="font-size: 16px;color: #333">共 <span style="color: #507AFD;font-weight: 500;">{{ totalCount
-        }}</span> 项</span>
+        <span style="font-size: 16px; color: #333"
+          >共
+          <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span
+        >
       </div>
       <n-spin :show="loading">
         <div ref="el" class="scroll" :style="listStyle">
           <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
           <div ref="masonryRef" class="grid">
-            <div v-for="(item, index) in listData" :key="index" :style="{ height: gridHeight }" class="grid-item">
+            <div
+              v-for="(item, index) in listData"
+              :key="index"
+              :style="{ height: gridHeight }"
+              class="grid-item"
+            >
               <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
               <!-- <img
                 class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
                 :src="item.imgUrl"
               > -->
-              <n-image class="img" :img-props="{ onClick: hideDownload }"
-                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
-                :preview-src="item.imgUrl" :src="item.thumburl" ref="imageRef" />
-              <div class="percent" v-if="item.similar!=-1">
+              <n-image
+                class="img"
+                :img-props="{ onClick: hideDownload }"
+                :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }"
+                :preview-src="item.imgUrl"
+                :src="item.thumburl"
+                ref="imageRef"
+              />
+              <div class="percent" v-if="item.similar != -1">
                 <SvgIcon size="42" name="tag" />
                 <div class="val">
                   {{ `${item.similar}%` }}
                 </div>
               </div>
               <div class="glass" v-if="isAllowDownload">
-                <SvgIcon size="16" name="download" style="margin-top: -6px;cursor: pointer;"
-                  @click="downloadImage(item)" />
+                <SvgIcon
+                  size="16"
+                  name="download"
+                  style="margin-top: -6px; cursor: pointer"
+                  @click="downloadImage(item)"
+                />
               </div>
 
               <div class="info">
@@ -653,11 +724,19 @@ const dropdownOptions = ref([
                     </n-tooltip>
                   </div>
                   <div class="icon-wrap" @click="previewHandler(index, $event)">
-                    <SvgIcon size="13" name="magnifying-2" style="cursor: pointer;color:#898481" />
+                    <SvgIcon
+                      size="13"
+                      name="magnifying-2"
+                      style="cursor: pointer; color: #898481"
+                    />
                   </div>
                 </div>
                 <div class="left">
-                  <n-avatar :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar" class="avatar" round />
+                  <n-avatar
+                    :src="(item.uphead && getAvatar(item.uphead)) || defaultAvatar"
+                    class="avatar"
+                    round
+                  />
                   <span>{{ item.upname }}</span>
                 </div>
                 <!-- <div class="right">
@@ -673,9 +752,12 @@ const dropdownOptions = ref([
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />
-    <QueryRepeatedTasksModal ref="queryRepeatedTasksModalRef" @closeCallback="tasksLoadingCloseCallback"/>
+    <QueryRepeatedTasksModal
+      ref="queryRepeatedTasksModalRef"
+      @closeCallback="tasksLoadingCloseCallback"
+    />
     <LoginSuccessModal ref="LoginSuccessModalRef" />
-    <FinishPackageModal ref="finishPackageModal" :id="packageIdRef"/>
+    <FinishPackageModal ref="finishPackageModal" :id="packageIdRef" />
     <CheckingTaskModal ref="checkingTaskModalRef" @refresh="refresh" @cancel="cancel" />
   </div>
 </template>
@@ -693,7 +775,7 @@ const dropdownOptions = ref([
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #FFF;
+    background: #fff;
     padding: 0px 15px 0px 15px;
     box-sizing: border-box;
     height: 64px;
@@ -719,7 +801,7 @@ const dropdownOptions = ref([
     flex: 1;
     padding: 16px 16px 0px 16px;
     margin-top: 16px;
-    background: #FFF;
+    background: #fff;
     border-radius: 3px;
     border: 1px solid rgb(239, 239, 245);
 
@@ -800,7 +882,7 @@ const dropdownOptions = ref([
       .glass {
         position: absolute;
         display: none !important;
-        background-color: #FFF;
+        background-color: #fff;
         border-radius: 6px;
         padding: 3px;
         top: 10px;
@@ -818,12 +900,12 @@ const dropdownOptions = ref([
         justify-content: space-between;
         align-items: center;
         padding: 0 10px;
-        background: rgba(0, 0, 0, .35);
+        background: rgba(0, 0, 0, 0.35);
         border-radius: 7px;
 
         .img-name {
           width: 70%;
-          color: #FFF;
+          color: #fff;
           /* 设置文本溢出时的样式为省略号 */
           text-overflow: ellipsis;
           /* 隐藏超出容器的文本 */
@@ -837,13 +919,12 @@ const dropdownOptions = ref([
           height: 22px;
           line-height: 22px;
           text-align: center;
-          background-color: #FFF;
+          background-color: #fff;
           border-radius: 6px;
         }
       }
 
       &:hover {
-
         .percent {
           display: none;
         }
@@ -864,7 +945,7 @@ const dropdownOptions = ref([
       z-index: 3;
       right: 0px;
       top: -6px;
-      color: #FFF;
+      color: #fff;
 
       .val {
         position: absolute;
@@ -900,9 +981,13 @@ const dropdownOptions = ref([
     width: 30px;
     height: 30px;
     line-height: 30px;
-    background: linear-gradient(144deg, rgba(115, 167, 249, 0.1) 0%, rgba(62, 110, 241, 0.1) 96%); 
+    background: linear-gradient(
+      144deg,
+      rgba(115, 167, 249, 0.1) 0%,
+      rgba(62, 110, 241, 0.1) 96%
+    );
     border-radius: 8px;
     text-align: center;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 08a9cf7..6d3e13b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -62,7 +62,7 @@ function close() {
       </div>
       <div class="text">企业级 SaaS 智能审批解决方案</div>
       <img class="img-icon-2" src="../../assets/images/login/img-icon-2.png" alt="" />
-      <div class="btn-login-2 f-c-c" @click="showLogin">立即登录 -></div>
+      <div class="flex btn-login-2 f-c-c" @click="showLogin">立即登录 <SvgIcon name="right_arrow" class="right_arrow"/></div>
       <div class="item-wrap f-c">
         <div class="item">
           <img class="item-img" src="../../assets/images/login/item-1.png" alt="" />
@@ -300,5 +300,9 @@ function close() {
   color: #FF4E4F !important;
   font-size: .75rem !important;
 }
-
+.right_arrow{
+  height: 1.25rem !important;
+  width: 1.25rem !important;
+  margin-top: .2rem;
+}
 </style>