feat: 相似度阈值样式

src/App.vue

@@ -90,13 +90,13 @@ const getThemeOverrides = computed(() => {
 //   transform: rotate(-90deg) !important;
 // }
 .n-scrollbar-content {
-  padding: 0 7.97px 0 4px;
+  padding: 0 7.97px 16 16px;
 }
 .n-form-item .n-form-item-label {
   font-size: 14px !important;
   color: #333333 !important;
 }
-.n-slider-dots > .n-slider-dot:nth-child(2) {
+.n-slider-dots > .n-slider-dot {
   display: none !important;
 }
 .n-collapse-item-arrow i svg {

src/layout/components/Header/index.vue

@@ -1,6 +1,15 @@
 <script lang="ts">
 import { useDialog, useMessage } from 'naive-ui'
-import { defineComponent, inject, onMounted, reactive, ref, toRefs, unref, watch } from 'vue'
+import {
+  defineComponent,
+  inject,
+  onMounted,
+  reactive,
+  ref,
+  toRefs,
+  unref,
+  watch,
+} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import QuillModal from './QuillModal.vue'
 import RecycleModal from './RecycleModal.vue'
@@ -198,6 +207,7 @@ export default defineComponent({
       <!-- 菜单收起 -->
       <div
         class="ml-1 layout-header-trigger layout-header-trigger-min"
+        style="padding-left: 13px"
         @click="() => $emit('update:collapsed', !collapsed)"
       >
         <SvgIcon name="homepage" size="16" />
@@ -227,7 +237,11 @@ export default defineComponent({
       <!-- 个人中心 -->
       <div class="layout-header-trigger layout-header-trigger-min">
         <!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> -->
-        <n-avatar style="width:36px;height:36px;" :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc" round />
+        <n-avatar
+          style="width: 36px; height: 36px"
+          :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc"
+          round
+        />
       </div>
       <!-- 设置 -->
       <UserSettings @logout="doLogout" />

src/views/home/content/modal/PackageSettingsModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { FormInst, FormRules } from 'naive-ui';
+import type { FormInst, FormRules } from 'naive-ui'
-import { useMessage } from 'naive-ui';
+import { useMessage } from 'naive-ui'
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 const emit = defineEmits<{
   (e: 'commit', value: any)
@@ -72,18 +72,38 @@ function afterLeave() {
 
 <template>
   <n-modal v-model:show="show" transform-origin="center" @after-leave="afterLeave">
-    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+    <n-card
+      :style="cardStyle"
+      :bordered="false"
+      size="huge"
+      role="dialog"
+      aria-modal="true"
+    >
       <div class="wrapper">
         <span class="wrapper-title">生成任务包设置</span>
         <div class="wrapper-bar">
           <div class="wrapper-info">
-            <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
+            <span
+              :style="{
+                'margin-left': '18px',
+                'font-size': '16px',
+                'font-weight': '600',
+              }"
+            >基本信息</span>
           </div>
         </div>
         <!-- require-mark-placement="left" -->
-        <n-form ref="formRef" :model="model"  style="margin-top: 8px;" :rules="rules">
+        <n-form ref="formRef" :model="model" style="margin-top: 8px" :rules="rules">
-          <n-form-item class="wrapper-task-package-name" path="packagename" label="任务包名称">
+          <n-form-item
-            <n-input v-model:value="model.packagename" maxlength="12" @keydown.enter.prevent />
+            class="wrapper-task-package-name"
+            path="packagename"
+            label="任务包名称"
+          >
+            <n-input
+              v-model:value="model.packagename"
+              maxlength="12"
+              @keydown.enter.prevent
+            />
           </n-form-item>
           <!-- <n-form-item path="mark" :style="formItemStyle">
             <n-checkbox v-model:checked="model.mark" >
@@ -94,10 +114,23 @@ function afterLeave() {
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button style="background-color: #507AFD !important;" type="info" @click="handleSumbit">
+          <n-button
+            style="background-color: #507afd !important"
+            type="info"
+            @click="handleSumbit"
+          >
             生成任务包
           </n-button>
-          <n-button secondary style="margin-left:15px;color: #333;background-color: #fff;border: 1px solid #CAD2DD;" @click="closeModal">
+          <n-button
+            secondary
+            style="
+              margin-left: 15px;
+              color: #333;
+              background-color: #fff;
+              border: 1px solid #cad2dd;
+            "
+            @click="closeModal"
+          >
             取消
           </n-button>
         </div>
@@ -123,7 +156,8 @@ function afterLeave() {
     width: 100%;
     margin-top: 24px;
     font-size: 16px;
-    margin-bottom: 16px;
+    // 任务包名称有margin-top:8px;
+    margin-bottom: 8px;
     span {
       color: #333;
     }
@@ -139,7 +173,8 @@ function afterLeave() {
     ::v-deep(.n-form-item-label) {
       color: #666;
       font-weight: 500;
-      margin-bottom: 8px;
+      // label自带padding-bottom 2px  最后得出8-2
+      margin-bottom: 6px;
     }
   }
 
@@ -174,7 +209,7 @@ function afterLeave() {
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
@@ -186,6 +221,5 @@ function afterLeave() {
 }
 
 ::v-deep(.n-button--info-type) {
-
 }
 </style>

src/views/home/content/modal/QueryRepeatedTasksModal.vue

@@ -1,50 +1,50 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref } from 'vue'
-import { useConfig } from "@/store/modules/asideConfig";
+import { useConfig } from '@/store/modules/asideConfig'
 
 const emit = defineEmits<{
-  (e: "closeCallback", value: any);
+  (e: 'closeCallback', value: any)
-}>();
+}>()
 
-const show = ref(false);
+const show = ref(false)
 
 const stys = {
-  width: "424px",
+  'width': '424px',
-  height: "232px",
+  'height': '232px',
-  "--n-padding-bottom": "20px",
+  '--n-padding-bottom': '20px',
-  "--n-padding-left": "0px",
+  '--n-padding-left': '0px',
-  background:
+  'background':
-    "linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)",
+    'linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)',
-  "border-radius": "4px",
+  'border-radius': '4px',
-  "box-shadow": "0px 12px 48px 16px rgba(0, 0, 0, 0.03)",
+  'box-shadow': '0px 12px 48px 16px rgba(0, 0, 0, 0.03)',
-  "backdrop-filter": " blur(10px)",
+  'backdrop-filter': ' blur(10px)',
-};
+}
 
 function showModal() {
-  show.value = true;
+  show.value = true
 }
 
 function closeModal() {
-  show.value = false;
+  show.value = false
-  emit("closeCallback", true);
+  emit('closeCallback', true)
 }
 
 function closeOnlyModal() {
-  show.value = false;
+  show.value = false
 }
 
 defineExpose({
   showModal,
   closeModal,
   closeOnlyModal,
-});
+})
 
-const configStore = useConfig();
+const configStore = useConfig()
-const percent = ref(0);
+const percent = ref(0)
 
 configStore.$subscribe(() => {
-  percent.value = configStore.getTimeNum;
+  percent.value = configStore.getTimeNum
-});
+})
 </script>
 
 <template>
@@ -58,13 +58,13 @@ configStore.$subscribe(() => {
       <svg-icon
         size="15"
         name="close"
-        @click="closeModal"
         style="position: absolute; right: 15.7px; top: 6px; cursor: pointer"
+        @click="closeModal"
       />
       <div class="wrapper">
         <svg-icon size="90" name="robot2" />
-        <span style="margin-top: 24px">正在查重中</span>
       </div>
+      <span class="span_box">正在查重中</span>
       <div style="padding: 0 20px">
         <n-progress type="line" :percentage="percent" :show-indicator="false" />
       </div>
@@ -74,10 +74,22 @@ configStore.$subscribe(() => {
 
 <style lang="less" scoped>
 .wrapper {
+  width: 100%;
+  height: 95px;
   display: flex;
-  height: 100%;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+.span_box {
+  display: flex;
+  justify-content: center;
+}
+.n-modal {
+  // 要求360*157  上下内边距为20px
+  width: 360px !important;
+  height: 157px !important;
+}
+.n-modal > .n-card > .n-card__content:first-child {
+  --n-padding-top: 16px !important;
+}
 </style>