init

1 year ago · b92f5c0f6e
commit b92f5c0f6e
39 changed files with 8515 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
 [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
 indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = lf
 max_line_length = 100
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,6 @@
 # 生产环境配置
 VITE_APP_ENV = 'development'
 # 生产环境
 VITE_APP_BASE_API = '/api'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,7 @@
 # 生产环境配置
 VITE_APP_ENV = 'production'
 # 生产环境
 VITE_APP_BASE_API = '/api'
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
 * text=auto eol=lf
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 /cypress/videos/
 /cypress/screenshots/
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 *.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
 }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,8 @@
 {
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "EditorConfig.EditorConfig",
    "esbenp.prettier-vscode"
  ]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,35 @@
 # AI-Toning
 This template should help get you started developing with Vue 3 in Vite.
 ## Recommended IDE Setup
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 ## Customize configuration
 See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 ```sh
 npm install
 ```
 ### Compile and Hot-Reload for Development
 ```sh
 npm run dev
 ```
 ### Compile and Minify for Production
 ```sh
 npm run build
 ```
 ### Lint with [ESLint](https://eslint.org/)
 ```sh
 npm run lint
 ```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,22 @@
 import js from '@eslint/js'
 import pluginVue, { rules } from 'eslint-plugin-vue'
 import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },
  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  skipFormatting,
 ]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,36 @@
 {
  "name": "ai-toning",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.7.9",
    "element-plus": "^2.9.4",
    "nprogress": "^0.2.0",
    "pinia": "^2.3.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.18.0",
    "@iconify-json/ep": "^1.2.2",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/eslint-config-prettier": "^10.1.0",
    "eslint": "^9.18.0",
    "eslint-plugin-vue": "^9.32.0",
    "prettier": "^3.4.2",
    "sass-embedded": "^1.83.4",
    "unplugin-auto-import": "^19.0.0",
    "unplugin-icons": "^22.0.0",
    "unplugin-vue-components": "^28.0.0",
    "vite": "^6.0.11",
    "vite-plugin-vue-devtools": "^7.7.1"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,24 @@
 <template>
  <el-config-provider :locale="locale">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" :key="$route.name" v-if="route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" :key="$route.name" v-if="!route.meta.keepAlive" />
    </router-view>
  </el-config-provider>
 </template>
 <script setup>
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 const locale = zhCn
 const route = useRoute()
 onMounted(() => {
  console.log(import.meta.env.VITE_APP_ENV)
 })
 </script>
 <style lang="scss"></style>
--- a/src/assets/images/handle_control_bg.png
+++ b/src/assets/images/handle_control_bg.png
--- a/src/assets/images/menu/backgroundImg.png
+++ b/src/assets/images/menu/backgroundImg.png
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -0,0 +1,78 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const ElMessage: typeof import('element-plus/es')['ElMessage']
  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const toValue: typeof import('vue')['toValue']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useId: typeof import('vue')['useId']
  const useLink: typeof import('vue-router')['useLink']
  const useModel: typeof import('vue')['useModel']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const useTemplateRef: typeof import('vue')['useTemplateRef']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
  import('vue')
 }
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -0,0 +1,51 @@
 /* eslint-disable */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 /* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
    ElAside: typeof import('element-plus/es')['ElAside']
    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElHeader: typeof import('element-plus/es')['ElHeader']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    IEpHelpFilled: typeof import('~icons/ep/help-filled')['default']
    IEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
    IEpMenu: typeof import('~icons/ep/menu')['default']
    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
    IEpPlus: typeof import('~icons/ep/plus')['default']
    IEpScaleToOriginal: typeof import('~icons/ep/scale-to-original')['default']
    Pagination: typeof import('./components/Pagination/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
  export interface ComponentCustomProperties {
    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
  }
 }
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -0,0 +1,83 @@
 <script setup>
 import { scrollTo } from '@/utils/scroll-to'
 const props = defineProps({
  total: {
    required: true,
    type: Number,
  },
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 50]
    },
  },
  // 移动端页码按钮的数量端默认值5
  pagerCount: {
    type: Number,
    default: document.body.clientWidth < 992 ? 5 : 7,
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
  background: {
    type: Boolean,
    default: true,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
 })
 const emit = defineEmits(['update:limit', 'pagination'])
 const currentPage = defineModel('page', { default: 1 })
 const pageSize = defineModel('limit', { default: 20 })
 function handleSizeChange(val) {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1
  }
  emit('pagination', { page: currentPage.value, limit: val })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
 }
 function handleCurrentChange(val) {
  emit('pagination', { page: val, limit: pageSize.value })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
 }
 </script>
 <template>
  <div class="pagination-container" :class="{ hidden }">
    <el-pagination
      :background="background"
      :layout="layout"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :total="total"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
 </template>
 <style scoped>
 .pagination-container {
  background: #fff;
  padding: 32px 16px;
  flex-shrink: 0;
 }
 .pagination-container.hidden {
  display: none;
 }
 </style>
--- a/src/layout/components/aside.vue
+++ b/src/layout/components/aside.vue
@ -0,0 +1,79 @@
 <template>
    <div class="aside">
        <div class="title">
            <div class="img"></div>
            <div class="text">AI调色</div>
        </div>
        <div class="scrollbar">
            <el-scrollbar>
                <el-menu :default-openeds="['/SystemManage']" :default-active="route.path" class="el-menu-vertical-demo" active-text-color="#fff" background-color="#001628" text-color="#415058" router>
                    <template v-for="(item, index) in routes[0].children" :key="index">
                        <el-sub-menu :index="'/' + item.path" v-if="item.children && item.children.length > 0">
                            <template #title>
                                <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
                                <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
                                <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
                                <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
                                <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
                                <span>{{ item.meta.title }}</span>
                            </template>
                            <el-menu-item v-for="(ele, idx ) in item.children" :index="'/' + item.path + '/' + ele.path" :key="idx">{{ ele.meta.title }}</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item :index="'/' + item.path" v-else>
                            <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
                            <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
                            <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
                            <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
                            <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
                            <span>{{ item.meta.title }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
    </div>
 </template>
 <script setup>
 import { routes } from '@/router/index';
 const route = useRoute();
 </script>
 <style lang="scss" scoped>
 .aside {
    height: 98vh;
    background-color: #001628;
    .title {
        display: flex;
        align-items: center;
        height: 60px;
        .img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-left: 24px;
            margin-right: 10px;
            background-color: skyblue;
        }
        .text {
            color: rgba(24, 144, 255, 100);
        }
    }
    .scrollbar {
        height: calc(98vh - 60px);
    }
    .el-scrollbar {
        background-color: #001628;
        .el-menu-item.is-active {
            background-color: #006eff;
        }
    }
 }
 </style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -0,0 +1,29 @@
 <template>
  <div class="layout-container">
    <el-scrollbar>
      <router-view></router-view>
    </el-scrollbar>
  </div>
 </template>
 <script lang="ts" setup>
 import { useRoute, useRouter } from 'vue-router';
 const route = useRoute();
 const router = useRouter();
 const logout = () => {
  localStorage.removeItem('token')
  router.push('/login')
 }
 </script>
 <style scoped lang="scss">
 .layout-container {
  width: 100vw;
  height: 100vh;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,25 @@
 import './style/main.scss'
 import './style/element.scss'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'
 // 分页组件
 import Pagination from '@/components/Pagination/index.vue'
 const app = createApp(App)
 app.component('Pagination', Pagination)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
 }
 app.use(createPinia())
 app.use(router)
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,75 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Layout from '@/layout/index.vue'
 // 进度条
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 export const routes = [
  // {
  //   path: '/',
  //   component: Layout,
  //   redirect: '/BackgroundcolorManage',
  //   children: [
  //     {
  //       path: 'BackgroundcolorManage',
  //       name: 'BackgroundcolorManage',
  //       component: () => import('@/views/BackgroundcolorManage/index.vue'),
  //       meta: { title: '底色管理' },
  //     }
  //   ],
  // },
  {
    path: '/',
    redirect: '/menu',
  },
  {
    path: '/menu',
    name: 'menu',
    component: () => import('@/views/Menu/index.vue'),
    meta: { title: '智能中控装置' },
  },
  {
    path: '/monitoring',
    name: 'Monitoring',
    component: () => import('@/views/Monitoring/index.vue'),
    meta: { title: '实时监控' },
  },
  {
    path: '/handle-control',
    name: 'HandleControl',
    component: () => import('@/views/HandleControl/index.vue'),
    meta: { title: '手动控制' },
  },
  {
    path: '/params-config',
    name: 'ParamsConfig',
    component: () => import('@/views/ParamsConfig/index.vue'),
    meta: { title: '参数设置' },
  },
 ]
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
 })
 // 白名单
 const wihteList = ['/menu']
 // 全局前置导航守卫
 router.beforeEach((to) => {
  // 开启进度条
  NProgress.start()
  // 如果没有 token ，并且不在白名单中，则从定向到登陆
  // if (!localStorage.getItem('token') && !wihteList.includes(to.path)) return '/menu'
 })
 // 全局后置导航守卫
 router.afterEach((to) => {
  document.title = `${to.meta.title || ''}-智能中控系统`
  // 关闭进度条
  NProgress.done()
 })
 export default router
--- a/src/stores/user.js
+++ b/src/stores/user.js
@ -0,0 +1,24 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 export const useUserStore = defineStore('user', () => {
  const token = ref(localStorage.getItem('token') || '')
  const userInfo = ref(
    localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {},
  )
  const setToken = (t) => {
    token.value = t
    localStorage.setItem('token', t)
  }
  const setUserInfo = (u) => {
    userInfo.value = u
    localStorage.setItem('userInfo', JSON.stringify(u))
  }
  const logout = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    token.value = ''
    userInfo.value = {}
  }
  return { token, setToken, setUserInfo, userInfo, logout }
 })
--- a/src/style/element.scss
+++ b/src/style/element.scss
@ -0,0 +1,11 @@
 .el-table {
  .table-header {
    .el-table__cell {
      background-color: #f7f7f7;
    }
  }
 }
 :root:root {
  --el-color-primary: #006eff; /* 改变主色调 */
 }
--- a/src/style/main.scss
+++ b/src/style/main.scss
@ -0,0 +1,36 @@
 body {
  padding: 0;
  margin: 0;
 }
 *:focus-visible {
  outline: none;
 }
 .pagination-container {
  position: relative;
  margin-top: 30px;
  padding: 0 20px !important;
  display: flex;
  justify-content: center;
 }
 .table_border {
  border: 1px solid #eee;
  border-bottom: none;
 }
 .flex {
  display: flex;
 }
 .items-center {
  align-items: center;
 }
 .content-center {
  justify-content: center;
 }
 .pointer {
  cursor: pointer;
 }
--- a/src/utils/cache.js
+++ b/src/utils/cache.js
@ -0,0 +1,77 @@
 const sessionCache = {
  set(key, value) {
    if (!sessionStorage) {
      return
    }
    if (key != null && value != null) {
      sessionStorage.setItem(key, value)
    }
  },
  get(key) {
    if (!sessionStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return sessionStorage.getItem(key)
  },
  setJSON(key, jsonValue) {
    if (jsonValue != null) {
      this.set(key, JSON.stringify(jsonValue))
    }
  },
  getJSON(key) {
    const value = this.get(key)
    if (value != null) {
      return JSON.parse(value)
    }
  },
  remove(key) {
    sessionStorage.removeItem(key)
  },
 }
 const localCache = {
  set(key, value) {
    if (!localStorage) {
      return
    }
    if (key != null && value != null) {
      localStorage.setItem(key, value)
    }
  },
  get(key) {
    if (!localStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return localStorage.getItem(key)
  },
  setJSON(key, jsonValue) {
    if (jsonValue != null) {
      this.set(key, JSON.stringify(jsonValue))
    }
  },
  getJSON(key) {
    const value = this.get(key)
    if (value != null) {
      return JSON.parse(value)
    }
  },
  remove(key) {
    localStorage.removeItem(key)
  },
 }
 export default {
  /**
   * 会话级缓存
   */
  session: sessionCache,
  /**
   * 本地缓存
   */
  local: localCache,
 }
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@ -0,0 +1,14 @@
 export const roleOption = [
  {
    label: '超级管理员',
    value: 1,
  },
  {
    label: '管理员',
    value: 2,
  },
  {
    label: '业务员',
    value: 3,
  },
 ]
--- a/src/utils/hook.js
+++ b/src/utils/hook.js
@ -0,0 +1,127 @@
 import { useElementBounding } from '@vueuse/core'
 const isFunction = (val) => typeof val === 'function'
 export function useTable({
  queryParams = {},
  remoteDataFn,
  onTransformParams,
  onTransformData,
  deleteConfig,
  exportUrl,
  exportFileName,
  searchFormRef,
 }) {
  const tableData = ref([])
  const loading = ref(false)
  const total = ref(0)
  /**
   * @type {import('vue').Ref<import('element-plus').TableInstance | null>} tableRef - 表格组件引用
   */
  const tableRef = ref(null)
  /**
   * @type {()=>import('element-plus').FormInstance | null} searchFormRef - 查询表单组件引用
   */
  const _searchFormRef = searchFormRef ? computed(() => searchFormRef()) : ref(null)
  const _queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    ...queryParams,
  })
  const isShowDialog = ref(false)
  function getList() {
    loading.value = true
    const params = onTransformParams?.(_queryParams.value) || _queryParams.value
    remoteDataFn(params)
      .then((response) => {
        const data = onTransformData?.(response) || response
        tableData.value = data?.rows || []
        total.value = data.total
        loading.value = false
      })
      .catch((err) => {
        loading.value = false
        console.error(err)
      })
  }
  /** 搜索按钮操作 */
  function handleQuery() {
    _queryParams.value.pageNum = 1
    getList()
  }
  /** 重置按钮操作 */
  function resetQuery() {
    _searchFormRef.value.resetFields()
    _queryParams.value.pageNum = 1
    getList()
  }
  /** 导出 */
  function handleExport() {
    const params = onTransformParams?.(_queryParams.value) || _queryParams.value
    download(exportUrl, params, exportFileName)
  }
  /** 删除按钮操作 */
  function handleDelete(row) {
    const { remote, message, onSuccess, onError } = deleteConfig
    ElMessageBox.confirm(isFunction(message) ? message(row) : message, '提醒', {
      type: 'warning',
    })
      .then(() => {
        remote(row.id)
          .then(() => {
            getList()
            onSuccess?.()
            ElMessage.success('删除成功')
          })
          .catch((e) => {
            console.error(`删除失败：${e}`)
          })
      })
      .catch(() => {
        onError?.()
      })
  }
  const { tableContainerEl, maxHeight } = useTableMaxHeight()
  return {
    tableData,
    loading,
    total,
    tableRef,
    searchFormRef: _searchFormRef,
    isShowDialog,
    queryParams: _queryParams,
    /** 表格容器 ref */
    tableContainerEl,
    /** 表格自适应外层容器高度 :max-height="maxHeight" */
    maxHeight,
    getList,
    handleQuery,
    resetQuery,
    handleDelete,
    handleExport,
  }
 }
 export function useTableMaxHeight() {
  const tableContainerEl = ref(null)
  const { height } = useElementBounding(tableContainerEl)
  const maxHeight = computed(() => {
    return Number.isNaN(height.value) ? `100%` : Math.floor(height.value)
  })
  return {
    tableContainerEl,
    maxHeight,
  }
 }
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,186 @@
 import axios from 'axios'
 import { ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus'
 import { getToken } from '@/utils/auth'
 import { tansParams } from '@/utils/utils'
 import cache from '@/utils/cache'
 import useUserStore from '@/store/modules/user'
 const errorCode = {
  401: '认证失败，无法访问系统资源',
  403: '当前操作没有权限',
  404: '访问资源不存在',
  default: '系统未知错误，请反馈给管理员',
 }
 let downloadLoadingInstance
 // 是否显示重新登录
 export const isRelogin = { show: false }
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 300000,
 })
 // request拦截器
 service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    // 是否需要防止数据重复提交
    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
    if (getToken() && !isToken) {
      config.headers.Authorization = `Bearer ${getToken()}` // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = `${config.url}?${tansParams(config.params)}`
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
      const requestObj = {
        url: config.url,
        data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
        time: new Date().getTime(),
      }
      const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
      const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
      if (requestSize >= limitSize) {
        console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
        return config
      }
      const sessionObj = cache.session.getJSON('sessionObj')
      if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
        cache.session.setJSON('sessionObj', requestObj)
      } else {
        const s_url = sessionObj.url // 请求地址
        const s_data = sessionObj.data // 请求数据
        const s_time = sessionObj.time // 请求时间
        const interval = 1000 // 间隔时间(ms)，小于此时间视为重复提交
        if (
          s_data === requestObj.data &&
          requestObj.time - s_time < interval &&
          s_url === requestObj.url
        ) {
          const message = '数据正在处理，请勿重复提交'
          console.warn(`[${s_url}]: ${message}`)
          return Promise.reject(new Error(message))
        } else {
          cache.session.setJSON('sessionObj', requestObj)
        }
      }
    }
    return config
  },
  (error) => {
    console.error(error)
    Promise.reject(error)
  },
 )
 // 响应拦截器
 service.interceptors.response.use(
  (res) => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode.default
    // 二进制数据则直接返回
    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
      return res.data
    }
    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true
        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            isRelogin.show = false
            useUserStore()
              .logOut()
              .then(() => {
                location.href = '/'
              })
          })
          .catch(() => {
            isRelogin.show = false
          })
      }
      return Promise.reject(new Error('无效的会话，或者会话已过期，请重新登录。'))
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))
    } else if (code === 601) {
      ElMessage({ message: msg, type: 'warning' })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      ElNotification.error({ title: msg })
      return Promise.reject(new Error('error'))
    } else {
      return Promise.resolve(res.data)
    }
  },
  (error) => {
    // eslint-disable-next-line no-console
    console.log(`sever err: ${error}`)
    let { message } = error
    if (message === 'Network Error') {
      message = '后端接口连接异常'
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
    } else if (message.includes('Request failed with status code')) {
      message = `系统接口${message.substr(message.length - 3)}异常`
    }
    ElMessage({ message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  },
 )
 const blobToExcel = (data, name) => {
  // const base = base64ToArrayBuffer(data);
  // eslint-disable-next-line no-undef
  const blob = new Blob([data], {
    type: 'application/vnd.ms-excel;charset=utf-8',
  })
  const link = document.createElement('a')
  // 下载后的文件名
  link.download = name
  link.href = URL.createObjectURL(blob)
  document.body.appendChild(link)
  link.click()
  // 释放URL对象
  URL.revokeObjectURL(link.href)
  document.body.removeChild(link)
 }
 export const download = (url, fileName) => {
  downloadLoadingInstance = ElLoading.service({
    text: '正在下载数据，请稍候',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  return service
    .get(url, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob',
    })
    .then(async (data) => {
      blobToExcel(data, fileName)
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      ElMessage.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close()
    })
 }
 export default service
--- a/src/utils/rpc.js
+++ b/src/utils/rpc.js
@ -0,0 +1,61 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 const noticeError = (msg) => {
  // Message.error(msg)
  ElMessage({
    message: msg,
    type: 'error',
  })
 }
 const guid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
 }
 const instance = axios.create({
  baseURL: '/',
  timeout: 100000,
  responseType: 'json',
 })
 // HTTP request拦截
 instance.interceptors.request.use(
  (config) => {
    const method = config.url
    const params = config.data
    config.url = '/jsonrpc'
    config.data = {
      id: guid(),
      jsonrpc: '2.0',
      method,
      params,
      session: localStorage.getItem('token'),
      timestampin: Date.now().toString(),
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  },
 )
 // HTTP response拦截
 instance.interceptors.response.use(
  (response) => {
    if (response.data.error.code === 200) {
      return Promise.resolve(response.data.result)
    } else {
      noticeError(response.data.error.message)
      return Promise.reject(response.data.error.message)
    }
  },
  (error) => {
    noticeError(error.message)
    return Promise.reject(error)
  },
 )
 export default instance
--- a/src/utils/scroll-to.js
+++ b/src/utils/scroll-to.js
@ -0,0 +1,61 @@
 Math.easeInOutQuad = function (t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
 }
 // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
 const requestAnimFrame = (function () {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
    window.setTimeout(callback, 1000 / 60)
  }
 })()
 /**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
 function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
 }
 function position() {
  return (document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop)
 }
 /**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
 export function scrollTo(to, duration, callback) {
  const start = position()
  const change = to - start
  const increment = 20
  let currentTime = 0
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  const animateScroll = function () {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    const val = Math.easeInOutQuad(currentTime, start, change, duration)
    // move the document.body
    move(val)
    // do the animation unless its over
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)
    }
 else {
      if (callback && typeof (callback) === 'function') {
        // the animation is done so lets callback
        callback()
      }
    }
  }
  animateScroll()
 }
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@ -0,0 +1,25 @@
 /**
 * 参数处理
 * @param {*} params  参数
 */
 export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName]
    const part = `${encodeURIComponent(propName)}=`
    if (value !== null && value !== '' && typeof value !== 'undefined') {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== '' && typeof value[key] !== 'undefined') {
            const params = `${propName}[${key}]`
            const subPart = `${encodeURIComponent(params)}=`
            result += `${subPart + encodeURIComponent(value[key])}&`
          }
        }
      } else {
        result += `${part + encodeURIComponent(value)}&`
      }
    }
  }
  return result
 }
--- a/src/views/HandleControl/index.vue
+++ b/src/views/HandleControl/index.vue
@ -0,0 +1,790 @@
 <template>
    <div class="control-view">
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 顶部状态栏 -->
            <div class="header-status">
                <div class="time-info">
                    <span>{{ currentTime }} 星期五</span>
                </div>
                <div class="page-title">
                    <h1>手动控制</h1>
                </div>
                <div class="system-status">
                    <span>系统已运行：{{ systemRuntime }}</span>
                </div>
            </div>
            <!-- 主体区域 -->
            <div class="control-content">
                <!-- 左侧电力参数区域 -->
                <div class="power-section">
                    <!-- ABC三相电力参数 -->
                    <div class="power-params">
                        <div v-for="phase in powerPhases" :key="phase.name" class="phase-card">
                            <div class="phase-name"><span>{{ phase.name }}</span>相</div>
                            <div class="param-list">
                                <div class="param-item">
                                    <span class="param-label">电压:</span>
                                    <span class="param-value">{{ phase.voltage }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">电流:</span>
                                    <span class="param-value">{{ phase.current }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">有功功率:</span>
                                    <span class="param-value">{{ phase.power }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">功率因数:</span>
                                    <span class="param-value">{{ phase.factor }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 电能参数 -->
                        <div class="energy-card">
                            <div class="energy-name"><span>电</span><span>能</span><span>参</span><span>数</span></div>
                            <div class="param-list">
                                <div class="param-item">
                                    <span class="param-label">DC电压:</span>
                                    <span class="param-value">{{ energyParams.dcVoltage }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">有功电能:</span>
                                    <span class="param-value">{{ energyParams.activeEnergy }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">有功功率:</span>
                                    <span class="param-value">{{ energyParams.activePower }}</span>
                                </div>
                                <div class="param-item">
                                    <span class="param-label">功率因数:</span>
                                    <span class="param-value">{{ energyParams.powerFactor }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 回路控制区域 -->
                    <div class="circuit-section">
                        <!-- 上排回路 -->
                        <div class="circuit-row">
                            <div v-for="circuit in circuits.slice(0, 5)" :key="circuit.id" class="circuit-item">
                                <div class="circuit-status" :class="{ active: circuit.status === '打开' }">
                                    {{ circuit.name }}：{{ circuit.status }}
                                </div>
                                <div class="circuit-icon" :class="{ active: circuit.status === '打开' }" @click="toggleCircuit(circuit.id)">
                                    <el-icon>
                                        <Sunny />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                        <!-- 下排回路 -->
                        <div class="circuit-row">
                            <div v-for="circuit in circuits.slice(5, 10)" :key="circuit.id" class="circuit-item">
                                <div class="circuit-status" :class="{ active: circuit.status === '打开' }">
                                    {{ circuit.name }}：{{ circuit.status }}
                                </div>
                                <div class="circuit-icon" :class="{ active: circuit.status === '打开' }" @click="toggleCircuit(circuit.id)">
                                    <el-icon>
                                        <Sunny />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 调光通道区域 -->
                    <div class="dimming-section">
                        <!-- 上排调光通道 -->
                        <div class="dimming-row">
                            <div v-for="channel in dimmingChannels.slice(0, 5)" :key="channel.id" class="dimming-item">
                                <div class="channel-label">{{ channel.name }}</div>
                                <div class="brightness-display" :class="{ active: channel.brightness > 0 }" @click="openBrightnessDialog(channel.id)">
                                    {{ channel.brightness }}%
                                </div>
                            </div>
                        </div>
                        <!-- 下排调光通道 -->
                        <div class="dimming-row">
                            <div v-for="channel in dimmingChannels.slice(5, 10)" :key="channel.id" class="dimming-item">
                                <div class="channel-label">{{ channel.name }}</div>
                                <div class="brightness-display" :class="{ active: channel.brightness > 0 }" @click="openBrightnessDialog(channel.id)">
                                    {{ channel.brightness }}%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧控制面板 -->
                <div class="control-panel">
                    <!-- 切换模式 -->
                    <div class="control-group">
                        <div class="control-title">
                            <el-icon>
                                <Setting />
                            </el-icon>
                            切换模式
                        </div>
                        <el-button class="mode-button active">手动</el-button>
                    </div>
                    <!-- 灯控设置 -->
                    <div class="control-group">
                        <div class="control-title">
                            <el-icon>
                                <Sunny />
                            </el-icon>
                            灯控设置
                        </div>
                        <el-button class="setting-button" @click="openLightSettings">全开</el-button>
                        <el-button style="margin-left: 0;" class="setting-button" @click="turnOffAll">全关</el-button>
                    </div>
                    <!-- 亮度调节 -->
                    <div class="control-group">
                        <div class="control-title">
                            <el-icon>
                                <Sunny />
                            </el-icon>亮度调节
                        </div>
                        <el-button class="brightness-button" @click="openGlobalBrightnessDialog">一键调光</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部信息 -->
        <div class="bottom-info">
            <div class="bottom_item">
                <div class="time-item">
                    <span>日出时间：{{ sunriseTime }}</span>
                </div>
                <div class="time-item">
                    <span>日落时间：{{ sunsetTime }}</span>
                </div>
            </div>
            <div class="bottom_item">
                <el-button class="restart-button" @click="restartSystem">
                    <el-icon>
                        <RefreshRight />
                    </el-icon>
                    远程重启
                </el-button>
                <el-button class="back-button" @click="goBack">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    返回主界面
                </el-button>
            </div>
        </div>
        <!-- 亮度调节弹窗 -->
        <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
            <div class="brightness-content">
                <div class="brightness-label">亮度值：{{ currentBrightness }}%</div>
                <div class="brightness-slider-container">
                    <el-slider v-model="currentBrightness" :min="0" :max="100" :show-stops="true" class="brightness-slider" />
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="brightnessDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmBrightness">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
 </template>
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const currentTime = ref('')
 const systemRuntime = ref('38分钟')
 const brightnessDialogVisible = ref(false)
 const currentBrightness = ref(50)
 const selectedChannelId = ref(null)
 // 电力参数数据
 const powerPhases = ref([
    {
        name: 'A',
        voltage: '220.5V',
        current: '10.00A',
        power: '20.88kw',
        factor: '0.99'
    },
    {
        name: 'B',
        voltage: '220.5V',
        current: '10.00A',
        power: '20.88kw',
        factor: '0.99'
    },
    {
        name: 'C',
        voltage: '220.5V',
        current: '10.00A',
        power: '20.88kw',
        factor: '0.99'
    }
 ])
 const energyParams = ref({
    dcVoltage: '0.0V',
    activeEnergy: '88.88kwh',
    activePower: '20.88kw',
    powerFactor: '0.99'
 })
 // 回路控制数据
 const circuits = ref([
    { id: 1, name: '回路1', status: '关闭' },
    { id: 2, name: '回路2', status: '关闭' },
    { id: 3, name: '回路3', status: '关闭' },
    { id: 4, name: '回路4', status: '关闭' },
    { id: 5, name: '回路5', status: '关闭' },
    { id: 6, name: '回路6', status: '关闭' },
    { id: 7, name: '回路7', status: '关闭' },
    { id: 8, name: '回路8', status: '关闭' },
    { id: 9, name: '回路9', status: '关闭' },
    { id: 10, name: '回路10', status: '关闭' }
 ])
 // 调光通道数据
 const dimmingChannels = ref([
    { id: 1, name: '调光通道1', brightness: 0 },
    { id: 2, name: '调光通道2', brightness: 0 },
    { id: 3, name: '调光通道3', brightness: 0 },
    { id: 4, name: '调光通道4', brightness: 0 },
    { id: 5, name: '调光通道5', brightness: 0 },
    { id: 6, name: '调光通道6', brightness: 0 },
    { id: 7, name: '调光通道7', brightness: 0 },
    { id: 8, name: '调光通道8', brightness: 0 },
    { id: 9, name: '调光通道9', brightness: 0 },
    { id: 10, name: '调光通道10', brightness: 0 }
 ])
 const sunriseTime = ref('05时38分00秒')
 const sunsetTime = ref('19时08分00秒')
 // 更新时间
 const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 // 切换回路状态
 const toggleCircuit = (circuitId) => {
    const circuit = circuits.value.find(c => c.id === circuitId)
    if (circuit) {
        circuit.status = circuit.status === '关闭' ? '打开' : '关闭'
        ElMessage.success(`${circuit.name}已${circuit.status}`)
    }
 }
 // 打开亮度调节弹窗
 const openBrightnessDialog = (channelId) => {
    selectedChannelId.value = channelId
    const channel = dimmingChannels.value.find(c => c.id === channelId)
    if (channel) {
        currentBrightness.value = channel.brightness
        brightnessDialogVisible.value = true
    }
 }
 // 确认亮度设置
 const confirmBrightness = () => {
    const channel = dimmingChannels.value.find(c => c.id === selectedChannelId.value)
    if (channel) {
        channel.brightness = currentBrightness.value
        ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
    } else {
        dimmingChannels.value.forEach(channel => {
            channel.brightness = currentBrightness.value
        })
    }
    brightnessDialogVisible.value = false
 }
 // 打开全局亮度调节
 const openGlobalBrightnessDialog = () => {
    selectedChannelId.value = null
    currentBrightness.value = 50
    brightnessDialogVisible.value = true
 }
 // 全开灯光
 const openLightSettings = () => {
    circuits.value.forEach(circuit => {
        circuit.status = '打开'
    })
    // dimmingChannels.value.forEach(channel => {
    //     channel.brightness = 100
    // })
    ElMessage.success('所有回路已打开')
 }
 // 全关灯光
 const turnOffAll = () => {
    circuits.value.forEach(circuit => {
        circuit.status = '关闭'
    })
    dimmingChannels.value.forEach(channel => {
        channel.brightness = 0
    })
    ElMessage.success('所有灯光已关闭')
 }
 // 返回主界面
 const goBack = () => {
    router.push('/')
 }
 // 重启系统
 const restartSystem = () => {
    ElMessage.warning('远程重启功能开发中...')
 }
 let timeInterval = null
 onMounted(() => {
    updateTime()
    timeInterval = setInterval(updateTime, 1000)
 })
 onUnmounted(() => {
    if (timeInterval) {
        clearInterval(timeInterval)
    }
 })
 </script>
 <style scoped lang="scss">
 .control-view {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    overflow: auto;
    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
 }
 .main-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
 }
 .header-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
 }
 .time-info {
    font-size: 18px;
    font-weight: 300;
 }
 .page-title h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }
 .system-status {
    font-size: 18px;
    font-weight: 300;
 }
 .control-content {
    display: flex;
    width: 100%;
    gap: 30px;
    box-sizing: border-box;
    height: calc(100% - 120px);
 }
 .power-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* width: 500px; */
    gap: 20px;
 }
 .power-params {
    display: flex;
    justify-content: space-between;
    gap: 10px;
 }
 .phase-card,
 .energy-card {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 23%;
    overflow: hidden;
    /* padding: 15px; */
    backdrop-filter: blur(10px);
 }
 .phase-name,
 .energy-name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    background-color: #212329;
    width: 30px;
    height: 100%;
 }
 .param-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex: 1;
    gap: 8px;
 }
 .param-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
 }
 .param-label {
    color: rgba(255, 255, 255, 0.7);
 }
 .param-value {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
 }
 .circuit-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
 }
 .circuit-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
 }
 .circuit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 18%;
 }
 .circuit-status {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
 }
 .circuit-status.active {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.5);
    color: #64b5f6;
 }
 .circuit-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.5);
 }
 .circuit-icon.active {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.6);
    color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
 }
 .circuit-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }
 .dimming-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
 }
 .dimming-row {
    display: flex;
    justify-content: space-between;
 }
 .dimming-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 18%;
 }
 .channel-label {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
 }
 .brightness-display {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s ease;
 }
 .brightness-display.active {
    background: rgba(33, 150, 243, 0.3);
    border-color: rgba(33, 150, 243, 0.6);
    color: #64b5f6;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
 }
 .brightness-display:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
 }
 .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    width: 100vw;
    padding: 0 30px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;
    .bottom_item {
        display: flex;
        align-items: center;
    }
    .time-item {
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        margin: 0 20px;
    }
    .back-button,
    .restart-button {
        width: 100%;
        height: 38px;
        border-radius: 19px;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .back-button {
        background-color: #000;
        color: #fff;
        border: #000;
    }
 }
 .control-panel {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
 }
 .control-group {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px;
    backdrop-filter: blur(10px);
 }
 .control-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    .el-icon {
        font-size: 20px;
        margin-right: 10px;
    }
 }
 .mode-button,
 .setting-button,
 .brightness-button {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 10px;
 }
 .mode-button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #333;
 }
 .mode-button.active {
    background: #ffffff;
    color: #1976d2;
 }
 .setting-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
 }
 .setting-button.active {
    background: #1976d2;
    border-color: #1976d2;
    color: #ffffff;
 }
 .brightness-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
 }
 .setting-button:hover,
 .brightness-button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
 }
 /* 弹窗样式 */
 :deep(.brightness-dialog) {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);
 }
 :deep(.brightness-dialog .el-dialog__header) {
    // background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 :deep(.brightness-dialog .el-dialog__title) {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
 }
 :deep(.brightness-dialog .el-dialog__body) {
    // background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
 }
 .brightness-content {
    padding: 20px 0;
 }
 .brightness-label {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #ffffff;
 }
 .brightness-slider-container {
    padding: 0 20px;
 }
 :deep(.brightness-slider .el-slider__bar) {
    background: #1976d2;
 }
 :deep(.brightness-slider .el-slider__button) {
    border-color: #1976d2;
 }
 :deep(.brightness-slider .el-slider__stop) {
    background: rgba(255, 255, 255, 0.3);
 }
 .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
 }
 </style>
--- a/src/views/Menu/index.vue
+++ b/src/views/Menu/index.vue
@ -0,0 +1,318 @@
 <template>
    <div class="smart-control-app">
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 时间显示 -->
            <div class="time-display">
                {{ currentTime }}
            </div>
            <!-- 主标题 -->
            <div class="main-title">
                <div class="title-decoration left"></div>
                <h1>智能中控装置</h1>
                <div class="title-decoration right"></div>
            </div>
            <!-- 功能卡片 -->
            <div class="function-cards">
                <el-card v-for="(card, index) in functionCards" :key="index" class="function-card" @click="handleCardClick(card.key)">
                    <div class="card-content">
                        <div class="card-icon">
                            <component :is="card.icon" />
                        </div>
                        <div class="card-title">{{ card.title }}</div>
                    </div>
                </el-card>
            </div>
            <!-- 底部状态栏 -->
            <div class="status-bar">
                <div class="status-item">
                    设备号：RX88888
                </div>
                <div class="status-item">
                    版本号：1.0.0
                </div>
                <div class="status-item">
                    系统状态：<span class="status-online">开启</span>
                </div>
            </div>
        </div>
    </div>
 </template>
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import {
    Camera,
    Operation,
    Setting,
    VideoPlay,
    Bell
 } from '@element-plus/icons-vue'
 const currentTime = ref('')
 const router = useRouter()
 const route = useRoute()
 console.log(route.query.comm_uid)
 if (route.query.comm_uid) {
    localStorage.setItem('central_control-comm_uid', route.query.comm_uid)
 }
 const functionCards = [
    { key: 'monitor', title: '实时监控', icon: Camera, route: '' },
    { key: 'control', title: '手动控制', icon: Operation, route: '/handle-control' },
    { key: 'setting', title: '参数设置', icon: Setting, route: '/params-config' },
    { key: 'auto', title: '自动模式', icon: VideoPlay, route: '' },
    { key: 'alarm', title: '报警浏览', icon: Bell, route: '' }
 ]
 const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    currentTime.value = `${year}-${month}-${day}  ${hours}:${minutes}:${seconds}`
 }
 const handleCardClick = (key) => {
    const card = functionCards.find(c => c.key === key)
    if (card) {
        console.log(`点击了${card.title}功能`)
        if (card.route) {
            router.push(card.route)
        } else {
            ElMessage.info(`${card.title}功能开发中...`)
        }
    }
 }
 let timeInterval = null
 onMounted(() => {
    updateTime()
    timeInterval = setInterval(updateTime, 1000)
 })
 onUnmounted(() => {
    if (timeInterval) {
        clearInterval(timeInterval)
    }
 })
 </script>
 <style scoped>
 .smart-control-app {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: center / cover url('@/assets/images/menu/backgroundImg.png') no-repeat;
 }
 .main-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px;
    box-sizing: border-box;
    justify-content: center;
 }
 .time-display {
    color: rgba(255, 255, 255, 0.9);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    position: absolute;
    top: 20px;
 }
 .main-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
    position: relative;
 }
 .main-title h1 {
    color: #ffffff;
    font-size: 64px;
    font-weight: bold;
    margin: 0 40px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    letter-spacing: 4px;
 }
 .title-decoration {
    width: 80px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #64b5f6, #42a5f5, #64b5f6, transparent);
    position: relative;
    animation: titleGlow 2s ease-in-out infinite alternate;
 }
 .title-decoration::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #64b5f6 0%, #42a5f5 70%, transparent 100%);
    border-radius: 50%;
    box-shadow:
        0 0 15px #64b5f6,
        0 0 30px rgba(100, 181, 246, 0.5);
    animation: centerPulse 2s ease-in-out infinite alternate;
 }
@keyframes titleGlow {
    0% {
        opacity: 0.8;
        transform: scaleX(1);
    }
    100% {
        opacity: 1;
        transform: scaleX(1.1);
    }
 }
@keyframes centerPulse {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }
 }
 .function-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
 }
 .function-card {
    width: 15%;
    height: 200px;
    box-sizing: border-box;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%),
        rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(100, 181, 246, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
 }
 /* .function-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
 }
 .function-card:hover::before {
    left: 100%;
 } */
 /* .function-card:hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%),
        rgba(33, 150, 243, 0.15);
    border-color: rgba(100, 181, 246, 0.6);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(33, 150, 243, 0.4),
        0 0 20px rgba(100, 181, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
 } */
 .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
 }
 .card-icon {
    width: 60px;
    height: 60px;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
 }
 .card-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
 }
 .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding: 10px 30px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
 }
 .status-item {
    display: flex;
    align-items: center;
    gap: 10px;
 }
 .status-online {
    color: #4caf50;
    font-weight: bold;
 }
 /* Element Plus 卡片样式重写 */
 :deep(.el-card) {
    background: transparent !important;
    border: none !important;
 }
 :deep(.el-card__body) {
    padding: 0 !important;
    height: 100%;
 }
 </style>
--- a/src/views/Monitoring/index.vue
+++ b/src/views/Monitoring/index.vue
@ -0,0 +1,11 @@
 <template>
    <div class="Monitoring">
        111
    </div>
 </template>
 <script setup>
 </script>
 <style lang="scss" scoped></style>
--- a/src/views/ParamsConfig/index.vue
+++ b/src/views/ParamsConfig/index.vue
@ -0,0 +1,348 @@
 <template>
    <div class="control-view">
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 顶部状态栏 -->
            <div class="header-status">
                <div class="time-info">
                    <span>{{ currentTime }} 星期五</span>
                </div>
                <div class="page-title">
                    <h1>参数设置</h1>
                </div>
                <div class="system-status">
                    <span>系统已运行：{{ systemRuntime }}</span>
                </div>
            </div>
            <!-- 主体区域 -->
            <div class="control-content">
                <div class="main_item">
                    <div class="main_title">
                        主控器设置
                    </div>
                    <div class="main_content">
                        <div class="line">
                            <div class="item">
                                <div class="key">经度</div>
                                <el-input v-model="formField.a" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
                            </div>
                            <div class="item">
                                <div class="key">纬度</div>
                                <el-input v-model="formField.b" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
                            </div>
                        </div>
                        <div class="line">
                            <div class="item">
                                <div class="key">经纬开灯偏差</div>
                                <el-input v-model="formField.c" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
                            </div>
                            <div class="item">
                                <div class="key">经纬关灯偏差</div>
                                <el-input v-model="formField.d" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
                            </div>
                        </div>
                        <div class="line">
                            <div class="item">
                                <div class="key">PWM频率</div>
                                <div class="value">0HZ</div>
                            </div>
                            <div class="item">
                                <div class="key">扩展外设</div>
                                <div class="button disabled">禁用</div>
                            </div>
                        </div>
                        <div class="buttonBox">
                            <div class="button save">掉电保存</div>
                            <div class="button restart">重启</div>
                        </div>
                    </div>
                </div>
                <div class="main_item">
                    <div class="main_title">
                        电能表设置
                    </div>
                    <div class="main_content" style="width:300px">
                        <div class="line">
                            <div class="item">
                                <div class="key">主控器地址</div>
                                <el-input v-model="formField.e" style="width: 100px" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="line">
                            <div class="item">
                                <div class="key">电能表地址</div>
                                <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" />
                            </div>
                        </div>
                        <div class="line">
                            <div class="item">
                                <div class="key">电能表型号</div>
                                <el-input v-model="formField.g" style="width: 100px" placeholder="请输入" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部信息 -->
        <div class="bottom-info">
            <div class="bottom_item">
                <!-- <div class="time-item">
                    <span>日出时间：{{ sunriseTime }}</span>
                </div>
                <div class="time-item">
                    <span>日落时间：{{ sunsetTime }}</span>
                </div> -->
            </div>
            <div class="bottom_item">
                <!-- <el-button class="restart-button" @click="restartSystem">
                    <el-icon>
                        <RefreshRight />
                    </el-icon>
                    远程重启
                </el-button> -->
                <el-button class="back-button" @click="goBack">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    返回主界面
                </el-button>
            </div>
        </div>
    </div>
 </template>
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const currentTime = ref('')
 const systemRuntime = ref('38分钟')
 const formField = ref({})
 // 更新时间
 const updateTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 // 返回主界面
 const goBack = () => {
    router.push('/')
 }
 let timeInterval = null
 onMounted(() => {
    updateTime()
    timeInterval = setInterval(updateTime, 1000)
 })
 onUnmounted(() => {
    if (timeInterval) {
        clearInterval(timeInterval)
    }
 })
 </script>
 <style scoped lang="scss">
 .control-view {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    overflow: auto;
    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
 }
 .main-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
 }
 .header-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
 }
 .time-info {
    font-size: 18px;
    font-weight: 300;
 }
 .page-title h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }
 .system-status {
    font-size: 18px;
    font-weight: 300;
 }
 .control-content {
    display: flex;
    width: 100%;
    gap: 30px;
    box-sizing: border-box;
    .main_item {
        border: .5px solid #ddd;
        display: flex;
        flex-direction: column;
        .main_title {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            font-size: 16px;
            background-color: #21232A;
            color: #8088AA;
            border-bottom: .5px solid #ddd;
        }
        .main_content {
            padding: 20px;
            font-size: 14px;
            background-color: #282d36;
            flex: 1;
            .key {
                color: #fff;
                margin-right: 10px;
            }
            .value {
                background-color: #21232A;
                color: #8088AA;
                padding: 5px 10px;
                border-radius: 5px;
                border: 1px solid #ccc;
            }
            .line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                margin-bottom: 20px;
                .item {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
            .button {
                width: 50px;
                height: 30px;
                background-color: #939393;
                color: #fff;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .buttonBox {
                display: flex;
                justify-content: center;
                .button {
                    width: 70px;
                    margin: 0 10px;
                    &.save {
                        background-color: #7fe669;
                    }
                    &.restart {
                        background-color: #d42d1f;
                    }
                }
            }
        }
    }
 }
 .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    width: 100vw;
    padding: 0 30px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    box-sizing: border-box;
    .bottom_item {
        display: flex;
        align-items: center;
    }
    .time-item {
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        margin: 0 20px;
    }
    .back-button,
    .restart-button {
        width: 100%;
        height: 38px;
        border-radius: 19px;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .back-button {
        background-color: #000;
        color: #fff;
        border: #000;
    }
 }
 .el-input {
    background-color: #21232A;
    :deep(.el-input__wrapper) {
        background-color: #212329;
        box-shadow: none;
        border: 1px soild #3B3D45;
        input {
            color: #8088AA;
        }
    }
 }
 </style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,67 @@
 import pathNode from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import path from 'path'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Inspect from 'vite-plugin-inspect'
 const pathSrc = path.resolve(__dirname, 'src')
 // https://vite.dev/config/
 export default defineConfig({
  base: 'central-control',
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router'],
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        ElementPlusResolver(),
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
    }),
    Inspect(),
  ],
  resolve: {
    alias: {
      // 设置别名
      '@': pathNode.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 9090,
    host: true,
    open: true,
    proxy: {
      '/jsonrpc': {
        target: 'https://lamp-dev.ruixininfo.com',
        changeOrigin: true,
      },
    },
  },
 })