feat: update

src/App.vue

@@ -23,7 +23,11 @@ const themeOverrides = {
   >
     <n-loading-bar-provider>
       <n-message-provider>
-        <RouterView />
+        <n-notification-provider>
+        <n-dialog-provider>
+          <RouterView />
+        </n-dialog-provider>
+        </n-notification-provider>
       </n-message-provider>
     </n-loading-bar-provider>
   </n-config-provider>

src/layout/components/menu/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <n-menu
-      inverted
-    :options="menuOptions"
-    :value="$route.path"
-  />
+  <n-menu inverted :options="menuOptions" :value="$route.path" />
 </template>
 
 <script setup>

src/layout/index.vue

@@ -20,12 +20,12 @@
       <n-layout-header class="h-16 px-6" bordered>
         <n-space justify="end" align="center" class="h-full">
           <n-dropdown trigger="hover" :options="options" @select="handleSelect">
-            <n-avatar round class="cursor-pointer"> 用户名 </n-avatar>
+            <n-avatar round class="cursor-pointer"> {{ username }} </n-avatar>
           </n-dropdown>
         </n-space>
       </n-layout-header>
       <n-layout-content
-        content-style="padding: 24px; background-color: #f5f7f9"
+        content-style="padding: 24px; background-color: #f0f2f5"
         :native-scrollbar="false"
       >
         <n-card
@@ -40,27 +40,39 @@
 </template>
 
 <script setup>
-import { darkTheme } from "naive-ui";
+import { darkTheme, NIcon } from "naive-ui";
 import MenuComponent from "@/layout/components/menu/index.vue";
 import { removeToken } from "@/utils/storage/sessionToken";
+import { LogoutOutlined as LogoutIcon } from "@vicons/antd";
 
 const router = useRouter();
 
 const message = useMessage();
 
+const username = window.sessionStorage.getItem("username");
+
+const renderIcon = (icon) => {
+  return () => {
+    return h(NIcon, null, {
+      default: () => h(icon),
+    });
+  };
+};
+
 // 下拉菜单传入的 options
 const options = [
   {
     label: "退出登录",
-    key: "/login",
+    key: "/logout",
+    icon: renderIcon(LogoutIcon),
   },
 ];
 
 // select 选中时触发的回调函数
-const handleSelect = (key) => {
+const handleSelect = () => {
   removeToken();
-  message.success("成功退出登录");
-  router.replace(key);
+  message.success("退出登录成功");
+  router.replace("/login");
 };
 </script>
 

src/login/index.vue

@@ -15,10 +15,7 @@
           label-placement="left"
         >
           <n-form-item path="username">
-            <n-input
-              v-model:value="formValue.username"
-              :maxlength="8"
-            >
+            <n-input v-model:value="formValue.username" :maxlength="8">
               <template #prefix>
                 <n-icon :component="UserOutlined" />
               </template>
@@ -67,6 +64,8 @@ const router = useRouter();
 
 const message = useMessage();
 
+const notification = useNotification();
+
 // 验证表项的规则
 const rules = {
   username: { required: true, message: "不能为空", trigger: "blur" },
@@ -100,11 +99,15 @@ const handleLogin = async () => {
           },
           formValue.role
         );
-        if (res.Code === 200) {
-          router.replace("/");
-          message.success(res.Msg);
-          setToken(res.Data);
-        }
+        router.replace("/");
+        notification.success({
+          content: `您好，${formValue.username}`,
+          meta: "欢迎登录",
+          duration: 2500,
+          keepAliveOnHover: true,
+        });
+        setToken(res.Data);
+        window.sessionStorage.setItem("username", formValue.username);
       } finally {
         loadingBar.finish();
       }

src/router/index.js

@@ -14,48 +14,78 @@ const router = createRouter({
         {
           path: "/project",
           component: () => import("@/views/project/index.vue"),
+          meta: {
+            text: "项目管理",
+          },
         },
         {
           path: "/certificate/:taskId",
           props: true,
           component: () => import("@/views/project/certificate/index.vue"),
+          meta: {
+            text: "校准证书",
+          },
         },
         {
           path: "/scheme/:taskId",
           props: true,
           component: () => import("@/views/project/scheme/index.vue"),
+          meta: {
+            text: "实施方案",
+          },
         },
         {
           path: "/equipment/:taskId",
           props: true,
           component: () => import("@/views/project/equipment/index.vue"),
+          meta: {
+            text: "设备管理",
+          },
         },
         {
           path: "/data_source",
           component: () => import("@/views/project/data/source/index.vue"),
+          meta: {
+            text: "数据来源",
+          },
         },
         {
           path: "/data_edit",
           component: () => import("@/views/project/data/edit/index.vue"),
+          meta: {
+            text: "数据编辑",
+          },
         },
         {
           path: "/data_checkout",
           component: () => import("@/views/project/data/checkout/index.vue"),
+          meta: {
+            text: "数据校验",
+          },
         },
         {
           path: "/report_create/:taskId",
           props: true,
           component: () => import("@/views/project/report/create/index.vue"),
+          meta: {
+            text: "报告生成",
+          },
         },
         {
           path: "/report_edit/:taskId",
           props: true,
           component: () => import("@/views/project/report/edit/index.vue"),
+          meta: {
+            text: "报告编辑",
+          },
         },
         {
           path: "/report_audit/:taskId",
           props: true,
           component: () => import("@/views/project/report/audit/index.vue"),
+          meta: {
+            text: "报告审核",
+          },
         },
       ],
     },

src/views/project/certificate/index.vue

@@ -1,25 +1,20 @@
 <template>
   <n-space vertical>
-    <n-page-header @back="() => $router.back()">
-      <template #title> 返回上一级 </template>
-      <template #header>
-        <n-breadcrumb>
-          <n-breadcrumb-item>任务管理</n-breadcrumb-item>
-          <n-breadcrumb-item>实施方案</n-breadcrumb-item>
-        </n-breadcrumb>
-      </template>
-      <n-descriptions bordered>
-        <n-descriptions-item label="报告名称">
-          {{ taskInfo.T_name }}
-        </n-descriptions-item>
-        <n-descriptions-item label="创建时间">
-          {{ taskInfo.CreateTime }}
-        </n-descriptions-item>
-        <n-descriptions-item label="修改时间">
-          {{ taskInfo.UpdateTime }}
-        </n-descriptions-item>
-      </n-descriptions>
-    </n-page-header>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>校准证书</n-breadcrumb-item>
+    </n-breadcrumb>
+    <n-descriptions bordered>
+      <n-descriptions-item label="报告名称">
+        {{ taskInfo.T_name }}
+      </n-descriptions-item>
+      <n-descriptions-item label="创建时间">
+        {{ taskInfo.CreateTime }}
+      </n-descriptions-item>
+      <n-descriptions-item label="修改时间">
+        {{ taskInfo.UpdateTime }}
+      </n-descriptions-item>
+    </n-descriptions>
     <n-grid x-gap="12" :cols="3">
       <n-gi>
         <n-list>
@@ -46,10 +41,10 @@
           </n-button>
         </n-space>
         <n-scrollbar style="max-height: 500px" trigger="none">
-        <vue-pdf-embed
-          ref="pdfRef"
-          source="https://pure-admin.github.io/pure-admin-doc/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf"
-        />
+          <vue-pdf-embed
+            ref="pdfRef"
+            source="https://pure-admin.github.io/pure-admin-doc/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf"
+          />
         </n-scrollbar>
       </n-gi>
     </n-grid>

src/views/project/data/checkout/index.vue

@@ -1,7 +1,57 @@
 <template>
-  <div></div>
+  <n-space vertical>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>数据校验</n-breadcrumb-item>
+    </n-breadcrumb>
+    <n-data-table
+      :key="(row) => row.Id"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+  </n-space>
 </template>
 
-<script setup></script>
+<script setup>
+// 需要展示的列
+const columns = [
+  {
+    title: "编号",
+    key: "T_id",
+  },
+  {
+    title: "SN",
+    key: "T_sn",
+  },
+  {
+    title: "数据量",
+    key: "T_id",
+  },
+  {
+    title: "时间间隔",
+    key: "T_sn",
+  },
+  {
+    title: "开始时间",
+    key: "T_id",
+  },
+  {
+    title: "结束时间",
+    key: "T_sn",
+  },
+  {
+    title: "结果",
+    key: "T_sn",
+  },
+];
 
-<style lang="scss" scoped></style>
+// 设备分类-设备列表
+const data = ref([
+]);
+
+const pagination = ref(false);
+</script>
+
+<style scoped></style>

src/views/project/data/edit/index.vue

@@ -1,71 +1,175 @@
 <template>
-  <div>
-    <highcharts
-      constructor-type="stockChart"
-      :options="chartOptions"
-    ></highcharts>
-  </div>
+  <n-space vertical>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>数据编辑</n-breadcrumb-item>
+    </n-breadcrumb>
+    <n-grid x-gap="12" :cols="4">
+      <n-gi>
+        <n-card>
+          <n-list>
+            <template #header>
+              <n-checkbox v-model:checked="value"> 全选 </n-checkbox>
+            </template>
+            <template #footer>
+              <n-space>
+                <n-button>全选</n-button>
+                <n-button>全选</n-button>
+                <n-button>全选</n-button>
+              </n-space>
+            </template>
+            <n-list-item>
+              <template #prefix>
+                <n-checkbox v-model:checked="value" />
+              </template>
+              <template #suffix>
+                <n-button text>删除</n-button>
+              </template>
+              123
+            </n-list-item>
+            <n-list-item>
+              <n-thing
+                title="Thing"
+                title-extra="extra"
+                description="description"
+              />
+            </n-list-item>
+          </n-list>
+        </n-card>
+      </n-gi>
+      <n-gi :span="3">
+        <n-space vertical>
+          <n-space>
+            <n-date-picker
+              v-model:value="range"
+              type="datetimerange"
+              clearable
+            />
+            <n-button type="primary">搜索</n-button>
+            <n-button type="primary">导出数据</n-button>
+            <n-button type="primary">导入数据</n-button>
+            <n-button type="primary">导入数（冷链平台）</n-button>
+            <n-button type="primary">添加数据</n-button>
+            <n-button type="primary">温湿度上下限设置</n-button>
+          </n-space>
+          <n-space>
+            <n-button type="primary">开箱时间</n-button>
+            <n-button type="primary">关箱时间</n-button>
+            <n-button type="primary">开门时间</n-button>
+            <n-button type="primary">开门结束时间</n-button>
+            <n-button type="primary">开箱测点选择</n-button>
+          </n-space>
+          <n-card>
+            <n-scrollbar style="max-height: 600px">
+              <highcharts
+                constructor-type="stockChart"
+                :options="chartOptions"
+              ></highcharts>
+              <highcharts
+                constructor-type="stockChart"
+                :options="chartOptions"
+              ></highcharts>
+            </n-scrollbar>
+          </n-card>
+        </n-space>
+      </n-gi>
+    </n-grid>
+  </n-space>
+  <n-modal
+    v-model:show="modal.showModal"
+    :show-icon="false"
+    preset="dialog"
+    :title="modal.title"
+    content="你确认?"
+    positive-text="确认"
+    negative-text="删除该节点"
+    :negative-button-props="{ type: 'error', onClick: handleDelete }"
+    @positive-click="submitCallback"
+  >
+    <n-form-item>
+      <n-input v-model:value="value" type="text" />
+    </n-form-item>
+  </n-modal>
 </template>
 
 <script setup>
-import data from "@/assets/data.json";
+const message = useMessage();
+
+const dialog = useDialog();
+const handleDelete = () => {
+  dialog.create({
+    content: "确定是否删除？",
+    positiveText: "确定",
+    negativeText: "取消",
+  });
+};
+
+const value = ref(false);
+
+const range = ref(null);
 
 const chartOptions = {
-  accessibility: { enabled: false },
-  chart: {
-    height: 400,
+  type: "line",
+
+  accessibility: {
+    enabled: false,
   },
 
   title: {
-    text: "Highcharts Stock Responsive Chart",
+    text: "Cumulative Sum",
+    align: "left",
   },
 
   subtitle: {
-    text: "Click small/large buttons or change window size to test responsiveness",
+    text: "Displays the sum of all the previous values and the current value (only within visible range)",
+    align: "left",
+  },
+
+  plotOptions: {
+    series: {
+      cumulative: true,
+      pointStart: Date.UTC(2021, 0, 1),
+      pointIntervalUnit: "day",
+    },
   },
 
   rangeSelector: {
-    selected: 1,
+    enabled: false,
+  },
+
+  tooltip: {
+    pointFormat:
+      '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.cumulativeSum})<br/>',
+    changeDecimals: 2,
+    valueDecimals: 2,
+  },
+
+  xAxis: {
+    minRange: 3 * 24 * 36e5,
+    max: Date.UTC(2021, 0, 6),
   },
 
   series: [
     {
-      name: "AAPL Stock Price",
-      data: data,
-      type: "area",
-      threshold: null,
-      tooltip: {
-        valueDecimals: 2,
-      },
       cursor: "pointer",
       events: {
-        click: (event) => {
-          console.log(event);
+        click: (p1) => {
+          console.log(p1);
         },
       },
+      data: [1, 2, 5, 10, 20, 50, 100, -100, 100, -100],
     },
   ],
+};
 
-  responsive: {
-    rules: [
-      {
-        condition: {
-          maxWidth: 500,
-        },
-        chartOptions: {
-          chart: {
-            height: 300,
-          },
-          subtitle: {
-            text: null,
-          },
-          navigator: {
-            enabled: false,
-          },
-        },
-      },
-    ],
-  },
+const modal = reactive({
+  showModal: false,
+  title: "",
+});
+
+// 执行 positive 时执行的回调函数
+const submitCallback = () => {
+  message.success("Submit");
 };
 </script>
 

src/views/project/data/source/index.vue

@@ -1,11 +1,14 @@
 <template>
   <n-space vertical>
-    <n-space justify="space-between">
-      <n-input-group>
-        <n-input style="width: 300px" placeholder="请输入项目名称" />
-        <n-button type="primary"> 搜索 </n-button>
-      </n-input-group>
-      <n-button type="primary" @click="handleAdd">新增</n-button>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>数据来源</n-breadcrumb-item>
+    </n-breadcrumb>
+    <n-space>
+      <n-space align="center">
+        <span>SN</span>
+        <n-input v-model:value="queryData.inputValue" />
+      </n-space>
     </n-space>
     <n-data-table
       :columns="columns"
@@ -50,7 +53,7 @@
 import { h } from "vue";
 import { NButton, NSpace } from "naive-ui";
 
-const createColumns = ({ goToView }) => {
+const createColumns = () => {
   return [
     {
       title: "项目名称",
@@ -108,12 +111,8 @@ const modal = reactive({
 const submitCallback = () => {
   console.log("确定");
 };
-const handleAdd = () => {
-  modal.showModal = true;
-  modal.title = "新增";
-};
 
-const form = reactive({
+const queryData = reactive({
   inputValue: "",
   textareaValue: "",
 });

src/views/project/equipment/index.vue

@@ -1,29 +1,22 @@
 <template>
   <n-space vertical>
-    <n-page-header @back="() => $router.back()">
-      <template #title> 返回上一级 </template>
-      <template #header>
-        <n-breadcrumb>
-          <n-breadcrumb-item>任务管理</n-breadcrumb-item>
-          <n-breadcrumb-item>设备管理</n-breadcrumb-item>
-        </n-breadcrumb>
-      </template>
-      <template #extra>
-        <n-button type="primary" @click="showAddModal">批量导入</n-button>
-      </template>
-      <n-space justify="space-between">
-        <n-input-group>
-          <n-input
-            style="width: 300px"
-            v-model:value="queryData.T_sn"
-            @clear="handleClear"
-            clearable
-            placeholder="请输入SN"
-          />
-          <n-button type="primary" @click="getDeviceClassListDataList">
-            搜索
-          </n-button>
-        </n-input-group>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>设备管理</n-breadcrumb-item>
+    </n-breadcrumb>
+    <n-space justify="space-between">
+      <n-input-group>
+        <n-input
+          style="width: 300px"
+          v-model:value="queryData.T_sn"
+          @clear="handleClear"
+          clearable
+        />
+        <n-button type="primary" @click="getDeviceClassListDataList">
+          搜索
+        </n-button>
+      </n-input-group>
+      <n-space>
         <n-space align="center">
           <span>分类名称 </span>
           <n-input-group>
@@ -40,8 +33,9 @@
             </n-popconfirm>
           </n-input-group>
         </n-space>
+        <n-button type="primary" @click="showAddModal">批量导入</n-button>
       </n-space>
-    </n-page-header>
+    </n-space>
     <n-data-table
       :key="(row) => row.Id"
       :columns="columns"

src/views/project/report/audit/index.vue

@@ -1,29 +1,24 @@
 <template>
   <n-space vertical>
-    <n-page-header @back="() => $router.back()">
-      <template #title> 返回上一级 </template>
-      <template #header>
-        <n-breadcrumb>
-          <n-breadcrumb-item>任务管理</n-breadcrumb-item>
-          <n-breadcrumb-item>报告审核</n-breadcrumb-item>
-        </n-breadcrumb>
-      </template>
-      <template #extra>
-        <n-button type="primary">审核</n-button>
-      </template>
-      <n-descriptions bordered>
-        <n-descriptions-item label="报告名称">
-          {{ taskInfo.T_name }}
-        </n-descriptions-item>
-        <n-descriptions-item label="创建时间">
-          {{ taskInfo.CreateTime }}
-        </n-descriptions-item>
-        <n-descriptions-item label="修改时间">
-          {{ taskInfo.UpdateTime }}
-        </n-descriptions-item>
-      </n-descriptions>
-    </n-page-header>
-    <n-tabs type="segment">
+    <n-space justify="space-between">
+      <n-breadcrumb>
+        <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+        <n-breadcrumb-item>报告审核</n-breadcrumb-item>
+      </n-breadcrumb>
+      <n-button type="primary">审核</n-button>
+    </n-space>
+    <n-descriptions bordered>
+      <n-descriptions-item label="报告名称">
+        {{ taskInfo.T_name }}
+      </n-descriptions-item>
+      <n-descriptions-item label="创建时间">
+        {{ taskInfo.CreateTime }}
+      </n-descriptions-item>
+      <n-descriptions-item label="修改时间">
+        {{ taskInfo.UpdateTime }}
+      </n-descriptions-item>
+    </n-descriptions>
+    <n-tabs type="segment" animated size="large">
       <n-tab-pane name="chap1" tab="验证报告内容">
         <n-space justify="end">
           <n-button text style="font-size: 24px" @click="onPrint">
@@ -32,7 +27,7 @@
             </n-icon>
           </n-button>
         </n-space>
-        <n-scrollbar style="max-height: 400px" trigger="none">
+        <n-scrollbar style="max-height: 450px" trigger="none">
           <vue-pdf-embed
             ref="pdfRef"
             source="https://pure-admin.github.io/pure-admin-doc/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf"
@@ -181,4 +176,4 @@ getUpFileToken();
 getTaskInfo();
 </script>
 
-<style scoped></style>
+<style scoped lang="scss"></style>

src/views/project/report/create/index.vue

@@ -1,14 +1,9 @@
 <template>
   <n-space vertical>
-    <n-page-header @back="() => $router.back()">
-      <template #title> 返回上一级 </template>
-      <template #header>
-        <n-breadcrumb>
-          <n-breadcrumb-item>任务管理1</n-breadcrumb-item>
-          <n-breadcrumb-item>实施方案</n-breadcrumb-item>
-        </n-breadcrumb>
-      </template>
-    </n-page-header>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>报告生成</n-breadcrumb-item>
+    </n-breadcrumb>
     <n-scrollbar style="max-height: 650px">
       <div class="w-1/2 mx-auto">
         <n-form

src/views/project/scheme/index.vue

@@ -1,14 +1,9 @@
 <template>
   <n-space vertical>
-    <n-page-header @back="() => $router.back()">
-      <template #title> 返回上一级 </template>
-      <template #header>
-        <n-breadcrumb>
-          <n-breadcrumb-item>任务管理1</n-breadcrumb-item>
-          <n-breadcrumb-item>实施方案</n-breadcrumb-item>
-        </n-breadcrumb>
-      </template>
-    </n-page-header>
+    <n-breadcrumb>
+      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+      <n-breadcrumb-item>实施方案</n-breadcrumb-item>
+    </n-breadcrumb>
     <n-scrollbar style="max-height: 650px">
       <div class="w-1/2 mx-auto">
         <n-form
@@ -28,14 +23,24 @@
               :path="item.T_field"
               v-if="item.T_label === 3"
             >
-              <n-select
-                v-model:value="formValue.selectedValue"
+              <n-popselect
+                v-model:value="value"
+                multiple
                 :options="options"
-              />
+                :render-label="renderLabel"
+              >
+                <n-button>
+                  {{
+                    Array.isArray(value) && value.length
+                      ? value.join(" | ")
+                      : "选择"
+                  }}
+                </n-button>
+              </n-popselect>
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -54,7 +59,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -68,7 +73,6 @@
               v-else-if="item.T_label === 7"
             >
               <n-date-picker
-                class="w-full"
                 v-model:formatted-value="formValue.formattedValue"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 type="datetime"
@@ -77,7 +81,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -90,7 +94,6 @@
               v-else-if="item.T_label === 9"
             >
               <n-date-picker
-                class="w-full"
                 v-model:formatted-value="formValue.formattedValue"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 v-model:value="formValue.formattedValue"
@@ -100,7 +103,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -118,7 +121,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -136,7 +139,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -147,7 +150,7 @@
               <n-popover trigger="hover">
                 <template #trigger>
                   <n-icon size="20" class="ml-3">
-                    <question-icon />
+                    <QuestionCircleOutlined />
                   </n-icon>
                 </template>
                 <n-image width="200" :src="item.T_text" />
@@ -172,13 +175,21 @@
 </template>
 
 <script setup>
+import { h } from "vue";
 import { getVerifyTemplateMapData } from "@/api";
-import { QuestionCircleOutlined as QuestionIcon } from "@vicons/antd";
+import { QuestionCircleOutlined } from "@vicons/antd";
+import { NThing } from "naive-ui";
+
+const renderLabel = () => {
+  return h(NThing, {}, { avatar: () => "avatar", header: () => "title", description: () => "description" });
+};
 
 const props = defineProps({
   taskId: String,
 });
 
+const value = ref(null);
+
 // 表单信息
 const formValue = reactive({
   textValue: null,
@@ -194,7 +205,6 @@ const options = [
   {
     label: "Everybody's Got Something to Hide Except Me and My Monkey",
     value: "song0",
-    disabled: true,
   },
   {
     label: "Drive My Car",