From 63deaf3392ec1eb4b7143745699df510b1899866 Mon Sep 17 00:00:00 2001
From: expressgy <x71291@outlook.com>
Date: Tue, 2 Jul 2024 18:30:27 +0800
Subject: [PATCH] =?UTF-8?q?#=20=E5=AE=8C=E6=88=90=E6=9C=8D=E5=8A=A1=201.?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84=202.=20=E4=BF=AE=E6=94=B9naiveui=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B1=9E=E6=80=A7=EF=BC=8C=E5=87=86=E5=A4=87=E6=94=BE?=
 =?UTF-8?q?=E5=BC=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc.json                              |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 17 ++--
 src/App.vue                                   | 17 +++-
 src/api/http.js                               |  6 +-
 src/components/AntDesignVue/index.js          | 28 ++++++
 .../Framework}/ModalTemplate/index.vue        |  0
 .../{ => Custom/Framework}/Pacman/index.vue   |  0
 .../Framework/WorkContainer}/example.vue      | 10 +-
 .../Framework/WorkContainer}/index.vue        |  0
 .../{icons => Custom/Icons}/IconCommunity.vue |  0
 .../Icons}/IconDocumentation.vue              |  0
 .../{icons => Custom/Icons}/IconEcosystem.vue |  0
 .../{icons => Custom/Icons}/IconSupport.vue   |  0
 .../{icons => Custom/Icons}/IconTooling.vue   |  0
 .../{icons => Custom/Icons}/key.vue           |  0
 .../{icons => Custom/Icons}/user.vue          |  0
 src/components/Custom/index.js                | 23 +++++
 src/components/HelloWorld.vue                 | 43 --------
 src/components/NaiveUI/index.js               | 69 +++++++++++++
 src/components/TheWelcome.vue                 | 78 ---------------
 src/components/WelcomeItem.vue                | 86 ----------------
 src/components/index.js                       | 23 +++++
 src/main.js                                   | 62 ++----------
 src/router/authorization.js                   |  4 +-
 src/router/index.js                           |  2 +-
 src/stores/system.js                          | 63 ++++++------
 src/views/Auth/Service/index.vue              | 99 +++++++++++++++----
 src/views/Home/index.vue                      |  2 +-
 src/views/SignIn/index.vue                    | 16 +--
 vite.config.js                                |  3 +-
 31 files changed, 308 insertions(+), 346 deletions(-)
 create mode 100644 src/components/AntDesignVue/index.js
 rename src/components/{ => Custom/Framework}/ModalTemplate/index.vue (100%)
 rename src/components/{ => Custom/Framework}/Pacman/index.vue (100%)
 rename src/components/{WorkConatiner => Custom/Framework/WorkContainer}/example.vue (76%)
 rename src/components/{WorkConatiner => Custom/Framework/WorkContainer}/index.vue (100%)
 rename src/components/{icons => Custom/Icons}/IconCommunity.vue (100%)
 rename src/components/{icons => Custom/Icons}/IconDocumentation.vue (100%)
 rename src/components/{icons => Custom/Icons}/IconEcosystem.vue (100%)
 rename src/components/{icons => Custom/Icons}/IconSupport.vue (100%)
 rename src/components/{icons => Custom/Icons}/IconTooling.vue (100%)
 rename src/components/{icons => Custom/Icons}/key.vue (100%)
 rename src/components/{icons => Custom/Icons}/user.vue (100%)
 create mode 100644 src/components/Custom/index.js
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/NaiveUI/index.js
 delete mode 100644 src/components/TheWelcome.vue
 delete mode 100644 src/components/WelcomeItem.vue
 create mode 100644 src/components/index.js

diff --git a/.prettierrc.json b/.prettierrc.json
index 17899ec..f53571b 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "printWidth": 160,
+  "printWidth": 180,
   "tabWidth": 4,
   "useTabs": false,
   "semi": true,
diff --git a/package.json b/package.json
index 08ef670..0da22fa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
         "format": "prettier --write src/"
     },
     "dependencies": {
+        "@vicons/antd": "^0.12.0",
         "ant-design-vue": "4.x",
         "axios": "^1.7.2",
         "dayjs": "^1.11.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4808f64..55e18c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vicons/antd':
+        specifier: ^0.12.0
+        version: 0.12.0
       ant-design-vue:
         specifier: 4.x
         version: 4.2.3(vue@3.4.31)
@@ -523,55 +526,46 @@ packages:
     resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.18.0':
     resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.18.0':
     resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.18.0':
     resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
     resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.18.0':
     resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.18.0':
     resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.18.0':
     resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.18.0':
     resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.18.0':
     resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}
@@ -609,6 +603,9 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
+  '@vicons/antd@0.12.0':
+    resolution: {integrity: sha512-C0p6aO1EmGG1QHrqgUWQS1No20934OdWSRQshM5NIDK5H1On6tC26U0hT6Rmp40KfUsvhvX5YW8BoWJdNFifPg==}
+
   '@vicons/ionicons5@0.12.0':
     resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
 
@@ -2263,6 +2260,8 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
+  '@vicons/antd@0.12.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)':
diff --git a/src/App.vue b/src/App.vue
index 959f0df..9c6e240 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,26 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { RouterView } from 'vue-router';
+import { useSystemStore } from '@/stores/system.js';
+const systemStore = useSystemStore();
+
+import { useRouter } from 'vue-router';
+const router = useRouter();
+// ! 监听WantToGo，这里迎接systemStore的路由跳转
+watch(() => systemStore.state.wantToGo,(path, oldPath) => {
+    router.push(path);
+});
+
+// ! NaiveUI的Message层
 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);
+const locale = ref(zhCN);
 </script>
 
 <template>
     <NMessageProvider>
-        <ConfigProvider :locale="zhCN">
+        <ConfigProvider :locale="locale">
             <RouterView />
         </ConfigProvider>
     </NMessageProvider>
diff --git a/src/api/http.js b/src/api/http.js
index 9391fb2..4c689bb 100644
--- a/src/api/http.js
+++ b/src/api/http.js
@@ -43,11 +43,11 @@ function makeWait() {
 // 请求拦截器
 service.interceptors.request.use(
     async (config) => {
-        if (systemStore.apiWhiteList.includes(config.url)) {
+        if (systemStore.state.apiWhiteList.includes(config.url)) {
             // ! 白名单请求，不需要添加Token
         } else if (config.url === '/authUser/sign/refresh') {
             // ! 刷新Token请求，传入RefreshToken
-            config.headers.Authorization = `Bearer ${systemStore.refreshToken}`;
+            config.headers.Authorization = `Bearer ${systemStore.state.refreshToken}`;
         } else {
             if (isExpired) {
                 // ! 等待刷新token后放行
@@ -55,7 +55,7 @@ service.interceptors.request.use(
             }
 
             // ! 一般请求，添加Token
-            config.headers.Authorization = `Bearer ${systemStore.token}`;
+            config.headers.Authorization = `Bearer ${systemStore.state.token}`;
         }
         return config;
     },
diff --git a/src/components/AntDesignVue/index.js b/src/components/AntDesignVue/index.js
new file mode 100644
index 0000000..383618e
--- /dev/null
+++ b/src/components/AntDesignVue/index.js
@@ -0,0 +1,28 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-x7129】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: index.js -
+// | @创建时间: 2024-07-02 13:13
+// | @更新时间: 2024-07-02 13:13
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+import { Table, Pagination } 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');
+
+export function setupCustomAntDesignVueComponents(app){
+    // ! 表格
+    app.component('ATable', Table);
+    // ! 分页
+    app.component('APagination', Pagination);
+}
diff --git a/src/components/ModalTemplate/index.vue b/src/components/Custom/Framework/ModalTemplate/index.vue
similarity index 100%
rename from src/components/ModalTemplate/index.vue
rename to src/components/Custom/Framework/ModalTemplate/index.vue
diff --git a/src/components/Pacman/index.vue b/src/components/Custom/Framework/Pacman/index.vue
similarity index 100%
rename from src/components/Pacman/index.vue
rename to src/components/Custom/Framework/Pacman/index.vue
diff --git a/src/components/WorkConatiner/example.vue b/src/components/Custom/Framework/WorkContainer/example.vue
similarity index 76%
rename from src/components/WorkConatiner/example.vue
rename to src/components/Custom/Framework/WorkContainer/example.vue
index 31bf879..b08a5aa 100644
--- a/src/components/WorkConatiner/example.vue
+++ b/src/components/Custom/Framework/WorkContainer/example.vue
@@ -1,22 +1,22 @@
 <script setup name="WorkContainerExample">
-import WorkConatiner from './WorkConatiner.vue';
+import workContainer from './WorkContainer.vue';
 // 示例
 </script>
 
 
 <template>
     <div>
-        <WorkConatiner>
+        <workContainer>
             <template v-slot:header>这是头部</template>
             <template v-slot:main>这是主要内容</template>
             <template v-slot:footer>这是脚部</template>
-        </WorkConatiner>
+        </workContainer>
 
-        <WorkConatiner>
+        <workContainer>
             <template #header>这是头部</template>
             <template #main>这是主要内容</template>
             <template #footer>这是脚部</template>
-        </WorkConatiner>
+        </workContainer>
     </div>
 </template>
 
diff --git a/src/components/WorkConatiner/index.vue b/src/components/Custom/Framework/WorkContainer/index.vue
similarity index 100%
rename from src/components/WorkConatiner/index.vue
rename to src/components/Custom/Framework/WorkContainer/index.vue
diff --git a/src/components/icons/IconCommunity.vue b/src/components/Custom/Icons/IconCommunity.vue
similarity index 100%
rename from src/components/icons/IconCommunity.vue
rename to src/components/Custom/Icons/IconCommunity.vue
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/Custom/Icons/IconDocumentation.vue
similarity index 100%
rename from src/components/icons/IconDocumentation.vue
rename to src/components/Custom/Icons/IconDocumentation.vue
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/Custom/Icons/IconEcosystem.vue
similarity index 100%
rename from src/components/icons/IconEcosystem.vue
rename to src/components/Custom/Icons/IconEcosystem.vue
diff --git a/src/components/icons/IconSupport.vue b/src/components/Custom/Icons/IconSupport.vue
similarity index 100%
rename from src/components/icons/IconSupport.vue
rename to src/components/Custom/Icons/IconSupport.vue
diff --git a/src/components/icons/IconTooling.vue b/src/components/Custom/Icons/IconTooling.vue
similarity index 100%
rename from src/components/icons/IconTooling.vue
rename to src/components/Custom/Icons/IconTooling.vue
diff --git a/src/components/icons/key.vue b/src/components/Custom/Icons/key.vue
similarity index 100%
rename from src/components/icons/key.vue
rename to src/components/Custom/Icons/key.vue
diff --git a/src/components/icons/user.vue b/src/components/Custom/Icons/user.vue
similarity index 100%
rename from src/components/icons/user.vue
rename to src/components/Custom/Icons/user.vue
diff --git a/src/components/Custom/index.js b/src/components/Custom/index.js
new file mode 100644
index 0000000..0d4fd58
--- /dev/null
+++ b/src/components/Custom/index.js
@@ -0,0 +1,23 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-x7129】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: index.js -
+// | @创建时间: 2024-07-02 12:52
+// | @更新时间: 2024-07-02 12:52
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+import ModalTemplate from '@/components/Custom/Framework/ModalTemplate/index.vue';
+import WorkContainer from '@/components/Custom/Framework/WorkContainer/index.vue';
+
+// 自定义组件挂载到APP
+export function setupCustomComponents(app){
+    // ! 模态框框架
+    app.component('ModalTemplate', ModalTemplate);
+    // ! 框架结构
+    app.component('WorkContainer', WorkContainer);
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 573bea2..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-defineProps({
-    msg: {
-        type: String,
-        required: true,
-    },
-});
-</script>
-
-<template>
-    <div class="greetings">
-        <h1 class="green">{{ msg }}</h1>
-        <h3>
-            You’ve successfully created a project with
-            <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> + <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-        </h3>
-    </div>
-</template>
-
-<style scoped>
-h1 {
-    font-weight: 500;
-    font-size: 2.6rem;
-    position: relative;
-    top: -10px;
-}
-
-h3 {
-    font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-    text-align: center;
-}
-
-@media (min-width: 1024px) {
-    .greetings h1,
-    .greetings h3 {
-        text-align: left;
-    }
-}
-</style>
diff --git a/src/components/NaiveUI/index.js b/src/components/NaiveUI/index.js
new file mode 100644
index 0000000..92f1c43
--- /dev/null
+++ b/src/components/NaiveUI/index.js
@@ -0,0 +1,69 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-x7129】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: index.js -
+// | @创建时间: 2024-07-02 12:54
+// | @更新时间: 2024-07-02 12:54
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+import { useSystemStore } from '@/stores/system.js';
+import { version, NButton, NForm, NFormItem, NIcon, NInput, NModal, NSpace, NTable, NPopconfirm } from 'naive-ui';
+import { defineComponent, h, onMounted, ref } from 'vue';
+
+// ! 创建修改后的NaiveUI组件，修改默认大小
+function createCustomComponent(NaiveComponent, defaultProps) {
+    // ! 返回组件
+    return defineComponent({
+        // ! 定义新组件的名称
+        name: `CustomNaiveUI-${NaiveComponent.name}`,
+        oldName: 'N' + NaiveComponent.name,
+        // ! 确保传递所有 NaiveComponent 的 props
+        props: NaiveComponent.props,
+        // ! 返回函数
+        setup(props, { slots, attrs }) {
+            const systemStore = useSystemStore();
+            return () => {
+                // ! 获取存储中的 inputSize，并将其传递给组件
+                const dynamicProps = {
+                    ...defaultProps,
+                    ...props,
+                    size: systemStore.state.componentSize,
+                };
+                const internalRef = ref(null);
+
+                // ! 将传递的属性与默认属性合并
+                const vNode = h(NaiveComponent, { ref: internalRef, ...attrs, ...dynamicProps,  }, slots);
+                return vNode;
+            };
+        },
+    });
+}
+
+export function setupCustomNaiveComponents(app) {
+    window.pino.debug('NaiveUI Version: ', version);
+    const ComponentList = [
+        NButton, // ! 按钮
+        NTable, // ! 表格
+        NModal, // ! 模态框
+        NFormItem, // ! 表单项
+        NInput, // ! 输入框
+        NSpace, // ! 间距
+        NPopconfirm, // ! 确认框
+    ];
+    for (let Component of ComponentList) {
+        const newComponent = createCustomComponent(Component);
+        app.component(newComponent.oldName, newComponent);
+    }
+    const OtherComponentList = [
+        NIcon, // ! 图标夹
+        NForm, // ! 表单
+    ];
+    for (let Component of OtherComponentList) {
+        app.component('N' + Component.name, Component);
+    }
+}
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 9b7b841..0000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue';
-import DocumentationIcon from './icons/IconDocumentation.vue';
-import ToolingIcon from './icons/IconTooling.vue';
-import EcosystemIcon from './icons/IconEcosystem.vue';
-import CommunityIcon from './icons/IconCommunity.vue';
-import SupportIcon from './icons/IconSupport.vue';
-</script>
-
-<template>
-    <WelcomeItem>
-        <template #icon>
-            <DocumentationIcon />
-        </template>
-        <template #heading>Documentation</template>
-
-        Vue’s
-        <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-        provides you with all information you need to get started.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <ToolingIcon />
-        </template>
-        <template #heading>Tooling</template>
-
-        This project is served and bundled with
-        <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The recommended IDE setup is
-        <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-        <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If you need to test your components and web pages, check out
-        <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-        <a href="https://on.cypress.io/component" target="_blank" rel="noopener">Cypress Component Testing</a>.
-
-        <br />
-
-        More instructions are available in <code>README.md</code>.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <EcosystemIcon />
-        </template>
-        <template #heading>Ecosystem</template>
-
-        Get official tools and libraries for your project:
-        <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-        <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-        <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-        <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If you need more resources, we suggest paying
-        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-        a visit.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <CommunityIcon />
-        </template>
-        <template #heading>Community</template>
-
-        Got stuck? Ask your question on
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official Discord server, or
-        <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>. You should also subscribe to
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow the official
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-        twitter account for latest news in the Vue world.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <SupportIcon />
-        </template>
-        <template #heading>Support Vue</template>
-
-        As an independent project, Vue relies on community backing for its sustainability. You can help us by
-        <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-    </WelcomeItem>
-</template>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
deleted file mode 100644
index aa9c3e2..0000000
--- a/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <div class="item">
-        <i>
-            <slot name="icon"></slot>
-        </i>
-        <div class="details">
-            <h3>
-                <slot name="heading"></slot>
-            </h3>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.item {
-    margin-top: 2rem;
-    display: flex;
-    position: relative;
-}
-
-.details {
-    flex: 1;
-    margin-left: 1rem;
-}
-
-i {
-    display: flex;
-    place-items: center;
-    place-content: center;
-    width: 32px;
-    height: 32px;
-    color: var(--color-text);
-}
-
-h3 {
-    font-size: 1.2rem;
-    font-weight: 500;
-    margin-bottom: 0.4rem;
-    color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-    .item {
-        margin-top: 0;
-        padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-    }
-
-    i {
-        top: calc(50% - 25px);
-        left: -26px;
-        position: absolute;
-        border: 1px solid var(--color-border);
-        background: var(--color-background);
-        border-radius: 8px;
-        width: 50px;
-        height: 50px;
-    }
-
-    .item:before {
-        content: ' ';
-        border-left: 1px solid var(--color-border);
-        position: absolute;
-        left: 0;
-        bottom: calc(50% + 25px);
-        height: calc(50% - 25px);
-    }
-
-    .item:after {
-        content: ' ';
-        border-left: 1px solid var(--color-border);
-        position: absolute;
-        left: 0;
-        top: calc(50% + 25px);
-        height: calc(50% - 25px);
-    }
-
-    .item:first-of-type:before {
-        display: none;
-    }
-
-    .item:last-of-type:after {
-        display: none;
-    }
-}
-</style>
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..fc09818
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,23 @@
+// | ------------------------------------------------------------
+// | @版本: version 0.1
+// | @创建人: 【Nie-x7129】
+// | @E-mail: x71291@outlook.com
+// | @所在项目: hoto-auth-vue3
+// | @文件描述: index.js -
+// | @创建时间: 2024-07-02 12:56
+// | @更新时间: 2024-07-02 12:56
+// | @修改记录:
+// | -*-*-*-  (时间--修改人--修改说明)  -*-*-*-
+// | =
+// | ------------------------------------------------------------
+
+import { setupCustomComponents } from '@CustomComponents/index.js';
+import { setupCustomNaiveComponents } from '@/components/NaiveUI/index.js';
+import { setupCustomAntDesignVueComponents } from '@/components/AntDesignVue/index.js';
+
+export function setupGlobalComponents(app) {
+    setupCustomComponents(app);
+    setupCustomNaiveComponents(app);
+    // ! 设置AntDesignVue的全局组件
+    setupCustomAntDesignVueComponents(app);
+}
diff --git a/src/main.js b/src/main.js
index a9712ee..b7d7ea3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,30 +1,18 @@
+// ! 日志记录
+import Pino from 'pino';
+window.pino = new Pino();
 import './assets/main.css';
-
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-// ! 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();
+const pinia = createPinia();
+
 
 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);
 
 const router = createRoutering();
@@ -32,45 +20,13 @@ app.use(router);
 app.use(authRouter, {
     router,
 });
-setNaiveUIGlobal(app);
-setCustomComponentsGlobal(app);
+
+// ! 自定义组件
+import { setupGlobalComponents } from '@/components/index.js';
+setupGlobalComponents(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) {
diff --git a/src/router/authorization.js b/src/router/authorization.js
index 9a0bbb2..ff45d2d 100644
--- a/src/router/authorization.js
+++ b/src/router/authorization.js
@@ -17,12 +17,12 @@ export default function authRouter(app, option) {
 
     router.beforeEach(async (to, from) => {
         // ? 判断是否在白名单
-        if (systemStore.routeWhiteList.includes(to.path)) {
+        if (systemStore.state.routeWhiteList.includes(to.path)) {
             return true;
         }
 
         // 判断是否存在Token
-        if (systemStore.refreshToken === undefined) {
+        if (systemStore.state.refreshToken === undefined) {
             return '/signin';
         }
 
diff --git a/src/router/index.js b/src/router/index.js
index 1520df5..9a3adea 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,7 +8,7 @@ export default function createRoutering() {
         routes: [
             {
                 path: '',
-                redirect: systemStore.defaultRoute,
+                redirect: systemStore.state.defaultRoute,
             },
             {
                 path: '/home',
diff --git a/src/stores/system.js b/src/stores/system.js
index 0cad1f8..3ce80af 100644
--- a/src/stores/system.js
+++ b/src/stores/system.js
@@ -11,31 +11,30 @@
 // | =
 // | ------------------------------------------------------------
 
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 import { defineStore } from 'pinia';
-import { useRouter } from 'vue-router';
 import { createDiscreteApi } from 'naive-ui';
 const naiveui = createDiscreteApi(['message']);
-const router = useRouter();
 
 export const useSystemStore = defineStore('system', () => {
-    // token
-    const token = ref(window.sessionStorage.getItem('token') || undefined);
+    // 状态
+    const state = reactive({
+        token: window.sessionStorage.getItem('token') || undefined,
+        refreshToken: window.localStorage.getItem('refreshToken') || window.sessionStorage.getItem('refreshToken') || undefined,
+        // * 路由白名单
+        routeWhiteList: ['/', '/signin'],
+        // * 接口白名单
+        apiWhiteList: ['/authUser/sign/in'],
+        // * 默认跳转路由
+        defaultRoute: import.meta.env.VITE_HOME_REDIRECT,
+        // * 标题
+        title: import.meta.env.VITE_TITLE,
+        // * 组件默认大小
+        componentSize: 'small',
+        // * 想要去得地方
+        wantToGo: '',
+    });
 
-    // refreshToken
-    const refreshToken = ref(window.localStorage.getItem('refreshToken') || window.sessionStorage.getItem('refreshToken') || undefined);
-
-    // 路由白名单
-    const routeWhiteList = ['/', '/signin'];
-
-    // 接口白名单
-    const apiWhiteList = ['/authUser/sign/in'];
-
-    // 默认跳转路由
-    const defaultRoute = import.meta.env.VITE_HOME_REDIRECT;
-
-    // 标题
-    const title = import.meta.env.VITE_TITLE;
 
     // 登陆成功保存Token
     const setToken = (opt) => {
@@ -46,8 +45,8 @@ export const useSystemStore = defineStore('system', () => {
             window.sessionStorage.setItem('refreshToken', opt.refreshToken);
         }
         window.sessionStorage.setItem('token', opt.token);
-        token.value = opt.token;
-        refreshToken.value = opt.refreshToken;
+        state.token = opt.token;
+        state.refreshToken = opt.refreshToken;
     };
 
     // 清除Token
@@ -55,8 +54,8 @@ export const useSystemStore = defineStore('system', () => {
         window.localStorage.removeItem('refreshToken');
         window.sessionStorage.removeItem('refreshToken');
         window.sessionStorage.removeItem('token');
-        token.value = undefined;
-        refreshToken.value = undefined;
+        state.token = undefined;
+        state.refreshToken = undefined;
     };
 
     // 回到登录页
@@ -64,27 +63,29 @@ export const useSystemStore = defineStore('system', () => {
         naiveui.message.warning('即将返回登录页!');
         setTimeout(() => {
             clearToken();
-            router.push('/signin');
+            state.wantToGo = '/signin';
         }, 2000);
     };
 
     // 设置新Token
     const setNewToken = (newToken) => {
         window.sessionStorage.setItem('token', newToken);
-        token.value = newToken;
+        state.token = newToken;
         window.pino.info(newToken);
     };
 
+    // 设置新的组件大小
+    const setComponentSize = (size) => {
+        state.defaultSize = size;
+    };
+
+
     return {
-        token,
-        refreshToken,
-        routeWhiteList,
-        apiWhiteList,
-        defaultRoute,
-        title,
+        state,
         setToken,
         goBackSignin,
         clearToken,
         setNewToken,
+        setComponentSize
     };
 });
diff --git a/src/views/Auth/Service/index.vue b/src/views/Auth/Service/index.vue
index 341dbab..6449bff 100644
--- a/src/views/Auth/Service/index.vue
+++ b/src/views/Auth/Service/index.vue
@@ -1,9 +1,11 @@
 <script setup name="ServicePage">
-import WorkConatiner from '~/WorkConatiner/index.vue';
-import { AddCircleOutline, CheckmarkSharp, Close } from '@vicons/ionicons5';
+import { AddCircleOutline, CheckmarkSharp, Close, TrashOutline } from '@vicons/ionicons5';
+import { DeleteTwotone, EditTwotone } from '@vicons/antd';
 import { CoreService } from '@/api/index.js';
 import { onMounted, reactive, ref } from 'vue';
-import { useMessage } from 'naive-ui';
+import { useMessage, NThemeEditor } from 'naive-ui';
+import { useSystemStore } from '@/stores/system.js';
+const systemStore = useSystemStore();
 
 const Message = useMessage();
 
@@ -16,7 +18,7 @@ const pageInfo = reactive({
     serviceInfo: undefined,
 });
 
-// ! 服务分页数据
+// ! 服务分页表格数据和定义
 const servicePageData = reactive({
     rowData: [],
     total: 0,
@@ -62,7 +64,7 @@ const servicePageData = reactive({
             title: '操作',
             dataIndex: 'action',
             key: 'action',
-            width: 160,
+            width: 100,
             align: 'center',
         },
     ],
@@ -70,6 +72,8 @@ const servicePageData = reactive({
 
 // ! 创建服务的模态框
 const createStatus = ref(false);
+// ! 修改服务的模态框
+const updateStatus = ref(false);
 // ! 表单组件
 const formRef = ref(null);
 // ! 表单数据
@@ -112,18 +116,46 @@ const handleCreateAck = (e) => {
         if (errors) {
             return;
         }
-
-        const resd = await CoreService.createService(formData);
+        let resd;
+        if(updateStatus.value){
+            resd = await CoreService.updateService(formData.serviceKey, formData);
+        }else{
+            resd = await CoreService.createService(formData);
+        }
         if (resd[0]?.affectedRows == 1) {
-            Message.success('添加服务成功!');
+            Message.success(updateStatus.value ? '修改服务成功!' : '添加服务成功!');
             // 关闭弹窗
             createStatus.value = false;
+            updateStatus.value = false;
             refreshPage();
             clearInput();
         }
     });
 };
 
+// ! 删除框状态
+const removeStatus = ref(null);
+
+// ! 确认删除
+const handleRemoveAck = async (serviceKey) => {
+    removeStatus.value = null;
+    await CoreService.removeService(serviceKey);
+    Message.success('删除成功!');
+    if (pageInfo.pageNumber > 1 && servicePageData.rowData.length == 0) {
+        pageInfo.pageNumber--;
+        getPage();
+    }
+};
+// ! 响应编辑
+const handleUpdate = (data) => {
+    formData.serviceKey = data.serviceKey;
+    formData.serviceName = data.serviceName;
+    formData.serviceVersion = data.serviceVersion;
+    formData.serviceDesc = data.serviceDesc;
+    createStatus.value = true;
+    updateStatus.value = true;
+};
+
 // ! 获取分页数据的方法
 const getPage = async () => {
     const resd = await CoreService.getService(pageInfo);
@@ -167,6 +199,11 @@ function clearInput() {
     formData.serviceDesc = '';
 }
 
+// ! 改变大小
+function setSize(a, b) {
+    console.log(a, b);
+}
+
 // ! 页面加载完成
 onMounted(() => {
     getPage();
@@ -174,7 +211,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <WorkConatiner>
+    <WorkContainer>
         <template #header>
             <NButton type="primary" strong @click="createStatus = true">
                 <template #icon>
@@ -199,8 +236,33 @@ onMounted(() => {
                 <template #bodyCell="{ column, record }">
                     <template v-if="column.key === 'action'">
                         <NSpace>
-                            <NButton strong ghost type="error">删除</NButton>
-                            <NButton strong ghost type="info">编辑</NButton>
+                            <NPopconfirm :show="removeStatus == record.serviceKey">
+                                <template #trigger>
+                                    <NButton quaternary circle type="error" @click="removeStatus = record.serviceKey">
+                                        <template #icon>
+                                            <NIcon>
+                                                <DeleteTwotone />
+                                            </NIcon>
+                                        </template>
+                                    </NButton>
+                                </template>
+                                <p>
+                                    危险操作，确认要删除服务: <b>{{ record.serviceName }}</b> 吗?
+                                </p>
+                                <template #action>
+                                    <NSpace>
+                                        <NButton strong secondary @click="removeStatus = null">取消</NButton>
+                                        <NButton strong secondary type="error" @click="handleRemoveAck(record.serviceKey)">确认删除</NButton>
+                                    </NSpace>
+                                </template>
+                            </NPopconfirm>
+                            <NButton quaternary circle type="info" @click="handleUpdate(record)">
+                                <template #icon>
+                                    <NIcon>
+                                        <EditTwotone />
+                                    </NIcon>
+                                </template>
+                            </NButton>
                         </NSpace>
                     </template>
                 </template>
@@ -221,7 +283,7 @@ onMounted(() => {
         <template #modal>
             <NModal v-model:show="createStatus">
                 <ModalTemplate v-model:show="createStatus">
-                    <template #title>添加服务</template>
+                    <template #title>{{updateStatus ? '修改服务' : '添加服务'}}</template>
                     <template #main>
                         <div>
                             <NForm ref="formRef" :label-width="80" :model="formData" :rules="formRules">
@@ -232,6 +294,7 @@ onMounted(() => {
                                         v-model:value="formData.serviceKey"
                                         placeholder="请输入服务标识"
                                         autofocus
+                                        :disabled="updateStatus ? true : false"
                                         clearable
                                         :allow-input="(value) => value.replace(/[^A-Za-z0-9]/g, '')"
                                     />
@@ -243,16 +306,10 @@ onMounted(() => {
                                     <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
-                                    />
+                                    <n-input type="textarea" maxlength="255" show-count v-model:value="formData.serviceDesc" placeholder="请输入服务描述" clearable />
                                 </NFormItem>
                             </NForm>
+                            <NThemeEditor></NThemeEditor>
                         </div>
                     </template>
                     <template #footer>
@@ -278,7 +335,7 @@ onMounted(() => {
                 </ModalTemplate>
             </NModal>
         </template>
-    </WorkConatiner>
+    </WorkContainer>
 </template>
 
 <style scoped></style>
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 679ac5d..40d0df7 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,5 +1,5 @@
 <script setup name="Home">
-import Pacman from '@/components/Pacman/index.vue';
+import Pacman from '@CustomComponents/Framework/Pacman/index.vue';
 import { DefaultSign } from '@/api/index.js';
 import { onMounted } from 'vue';
 
diff --git a/src/views/SignIn/index.vue b/src/views/SignIn/index.vue
index 411d9a8..a15899d 100644
--- a/src/views/SignIn/index.vue
+++ b/src/views/SignIn/index.vue
@@ -1,13 +1,13 @@
 <script setup name="SignIn">
 import { ref, toValue } from 'vue';
-import hutao from '@/assets/images/hutao.webp';
-import { useSystemStore } from '@/stores/system.js';
-import key from '@/components/icons/key.vue';
-import user from '@/components/icons/user.vue';
 import { NSwitch } from 'naive-ui';
-import { Sign } from '@/api/index.js';
 import { useRouter } from 'vue-router';
-import Pacman from '@/components/Pacman/index.vue';
+import { Sign } from '@/api/index.js';
+import { useSystemStore } from '@/stores/system.js';
+import key from '@/components/Custom/Icons/key.vue';
+import user from '@/components/Custom/Icons/user.vue';
+import Pacman from '@/components/Custom/Framework/Pacman/index.vue';
+import hutao from '@/assets/images/hutao.webp';
 
 
 const systemStore = useSystemStore();
@@ -64,7 +64,7 @@ const handleSignIn = async () => {
             ...resd,
             remember: toValue(remember),
         });
-        router.push(systemStore.defaultRoute);
+        router.push(systemStore.state.defaultRoute);
     }catch(err) {
         isLoading.value = false;
     }
@@ -85,7 +85,7 @@ const handleFocus = (name) => {
         <div class="maskLayer">
             <Pacman :loading="isLoading"/>
             <div class="container">
-                <header>{{ systemStore.title }}</header>
+                <header>{{ systemStore.state.title }}</header>
                 <main>
                     <div class="left">
                         <div><img :src="hutao" alt="" /></div>
diff --git a/vite.config.js b/vite.config.js
index 66aa14f..eabf1f0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,7 +20,7 @@ export default defineConfig(({ command, mode }) => {
         resolve: {
             alias: {
                 '@': fileURLToPath(new URL('./src', import.meta.url)),
-                '~': fileURLToPath(new URL('./src/components', import.meta.url)),
+                '@CustomComponents': fileURLToPath(new URL('./src/components/Custom', import.meta.url)),
                 '@utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
             }
         },
@@ -28,6 +28,7 @@ export default defineConfig(({ command, mode }) => {
             devSourcemap: true
         },
         server:{
+            host: "0.0.0.0",
             proxy: {
                 [env.VITE_BASE_URL]: {
                     target: env.VITE_HTTP_PROXY,