From aca010ccd1125a0649246811b82af8dfd9168abd Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Tue, 26 Mar 2024 17:24:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8F=8A=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header/UserSettings.vue |   4 +-
 src/views/final/comp/CustomFilterModalVue.vue |   9 +-
 src/views/final/comp/CustomTabelModal.vue     |  52 ++--
 src/views/final/comp/FilterModal.vue          |   7 +-
 src/views/final/comp/RepeatTaskTableModal.vue | 231 +++++++++---------
 .../aside/comp/modals/CustomFilterModal.vue   |   8 +-
 src/views/message/content/List.vue            |   2 +-
 src/views/task/modal/CustomFieldModal.vue     |  28 ++-
 src/views/task/modal/CustomSettingModal.vue   |   8 +-
 src/views/worksheet/aside/Aside.vue           |   2 +-
 .../worksheet/modal/CustomFieldModal copy.vue |  15 +-
 .../worksheet/modal/CustomFieldModal.vue      |  16 +-
 12 files changed, 217 insertions(+), 165 deletions(-)

diff --git a/src/layout/components/Header/UserSettings.vue b/src/layout/components/Header/UserSettings.vue
index db042e2..f178ac7 100644
--- a/src/layout/components/Header/UserSettings.vue
+++ b/src/layout/components/Header/UserSettings.vue
@@ -134,10 +134,10 @@ const options = computed(() => {
   .container {
     .header{
       .user-name{
-        font-size: 21px;
+        font-size: 16px;
       }
       .depart-name{
-        font-size: 16px;
+        font-size: 12px;
       }
     }
   }
diff --git a/src/views/final/comp/CustomFilterModalVue.vue b/src/views/final/comp/CustomFilterModalVue.vue
index 04536db..5728f0e 100644
--- a/src/views/final/comp/CustomFilterModalVue.vue
+++ b/src/views/final/comp/CustomFilterModalVue.vue
@@ -25,7 +25,7 @@ const offList = ref<any[]>([]);
 const onList = ref<any[]>([]);
 
 const allCount = computed(() => {
-  return `全部筛选(共${offList.value.length - 1}个)`;
+  return `全部筛选(共${offList.value.length}个)`;
 });
 
 const selectCount = computed(() => {
@@ -389,6 +389,7 @@ const rightInputHandler = debounce((keyword) => {
   &-info {
     font-weight: bold;
     position: relative;
+    font-size: 14px;
 
     &:before {
       background-color: #1980ff;
@@ -446,9 +447,13 @@ const rightInputHandler = debounce((keyword) => {
   --n-padding-bottom: 12px;
 }
 ::v-deep(.n-card > .n-card-header .n-card-header__main){
-  font-weight: bolder !important;
+  font-weight: lighter !important;
+  font-size: 14px;
 }
 ::v-deep(.n-scrollbar){
   border-top: none !important;
 }
+::v-deep(.n-button--info-type){
+  background: #507AFD !important;
+}
 </style>
diff --git a/src/views/final/comp/CustomTabelModal.vue b/src/views/final/comp/CustomTabelModal.vue
index 670b393..830dd49 100644
--- a/src/views/final/comp/CustomTabelModal.vue
+++ b/src/views/final/comp/CustomTabelModal.vue
@@ -52,7 +52,7 @@ onMounted(async () => {
     };
     if (item.fix) {
       mustList.push(item);
-    if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
+      if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
         fixLeftList.value.push(item);
       }
     }
@@ -64,7 +64,6 @@ onMounted(async () => {
     }
     offList.value.push(item);
   });
-  
 });
 
 const allCount = computed(() => {
@@ -344,7 +343,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                     <SvgIcon size="14px" name="magnifying-1" />
                   </template>
                 </n-input>
-                <div class="draggable-ul">
+                <div class="draggable-ul left-wrap">
                   <div class="draggable-li">
                     <n-checkbox
                       v-model:checked="checkAll"
@@ -403,15 +402,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                       :class="{ fix: item.fix }"
                       class="cursor-move draggable-item"
                     >
+                      <SvgIcon name="drag" size="24" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix"
                         size="16px"
-                        style="
-                          display: block;
-                          margin-left: auto;
-                          cursor: pointer;
-                        "
+                        style="display: block; margin-left: auto; cursor: pointer"
                         name="clear"
                         @click="removeHandler(item.id, 'fix')"
                       />
@@ -430,15 +426,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                       :class="{ fix: item.fix }"
                       class="cursor-move draggable-item"
                     >
+                      <SvgIcon name="drag" size="24" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix"
                         size="16px"
-                        style="
-                          display: block;
-                          margin-left: auto;
-                          cursor: pointer;
-                        "
+                        style="display: block; margin-left: auto; cursor: pointer"
                         name="clear"
                         @click="removeHandler(item.id, 'unfix')"
                       />
@@ -467,6 +460,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
 .wrapper {
   display: flex;
   flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
 
   &-title {
     font-weight: bold;
@@ -474,7 +469,6 @@ function removeHandler(id: string, type: "fix" | "unfix") {
   }
 
   &-bar {
-    background-color: #e8e8e8;
     width: 100%;
     margin-top: 20px;
   }
@@ -487,6 +481,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
   &-info {
     font-weight: bold;
     position: relative;
+    color: #333333;
+    font-size: 14px;
 
     &:before {
       background-color: #1980ff;
@@ -507,8 +503,11 @@ function removeHandler(id: string, type: "fix" | "unfix") {
 
 .cardstyle {
   width: 820px;
-  --n-padding-bottom: 20px;
+  // --n-padding-bottom: 20px;
   --n-padding-left: 24px;
+  --n-padding-right: 24px;
+  --n-padding-top: 20px;
+  // padding: 20px 24px  0 24px !important
 }
 
 .textbtnStyle {
@@ -540,10 +539,11 @@ function removeHandler(id: string, type: "fix" | "unfix") {
   }
 
   .draggable-item {
-    padding: 10px 16px;
+    padding: 11px 16px;
     color: #333;
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #e8e8e8;
   }
 
   .disable-check {
@@ -551,9 +551,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
   }
 }
 
-::v-deep(
-    .n-card.n-card--content-segmented > .n-card__content:not(:first-child)
-  ) {
+::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
   border: 0px;
 }
 
@@ -561,10 +559,20 @@ function removeHandler(id: string, type: "fix" | "unfix") {
   --n-padding-top: 0px;
   --n-padding-bottom: 12px;
 }
-::v-deep(.n-card > .n-card-header .n-card-header__main){
-  font-weight: bolder !important;
+::v-deep(.n-card > .n-card-header .n-card-header__main) {
+  font-weight: lighter !important;
+  font-size: 14px;
 }
-::v-deep(.n-scrollbar){
+::v-deep(.n-scrollbar) {
   border-top: none !important;
 }
+::v-deep(.n-button--info-type) {
+  background: #507afd !important;
+}
+.left-wrap{
+  border: 1px solid #cbd3de;
+}
+// ::v-deep(.n-card__content){
+//   padding: 20px 24px  0 24px !important;
+// }
 </style>
diff --git a/src/views/final/comp/FilterModal.vue b/src/views/final/comp/FilterModal.vue
index df8672b..b27a3a4 100644
--- a/src/views/final/comp/FilterModal.vue
+++ b/src/views/final/comp/FilterModal.vue
@@ -88,7 +88,7 @@ const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-  showSizePicker:true,
+  showSizePicker: true,
   pageSizes: [
     {
       label: "10 每页",
@@ -108,6 +108,7 @@ const pagination = reactive({
     },
   ],
   showQuickJumper: true,
+  itemCount:100
 });
 const tableData = ref<Array<RowData>>([]);
 const keyword = ref("");
@@ -204,7 +205,6 @@ async function handlePageSizeChange(currentPageSize) {
   await query(page, currentPageSize);
 }
 
-
 function handleClick() {
   emit("showNewFilter");
   show.value = false;
@@ -333,9 +333,8 @@ const inputHandler = debounce((word) => {
               :pagination="pagination"
               :row-key="rowKey"
               @update:page="handlePageChange"
-@update-page-size="handlePageSizeChange"
+              @update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
-              
             />
           </div>
         </div>
diff --git a/src/views/final/comp/RepeatTaskTableModal.vue b/src/views/final/comp/RepeatTaskTableModal.vue
index 459d666..4f1bdf1 100644
--- a/src/views/final/comp/RepeatTaskTableModal.vue
+++ b/src/views/final/comp/RepeatTaskTableModal.vue
@@ -1,108 +1,105 @@
 <script lang="ts" setup>
-import { computed, h, reactive, ref, unref } from 'vue'
-import { NDataTable, useDialog } from 'naive-ui'
-import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
-import Action from '../comp/Action.vue'
-import { RejectModal } from './index'
-import type { RowData } from '@/config/final'
-import { getFinalList } from '@/api/final'
-import type { ApprovalParam } from '/#/api'
-import { audit } from '@/api/task/task'
+import { computed, h, reactive, ref, unref } from "vue";
+import { NDataTable, useDialog } from "naive-ui";
+import type { DataTableColumns, DataTableRowKey } from "naive-ui";
+import Action from "../comp/Action.vue";
+import { RejectModal } from "./index";
+import type { RowData } from "@/config/final";
+import { getFinalList } from "@/api/final";
+import type { ApprovalParam } from "/#/api";
+import { audit } from "@/api/task/task";
 
 const emit = defineEmits<{
-  (e: 'commit', columns: any[])
-}>()
+  (e: "commit", columns: any[]);
+}>();
 
-const show = ref(false)
+const show = ref(false);
 
 function showModal() {
-  show.value = true
+  show.value = true;
 }
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 async function handleSumbit(e: MouseEvent) {
-  e.preventDefault()
-  closeModal()
+  e.preventDefault();
+  closeModal();
 }
 
 defineExpose({
   showModal,
-})
+});
 
 const columns: DataTableColumns<RowData> = [
   {
-    type: 'selection',
-    fixed: 'left',
+    type: "selection",
+    fixed: "left",
     width: 50,
   },
   {
-    title: '任务Id',
-    key: 'id',
-    fixed: 'left',
+    title: "任务Id",
+    key: "id",
+    fixed: "left",
     width: 100,
   },
   {
-    title: '任务名称',
-    key: 'fromtaskname',
-    fixed: 'left',
+    title: "任务名称",
+    key: "fromtaskname",
+    fixed: "left",
     width: 200,
   },
   {
-    title: '审批节点',
-    key: 'approvalnode',
+    title: "审批节点",
+    key: "approvalnode",
     width: 100,
   },
   {
-    title: '审批状态',
-    key: 'states',
+    title: "审批状态",
+    key: "states",
     width: 100,
   },
   {
-    title: '图片相似度',
-    key: 'similarity',
+    title: "图片相似度",
+    key: "similarity",
     width: 100,
   },
   {
-    title: '提报时间',
-    key: 'fromuptime',
+    title: "提报时间",
+    key: "fromuptime",
     width: 200,
   },
   {
-    title: '更新时间',
-    key: 'updatetime',
+    title: "更新时间",
+    key: "updatetime",
     width: 200,
   },
   {
-    title: '操作',
-    key: 'actions',
+    title: "操作",
+    key: "actions",
     width: 200,
-    fixed: 'right',
+    fixed: "right",
     render(row) {
-      return h(
-        Action,
-        {
-          id: row.id,
-          status: row.states,
-          trigger: actionHandler,
-        },
-      )
+      return h(Action, {
+        id: row.id,
+        status: row.states,
+        trigger: actionHandler,
+      });
     },
   },
-]
+];
 
-const rejectModalRef = ref(null)
-const columnsRef = ref(columns)
-const tableRef = ref<InstanceType<typeof NDataTable>>()
-const rowKey = (row: RowData) => row.id
-const loading = ref(true)
+const rejectModalRef = ref(null);
+const columnsRef = ref(columns);
+const tableRef = ref<InstanceType<typeof NDataTable>>();
+const rowKey = (row: RowData) => row.id;
+const loading = ref(true);
 const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-  showSizePicker:true,
+  showSizePicker: true,
   pageSizes: [
     {
       label: "10 每页",
@@ -122,31 +119,36 @@ const pagination = reactive({
     },
   ],
   showQuickJumper: true,
-})
-const tableData = ref<Array<RowData>>([])
-const selectionIds = ref<DataTableRowKey[]>([])
+  itemCount:100
+});
+const tableData = ref<Array<RowData>>([]);
+const selectionIds = ref<DataTableRowKey[]>([]);
 
-const deviceHeight = ref(600)
+const deviceHeight = ref(600);
 
 const maxHeight = computed(() => {
-  return tableData.value.length ? `${unref(deviceHeight)}px` : 'auto'
-})
+  return tableData.value.length ? `${unref(deviceHeight)}px` : "auto";
+});
 
 async function query(page: number, pageSize: number) {
-  const result = await getFinalList({ sortorder: 'asc', pageSize: 10, currPage: 1, sortname: '' })
-  const { data, pageCount } = result
-  tableData.value = data
-  pagination.page = page
-  pagination.pageCount = pageCount
-  loading.value = false
+  const result = await getFinalList({
+    sortorder: "asc",
+    pageSize: 10,
+    currPage: 1,
+    sortname: "",
+  });
+  const { data, pageCount } = result;
+  tableData.value = data;
+  pagination.page = page;
+  pagination.pageCount = pageCount;
+  loading.value = false;
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value)
-    return
+  if (loading.value) return;
 
-  const { pageSize } = pagination
-  await query(currentPage, pageSize)
+  const { pageSize } = pagination;
+  await query(currentPage, pageSize);
 }
 async function handlePageSizeChange(currentPageSize) {
   if (loading.value) return;
@@ -158,56 +160,55 @@ async function handlePageSizeChange(currentPageSize) {
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys
+  selectionIds.value = rowKeys;
 }
 
 function actionHandler(action: any) {
-  const { key } = action
+  const { key } = action;
   switch (key) {
-    case 'view':
-
-      break
-    case 'reset':
-      resetHandler()
-      break
-    case 'approval':
-      approvalHandler()
-      break
-    case 'reject':
-      (rejectModalRef.value as any).showModal()
-      break
+    case "view":
+      break;
+    case "reset":
+      resetHandler();
+      break;
+    case "approval":
+      approvalHandler();
+      break;
+    case "reject":
+      (rejectModalRef.value as any).showModal();
+      break;
     default:
-      break
+      break;
   }
 }
 
-const dialog = useDialog()
+const dialog = useDialog();
 
 function resetHandler() {
   dialog.info({
-    title: '确认提示',
-    content: '确认重置当前选中的任务的审批吗?',
-    positiveText: '确定',
-    negativeText: '取消',
+    title: "确认提示",
+    content: "确认重置当前选中的任务的审批吗?",
+    positiveText: "确定",
+    negativeText: "取消",
     onPositiveClick: async () => {
       // TODO：需要支持重置
       // const result = await resetApproval()
     },
-    onNegativeClick: () => { },
-  })
+    onNegativeClick: () => {},
+  });
 }
 
 function approvalHandler() {
   dialog.info({
-    title: '确认提示',
-    content: '确认给该任务审批为【通过】吗?',
-    positiveText: '确定',
-    negativeText: '取消',
+    title: "确认提示",
+    content: "确认给该任务审批为【通过】吗?",
+    positiveText: "确定",
+    negativeText: "取消",
     onPositiveClick: () => {
       // TODO：调用批量审批接口
     },
-    onNegativeClick: () => { },
-  })
+    onNegativeClick: () => {},
+  });
 }
 
 function rejectHandler(idOrDesc: string, isOther: boolean) {
@@ -218,22 +219,26 @@ function rejectHandler(idOrDesc: string, isOther: boolean) {
   //   approvd: false,
   //   taskComment: '',
   // }
-
   // if (isOther)
   //   param.taskComment = idOrDesc
   // else
   //   param.taskComment = idOrDesc
-
   // audit(param)
 }
 
-query(pagination.page, pagination.pageSize)
+query(pagination.page, pagination.pageSize);
 </script>
 
 <template>
   <div>
     <n-modal v-model:show="show" transform-origin="center">
-      <n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <n-card
+        class="cardstyle"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
         <div class="wrapper">
           <span class="wrapper-title">重复任务</span>
           <div class="wrapper-bar">
@@ -243,19 +248,25 @@ query(pagination.page, pagination.pageSize)
           </div>
           <div class="wrapper-content">
             <NDataTable
-              ref="tableRef" remote :columns="columnsRef" :scroll-x="1250" :max-height="maxHeight" :data="tableData"
-              :loading="loading" :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
-@update-page-size="handlePageSizeChange"
+              ref="tableRef"
+              remote
+              :columns="columnsRef"
+              :scroll-x="1250"
+              :max-height="maxHeight"
+              :data="tableData"
+              :loading="loading"
+              :pagination="pagination"
+              :row-key="rowKey"
+              @update:page="handlePageChange"
+              @update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
             />
           </div>
         </div>
         <template #footer>
           <div class="wrapper-footer">
-            <n-button type="info" @click="handleSumbit">
-              确认
-            </n-button>
-            <n-button secondary style="margin-left:15px" @click="closeModal">
+            <n-button type="info" @click="handleSumbit"> 确认 </n-button>
+            <n-button secondary style="margin-left: 15px" @click="closeModal">
               取消
             </n-button>
           </div>
@@ -284,7 +295,7 @@ query(pagination.page, pagination.pageSize)
 
   &-content {
     flex: auto;
-    background: #FFF;
+    background: #fff;
     margin-top: 20px;
   }
 
@@ -299,7 +310,7 @@ query(pagination.page, pagination.pageSize)
 
     &:before {
       background-color: #1980ff;
-      content: '';
+      content: "";
       width: 5px;
       border-radius: 2px;
       top: 0;
diff --git a/src/views/home/aside/comp/modals/CustomFilterModal.vue b/src/views/home/aside/comp/modals/CustomFilterModal.vue
index 814ca94..630dee1 100644
--- a/src/views/home/aside/comp/modals/CustomFilterModal.vue
+++ b/src/views/home/aside/comp/modals/CustomFilterModal.vue
@@ -407,6 +407,7 @@ onMounted(() => {
   &-info {
     font-weight: bold;
     position: relative;
+    font-size: 14px;
 
     &:before {
       background-color: #1980FF;
@@ -468,7 +469,8 @@ onMounted(() => {
   --n-padding-bottom: 12px;
 }
 ::v-deep(.n-card > .n-card-header .n-card-header__main){
-  font-weight: bolder !important;
+  font-weight: lighter !important;
+  font-size: 14px;
 }
 ::v-deep(.n-scrollbar){
   border-left: 1px solid #cad2dd !important;
@@ -491,5 +493,7 @@ onMounted(() => {
     height: 44px !important;
   }
 }
-
+::v-deep(.n-button--info-type){
+  background: #507AFD !important;
+}
 </style>
diff --git a/src/views/message/content/List.vue b/src/views/message/content/List.vue
index 565d9fc..1b1ccf2 100644
--- a/src/views/message/content/List.vue
+++ b/src/views/message/content/List.vue
@@ -43,7 +43,7 @@ const tab = ref(1)
 async function getList() {
   const res = await getMessageList({
     pageNo: state.pageNo,
-    pageSize: '10',
+    pageSize: '7',
     msgCategory: tab.value,
   })
   if (res.code === 'OK') {
diff --git a/src/views/task/modal/CustomFieldModal.vue b/src/views/task/modal/CustomFieldModal.vue
index 2b4635c..da71cb7 100644
--- a/src/views/task/modal/CustomFieldModal.vue
+++ b/src/views/task/modal/CustomFieldModal.vue
@@ -221,7 +221,7 @@ function removeHandler(id: string) {
   });
   if (index !== -1) onList.value.splice(index, 1);
 
-  index = offList.value.findIndex(v=>v.id==id);
+  index = offList.value.findIndex((v) => v.id == id);
   offList.value[index].checked = false;
 }
 
@@ -249,8 +249,8 @@ onMounted(async () => {
       fix: v.isrequired == 2,
       checked:
         v.isrequired == 2 ||
-        Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
-        Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
+        Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
+        Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
     };
     if (item.fix) {
       fixList.value.push(item);
@@ -274,8 +274,8 @@ onMounted(async () => {
       }
     }
   });
-  console.log(offList.value,'offList.value');
-  console.log(useList, 'useList');
+  console.log(offList.value, "offList.value");
+  console.log(useList, "useList");
 });
 </script>
 
@@ -377,6 +377,7 @@ onMounted(async () => {
                     :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
                   >
+                    <SvgIcon name="drag" size="24" />
                     <span class="ml-2">{{ item.name }}</span>
                     <SvgIcon
                       v-if="!item.fix"
@@ -408,14 +409,14 @@ onMounted(async () => {
 .wrapper {
   display: flex;
   flex-direction: column;
-
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
   &-title {
     font-weight: bold;
     font-size: 16px;
   }
 
   &-bar {
-    background-color: #e8e8e8;
     width: 100%;
     margin-top: 20px;
   }
@@ -428,6 +429,7 @@ onMounted(async () => {
   &-info {
     font-weight: bold;
     position: relative;
+    color: #333333;
 
     &:before {
       background-color: #1980ff;
@@ -476,10 +478,11 @@ onMounted(async () => {
   }
 
   .draggable-item {
-    padding: 10px 16px;
+    padding: 11px 16px;
     color: #333;
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #E8E8E8;
   }
 
   .disable-check {
@@ -487,9 +490,7 @@ onMounted(async () => {
   }
 }
 
-::v-deep(
-    .n-card.n-card--content-segmented > .n-card__content:not(:first-child)
-  ) {
+::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
   border: 0px;
 }
 
@@ -497,10 +498,11 @@ onMounted(async () => {
   --n-padding-top: 0px;
   --n-padding-bottom: 12px;
 }
-::v-deep(.n-card > .n-card-header .n-card-header__main){
+::v-deep(.n-card > .n-card-header .n-card-header__main) {
   font-weight: bolder !important;
 }
-::v-deep(.n-scrollbar){
+::v-deep(.n-scrollbar) {
   border-top: none !important;
 }
+
 </style>
diff --git a/src/views/task/modal/CustomSettingModal.vue b/src/views/task/modal/CustomSettingModal.vue
index f7713a0..bcd1cb4 100644
--- a/src/views/task/modal/CustomSettingModal.vue
+++ b/src/views/task/modal/CustomSettingModal.vue
@@ -215,6 +215,8 @@ function onCheckChange(checked: any, item: any) {
 .wrapper {
   display: flex;
   flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
 
   &-title {
     font-weight: bold;
@@ -222,7 +224,6 @@ function onCheckChange(checked: any, item: any) {
   }
 
   &-bar {
-    background-color: #e8e8e8;
     width: 100%;
     margin-top: 20px;
   }
@@ -235,6 +236,7 @@ function onCheckChange(checked: any, item: any) {
   &-info {
     font-weight: bold;
     position: relative;
+    color: #333333;
 
     &:before {
       background-color: #1980ff;
@@ -282,10 +284,11 @@ function onCheckChange(checked: any, item: any) {
   }
 
   .draggable-item {
-    padding: 10px 16px;
+    padding: 11px 16px;
     color: #333;
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #E8E8E8;
   }
 
   .disable-check {
@@ -303,4 +306,5 @@ function onCheckChange(checked: any, item: any) {
   --n-padding-top: 0px;
   --n-padding-bottom: 12px;
 }
+
 </style>
diff --git a/src/views/worksheet/aside/Aside.vue b/src/views/worksheet/aside/Aside.vue
index a93a52c..44a2200 100644
--- a/src/views/worksheet/aside/Aside.vue
+++ b/src/views/worksheet/aside/Aside.vue
@@ -266,5 +266,5 @@ const inputHandler = debounce((word) => {
     z-index: 10;
   }
 }
+
 </style>
-../types
diff --git a/src/views/worksheet/modal/CustomFieldModal copy.vue b/src/views/worksheet/modal/CustomFieldModal copy.vue
index 635b7b5..ff6366d 100644
--- a/src/views/worksheet/modal/CustomFieldModal copy.vue	
+++ b/src/views/worksheet/modal/CustomFieldModal copy.vue	
@@ -363,6 +363,7 @@ onMounted(async () => {
                     :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
                   >
+                  <SvgIcon name="drag" size="24"  />
                     <span class="ml-2">{{ item.name }}</span>
                     <SvgIcon
                       v-if="!item.fix"
@@ -394,6 +395,8 @@ onMounted(async () => {
 .wrapper {
   display: flex;
   flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
 
   &-title {
     font-weight: bold;
@@ -401,7 +404,6 @@ onMounted(async () => {
   }
 
   &-bar {
-    background-color: #e8e8e8;
     width: 100%;
     margin-top: 20px;
   }
@@ -414,6 +416,8 @@ onMounted(async () => {
   &-info {
     font-weight: bold;
     position: relative;
+    color: #333333;
+    font-size: 14px;
 
     &:before {
       background-color: #1980ff;
@@ -462,10 +466,11 @@ onMounted(async () => {
   }
 
   .draggable-item {
-    padding: 10px 16px;
+    padding: 11px 16px;
     color: #333;
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #E8E8E8;
   }
 
   .disable-check {
@@ -484,9 +489,13 @@ onMounted(async () => {
   --n-padding-bottom: 12px;
 }
 ::v-deep(.n-card > .n-card-header .n-card-header__main){
-  font-weight: bolder !important;
+  font-weight: lighter !important;
+  font-size: 14px;
 }
 ::v-deep(.n-scrollbar){
   border-top: none !important;
 }
+::v-deep(.n-button--info-type){
+  background: #507AFD !important;
+}
 </style>
diff --git a/src/views/worksheet/modal/CustomFieldModal.vue b/src/views/worksheet/modal/CustomFieldModal.vue
index fb45c8a..0bffa8d 100644
--- a/src/views/worksheet/modal/CustomFieldModal.vue
+++ b/src/views/worksheet/modal/CustomFieldModal.vue
@@ -377,6 +377,7 @@ onMounted(async () => {
                     :class="{ fix: item.fix }"
                     class="cursor-move draggable-item"
                   >
+                  <SvgIcon name="drag" size="24"  />
                     <span class="ml-2">{{ item.name }}</span>
                     <SvgIcon
                       v-if="!item.fix"
@@ -408,6 +409,8 @@ onMounted(async () => {
 .wrapper {
   display: flex;
   flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
 
   &-title {
     font-weight: bold;
@@ -415,7 +418,6 @@ onMounted(async () => {
   }
 
   &-bar {
-    background-color: #e8e8e8;
     width: 100%;
     margin-top: 20px;
   }
@@ -428,6 +430,8 @@ onMounted(async () => {
   &-info {
     font-weight: bold;
     position: relative;
+    color: #333333;
+    font-size: 14px;
 
     &:before {
       background-color: #1980ff;
@@ -476,10 +480,11 @@ onMounted(async () => {
   }
 
   .draggable-item {
-    padding: 10px 16px;
+    padding: 11px 16px;
     color: #333;
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #E8E8E8;
   }
 
   .disable-check {
@@ -498,9 +503,14 @@ onMounted(async () => {
   --n-padding-bottom: 12px;
 }
 ::v-deep(.n-card > .n-card-header .n-card-header__main){
-  font-weight: bolder !important;
+  font-weight: lighter !important;
+  font-size: 14px;
 }
 ::v-deep(.n-scrollbar){
   border-top: none !important;
 }
+::v-deep(.n-button--info-type){
+  background: #507AFD !important;
+}
+
 </style>