# 开发服务页

1. 引入ANTD NAIVEUI
2. 调试增查
3. 固定表头

.env

@@ -1,4 +1,4 @@
-VITE_HOME_REDIRECT = '/home' # 默认路由
+VITE_HOME_REDIRECT = '/service' # 默认路由
 VITE_TITLE = '星撰玉衡' # 项目名称
 VITE_BASE_URL = '/api' # 请求默认前缀
 VITE_HTTP_TIMEOUT = 30000

.eslintrc.cjs

@@ -31,19 +31,13 @@ module.exports = {
         'no-unused-expressions': 'error', // 禁止使用未使用的表达式
         'no-console': 'error', // 禁止使用console
         'semi': ['error', 'always'], // 启用 semi 规则，要求语句后总是使用分号，并将其设置为错误
-        // "new-cap": "error", //要求使用 new 关键字创建的实例的构造函数名必须大写。
         'no-const-assign': 'error', //禁止给 const 声明的变量赋值
-        'no-duplicate-case': 'error', // 禁止 switch 语句中出现重复的 case
-        'no-extra-parens': 'error', // 限制不必要的括号
-        'no-fallthrough': 'error', //：禁止 switch 语句中的穿透行为
         'no-multi-spaces': 'error', //禁止使用多个空格。
         'no-trailing-spaces': 'error', //：禁止行尾有空格。
         'no-undef': 'error', //：禁止使用未声明的变量。
-        'no-undef-init': 'error', //禁止初始化变量时使用 undefined。
         'no-empty': 2, //块语句中的内容不能为空
         'no-extra-semi': 2, //禁止多余的冒号
         'no-func-assign': 2, //禁止重复的函数声明
-        'no-inline-comments': 2, //禁止行内备注
         'space-before-function-paren': [
             'error',
             {
@@ -58,21 +52,7 @@ module.exports = {
         'no-nested-ternary': 0, //禁止使用嵌套的三目运算
         'no-redeclare': 2, //禁止重复声明变量
         'no-shadow': 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
-        // 'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], //不能有声明后未被使用的变量或参数
-        'no-use-before-define': 2, //未定义前不能使用
         'no-mixed-spaces-and-tabs': 'error', // 禁止在代码中混用空格和制表符
-        'lines-around-comment': [
+
-            'error',
-            {
-                beforeBlockComment: true, // beforeBlockComment: 在块级注释（以 /* 开头）之前需要有空行。
-                afterBlockComment: false, // afterBlockComment: 在块级注释之后需要有空行。
-                beforeLineComment: true, // beforeLineComment: 在行注释（以 // 开头）之前需要有空行。
-                afterLineComment: false, // afterLineComment: 在行注释之后需要有空行。
-                allowBlockStart: true, // allowBlockStart: 允许块级注释紧跟在函数或块的开始。
-                allowClassStart: true, // allowClassStart: 允许块级注释紧跟在类定义的开始。
-                allowObjectStart: true, // allowObjectStart: 允许块级注释紧跟在对象字面量的开始。
-                allowArrayStart: true // allowArrayStart: 允许块级注释紧跟在数组字面量的开始。
-            }
-        ]
     }
 };

package.json

@@ -11,6 +11,7 @@
         "format": "prettier --write src/"
     },
     "dependencies": {
+        "ant-design-vue": "4.x",
         "axios": "^1.7.2",
         "dayjs": "^1.11.11",
         "naive-ui": "^2.38.2",
@@ -23,6 +24,7 @@
     },
     "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
+        "@vicons/ionicons5": "^0.12.0",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vitejs/plugin-vue-jsx": "^4.0.0",
         "@vue/eslint-config-prettier": "^9.0.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      ant-design-vue:
+        specifier: 4.x
+        version: 4.2.3(vue@3.4.31)
       axios:
         specifier: ^1.7.2
         version: 1.7.2
@@ -39,6 +42,9 @@ importers:
       '@rushstack/eslint-patch':
         specifier: ^1.8.0
         version: 1.10.3
+      '@vicons/ionicons5':
+        specifier: ^0.12.0
+        version: 0.12.0
       '@vitejs/plugin-vue':
         specifier: ^5.0.5
         version: 5.0.5(vite@5.3.2(sass@1.77.6))(vue@3.4.31)
@@ -70,6 +76,17 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@ant-design/colors@6.0.0':
+    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
+
+  '@ant-design/icons-svg@4.4.2':
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+
+  '@ant-design/icons-vue@7.0.1':
+    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
+    peerDependencies:
+      vue: '>=3.0.3'
+
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
@@ -251,9 +268,19 @@ packages:
     peerDependencies:
       vue: ^3.0.11
 
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
   '@emotion/hash@0.8.0':
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
 
+  '@emotion/hash@0.9.1':
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -564,6 +591,9 @@ packages:
   '@rushstack/eslint-patch@1.10.3':
     resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
 
+  '@simonwep/pickr@1.8.2':
+    resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -579,6 +609,9 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@vicons/ionicons5@0.12.0':
+    resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
+
   '@vitejs/plugin-vue-jsx@4.0.0':
     resolution: {integrity: sha512-A+6wL2AdQhDsLsDnY+2v4rRDI1HLJGIMc97a8FURO9tqKsH5QvjWrzsa5DH3NlZsM742W2wODl2fF+bfcTWtXw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -687,6 +720,12 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ant-design-vue@4.2.3:
+    resolution: {integrity: sha512-kqGyWvZtFlSInFP93Ow6wS8LzEsxxUgpI+ZY5jQQkuX8WAcqdwXCA7IcHMpECW6JB89DZMo2Bw85jUg2SjlgQA==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -694,6 +733,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  array-tree-filter@2.1.0:
+    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
+
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
@@ -782,6 +824,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  compute-scroll-into-view@1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -792,6 +837,9 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
+  core-js@3.37.1:
+    resolution: {integrity: sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -854,6 +902,12 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-align@1.12.4:
+    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
+
+  dom-scroll-into-view@2.0.1:
+    resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
+
   electron-to-chromium@1.4.815:
     resolution: {integrity: sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==}
 
@@ -1133,6 +1187,10 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-plain-object@3.0.1:
+    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
+    engines: {node: '>=0.10.0'}
+
   is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1200,6 +1258,10 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1244,6 +1306,9 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanopop@2.4.2:
+    resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -1399,6 +1464,9 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1439,6 +1507,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  scroll-into-view-if-needed@2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+
   seemly@0.3.8:
     resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
 
@@ -1451,6 +1522,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -1497,6 +1571,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  stylis@4.3.2:
+    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
+
   superjson@2.2.1:
     resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
     engines: {node: '>=16'}
@@ -1522,6 +1599,10 @@ packages:
   thread-stream@3.1.0:
     resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
 
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
   to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1653,6 +1734,12 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-types@3.0.2:
+    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
+    engines: {node: '>=10.15.0'}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue@3.4.31:
     resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
     peerDependencies:
@@ -1666,6 +1753,9 @@ packages:
     peerDependencies:
       vue: ^3.0.11
 
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1696,6 +1786,18 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@ant-design/colors@6.0.0':
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+
+  '@ant-design/icons-svg@4.4.2': {}
+
+  '@ant-design/icons-vue@7.0.1(vue@3.4.31)':
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.4.2
+      vue: 3.4.31
+
   '@antfu/utils@0.7.10': {}
 
   '@babel/code-frame@7.24.7':
@@ -1939,8 +2041,14 @@ snapshots:
     dependencies:
       vue: 3.4.31
 
+  '@ctrl/tinycolor@3.6.1': {}
+
   '@emotion/hash@0.8.0': {}
 
+  '@emotion/hash@0.9.1': {}
+
+  '@emotion/unitless@0.8.1': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -2138,6 +2246,11 @@ snapshots:
 
   '@rushstack/eslint-patch@1.10.3': {}
 
+  '@simonwep/pickr@1.8.2':
+    dependencies:
+      core-js: 3.37.1
+      nanopop: 2.4.2
+
   '@types/estree@1.0.5': {}
 
   '@types/katex@0.16.7': {}
@@ -2150,6 +2263,8 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@vicons/ionicons5@0.12.0': {}
+
   '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.2(sass@1.77.6))(vue@3.4.31)':
     dependencies:
       '@babel/core': 7.24.7
@@ -2312,6 +2427,32 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ant-design-vue@4.2.3(vue@3.4.31):
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 7.0.1(vue@3.4.31)
+      '@babel/runtime': 7.24.7
+      '@ctrl/tinycolor': 3.6.1
+      '@emotion/hash': 0.9.1
+      '@emotion/unitless': 0.8.1
+      '@simonwep/pickr': 1.8.2
+      array-tree-filter: 2.1.0
+      async-validator: 4.2.5
+      csstype: 3.1.3
+      dayjs: 1.11.11
+      dom-align: 1.12.4
+      dom-scroll-into-view: 2.0.1
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+      shallow-equal: 1.2.1
+      stylis: 4.3.2
+      throttle-debounce: 5.0.2
+      vue: 3.4.31
+      vue-types: 3.0.2(vue@3.4.31)
+      warning: 4.0.3
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -2319,6 +2460,8 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  array-tree-filter@2.1.0: {}
+
   async-validator@4.2.5: {}
 
   asynckit@0.4.0: {}
@@ -2413,6 +2556,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  compute-scroll-into-view@1.0.20: {}
+
   concat-map@0.0.1: {}
 
   convert-source-map@2.0.0: {}
@@ -2421,6 +2566,8 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
+  core-js@3.37.1: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -2469,6 +2616,10 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-align@1.12.4: {}
+
+  dom-scroll-into-view@2.0.1: {}
+
   electron-to-chromium@1.4.815: {}
 
   entities@4.5.0: {}
@@ -2759,6 +2910,8 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-plain-object@3.0.1: {}
+
   is-stream@3.0.0: {}
 
   is-what@4.1.16: {}
@@ -2812,6 +2965,10 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -2865,6 +3022,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanopop@2.4.2: {}
+
   natural-compare@1.4.0: {}
 
   node-releases@2.0.14: {}
@@ -3007,6 +3166,8 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-from@4.0.0: {}
 
   reusify@1.0.4: {}
@@ -3055,12 +3216,18 @@ snapshots:
       immutable: 4.3.6
       source-map-js: 1.2.0
 
+  scroll-into-view-if-needed@2.2.31:
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+
   seemly@0.3.8: {}
 
   semver@6.3.1: {}
 
   semver@7.6.2: {}
 
+  shallow-equal@1.2.1: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -3097,6 +3264,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  stylis@4.3.2: {}
+
   superjson@2.2.1:
     dependencies:
       copy-anything: 3.0.5
@@ -3122,6 +3291,8 @@ snapshots:
     dependencies:
       real-require: 0.2.0
 
+  throttle-debounce@5.0.2: {}
+
   to-fast-properties@2.0.0: {}
 
   to-regex-range@5.0.1:
@@ -3248,6 +3419,11 @@ snapshots:
       '@vue/devtools-api': 6.6.3
       vue: 3.4.31
 
+  vue-types@3.0.2(vue@3.4.31):
+    dependencies:
+      is-plain-object: 3.0.1
+      vue: 3.4.31
+
   vue@3.4.31:
     dependencies:
       '@vue/compiler-dom': 3.4.31
@@ -3267,6 +3443,10 @@ snapshots:
       vooks: 0.2.12(vue@3.4.31)
       vue: 3.4.31
 
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0

src/App.vue

@@ -1,9 +1,18 @@
 <script setup>
+import { ref } from 'vue';
 import { RouterView } from 'vue-router';
+import {NMessageProvider} from 'naive-ui';
+import {ConfigProvider} from 'ant-design-vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+const local = ref(zhCN);
 </script>
 
 <template>
+    <NMessageProvider>
+        <ConfigProvider :locale="zhCN">
             <RouterView />
+        </ConfigProvider>
+    </NMessageProvider>
 </template>
 
 <style scoped></style>

src/api/Core/CoreService/index.js

@@ -0,0 +1,72 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-hotok】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: index.js -
+// | @创建时间: 2024-07-01 21:50
+// | @更新时间: 2024-07-01 21:50
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+
+import HTTP from '@/api/http.js';
+import { PageData } from '@utils/DefaultData.js';
+
+export const CoreService = {
+    /**
+     * Name: createService
+     * Desc: 新增服务
+     * Time: 2024-07-01 22:00:17 -
+     * */
+    createService: async (data) => {
+        return HTTP({
+            method: 'post',
+            url: '/coreservice',
+            data,
+        });
+    },
+
+    /**
+     * Name: getService
+     * Desc: 获取服务的分页或列表
+     * Time: 2024-07-01 21:58:09 -
+     * */
+    getService: async (params = {
+        ...PageData,
+        serviceInfo: undefined
+    }) => {
+        return HTTP({
+            method: 'get',
+            url: '/coreservice',
+            params
+        });
+    },
+
+    /**
+     * Name: removeService
+     * Desc: 删除服务
+     * Time: 2024-07-01 21:58:09 -
+     * */
+    removeService: async (serviceKey) => {
+        return HTTP({
+            method: 'delete',
+            url: `/coreservice/${serviceKey}`,
+        });
+    },
+
+    /**
+     * Name: updateService
+     * Desc: 编辑服务
+     * Time: 2024-07-01 21:58:09 -
+     * */
+    updateService: async (serviceKey, data) => {
+        return HTTP({
+            method: 'patch',
+            url: `/coreservice/${serviceKey}`,
+            data
+        });
+    },
+};

src/api/http.js

@@ -14,7 +14,7 @@
 import axios from 'axios';
 import { createDiscreteApi } from 'naive-ui';
 import { useSystemStore } from '@/stores/system.js';
-import { Sign } from '@/api/AuthUser/Sign.js';
+import { Sign } from '@/api/index.js';
 
 const naiveui = createDiscreteApi(['message']);
 const Message = naiveui.message;

src/api/index.js

@@ -10,7 +10,8 @@
 // | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
 // | =
 // | ------------------------------------------------------------
-import { Sign } from '@/api/AuthUser/Sign.js';
+import { Sign } from '@/api/Auth/AuthUser/Sign.js';
-import { DefaultSign } from '@/api/AuthUser/index.js';
+import { DefaultSign } from '@/api/Auth/AuthUser/index.js';
+import { CoreService } from '@/api/Core/CoreService/index.js';
 
-export { Sign, DefaultSign };
+export { Sign, DefaultSign, CoreService };

src/assets/custom.css

@@ -0,0 +1,6 @@
+.ant-pagination-options-size-changer{
+    width: 100px;
+}
+.ant-select-selection-item{
+    text-align: center;
+}

src/assets/main.css

@@ -1,5 +1,6 @@
 @import './base.css';
-@import 'pacman.css';
+@import './pacman.css';
+@import './custom.css';
 
 html,
 body {

src/components/ModalTemplate/index.vue

@@ -0,0 +1,110 @@
+<script setup name="ModalTemplate">
+import { inject } from 'vue';
+
+// 定义 props
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+// 定义 emit 事件
+const emit = defineEmits(['update:show']);
+
+// 关闭按钮的点击事件处理函数
+const close = () => {
+    // 触发 update:isOpen 事件，通知父组件更新 isOpen 的值
+    emit('update:show', false);
+};
+const closeButtonColor = inject('closeButtonColor', '#333');
+import { Close, At } from '@vicons/ionicons5';
+</script>
+
+<template>
+    <div class="ModalTemplate">
+        <header>
+            <div class="title">
+                <div class="titleIcon">
+                    <slot name="titleIcon">
+                        <NIcon size="20">
+                            <At />
+                        </NIcon>
+                    </slot>
+                </div>
+
+                <slot name="title"></slot>
+            </div>
+            <div class="close">
+                <NButton secondary strong circle @click="close">
+                    <template #icon>
+                        <NIcon size="20" :color="closeButtonColor">
+                            <Close />
+                        </NIcon>
+                    </template>
+                </NButton>
+            </div>
+        </header>
+        <main>
+            <slot name="main"></slot>
+        </main>
+        <footer>
+            <div>
+                <slot name="footer"></slot>
+            </div>
+        </footer>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ModalTemplate {
+    position: relative;
+    padding: 25px;
+    border-radius: 5px;
+    background: #fefefe;
+    max-height: 80vh;
+    min-height: 280px;
+    min-width: 500px;
+    display: flex;
+    flex-direction: column;
+    & > header {
+        position: relative;
+        flex-shrink: 0;
+        display: flex;
+        user-select: none;
+        & > div.title {
+            position: relative;
+            flex: 1;
+            font-size: 20px;
+            display: flex;
+            & > div.titleIcon {
+                position: relative;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding-right: 5px;
+            }
+        }
+        & > div.close {
+            position: relative;
+            flex-shrink: 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+    & > main {
+        position: relative;
+        flex: 1;
+        overflow: auto;
+        margin: 20px 0;
+    }
+    & > footer {
+        position: relative;
+        display: flex;
+        flex-direction: row-reverse;
+    }
+}
+</style>

src/components/WorkConatiner/example.vue

@@ -0,0 +1,23 @@
+<script setup name="WorkContainerExample">
+import WorkConatiner from './WorkConatiner.vue';
+// 示例
+</script>
+
+
+<template>
+    <div>
+        <WorkConatiner>
+            <template v-slot:header>这是头部</template>
+            <template v-slot:main>这是主要内容</template>
+            <template v-slot:footer>这是脚部</template>
+        </WorkConatiner>
+
+        <WorkConatiner>
+            <template #header>这是头部</template>
+            <template #main>这是主要内容</template>
+            <template #footer>这是脚部</template>
+        </WorkConatiner>
+    </div>
+</template>
+
+<style scoped></style>

src/components/WorkConatiner/index.vue

@@ -0,0 +1,53 @@
+<script setup name="WorkConatiner">
+</script>
+
+<template>
+    <div class="workContainer">
+        <header>
+            <slot name="header">
+<!--                <slot name="headerBase"></slot>-->
+            </slot>
+        </header>
+        <main>
+            <slot name="main"></slot>
+        </main>
+        <footer>
+            <slot name="footer"></slot>
+        </footer>
+        <div>
+            <slot name="modal"></slot>
+        </div>
+    </div>
+</template>
+<style scoped lang="scss">
+.workContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    box-sizing: border-box;
+    & > header {
+        position: relative;
+        flex-shrink: 0;
+        margin-bottom: 20px;
+    }
+    & > main {
+        position: relative;
+        width: 100%;
+        //height: 100%;
+        max-height: 100%;
+        flex: 1;
+        overflow: auto;
+    }
+    & > footer {
+        position: relative;
+        flex-shrink: 0;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: row-reverse;
+    }
+}
+</style>

src/main.js

@@ -2,16 +2,27 @@ import './assets/main.css';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import Pino from 'pino';
+// ! NAIVEUI
+import { NButton, NIcon, NTable, NModal, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
+// ! ANTD
+import * as Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
+// ! ANTD 国际化
+// import zhCN from 'ant-design-vue/es/locale/zh_CN';
+// import dayjs from 'dayjs';
+// import 'dayjs/locale/zh-cn';
+// dayjs.locale('zh-cn');
 
+// ! 自定义的组件
+import ModalTemplate from '@/components/ModalTemplate/index.vue';
+// ! 日志记录
+import Pino from 'pino';
 window.pino = new Pino();
 
-
 import App from './App.vue';
 import createRoutering from './router';
 import authRouter from '@/router/authorization.js';
 
-
 const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
@@ -19,7 +30,50 @@ app.use(pinia);
 const router = createRoutering();
 app.use(router);
 app.use(authRouter, {
-    router
+    router,
 });
-
+setNaiveUIGlobal(app);
+setCustomComponentsGlobal(app);
+setGlobal(app);
+setAntDesignVueGlobal(app);
 app.mount('#app');
+
+// ! 设置NaiveUI的全局组件
+function setNaiveUIGlobal(app) {
+    // ! 按钮
+    app.component('NButton', NButton);
+    // ! 图标夹
+    app.component('NIcon', NIcon);
+    // ! 表格
+    app.component('NTable', NTable);
+    // ! 模态框
+    app.component('NModal', NModal);
+    // ! 表单
+    app.component('NForm', NForm);
+    // ! 表单项
+    app.component('NFormItem', NFormItem);
+    // ! 输入框
+    app.component('NInput', NInput);
+    // ! 间距
+    app.component('NSpace', NSpace);
+}
+
+// ! 设置AntDesignVue的全局组件
+function setAntDesignVueGlobal(app) {
+    // ! 表格
+    app.component('ATable', Antd.Table);
+    // ! 分页
+    app.component('APagination', Antd.Pagination);
+}
+
+// ! 自定义的组件挂载到全局
+function setCustomComponentsGlobal(app) {
+    // ! 模态框框架
+    app.component('ModalTemplate', ModalTemplate);
+}
+
+// ! Vue的一些全局变量
+function setGlobal(app) {
+    // ! 关闭按钮的颜色
+    app.provide('closeButtonColor', '#d03050');
+}

src/router/index.js

@@ -20,6 +20,15 @@ export default function createRoutering() {
                 name: 'SignIn',
                 component: () => import('@/views/SignIn/index.vue'),
             },
+            {
+                path: '/service',
+                name: 'Service',
+                meta:{
+                    title: '服务管理',
+                    icon: ''
+                },
+                component: () => import('@/views/Auth/Service/index.vue')
+            },
             {
                 path: '/about',
                 name: 'about',

src/stores/system.js

@@ -72,6 +72,7 @@ export const useSystemStore = defineStore('system', () => {
     const setNewToken = (newToken) => {
         window.sessionStorage.setItem('token', newToken);
         token.value = newToken;
+        window.pino.info(newToken);
     };
 
     return {

src/utils/DefaultData.js

@@ -0,0 +1,20 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-hotok】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: DefaultData.js -
+// | @创建时间: 2024-07-01 21:53
+// | @更新时间: 2024-07-01 21:53
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+// ! 用于接口请求时的默认数据，分页、列表
+export const PageData = {
+    pageNumber: 1,
+    pageSize: 10, // 最大200条每页
+    isList: false,
+    isAsc: false,
+};

src/views/Auth/Service/index.vue

@@ -0,0 +1,284 @@
+<script setup name="ServicePage">
+import WorkConatiner from '~/WorkConatiner/index.vue';
+import { AddCircleOutline, CheckmarkSharp, Close } from '@vicons/ionicons5';
+import { CoreService } from '@/api/index.js';
+import { onMounted, reactive, ref } from 'vue';
+import { useMessage } from 'naive-ui';
+
+const Message = useMessage();
+
+// ! 获取分页的数据
+const pageInfo = reactive({
+    pageSize: 10,
+    pageNumber: 1,
+    isList: false,
+    isAsc: false,
+    serviceInfo: undefined,
+});
+
+// ! 服务分页数据
+const servicePageData = reactive({
+    rowData: [],
+    total: 0,
+    columns: [
+        {
+            title: '序号',
+            key: 'index',
+            customRender: ({ text, record, index, column }) => `${index + 1}`, // 使用索引 + 1 来显示序号
+            width: 70, // 你可以根据需要设置列宽
+        },
+        {
+            title: '服务标识',
+            dataIndex: 'serviceKey',
+            key: 'serviceKey',
+        },
+        {
+            title: '服务名称',
+            dataIndex: 'serviceName',
+            key: 'serviceName',
+        },
+        {
+            title: '服务版本',
+            dataIndex: 'serviceVersion',
+            key: 'serviceVersion',
+        },
+        {
+            title: '服务描述',
+            dataIndex: 'serviceDesc',
+            key: 'serviceDesc',
+        },
+        {
+            title: '创建人',
+            dataIndex: 'createName',
+            key: 'createName',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createtime',
+            key: 'createtime',
+            sorter: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            width: 160,
+            align: 'center',
+        },
+    ],
+});
+
+// ! 创建服务的模态框
+const createStatus = ref(false);
+// ! 表单组件
+const formRef = ref(null);
+// ! 表单数据
+const formData = reactive({
+    serviceKey: '',
+    serviceName: '',
+    serviceVersion: '',
+    serviceDesc: '',
+});
+
+// ! 表单验证
+const formRules = reactive({
+    serviceKey: {
+        min: 2,
+        required: true,
+        message: '请输入服务标识,至少两个字符',
+        trigger: ['input', 'blur'],
+    },
+    serviceName: {
+        required: true,
+        message: '请输入服务名称,至少两个字符',
+        trigger: ['input', 'blur'],
+    },
+    serviceVersion: {
+        required: false,
+        message: '请输入服务版本',
+        trigger: ['input', 'blur'],
+    },
+    serviceDesc: {
+        required: false,
+        message: '请输入服务描述',
+        trigger: ['input', 'blur'],
+    },
+});
+
+// ! 确认添加
+const handleCreateAck = (e) => {
+    e.preventDefault();
+    formRef.value?.validate(async (errors) => {
+        if (errors) {
+            return;
+        }
+
+        const resd = await CoreService.createService(formData);
+        if (resd[0]?.affectedRows == 1) {
+            Message.success('添加服务成功!');
+            // 关闭弹窗
+            createStatus.value = false;
+            refreshPage();
+            clearInput();
+        }
+    });
+};
+
+// ! 获取分页数据的方法
+const getPage = async () => {
+    const resd = await CoreService.getService(pageInfo);
+    servicePageData.rowData = resd.rowData;
+    servicePageData.total = Number(resd.total);
+    console.log(resd);
+};
+// ! 表格变动
+const handleTableChange = (page, filter, sorter) => {
+    console.log(page, filter, sorter);
+    if (sorter.order == 'ascend') {
+        pageInfo.isAsc = true;
+    } else if (sorter.order == 'descend') {
+        pageInfo.isAsc = false;
+    } else {
+        pageInfo.isAsc = undefined;
+    }
+    getPage();
+};
+// ! 页码变动
+const handlePageChange = (page, pageSize) => {
+    pageInfo.pageSize = pageSize;
+    pageInfo.pageNumber = page;
+    getPage();
+};
+// ! 刷新页面
+function refreshPage() {
+    // 回到第一页
+    pageInfo.isAsc = false;
+    pageInfo.isList = false;
+    pageInfo.pageNumber = 1;
+    pageInfo.serviceInfo = undefined;
+    // 刷新页面
+    getPage();
+}
+// ! 清理输入
+function clearInput() {
+    formData.serviceKey = '';
+    formData.serviceName = '';
+    formData.serviceVersion = '';
+    formData.serviceDesc = '';
+}
+
+// ! 页面加载完成
+onMounted(() => {
+    getPage();
+});
+</script>
+
+<template>
+    <WorkConatiner>
+        <template #header>
+            <NButton type="primary" strong @click="createStatus = true">
+                <template #icon>
+                    <NIcon>
+                        <AddCircleOutline />
+                    </NIcon>
+                </template>
+                <span>添加服务</span>
+            </NButton>
+        </template>
+        <template #main>
+            <ATable
+                style="height: 100%"
+                :dataSource="servicePageData.rowData"
+                :columns="servicePageData.columns"
+                @change="handleTableChange"
+                :pagination="false"
+                sticky
+                :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+                :scroll="{ scrollToFirstRowOnChange: true }"
+            >
+                <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                        <NSpace>
+                            <NButton strong ghost type="error">删除</NButton>
+                            <NButton strong ghost type="info">编辑</NButton>
+                        </NSpace>
+                    </template>
+                </template>
+            </ATable>
+        </template>
+        <template #footer>
+            <APagination
+                v-model:current="pageInfo.pageNumber"
+                :total="servicePageData.total"
+                :pageSize="pageInfo.pageSize"
+                :pageSizeOptions="[10, 20, 50, 100, 200]"
+                :showSizeChanger="true"
+                :showQuickJumper="true"
+                :showTotal="(total) => `共 ${total} 条`"
+                @change="handlePageChange"
+            />
+        </template>
+        <template #modal>
+            <NModal v-model:show="createStatus">
+                <ModalTemplate v-model:show="createStatus">
+                    <template #title>添加服务</template>
+                    <template #main>
+                        <div>
+                            <NForm ref="formRef" :label-width="80" :model="formData" :rules="formRules">
+                                <NFormItem label="服务标识" path="serviceKey">
+                                    <n-input
+                                        maxlength="16"
+                                        show-count
+                                        v-model:value="formData.serviceKey"
+                                        placeholder="请输入服务标识"
+                                        autofocus
+                                        clearable
+                                        :allow-input="(value) => value.replace(/[^A-Za-z0-9]/g, '')"
+                                    />
+                                </NFormItem>
+                                <NFormItem label="服务名称" path="serviceName">
+                                    <n-input maxlength="32" show-count v-model:value="formData.serviceName" placeholder="请输入服务名称" clearable />
+                                </NFormItem>
+                                <NFormItem label="服务版本" path="serviceVersion">
+                                    <n-input maxlength="32" show-count v-model:value="formData.serviceVersion" placeholder="请输入服务版本" clearable />
+                                </NFormItem>
+                                <NFormItem label="服务描述" path="serviceDesc">
+                                    <n-input
+                                        type="textarea"
+                                        maxlength="255"
+                                        show-count
+                                        v-model:value="formData.serviceDesc"
+                                        placeholder="请输入服务描述"
+                                        clearable
+                                    />
+                                </NFormItem>
+                            </NForm>
+                        </div>
+                    </template>
+                    <template #footer>
+                        <NSpace>
+                            <NButton type="tertiary" strong @click="createStatus = false">
+                                <template #icon>
+                                    <NIcon>
+                                        <Close />
+                                    </NIcon>
+                                </template>
+                                <span>取消</span>
+                            </NButton>
+                            <NButton type="primary" strong @click="handleCreateAck">
+                                <template #icon>
+                                    <NIcon>
+                                        <CheckmarkSharp />
+                                    </NIcon>
+                                </template>
+                                <span>确认</span>
+                            </NButton>
+                        </NSpace>
+                    </template>
+                </ModalTemplate>
+            </NModal>
+        </template>
+    </WorkConatiner>
+</template>
+
+<style scoped></style>

vite.config.js

@@ -19,9 +19,14 @@ export default defineConfig(({ command, mode }) => {
         ],
         resolve: {
             alias: {
-                '@': fileURLToPath(new URL('./src', import.meta.url))
+                '@': fileURLToPath(new URL('./src', import.meta.url)),
+                '~': fileURLToPath(new URL('./src/components', import.meta.url)),
+                '@utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
             }
         },
+        css:{
+            devSourcemap: true
+        },
         server:{
             proxy: {
                 [env.VITE_BASE_URL]: {