调整界面

调整脚本
增加功能：备份、恢复、清空

frontend/src/views/activate/index.vue

@@ -3,12 +3,23 @@
     <a-card style="margin-bottom: 5px" title="激活记录">
       <a-form ref="searchFormRef" :model="searchForm" layout="inline">
         <a-form-item label="mac地址" name="macAddress">
-          <a-input v-model:value="searchForm.macAddress" allow-clear autocomplete="off" placeholder="请输入mac地址"
-                   style="width: 200px"/>
+          <a-input
+            v-model:value="searchForm.macAddress"
+            allow-clear
+            autocomplete="off"
+            placeholder="请输入mac地址"
+            style="width: 200px"
+          />
         </a-form-item>
         <a-form-item label="激活模块" name="modules">
-          <a-select v-model:value="searchForm.modules" :max-tag-count="1" allow-clear mode="multiple"
-                    placeholder="全部" style="width: 200px">
+          <a-select
+            v-model:value="searchForm.modules"
+            :max-tag-count="1"
+            allow-clear
+            mode="multiple"
+            placeholder="全部"
+            style="width: 200px"
+          >
             <a-select-option value="simulate">模拟式模块</a-select-option>
             <a-select-option value="digital">数字式模块</a-select-option>
             <a-select-option value="contrast">比对式模块</a-select-option>
@@ -33,37 +44,87 @@
       </a-form>
     </a-card>
     <a-card>
-      <a-button style="margin-bottom: 10px;" type="primary" @click="visible = true">
-        <template #icon>
-          <file-protect-outlined/>
-        </template>
-        设备激活
-      </a-button>
-      <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="pagination" bordered
-               size="small">
+      <a-space style="margin-bottom: 10px;" wrap>
+        <a-button type="primary" @click="visible = true">
+          <template #icon>
+            <file-protect-outlined/>
+          </template>
+          设备激活
+        </a-button>
+        <a-button @click="backupData">
+          <template #icon>
+            <download-outlined/>
+          </template>
+          备份数据
+        </a-button>
+        <a-button @click="confirmImportBackup">
+          <template #icon>
+            <upload-outlined/>
+          </template>
+          导入备份
+        </a-button>
+        <a-button danger @click="confirmClearData">
+          <template #icon>
+            <delete-outlined/>
+          </template>
+          清空数据
+        </a-button>
+      </a-space>
+      <a-table
+        :columns="columns"
+        :dataSource="dataSource"
+        :loading="loading"
+        :pagination="pagination"
+        :rowKey="(record: any) => record.id"
+        bordered
+        size="small"
+      >
         <template #emptyText>
           <a-empty description="暂无记录"/>
         </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'module'">
-            <a-tag color="green" v-for="m in  record.module.split(',')">
+            <a-tag color="green" v-for="m in record.module.split(',')" :key="m">
               {{ m === 'simulate' ? '模拟式模块' : m === 'digital' ? '数字式模块' : '比对式模块' }}
             </a-tag>
           </template>
           <template v-else-if="column.key === 'action'">
-            <a-button type="primary" size="small" @click="copyToClipboard(record.activationCode)">
-              <template #icon>
-                <copy-outlined />
-              </template>
-              复制激活码
-            </a-button>
+            <a-space>
+              <a-button type="primary" size="small" @click="copyToClipboard(record.activationCode)">
+                <template #icon>
+                  <copy-outlined />
+                </template>
+                复制激活码
+              </a-button>
+              <a-popconfirm
+                title="确认删除这条记录吗？"
+                ok-text="删除"
+                cancel-text="取消"
+                @confirm="removeRecord(record.id)"
+              >
+                <a-button danger size="small">
+                  <template #icon>
+                    <delete-outlined />
+                  </template>
+                  删除
+                </a-button>
+              </a-popconfirm>
+            </a-space>
           </template>
         </template>
       </a-table>
     </a-card>
   </div>
 
-  <a-modal v-model:visible="visible" :keyboard="false" :mask-closable="false" centered destroy-on-close width="70%">
+  <a-modal
+    v-model:visible="visible"
+    :keyboard="false"
+    :mask-closable="false"
+    centered
+    destroy-on-close
+    width="940px"
+    wrapClassName="apple-activation-modal"
+  >
     <template #title>
       <file-protect-outlined/>
       设备激活
@@ -79,12 +140,11 @@
 </template>
 
 <script lang="ts" setup>
-import {FormInstance, message} from "ant-design-vue";
-import {onMounted, ref} from "vue";
+import { FormInstance, Modal, message } from "ant-design-vue";
+import { onMounted, ref } from "vue";
 import ActiveForm from "@/views/activate/ActiveForm.vue";
-import {ipc} from "@/utils/ipcRenderer";
-import {ipcApiRoute} from "@/api";
-
+import { ipc } from "@/utils/ipcRenderer";
+import { ipcApiRoute } from "@/api";
 
 const searchFormRef = ref<FormInstance>();
 const activateFormRef = ref();
@@ -94,15 +154,20 @@ const searchForm = ref({
 })
 const loading = ref(false)
 const visible = ref(false)
-const dataSource = ref<any []>([])
+const dataSource = ref<any[]>([])
 const pagination = ref({
   total: 0,
   pageSize: 10,
-  // current: 1,
   showTotal: (total: number) => `共 ${total} 条`
-
 })
 const columns = [
+  {
+    title: '申请方',
+    dataIndex: 'applicant',
+    key: 'applicant',
+    align: 'center',
+    width: 120,
+  },
   {
     title: 'mac地址',
     dataIndex: 'macAddress',
@@ -116,14 +181,14 @@ const columns = [
     key: 'applicationCode',
     align: 'center',
     ellipsis: true,
-    width: 100,
+    width: 120,
   },
   {
     title: '激活模块',
     dataIndex: 'module',
     key: 'module',
     align: 'center',
-    width: 250,
+    width: 220,
   },
   {
     title: '激活码',
@@ -131,7 +196,7 @@ const columns = [
     key: 'activationCode',
     align: 'center',
     ellipsis: true,
-    width: 100,
+    width: 120,
   },
   {
     title: '生成时间',
@@ -145,13 +210,13 @@ const columns = [
     dataIndex: 'remark',
     key: 'remark',
     align: 'center',
-    width: 100,
+    width: 120,
   },
   {
     title: '操作',
     key: 'action',
     align: 'center',
-    width: 120,
+    width: 220,
   },
 ]
 
@@ -163,6 +228,7 @@ const resetForm = () => {
 onMounted(() => {
   resetForm()
 })
+
 const query = () => {
   loading.value = true
   const params: any = {
@@ -171,7 +237,6 @@ const query = () => {
   }
   setTimeout(() => {
     ipc.invoke(ipcApiRoute.activateRecord.list, params).then((res: any[]) => {
-      console.log(res)
       dataSource.value = res
       pagination.value.total = dataSource.value.length
       pagination.value.current = 1
@@ -180,8 +245,9 @@ const query = () => {
       console.error(err)
       loading.value = false
     })
-  }, 500)
+  }, 300)
 }
+
 const save = () => {
   const data = activateFormRef.value.getData()
   if (!data) {
@@ -196,9 +262,79 @@ const save = () => {
     console.error(err)
     message.error('保存失败')
   })
-
 }
-// 复制到剪贴板
+
+const removeRecord = (id: number) => {
+  ipc.invoke(ipcApiRoute.activateRecord.removeById, { id }).then(() => {
+    message.success('删除成功')
+    query()
+  }).catch((err: any) => {
+    console.error(err)
+    message.error('删除失败')
+  })
+}
+
+const confirmClearData = () => {
+  Modal.confirm({
+    title: '确认清空全部数据吗？',
+    content: '清空后当前本地激活记录将被删除，请先确认是否需要备份。',
+    okText: '清空',
+    cancelText: '取消',
+    okButtonProps: {
+      danger: true
+    },
+    onOk: () => clearData()
+  })
+}
+
+const clearData = () => {
+  ipc.invoke(ipcApiRoute.activateRecord.clear).then(() => {
+    message.success('已清空本地数据')
+    query()
+  }).catch((err: any) => {
+    console.error(err)
+    message.error('清空失败')
+  })
+}
+
+const backupData = () => {
+  ipc.invoke(ipcApiRoute.activateRecord.backup).then((res: any) => {
+    if (res?.canceled) {
+      return
+    }
+    message.success(`备份成功，共导出 ${res.count} 条记录`)
+  }).catch((err: any) => {
+    console.error(err)
+    message.error('备份失败')
+  })
+}
+
+const confirmImportBackup = () => {
+  Modal.confirm({
+    title: '确认导入备份吗？',
+    content: '导入备份会先清空当前本地数据，再恢复备份内容。',
+    okText: '导入',
+    cancelText: '取消',
+    okButtonProps: {
+      danger: true
+    },
+    onOk: () => importBackup()
+  })
+}
+
+const importBackup = () => {
+  ipc.invoke(ipcApiRoute.activateRecord.importBackup).then((res: any) => {
+    if (res?.canceled) {
+      return
+    }
+    message.success(`导入成功，共恢复 ${res.count} 条记录`)
+    query()
+  }).catch((err: any) => {
+    console.error(err)
+    message.error('导入失败，请检查备份文件格式')
+  })
+}
+
 const copyToClipboard = (text: string) => {
   if (!text) {
     message.warning('没有内容可复制')
@@ -213,5 +349,52 @@ const copyToClipboard = (text: string) => {
 }
 </script>
 <style lang="less" scoped>
+:deep(.apple-activation-modal .ant-modal-content) {
+  border-radius: 30px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
+  background:
+    linear-gradient(180deg, rgba(250, 250, 252, 0.98), rgba(243, 245, 247, 0.98));
+}
 
+:deep(.apple-activation-modal .ant-modal-header) {
+  padding: 18px 24px 14px;
+  background: transparent;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+:deep(.apple-activation-modal .ant-modal-title) {
+  font-size: 18px;
+  font-weight: 650;
+  color: #111827;
+}
+
+:deep(.apple-activation-modal .ant-modal-body) {
+  padding: 12px 14px 8px;
+  background: transparent;
+  max-height: 76vh;
+  overflow-y: auto;
+}
+
+:deep(.apple-activation-modal .ant-modal-footer) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 20px 18px;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+  background: transparent;
+}
+
+:deep(.apple-activation-modal .ant-btn) {
+  min-width: 88px;
+  height: 38px;
+  border-radius: 12px;
+}
+
+:deep(.apple-activation-modal .ant-btn-primary) {
+  border: none;
+  background: linear-gradient(180deg, #0a84ff, #0071e3);
+  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.22);
+}
 </style>