feat: 排序按钮

src/assets/icons/active-sort.svg

@@ -0,0 +1,12 @@
+<?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>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrevailCloud-Design-图标集" transform="translate(-664.000000, -7071.000000)" fill-rule="nonzero">
+            <g id="排序" transform="translate(664.000000, 7071.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="64" height="64"></rect>
+                <path d="M26.7875,57.7625 L6,38.71875 L10.2375,34.09375 L20.5125,43.5 L20.5125,6.89375 L26.7875,6.89375 L26.7875,57.7625 Z M43.4875,57.10625 L37.2125,57.10625 L37.2125,6.2375 L58,25.28125 L53.7625,29.90625 L43.4875,20.5 L43.4875,57.10625 Z" id="形状" fill="#507AFD"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/worksheet/content/Content.vue

@@ -68,7 +68,7 @@ const imageRef = ref<ComponentElRef | null>();
 const listData = ref<any[]>([]);
 const loading = ref(false);
 const el = ref<HTMLDivElement | null>(null);
-
+const selectedSortName = ref('');
 let canloadMore = true;
 
 let processItems: any[] = [];
@@ -312,7 +312,7 @@ async function handleSelect(item: any) {
 }
 
 async function sortHandler(orderby: "similarityScore" | "createdate") {
-
+  selectedSortName.value = orderby;
   sortBy.orderName = orderby;
   sortBy.orderType = sortBy.orderType === "asc" ? "desc" : "asc";
   refreshHandler();
@@ -462,7 +462,8 @@ function previewHandler(event: MouseEvent) {
               <div class="time">
                 <SvgIcon color="#FFF" size="16" name="save" />
                 <span class="time-value">{{
-                  taskDetailInfo?.photoDateTimestamp ? format(taskDetailInfo?.photoDateTimestamp, 'yyyy-MM-dd HH:mm:ss') : '-'
+                  taskDetailInfo?.photoDateTimestamp ? format(taskDetailInfo?.photoDateTimestamp, 'yyyy-MM-dd HH:mm:ss') :
+                  '-'
                 }} </span>
               </div>
             </div>
@@ -564,20 +565,23 @@ function previewHandler(event: MouseEvent) {
             </n-scrollbar>
           </div>
         </div>
-        <div style="display: flex; justify-content: space-between; padding: 12px 0px">
+        <div style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0">
           <div>
             <!-- <span style="font-size: 21px; font-weight: bold">任务包图片</span><span>({{ totalCount }})</span> -->
             <span
               style="font-size: 18px; font-weight: Medium;color: #333333;font-family: PingFang SC, PingFang SC-Medium;">任务包图片</span>
           </div>
-          <div style="display: flex; align-items: center">
+          <div style="display: flex; align-items: center;font-size: 14px;margin-right: 25px;color:#323233">
             <div style="cursor: pointer" @click="sortHandler('createdate')">
               <span>时间排序</span>
-              <SvgIcon style="margin-left: 8px" name="sort" size="12" />
+              <SvgIcon style="margin-left: 5px" name="sort" size="12" v-show="selectedSortName !== 'createdate'" />
+              <SvgIcon style="margin-left: 5px" name="active-sort" size="12" v-show="selectedSortName === 'createdate'" />
             </div>
             <div style="margin-left: 15px; cursor: pointer" @click="sortHandler('similarityScore')">
               <span>相似度排序</span>
-              <SvgIcon style="margin-left: 8px" name="sort" size="12" />
+              <SvgIcon style="margin-left: 5px" name="sort" size="12" v-show="selectedSortName !== 'similarityScore'" />
+              <SvgIcon style="margin-left: 5px" name="active-sort" size="12"
+                v-show="selectedSortName === 'similarityScore'" />
             </div>
           </div>
         </div>
@@ -1072,4 +1076,5 @@ function previewHandler(event: MouseEvent) {
 ::v-deep(.n-divider:not(.n-divider--vertical)) {
   margin-top: 12px;
   margin-bottom: 12px;
-}</style>
+}
+</style>