ADD: 模块激活流程

electron/controller/example.js

@@ -1,36 +0,0 @@
-'use strict';
-
-const { Controller } = require('ee-core');
-const Log = require('ee-core/log');
-const Services = require('ee-core/services');
-
-/**
- * example
- * @class
- */
-class ExampleController extends Controller {
-
-  constructor(ctx) {
-    super(ctx);
-  }
-
-
-  /**
-   * 所有方法接收两个参数
-   * @param args 前端传的参数
-   * @param event - ipc通信时才有值。详情见：控制器文档
-   */
-
-  /**
-   * test
-   */
-  async test () {
-    const result = await Services.get('example').test('electron');
-    Log.info('service result:', result);
-
-    return 'hello electron-egg';
-  }
-}
-
-ExampleController.toString = () => '[class ExampleController]';
-module.exports = ExampleController;  

electron/service/example.js

@@ -1,29 +0,0 @@
-'use strict';
-
-const { Service } = require('ee-core');
-
-/**
- * 示例服务（service层为单例）
- * @class
- */
-class ExampleService extends Service {
-
-  constructor(ctx) {
-    super(ctx);
-  }
-
-  /**
-   * test
-   */
-  async test(args) {
-    let obj = {
-      status:'ok',
-      params: args
-    }
-
-    return obj;
-  }
-}
-
-ExampleService.toString = () => '[class ExampleService]';
-module.exports = ExampleService;

frontend/.env.development

@@ -23,3 +23,5 @@ VITE_API_URL=/api
 VITE_PROXY=[["/api","http://192.168.1.124:18092/"]]
 #VITE_PROXY=[["/api","http://192.168.1.125:18092/"]]
 # VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]张文
+# 开启激活验证
+VITE_ACTIVATE_OPEN=true

frontend/.env.production

@@ -24,3 +24,5 @@ VITE_PWA=true
 # 线上环境接口地址
 #VITE_API_URL="/api" # 打包时用
 VITE_API_URL="http://192.168.1.125:18092/"
+# 开启激活验证
+VITE_ACTIVATE_OPEN=true

frontend/src/api/activate/index.ts

@@ -0,0 +1,14 @@
+import http from '@/api'
+import type { Activate } from '@/api/activate/interface'
+
+export const generateApplicationCode = (params: Activate.ApplicationCodePlaintext) => {
+    return http.post(`/activate/generateApplicationCode`, params)
+}
+
+export const verifyActivationCode = (activationCode: string) => {
+    return http.post(`/activate/verifyActivationCode`, { activationCode })
+}
+
+export const getLicense = () => {
+    return http.post(`/activate/getLicense`)
+}

frontend/src/api/activate/interface/index.ts

@@ -0,0 +1,55 @@
+//激活模块
+export namespace Activate {
+
+    export interface ApplicationModule {
+        /**
+         * 是否申请 1是 0否
+         */
+        apply: number;
+    }
+
+    export interface ActivateModule extends ApplicationModule {
+        /**
+         * 是否永久 1是 0否
+         */
+        permanently: number;
+    }
+
+    export interface ApplicationCodePlaintext {
+
+        /**
+         * 模拟式模块
+         */
+        simulate: ApplicationModule;
+
+        /**
+         * 数字式模块
+         */
+        digital: ApplicationModule;
+
+        /**
+         * 比对式模块
+         */
+        contrast: ApplicationModule;
+    }
+    export interface ActivationCodePlaintext {
+
+        /**
+         * 模拟式模块
+         */
+        simulate: ActivateModule;
+
+        /**
+         * 数字式模块
+         */
+        digital: ActivateModule;
+
+        /**
+         * 比对式模块
+         */
+        contrast: ActivateModule;
+    }
+
+
+
+}

frontend/src/layouts/components/Footer/index.vue

@@ -1,24 +1,21 @@
 <template>
     <div class="footer flx-align-center pl10">
         <el-dropdown>
-            <!-- <span class="el-dropdown-link">
-      {{ title }}
-      <el-icon class="el-icon--right">
-        <arrow-down />
-      </el-icon>
-    </span> -->
-            <!-- <el-button dictType="primary"> -->
             <div class="change_mode">
                 {{ title }}
                 <el-icon class="el-icon--right change_mode_down"><arrow-down /></el-icon>
                 <el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
             </div>
-            <!-- </el-button> -->
             <template #dropdown>
                 <el-dropdown-menu>
-                    <el-dropdown-item @click="handelOpen('模拟式')">模拟式模块</el-dropdown-item>
+                    <el-dropdown-item
-                    <el-dropdown-item @click="handelOpen('数字式')">数字式模块</el-dropdown-item>
+                        v-for="item in modeList"
-                    <el-dropdown-item @click="handelOpen('比对式')">比对式模块</el-dropdown-item>
+                        :key="item.key"
+                        :disabled="!item.activated"
+                        @click="handelOpen(item.code, item.key)"
+                    >
+                        {{ item.name }}
+                    </el-dropdown-item>
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
@@ -31,26 +28,52 @@
 import { computed } from 'vue'
 import { useAuthStore } from '@/stores/modules/auth'
 import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
 const authStore = useAuthStore()
 const modeStore = useModeStore()
 
 const title = computed(() => {
-    return modeStore.currentMode === '' ? '模拟式模块' : modeStore.currentMode + '模块'
+    return modeStore.currentMode === '' ? '选择模块' : modeStore.currentMode + '模块'
 })
-
+const activateInfo = authStore.activateInfo
-const handelOpen = async (item: string) => {
+const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
+const modeList = [
+    {
+        name: '模拟式模块',
+        code: '模拟式',
+        key: 'simulate',
+        activated:
+            isActivateOpen === 'true'
+                ? activateInfo.simulate.apply === 1 && activateInfo.simulate.permanently === 1
+                : true
+    },
+    {
+        name: '数字式模块',
+        code: '数字式',
+        key: 'digital',
+        activated:
+            isActivateOpen === 'true'
+                ? activateInfo.digital.apply === 1 && activateInfo.digital.permanently === 1
+                : true
+    },
+    {
+        name: '比对式模块',
+        code: '比对式',
+        key: 'contrast',
+        activated:
+            isActivateOpen === 'true'
+                ? activateInfo.contrast.apply === 1 && activateInfo.contrast.permanently === 1
+                : true
+    }
+]
+const handelOpen = async (item: string, key: string) => {
+    if (isActivateOpen === 'true' && (activateInfo[key].apply !== 1 || activateInfo[key].permanently !== 1)) {
+        ElMessage.warning(`${item}模块未激活`)
+        return
+    }
     await authStore.setShowMenu()
     modeStore.setCurrentMode(item) // 将模式code存入 store
-
-    //if (router.currentRoute.value.path === '/home/index') {
     // 强制刷新页面
     window.location.reload()
-    //} else {
-    //  router.push({ path: '/home/index' });
-    //}
 }
 </script>
 <style scoped lang="scss">

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -1,12 +1,12 @@
 <template>
-<!--  <div class="userInfo">-->
+    <!--  <div class="userInfo">-->
-<!--    <div class="icon">-->
+    <!--    <div class="icon">-->
-<!--      <Avatar/>-->
+    <!--      <Avatar/>-->
-<!--    </div>-->
+    <!--    </div>-->
-<!--    <div class="username">-->
+    <!--    <div class="username">-->
-<!--      {{ username }}-->
+    <!--      {{ username }}-->
-<!--    </div>-->
+    <!--    </div>-->
-<!--  </div>-->
+    <!--  </div>-->
     <el-dropdown trigger="click">
         <div class="userInfo">
             <div class="icon">
@@ -19,24 +19,29 @@
         <template #dropdown>
             <el-dropdown-menu>
                 <el-dropdown-item @click="openDialog('themeRef')">
-          <el-icon><Sunny /></el-icon>{{ t("header.changeTheme") }}
+                    <el-icon><Sunny /></el-icon>
+                    {{ t('header.changeTheme') }}
                 </el-dropdown-item>
                 <el-dropdown-item @click="openDialog('infoRef')">
-          <el-icon><User /></el-icon>{{ t("header.personalData") }}
+                    <el-icon><User /></el-icon>
+                    {{ t('header.personalData') }}
                 </el-dropdown-item>
                 <el-dropdown-item @click="openDialog('passwordRef')">
-          <el-icon><Edit /></el-icon>{{ t("header.changePassword") }}
+                    <el-icon><Edit /></el-icon>
+                    {{ t('header.changePassword') }}
                 </el-dropdown-item>
-        <el-dropdown-item @click="changeMode">
+                <el-dropdown-item @click="changeMode" v-if="authStore.showMenuFlag">
-          <el-icon><Switch /></el-icon>{{ t("header.changeMode") }}
+                    <el-icon><Switch /></el-icon>
+                    {{ t('header.changeMode') }}
                 </el-dropdown-item>
                 <el-dropdown-item @click="openDialog('versionRegisterRef')">
-          <el-icon><SetUp /></el-icon>{{ t("header.versionRegister") }}
+                    <el-icon><SetUp /></el-icon>
+                    {{ t('header.versionRegister') }}
                 </el-dropdown-item>
                 <el-dropdown trigger="hover" placement="left-start" v-if="userStore.userInfo.loginName == 'root'">
                     <div class="custom-dropdown-trigger">
                         <el-icon><Tools /></el-icon>
-            <span>{{ t("header.changeScene") }}</span>
+                        <span>{{ t('header.changeScene') }}</span>
                     </div>
                     <template #dropdown>
                         <el-dropdown-menu>
@@ -47,8 +52,8 @@
                                     'custom-dropdown-item': true,
                                     active: item.value === appSceneStore.currentScene
                                 }"
-                  @click="changeScene(item.value?? '')"
+                                @click="changeScene(item.value ?? '')"
-                  :disabled = "item.value === appSceneStore.currentScene"
+                                :disabled="item.value === appSceneStore.currentScene"
                             >
                                 {{ item.name }}
                             </el-dropdown-item>
@@ -69,103 +74,92 @@
     <VersionDialog ref="versionRegisterRef"></VersionDialog>
     <!-- ThemeDialog -->
     <ThemeDialog ref="themeRef"></ThemeDialog>
-
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from 'vue'
-import { LOGIN_URL } from "@/config";
+import { LOGIN_URL } from '@/config'
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
-import { logoutApi } from "@/api/user/login";
+import { logoutApi } from '@/api/user/login'
-import { useUserStore } from "@/stores/modules/user";
+import { useUserStore } from '@/stores/modules/user'
-import { ElMessageBox, ElMessage, CHANGE_EVENT } from "element-plus";
+import { ElMessage, ElMessageBox } from 'element-plus'
-import InfoDialog from "./InfoDialog.vue";
+import InfoDialog from './InfoDialog.vue'
-import PasswordDialog from "./PasswordDialog.vue";
+import PasswordDialog from './PasswordDialog.vue'
-import ThemeDialog from "./ThemeDialog.vue";
+import ThemeDialog from './ThemeDialog.vue'
-import VersionDialog from "@/views/system/versionRegister/index.vue";
+import VersionDialog from '@/views/system/versionRegister/index.vue'
-import { computed } from "vue";
+import { Avatar, Sunny, Switch, Tools } from '@element-plus/icons-vue'
-import { ArrowLeft, Avatar, Delete, Document, Sunny, Switch ,Tools} from "@element-plus/icons-vue";
+import { useAuthStore } from '@/stores/modules/auth'
-import AssemblySize from "./components/AssemblySize.vue";
+import { useDictStore } from '@/stores/modules/dict'
-import Language from "./components/Language.vue";
+import { useAppSceneStore, useModeStore } from '@/stores/modules/mode'
-import SearchMenu from "./components/SearchMenu.vue";
+import { useTheme } from '@/hooks/useTheme'
-import ThemeSetting from "./components/ThemeSetting.vue";
+import { useI18n } from 'vue-i18n'
-import Message from "./components/Message.vue";
+import { updateScene } from '@/api/system/base/index'
-import Fullscreen from "./components/Fullscreen.vue";
-import { useAuthStore } from "@/stores/modules/auth";
-import {useDictStore} from "@/stores/modules/dict";
-import { useModeStore,useAppSceneStore } from "@/stores/modules/mode";
-const userStore = useUserStore();
-const dictStore = useDictStore();
-const username = computed(() => userStore.userInfo.name);
 
-const router = useRouter();
+const userStore = useUserStore()
-const authStore = useAuthStore();
+const dictStore = useDictStore()
-const modeStore = useModeStore();
+const username = computed(() => userStore.userInfo.name)
-const AppSceneStore = useAppSceneStore();
-import { useTheme } from "@/hooks/useTheme";
-import { useI18n } from "vue-i18n";
-import {updateScene} from '@/api/system/base/index'
 
+const router = useRouter()
+const authStore = useAuthStore()
+const modeStore = useModeStore()
+const AppSceneStore = useAppSceneStore()
 
-const { changePrimary} = useTheme();
+const { changePrimary } = useTheme()
 
 // 初始化 i18n
-const { t } = useI18n(); // 使用 t 方法替代 $t
+const { t } = useI18n() // 使用 t 方法替代 $t
 
 // 退出登录
 const logout = () => {
-  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
+    ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
-    confirmButtonText: "确定",
+        confirmButtonText: '确定',
-    cancelButtonText: "取消",
+        cancelButtonText: '取消',
-    type: "warning",
+        type: 'warning'
     }).then(async () => {
         // 1.执行退出登录接口
-    await logoutApi();
+        await logoutApi()
         // 2.清除 Token
-    userStore.setAccessToken("");
+        userStore.setAccessToken('')
-    userStore.setRefreshToken("");
+        userStore.setRefreshToken('')
         userStore.setExp(0)
-    userStore.setUserInfo({id: "", name: ""});
+        userStore.setUserInfo({ id: '', name: '' })
         userStore.setIsRefreshToken(false)
-    dictStore.setDictData([]);
+        dictStore.setDictData([])
-    modeStore.setCurrentMode('');
+        modeStore.setCurrentMode('')
-    AppSceneStore.setCurrentMode('');
+        AppSceneStore.setCurrentMode('')
         // 3.重定向到登陆页
-    router.replace(LOGIN_URL);
+        ElMessage.success('退出登录成功！')
-    ElMessage.success("退出登录成功！");
         //重置菜单/导航栏权限
-    authStore.resetAuthStore();
+        await authStore.resetAuthStore()
-  });
+        await router.push(LOGIN_URL)
-};
+    })
+}
 
 // 打开修改密码和个人信息弹窗
-const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
+const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null)
-const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
+const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null)
-const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null);
+const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null)
-const themeRef = ref<InstanceType<typeof ThemeDialog> | null>(null);
+const themeRef = ref<InstanceType<typeof ThemeDialog> | null>(null)
 const openDialog = (ref: string) => {
-  if (ref == "infoRef") infoRef.value?.openDialog();
+    if (ref == 'infoRef') infoRef.value?.openDialog()
-  if (ref == "passwordRef") passwordRef.value?.openDialog();
+    if (ref == 'passwordRef') passwordRef.value?.openDialog()
-  if (ref == "versionRegisterRef") versionRegisterRef.value?.openDialog();
+    if (ref == 'versionRegisterRef') versionRegisterRef.value?.openDialog()
-  if (ref == "themeRef") themeRef.value?.openDialog();
+    if (ref == 'themeRef') themeRef.value?.openDialog()
+}
 
-};
+const appSceneStore = useAppSceneStore()
-
-
-const appSceneStore = useAppSceneStore();
 
 const changeScene = async (value: string) => {
-  appSceneStore.setCurrentMode(value);
+    appSceneStore.setCurrentMode(value)
-  await updateScene({scene :dictStore.getDictData('app_scene').find(item => item.value == value)?.id});
+    await updateScene({ scene: dictStore.getDictData('app_scene').find(item => item.value == value)?.id })
     // 强制刷新页面
-  window.location.reload();
+    window.location.reload()
-};
+}
-
 
 //模式切换
 const changeMode = () => {
-  authStore.changeModel();
+    authStore.changeModel()
-};
+}
 </script>
 
 <style scoped lang="scss">
@@ -213,6 +207,6 @@ const changeMode = () => {
 :deep(.el-dropdown-menu__item.custom-dropdown-item.active),
 :deep(.el-dropdown-menu__item.custom-dropdown-item.active:hover) {
     background-color: var(--el-color-primary-light-9) !important;
-  color: var(--el-color-primary)
+    color: var(--el-color-primary);
 }
 </style>

frontend/src/routers/index.ts

@@ -3,14 +3,14 @@ import { useUserStore } from '@/stores/modules/user'
 import { useAuthStore } from '@/stores/modules/auth'
 import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config'
 import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
-import { staticRouter, errorRouter } from '@/routers/modules/staticRouter'
+import { staticRouter } from '@/routers/modules/staticRouter'
 import NProgress from '@/config/nprogress'
 
 const mode = import.meta.env.VITE_ROUTER_MODE
 
 const routerMode = {
     hash: () => createWebHashHistory(),
-  history: () => createWebHistory(),
+    history: () => createWebHistory()
 }
 
 /**
@@ -30,13 +30,12 @@ const routerMode = {
  * @param meta.isKeepAlive ==> 当前路由是否缓存
  * */
 const router = createRouter({
-  
     history: routerMode[mode](),
     routes: [...staticRouter],
     // 不区分路由大小写，非严格模式下提供了更宽松的路径匹配
     strict: false,
     // 页面刷新时，滚动条位置还原
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+    scrollBehavior: () => ({ left: 0, top: 0 })
 })
 
 /**
@@ -71,8 +70,13 @@ router.beforeEach(async (to, from, next) => {
     }
 
     // 7.存储 routerName 做按钮权限筛选
-  authStore.setRouteName(to.name as string)
+    await authStore.setRouteName(to.name as string)
-  // 8.正常访问页面
+    // 8. 当前页面是否有激活信息，没有就刷新
+    const activateInfo = authStore.activateInfo
+    if (!Object.keys(activateInfo).length) {
+        await authStore.setActivateInfo()
+    }
+    // 9.正常访问页面
     next()
 })
 

frontend/src/routers/modules/staticRouter.ts

@@ -1,5 +1,6 @@
-import { RouteRecordRaw } from 'vue-router'
+import { type RouteRecordRaw } from 'vue-router'
 import { HOME_URL, LOGIN_URL } from '@/config'
+
 export const Layout = () => import('@/layouts/index.vue')
 /**
  * staticRouter (静态路由)

frontend/src/stores/modules/auth.ts

@@ -1,15 +1,12 @@
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
-import { AuthState } from "@/stores/interface";
+import { AuthState } from '@/stores/interface'
-import { getAuthButtonListApi, getAuthMenuListApi } from "@/api/user/login";
+import { getAuthButtonListApi, getAuthMenuListApi } from '@/api/user/login'
-import {
+import { getAllBreadcrumbList, getFlatMenuList, getShowMenuList } from '@/utils'
-  getFlatMenuList,
+import { useRouter } from 'vue-router'
-  getShowMenuList,
+import { AUTH_STORE_KEY } from '@/stores/constant'
-  getAllBreadcrumbList,
+import { useModeStore } from '@/stores/modules/mode'
-} from "@/utils";
+import { getLicense } from '@/api/activate'
-import { useRouter } from "vue-router";
+import type { Activate } from '@/api/activate/interface'
-import { AUTH_STORE_KEY } from "@/stores/constant";
-import {useModeStore} from '@/stores/modules/mode'
-
 
 export const useAuthStore = defineStore({
     id: AUTH_STORE_KEY,
@@ -19,71 +16,74 @@ export const useAuthStore = defineStore({
         // 菜单权限列表
         authMenuList: [],
         // 当前页面的 router name，用来做按钮权限筛选
-    routeName: "",
+        routeName: '',
         //登录不显示菜单栏和导航栏，点击进入测试的时候显示
-    showMenuFlag: JSON.parse(localStorage.getItem("showMenuFlag")),
+        showMenuFlag: JSON.parse(localStorage.getItem('showMenuFlag') as string),
         router: useRouter(),
+        activateInfo: {}
     }),
     getters: {
         // 按钮权限列表
-    authButtonListGet: (state) => state.authButtonList,
+        authButtonListGet: state => state.authButtonList,
         // 菜单权限列表 ==> 这里的菜单没有经过任何处理
-    authMenuListGet: (state) => state.authMenuList,
+        authMenuListGet: state => state.authMenuList,
         // 菜单权限列表 ==> 左侧菜单栏渲染，需要剔除 isHide == true
-    showMenuListGet: (state) => getShowMenuList(state.authMenuList),
+        showMenuListGet: state => getShowMenuList(state.authMenuList),
         // 菜单权限列表 ==> 扁平化之后的一维数组菜单，主要用来添加动态路由
-    flatMenuListGet: (state) => getFlatMenuList(state.authMenuList),
+        flatMenuListGet: state => getFlatMenuList(state.authMenuList),
         // 递归处理后的所有面包屑导航列表
-    breadcrumbListGet: (state) => getAllBreadcrumbList(state.authMenuList),
+        breadcrumbListGet: state => getAllBreadcrumbList(state.authMenuList),
         //是否显示菜单和导航栏
-    showMenuFlagGet: (state) => state.showMenuFlag,
+        showMenuFlagGet: state => state.showMenuFlag,
+        // 获取激活信息
+        activateInfoGet: state => state.activateInfo
     },
     actions: {
         // Get AuthButtonList
         async getAuthButtonList() {
-      const { data } = await getAuthButtonListApi();
+            const { data } = await getAuthButtonListApi()
-      this.authButtonList = data;
+            this.authButtonList = data
         },
         // Get AuthMenuList
         async getAuthMenuList() {
             const modeStore = useModeStore()
 
-      const { data: menuData } = await getAuthMenuListApi();
+            const { data: menuData } = await getAuthMenuListApi()
             // 根据不同模式过滤菜单
-      const filteredMenu = modeStore.currentMode === '比对式' 
+            const filteredMenu =
+                modeStore.currentMode === '比对式'
                     ? filterMenuByExcludedNames(menuData, ['testSource', 'testScript', 'controlSource'])
-        : filterMenuByExcludedNames(menuData, ['standardDevice']);
+                    : filterMenuByExcludedNames(menuData, ['standardDevice'])
-  
-      this.authMenuList = filteredMenu;
 
+            this.authMenuList = filteredMenu
         },
         // Set RouteName
         async setRouteName(name: string) {
-      this.routeName = name;
+            this.routeName = name
         },
         //重置权限
         async resetAuthStore() {
-      this.showMenuFlag = false;
+            this.showMenuFlag = false
-      localStorage.removeItem("showMenuFlag");
+            localStorage.removeItem('showMenuFlag')
         },
         //修改判断菜单栏/导航栏显示条件
         async setShowMenu() {
-      this.showMenuFlag = true;
+            this.showMenuFlag = true
-      localStorage.setItem("showMenuFlag", true);
+            localStorage.setItem('showMenuFlag', 'true')
         },
         //更改模式
         async changeModel() {
-      this.showMenuFlag = !this.showMenuFlag;
+            this.showMenuFlag = false
-      if (this.showMenuFlag) {
+            localStorage.removeItem('showMenuFlag')
-        localStorage.setItem("showMenuFlag", true);
+            this.router.push({ path: '/home/index' })
-      } else {
+        },
-        localStorage.removeItem("showMenuFlag");
+        async setActivateInfo() {
+            const license_result = await getLicense()
+            const licenseData = license_result.data as unknown as Activate.ActivationCodePlaintext
+            this.activateInfo = licenseData
         }
-      this.router.push({ path: "/home/index" });
+    }
-    },
+})
-  },
-});
-
 
 /**
  * 通用菜单过滤函数
@@ -95,9 +95,9 @@ function filterMenuByExcludedNames(menuList: any[], excludedNames: string[]): an
     return menuList.filter(menu => {
         // 如果当前项有 children，递归处理子项
         if (menu.children && menu.children.length > 0) {
-      menu.children = filterMenuByExcludedNames(menu.children, excludedNames);
+            menu.children = filterMenuByExcludedNames(menu.children, excludedNames)
         }
         // 过滤掉在排除列表中的菜单项
-    return !excludedNames.includes(menu.name);
+        return !excludedNames.includes(menu.name)
-  });
+    })
 }

frontend/src/utils/ipcRenderer.js

@@ -1,5 +1,10 @@
-const Renderer =
+declare global {
-  (window.require && window.require('electron')) || window.electron || {}
+    interface Window {
+        electron?: any;
+    }
+}
+
+const Renderer = (window.require && window.require('electron')) || window.electron || {};
 
 /**
  * ipc
@@ -21,11 +26,14 @@ const Renderer =
 /**
  * ipc
  */
-const ipc = Renderer.ipcRenderer || undefined
+const ipc = Renderer.ipcRenderer || undefined;
 
 /**
  * 是否为EE环境
  */
-const isEE = ipc ? true : false
+const isEE = ipc ? true : false;
+
+export {
+    Renderer, ipc, isEE
+};
 
-export { Renderer, ipc, isEE }

frontend/src/views/home/index.vue

@@ -1,94 +1,19 @@
 <template>
-   <!-- style=" height: calc(100vh - 120px) !important;" -->
     <div class="homeView">
         <model v-if="!authStore.showMenuFlag"></model>
         <dashboard v-if="authStore.showMenuFlag"></dashboard>
     </div>
-
-  <!-- <div class="main">
-    <div class="main_container">
-      <div class="mode" v-for="(item, index) in modeList" :key="index">
-        <div class="mode_top">
-          <div class="mode_name">
-            <p>
-              {{ item.name }}
-            </p>
-          </div>
-          <div class="test_button">
-            <el-button
-              size="small"
-              dictType="primary"
-              @click="handelOpen(item.isActive)"
-              >进入检测</el-button
-            >
-          </div>
-        </div>
-        <div class="mode_img">
-          <img :src="item.img" />
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
+import { useAuthStore } from '@/stores/modules/auth'
-import { ElMessage } from "element-plus";
-import { useAuthStore } from "@/stores/modules/auth";
 
-import model from "./tabs/model.vue";
+import model from './tabs/model.vue'
-import dashboard from "./tabs/dashboard.vue";
+import dashboard from './tabs/dashboard.vue'
-import { onMounted, ref } from "vue";
-// defineOptions({
-//       name: 'home'
-//   })
-const authStore = useAuthStore();
 
-const activeIndex = ref("1-1");
+const authStore = useAuthStore()
-const router = useRouter();
-const modeList = [
-  {
-    name: "模拟式模式",
-    code:"模拟式",
-    img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
-    isActive: true,
-  },
-  {
-    name: "数字式模式",
-    code:"数字式",
-    subName: "启用数字检测计划",
-    img: new URL('/src/assets/images/dashboard/2.svg', import.meta.url).href,
-    isActive: false,
-  },
-  {
-    name: "比对式模式",
-    code:"比对式",
-    subName: "启用比对式检测计划",
-    img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
-    isActive: false,
-  },
-];
-const handelOpen = async (isActive: any) => {
-  await authStore.setShowMenu();
-  return;
-  // if (isActive) {
-  //   router.push({ path: "/static" });
-  // } else {
-  //   ElMessage({
-  //     message: "当前模式未配置",
-  //     type: "warning",
-  //   });
-  // }
-};
-const handleSelect = (key: string, keyPath: string[]) => {
-  //console.log(key, keyPath);
-};
-onMounted(() => {
-  //console.log(111);
-
-});
 </script>
 <style lang="scss" scoped>
-.homeView{
+.homeView {
     width: 100%;
     // height: calc(100vh - 120px);
     height: 100%;

frontend/src/views/home/tabs/model.vue

@@ -1,15 +1,13 @@
 <!-- 模式切换页面 -->
 <template>
     <div class="main_container box">
-    <!-- :style="{
+        <el-carousel :interval="5000" type="card" style="width: 60%; margin-left: 20%; height: 70%">
-      height: authStore?.showMenuFlag
+            <el-carousel-item
-        ? 'calc(100vh - 165px)'
+                class="mode"
-        : 'calc(100vh - 125px)',
+                :class="{ modeBG: index != 0 }"
-    }" -->
+                v-for="(item, index) in modeList"
-
+                :key="index"
-    <el-carousel :interval="5000" type="card" style="width: 60%;margin-left: 20%;height: 70%;">
+            >
-      <el-carousel-item class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
-
                 <div class="mode_top">
                     <div class="mode_name">
                         {{ item.name }}
@@ -20,91 +18,75 @@
                     <img :src="item.img" />
                 </div>
                 <div class="test_button">
-          <el-button size="large" type="primary" @click="handelOpen(item)"
+                    <el-button size="large" type="primary" @click="handelOpen(item)" :disabled="!item.activated">
-            :disabled="item.isActive == false">进入检测</el-button>
+                        进入检测
+                    </el-button>
                 </div>
             </el-carousel-item>
         </el-carousel>
-
-
-
-    <!-- <div class="mode" :class="{ modeBG: index != 0 }" v-for="(item, index) in modeList" :key="index">
-      <div class="mode_top">
-        <div class="mode_name">
-          <p>
-            {{ item.name }}
-          </p>
-        </div>
-        <div class="test_button">
-          <el-button size="small" type="primary" @click="handelOpen(item)"
-            :disabled="item.isActive == false">进入检测</el-button>
-        </div>
-      </div>
-      <div class="mode_img">
-        <img :src="item.img" />
-      </div>
-    </div> -->
     </div>
 </template>
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
+import { useAuthStore } from '@/stores/modules/auth'
-import { ElMessage } from "element-plus";
+import { useAppSceneStore, useModeStore } from '@/stores/modules/mode' // 引入模式 store
-import { useAuthStore } from "@/stores/modules/auth";
+import { getCurrentScene } from '@/api/user/login'
-import { useModeStore, useAppSceneStore } from "@/stores/modules/mode"; // 引入模式 store
+
-import { ref } from "vue";
+const authStore = useAuthStore()
-import {getCurrentScene} from "@/api/user/login";
+const modeStore = useModeStore() // 使用模式 store
+const AppSceneStore = useAppSceneStore()
+const activateInfo = authStore.activateInfo
+const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
 
-const authStore = useAuthStore();
-const modeStore = useModeStore(); // 使用模式 store
-const AppSceneStore = useAppSceneStore();
-const activeIndex = ref("1-1");
-const router = useRouter();
 const modeList = [
     {
-    name: "模拟式模块",
+        name: '模拟式模块',
-    code: "模拟式",
+        code: '模拟式',
-    subName: "未启用模拟式检测计划",
+        subName: '未启用模拟式检测计划',
         img: new URL('/src/assets/images/dashboard/1.svg', import.meta.url).href,
-    isActive: true,
+        activated:
+            isActivateOpen === 'true'
+                ? activateInfo.simulate.apply === 1 && activateInfo.simulate.permanently === 1
+                : true
     },
     {
-    name: "数字式模块",
+        name: '数字式模块',
-    code: "数字式",
+        code: '数字式',
-    subName: "启用数字检测计划",
+        subName: '启用数字检测计划',
         img: new URL('/src/assets/images/dashboard/2.svg', import.meta.url).href,
-    isActive: true,
+        activated:
+            isActivateOpen === 'true'
+                ? activateInfo.digital.apply === 1 && activateInfo.digital.permanently === 1
+                : true
     },
     {
-    name: "比对式模块",
+        name: '比对式模块',
-    code: "比对式",
+        code: '比对式',
-    subName: "启用比对式检测计划",
+        subName: '启用比对式检测计划',
         img: new URL('/src/assets/images/dashboard/3.svg', import.meta.url).href,
-    isActive: true,
+        activated:
-  },
+            isActivateOpen === 'true'
-];
+                ? activateInfo.contrast.apply === 1 && activateInfo.contrast.permanently === 1
+                : true
+    }
+]
 const handelOpen = async (item: any) => {
-  modeStore.setCurrentMode(item.code); // 将模式code存入 store
+    if (!item.activated) {
-  const {data:scene} = await getCurrentScene(); // 获取当前场景
+        ElMessage.warning(`${item.name}未激活`)
-  // AppSceneStore.setCurrentMode(scene+'');//0：省级平台，1：设备出厂，2：研发自测
+        return
-  AppSceneStore.setCurrentMode(scene+'');//0：省级平台，1：设备出厂，2：研发自测
+    }
-  await authStore.setShowMenu();
+    modeStore.setCurrentMode(item.code) // 将模式code存入 store
-  await authStore.getAuthMenuList();
+    const { data: scene } = await getCurrentScene() // 获取当前场景
-  return;
+    AppSceneStore.setCurrentMode(scene + '') //0：省级平台，1：设备出厂，2：研发自测
-  // if (isActive) {
+    await authStore.setShowMenu()
-  //   router.push({ path: "/static" });
+    await authStore.getAuthMenuList()
-  // } else {
+    return
-  //   ElMessage({
+}
-  //     message: "当前模式未配置",
-  //     type: "warning",
-  //   });
-  // }
-};
 const handleSelect = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath);
+    console.log(key, keyPath)
-};
+}
 onMounted(() => {
-  console.log();
+    console.log()
-});
+})
 </script>
 <style lang="scss" scoped>
 .box {
@@ -118,12 +100,9 @@ onMounted(() => {
     // background-attachment: fixed;
     // /* 让背景图基于容器大小伸缩 */
     // background-size: cover;
-
-
 }
 
 .main_container {
-
     width: 100%;
     // height: calc(100vh - 165px);
     height: 100%;
@@ -134,20 +113,20 @@ onMounted(() => {
     align-items: center;
 
     .mode {
-
         height: 99.5% !important;
         border: 1px solid #eee;
         border-radius: 6px;
-    background: linear-gradient(180deg,
+        background: linear-gradient(
+            180deg,
             rgba(0, 153, 255, 1) 0%,
             rgba(0, 153, 255, 1) 0%,
             rgba(0, 102, 255, 1) 65%,
             rgba(0, 51, 255, 1) 100%,
-        rgba(0, 51, 255, 1) 100%);
+            rgba(0, 51, 255, 1) 100%
+        );
 
         position: absolute;
 
-
         //   padding: 40px 0;
         .mode_top {
             width: 100%;
@@ -161,7 +140,7 @@ onMounted(() => {
             .mode_name {
                 width: 100%;
                 height: 40px;
-        font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
+                font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
                 font-weight: 700;
                 font-style: normal;
                 font-size: 20px;
@@ -172,7 +151,7 @@ onMounted(() => {
                 // margin-top: 20px;
 
                 .mode_subName {
-          font-family: "微软雅黑", sans-serif;
+                    font-family: '微软雅黑', sans-serif;
                     font-weight: 400;
                     font-style: normal;
                     font-size: 12px;
@@ -231,7 +210,6 @@ onMounted(() => {
             justify-content: center;
             margin-bottom: 20px;
 
-
             .test_button:hover {
                 background: rgba(0, 0, 0, 0.2);
             }
@@ -244,7 +222,7 @@ onMounted(() => {
         left: 50%;
         transform: translateX(-50%);
         border-radius: 5px;
-    font-family: "微软雅黑", sans-serif;
+        font-family: '微软雅黑', sans-serif;
         font-weight: 400;
         font-style: normal;
         color: #fff;
@@ -253,24 +231,22 @@ onMounted(() => {
         cursor: pointer;
     }
 
-
     .mode:nth-child(3n + 3) {
-    background: linear-gradient(180deg,
+        background: linear-gradient(
+            180deg,
             rgba(0, 153, 255, 1) 0%,
             rgba(0, 153, 255, 1) 0%,
             rgba(0, 102, 255, 1) 39%,
             rgba(102, 51, 204, 1) 100%,
-        rgba(102, 51, 204, 1) 100%);
+            rgba(102, 51, 204, 1) 100%
-
+        );
     }
 
     .mode_off {
-
         .mode_name,
         .mode_subName,
         .test_button {
             color: #fff !important;
-
         }
 
         .test_button:hover {
@@ -297,7 +273,6 @@ onMounted(() => {
 //     ;
 //   }
 
-
 // }
 :deep(.el-carousel__container) {
     height: 100%;

frontend/src/views/login/components/LoginForm.vue

@@ -96,12 +96,20 @@ const login = (formEl: FormInstance | undefined) => {
                 username: forge.util.encode64(loginForm.username),
                 password: encryptPassword(loginForm.password)
             })
+            ElNotification({
+                title: getTimeState(),
+                message: '登录成功',
+                type: 'success',
+                duration: 3000
+            })
             userStore.setAccessToken(data.accessToken)
             userStore.setRefreshToken(data.refreshToken)
             userStore.setUserInfo(data.userInfo)
             if (loginForm.checked) {
                 userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
             }
+            // 设置激活信息
+            await authStore.setActivateInfo()
             const response = await getDictList()
             const dictData = response.data as unknown as Dict[]
             await dictStore.initDictData(dictData)
@@ -109,19 +117,12 @@ const login = (formEl: FormInstance | undefined) => {
             await initDynamicRouter()
 
             // 3.清空 tabs、keepAlive 数据
-            tabsStore.setTabs([])
+            await tabsStore.setTabs([])
-            keepAliveStore.setKeepAliveName([])
+            await keepAliveStore.setKeepAliveName([])
-
+            // 登录默认不显示菜单和导航栏
-            // 4.跳转到首页
+            await authStore.resetAuthStore()
-            router.push(HOME_URL)
+            // 跳转到首页
-            // 5.登录默认不显示菜单和导航栏
+            await router.push(HOME_URL)
-            authStore.resetAuthStore()
-            ElNotification({
-                title: getTimeState(),
-                message: '登录成功',
-                type: 'success',
-                duration: 3000
-            })
         } finally {
             loading.value = false
         }

frontend/src/views/system/versionRegister/index.vue

@@ -1,55 +1,281 @@
-
 <template>
-    <el-dialog v-model="dialogVisible" title="程序激活"  v-bind="dialogSmall">
+    <el-dialog
-        <el-form :model="formContent">
+        v-model="dialogVisible"
-        <el-form-item label="程序版本号" prop="id" :label-width="100">
+        title="程序激活"
-            <el-input v-model='formContent.id' disabled/>
+        width="450px"
-        </el-form-item>
+        draggable
-        <el-form-item label="模拟式模块" prop="type" :label-width="100">
+        :close-on-click-modal="false"
-            <el-checkbox v-model="formContent.type"  label="已激活"/>
+        :before-close="beforeClose"
-        </el-form-item>
+        :destroy-on-close="true"
-        <el-form-item label="数字式模块" prop="type" :label-width="100">
+    >
-            <el-checkbox v-model="formContent.type"  label="未激活"/>
+        <el-form :label-width="100" label-position="left">
-        </el-form-item>
+            <el-form-item label="程序版本号">
-        <el-form-item label="比对式模块" prop="type" :label-width="100">
+                <el-text style="margin-left: 82%">{{ 'v' + versionNumber }}</el-text>
-            <el-checkbox v-model="formContent.type"  label="未激活"/>
-        </el-form-item>
-        <el-form-item label="序列号" prop="code" :label-width="100">
-            <el-input v-model='formContent.code' placeholder="请输入序列号" :rows="2" type="textarea"/>
-        </el-form-item>
-        <el-form-item label="注册码" prop="licenseKey" :label-width="100">
-            <el-input v-model='formContent.licenseKey' placeholder="请输入注册码" :rows="2" type="textarea"/>
             </el-form-item>
         </el-form>
-      <template #footer>
+        <el-descriptions
-        <span class="dialog-footer">
+            class="mode-descriptions"
-          <el-button @click="dialogVisible = false">取消</el-button>
+            v-if="!hadActivationCode"
-          <el-button type="primary" @click="dialogVisible = false">激活</el-button>
+            title="模块激活状态"
-        </span>
+            size="small"
+        ></el-descriptions>
+        <el-form
+            ref="applicationFormRef"
+            v-if="!hadActivationCode"
+            :model="applicationForm"
+            label-position="left"
+            :label-width="100"
+        >
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.simulate.apply !== 1 || activateInfo.simulate.permanently !== 1"
+                label="模拟式模块"
+                prop="simulate.apply"
+            >
+                <el-tag disable-transitions type="danger">未激活</el-tag>
+                <el-checkbox
+                    :false-value="0"
+                    :true-value="1"
+                    class="apply-checkbox"
+                    v-model="applicationForm.simulate.apply"
+                    label="激活"
+                />
+            </el-form-item>
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.simulate.apply === 1 && activateInfo.simulate.permanently === 1"
+                label="模拟式模块"
+            >
+                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
+            </el-form-item>
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.digital.apply !== 1 || activateInfo.digital.permanently !== 1"
+                label="数字式模块"
+                prop="digital.apply"
+            >
+                <el-tag disable-transitions type="danger">未激活</el-tag>
+                <el-checkbox
+                    :false-value="0"
+                    :true-value="1"
+                    class="apply-checkbox"
+                    v-model="applicationForm.digital.apply"
+                    label="激活"
+                />
+            </el-form-item>
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.digital.apply === 1 && activateInfo.digital.permanently === 1"
+                label="数字式模块"
+            >
+                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
+            </el-form-item>
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.contrast.apply !== 1 || activateInfo.contrast.permanently !== 1"
+                label="比对式模块"
+                prop="contrast.apply"
+            >
+                <el-tag disable-transitions type="danger">未激活</el-tag>
+                <el-checkbox
+                    :false-value="0"
+                    :true-value="1"
+                    class="apply-checkbox"
+                    v-model="applicationForm.contrast.apply"
+                    label="激活"
+                />
+            </el-form-item>
+            <el-form-item
+                class="mode-item"
+                v-if="activateInfo.contrast.apply === 1 && activateInfo.contrast.permanently === 1"
+                label="比对式模块"
+            >
+                <el-tag class="activated-tag" disable-transitions type="success">已激活</el-tag>
+            </el-form-item>
+        </el-form>
+        <el-row v-if="applicationCode">
+            <el-descriptions class="mode-descriptions" title="设备申请码" size="small"></el-descriptions>
+            <el-tooltip placement="top-end" effect="light">
+                <el-input
+                    v-model="applicationCode"
+                    :rows="5"
+                    type="textarea"
+                    readonly
+                    resize="none"
+                    class="code-display"
+                />
+                <template #content>
+                    <el-button size="small" @click="copyCode" icon="DocumentCopy">复制</el-button>
+                </template>
+            </el-tooltip>
+        </el-row>
+        <el-row v-if="applicationCode || hadActivationCode">
+            <el-descriptions class="mode-descriptions" title="设备激活码" size="small"></el-descriptions>
+            <el-input
+                placeholder="请输入设备激活码"
+                v-model="activationCode"
+                :rows="5"
+                resize="none"
+                type="textarea"
+                class="code-input"
+            />
+        </el-row>
+        <template #footer v-if="!activatedAll">
+            <div v-if="!applicationCode && !hadActivationCode">
+                <el-button @click="cancel">取消</el-button>
+                <el-button type="primary" @click="getApplicationCode">获取申请码</el-button>
+                <el-button type="primary" @click="hadActivationCode = true">已有激活码</el-button>
+            </div>
+            <div v-if="applicationCode || hadActivationCode">
+                <el-button @click="cancel">取消</el-button>
+                <el-button :disabled="!activationCode" type="primary" @click="submitActivation">激活</el-button>
+            </div>
         </template>
     </el-dialog>
-  </template>
+</template>
 
-  <script setup lang="ts">
+<script setup lang="ts">
-  import { type VersionRegister } from "@/api/system/versionRegister/interface";
+import { ref } from 'vue'
-  import { ref } from "vue";
+import { version } from '../../../../package.json'
-  import { dialogSmall } from '@/utils/elementBind'
+import type { Activate } from '@/api/activate/interface'
-  const formContent = ref<VersionRegister.ResSys_Reg_Res>({
+import { generateApplicationCode, verifyActivationCode } from '@/api/activate'
-        id: '',     //版本注册表Id
+import { useAuthStore } from '@/stores/modules/auth'
-        type: '', //版本类型（模拟式、数字式、比对式）
-        code: '', //注册码
-        licenseKey: '', //密钥
-        expireDate: '', //到期时间
-        waveRecord: 0,
-        realTime: 20,
-        statistics: 5,
-        flicker: 1,
-        state: 1, //状态
-    })
-  const dialogVisible = ref(false);
-  const openDialog = () => {
-    dialogVisible.value = true;
-  };
 
-  defineExpose({ openDialog });
+const authStore = useAuthStore()
-  </script>
+const activateInfo = authStore.activateInfo
+const versionNumber = ref(version)
+const applicationForm = reactive<Activate.ApplicationCodePlaintext>({
+    simulate: { apply: 0 },
+    digital: { apply: 0 },
+    contrast: { apply: 0 }
+})
+const activatedAll = computed(() => {
+    return (
+        activateInfo.simulate.apply === 1 &&
+        activateInfo.simulate.permanently === 1 &&
+        activateInfo.digital.apply === 1 &&
+        activateInfo.digital.permanently === 1 &&
+        activateInfo.contrast.apply === 1 &&
+        activateInfo.contrast.permanently === 1
+    )
+})
+const applicationFormRef = ref()
+const hadActivationCode = ref(false)
+const applicationCode = ref('')
+const activationCode = ref('')
+const dialogVisible = ref(false)
+// 获取申请码
+const getApplicationCode = async () => {
+    if (
+        applicationForm.simulate.apply == 0 &&
+        applicationForm.digital.apply == 0 &&
+        applicationForm.contrast.apply == 0
+    ) {
+        ElMessage.warning('请选择需要激活的模块')
+        return
+    }
+    if (activateInfo.simulate.apply === 1) {
+        applicationForm.simulate.apply = 1
+    }
+    if (activateInfo.digital.apply === 1) {
+        applicationForm.digital.apply = 1
+    }
+    if (activateInfo.contrast.apply === 1) {
+        applicationForm.contrast.apply = 1
+    }
+
+    const res = await generateApplicationCode(applicationForm)
+    if (res.code == 'A0000') {
+        applicationCode.value = res.data as string
+    }
+}
+// 复制申请码
+const copyCode = async () => {
+    try {
+        await navigator.clipboard.writeText(applicationCode.value)
+        ElMessage.success('已复制到剪贴板')
+    } catch {
+        ElMessage.error('复制失败，请手动选择内容')
+    }
+}
+const openDialog = () => {
+    hadActivationCode.value = false
+    activationCode.value = ''
+    applicationCode.value = ''
+    applicationForm.simulate.apply = 0
+    applicationForm.digital.apply = 0
+    applicationForm.contrast.apply = 0
+    dialogVisible.value = true
+}
+const beforeClose = (done: Function) => {
+    applicationFormRef.value.resetFields()
+    done()
+}
+const cancel = () => {
+    applicationFormRef.value.resetFields()
+    dialogVisible.value = false
+}
+const submitActivation = async () => {
+    const res = await verifyActivationCode(activationCode.value)
+    if (res.code == 'A0000') {
+        ElMessage.success('激活成功')
+        await authStore.setActivateInfo()
+        window.location.reload()
+    } else {
+        ElMessage.error(res.message)
+    }
+}
+defineExpose({ openDialog })
+</script>
+<style scoped>
+.apply-checkbox {
+    margin-left: 62%;
+}
+.activated-tag {
+    margin-left: 80%;
+}
+.code-display,
+.code-input {
+    font-family: consolas;
+}
+:deep(.el-tag) {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+:deep(.el-divider__text) {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+.mode-descriptions {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    margin-top: 15px;
+}
+:deep(.el-form-item) {
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    padding: 0 10px !important;
+    margin-bottom: 10px !important;
+    margin-right: 0 !important;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+:deep(.el-divider--horizontal) {
+    margin: 10px 0 !important;
+    margin-top: 20px !important;
+}
+.mode-item {
+    transition: background-color 0.2s ease;
+}
+.mode-item:hover {
+    background-color: #f9fafb;
+}
+</style>