init

.editorconfig

@@ -0,0 +1,22 @@
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配md结尾的文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VUE_APP_TITLE = 星图系统
+
+# 开发环境配置
+ENV = 'development'
+
+# 系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -0,0 +1,8 @@
+# 页面标题
+VUE_APP_TITLE = 星图系统
+
+# 生产环境配置
+ENV = 'production'
+
+# 管理系统/生产环境
+VUE_APP_BASE_API = '/prod-api'

.env.staging

@@ -0,0 +1,12 @@
+# 页面标题
+VUE_APP_TITLE = 星图系统
+
+BABEL_ENV = production
+
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# 管理系统/测试环境
+VUE_APP_BASE_API = '/stage-api'

.eslintignore

@@ -0,0 +1,10 @@
+# 忽略build目录下类型为js的文件的语法检查
+build/*.js
+# 忽略src/assets目录下文件的语法检查
+src/assets
+# 忽略public目录下文件的语法检查
+public
+# 忽略当前目录下为js的文件的语法检查
+*.js
+# 忽略当前目录下为vue的文件的语法检查
+*.vue

.eslintrc.js

@@ -0,0 +1,199 @@
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock

COMPONENTS_USAGE.md

@@ -0,0 +1,673 @@
+# 通用组件使用指南
+
+本文档介绍5个新创建的通用组件的使用方法和API。
+
+## 🔧 A) XtStickyActionBar - 底部粘性操作栏
+
+### 功能描述
+底部固定的操作栏，显示状态信息和操作按钮，支持响应式设计和明暗主题。
+
+### Props
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| dirtyCount | Number | 0 | 变更项数量 |
+| errorCount | Number | 0 | 错误项数量 |
+| loading | Object | `{}` | 加载状态对象 |
+| showProgress | Boolean | false | 是否显示进度条 |
+| progressPercent | Number | 0 | 进度百分比(0-100) |
+
+### Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| save | - | 保存草稿 |
+| test | - | 测试全部 |
+| publish | - | 发布 |
+| rollback | - | 回滚 |
+| reset | - | 重置变更 |
+| export | - | 导出配置 |
+
+### 使用示例
+```vue
+<template>
+  <div>
+    <!-- 页面内容 -->
+    <div class="page-content">
+      <!-- ... -->
+    </div>
+    
+    <!-- 底部操作栏 -->
+    <XtStickyActionBar
+      :dirty-count="formChanges.length"
+      :error-count="validationErrors.length"
+      :loading="actionLoading"
+      :show-progress="isProcessing"
+      :progress-percent="processPercent"
+      @save="handleSaveDraft"
+      @test="handleTestAll"
+      @publish="handlePublish"
+      @rollback="handleRollback"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formChanges: [],
+      validationErrors: [],
+      actionLoading: {
+        save: false,
+        test: false,
+        publish: false,
+        rollback: false
+      },
+      isProcessing: false,
+      processPercent: 0
+    }
+  },
+  
+  methods: {
+    handleSaveDraft() {
+      this.actionLoading.save = true
+      // 保存逻辑
+    },
+    
+    handleTestAll() {
+      this.actionLoading.test = true
+      // 测试逻辑
+    },
+    
+    handlePublish() {
+      if (this.validationErrors.length > 0) {
+        this.$message.error('请先修复所有错误')
+        return
+      }
+      this.actionLoading.publish = true
+      // 发布逻辑
+    }
+  }
+}
+</script>
+```
+
+---
+
+## 📋 B) XtGroupedFormCard - 分组表单卡片
+
+### 功能描述
+可折叠的分组表单卡片，支持自定义操作按钮和过渡动画。
+
+### Props
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | String | - | 卡片标题（必填） |
+| desc | String | '' | 卡片描述 |
+| collapsible | Boolean | true | 是否可折叠 |
+| defaultCollapsed | Boolean | false | 默认是否折叠 |
+
+### Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| test | - | 测试按钮点击 |
+| reset | - | 重置按钮点击 |
+| toggle | collapsed | 折叠状态变化 |
+
+### Slots
+| 插槽名 | 说明 |
+|--------|------|
+| default | 表单内容区域 |
+| actions | 自定义右上角操作按钮 |
+
+### 使用示例
+```vue
+<template>
+  <div class="form-container">
+    <XtGroupedFormCard
+      title="数据库配置"
+      desc="配置数据库连接参数"
+      :collapsible="true"
+      :default-collapsed="false"
+      @test="testDbConnection"
+      @reset="resetDbConfig"
+      @toggle="handleToggle"
+    >
+      <!-- 自定义操作按钮 -->
+      <template #actions>
+        <el-button
+          type="text"
+          size="small"
+          icon="el-icon-connection"
+          @click="testConnection"
+        >
+          测试连接
+        </el-button>
+      </template>
+      
+      <!-- 表单内容 -->
+      <el-form :model="dbConfig" label-width="120px">
+        <el-form-item label="主机地址">
+          <el-input v-model="dbConfig.host" placeholder="localhost" />
+        </el-form-item>
+        
+        <el-form-item label="端口">
+          <el-input v-model="dbConfig.port" placeholder="3306" />
+        </el-form-item>
+        
+        <el-form-item label="数据库名">
+          <el-input v-model="dbConfig.database" placeholder="database_name" />
+        </el-form-item>
+        
+        <!-- 表单分组 -->
+        <div class="form-group">
+          <div class="form-group-title">认证信息</div>
+          <el-form-item label="用户名">
+            <el-input v-model="dbConfig.username" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="dbConfig.password" type="password" show-password />
+          </el-form-item>
+        </div>
+      </el-form>
+    </XtGroupedFormCard>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dbConfig: {
+        host: '',
+        port: '',
+        database: '',
+        username: '',
+        password: ''
+      }
+    }
+  },
+  
+  methods: {
+    testDbConnection() {
+      console.log('测试数据库连接')
+    },
+    
+    resetDbConfig() {
+      this.dbConfig = {
+        host: '',
+        port: '',
+        database: '',
+        username: '',
+        password: ''
+      }
+    },
+    
+    handleToggle(collapsed) {
+      console.log('折叠状态:', collapsed)
+    }
+  }
+}
+</script>
+```
+
+---
+
+## 🔗 C) XtTestConnectionDrawer - 测试连接抽屉
+
+### 功能描述
+右侧抽屉展示测试连接的时间轴日志，支持重新测试和日志管理。
+
+### Props
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | Boolean | false | 是否显示抽屉 |
+| title | String | '连接测试' | 抽屉标题 |
+| logs | Array | [] | 测试日志数组 |
+| loading | Boolean | false | 加载状态 |
+
+### Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| close | - | 关闭抽屉 |
+| retest | - | 重新测试 |
+| clear-logs | - | 清空日志 |
+
+### 日志数据格式
+```javascript
+{
+  ts: 1640995200000,           // 时间戳
+  step: '连接数据库',           // 步骤名称
+  status: 'ok',                // 状态: 'ok'|'warn'|'fail'
+  cost: 120,                   // 耗时(ms)
+  tip: '连接成功',             // 提示信息
+  details: '详细日志信息...'    // 详细信息(可选)
+}
+```
+
+### 使用示例
+```vue
+<template>
+  <div>
+    <el-button @click="showTestDrawer = true">测试连接</el-button>
+    
+    <XtTestConnectionDrawer
+      :visible="showTestDrawer"
+      title="Redis 连接测试"
+      :logs="testLogs"
+      :loading="testing"
+      @close="showTestDrawer = false"
+      @retest="startConnectionTest"
+      @clear-logs="clearTestLogs"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showTestDrawer: false,
+      testing: false,
+      testLogs: [
+        {
+          ts: Date.now() - 5000,
+          step: '解析连接地址',
+          status: 'ok',
+          cost: 10,
+          tip: '地址解析成功: redis://localhost:6379'
+        },
+        {
+          ts: Date.now() - 4000,
+          step: '建立TCP连接',
+          status: 'ok',
+          cost: 150,
+          tip: 'TCP连接建立成功'
+        },
+        {
+          ts: Date.now() - 3000,
+          step: '身份认证',
+          status: 'warn',
+          cost: 200,
+          tip: '未配置密码，使用默认认证'
+        },
+        {
+          ts: Date.now() - 2000,
+          step: '执行PING命令',
+          status: 'ok',
+          cost: 5,
+          tip: '服务器响应: PONG'
+        }
+      ]
+    }
+  },
+  
+  methods: {
+    async startConnectionTest() {
+      this.testing = true
+      this.testLogs = []
+      
+      try {
+        // 模拟测试步骤
+        await this.runTestStep('连接服务器', 100)
+        await this.runTestStep('验证权限', 200)
+        await this.runTestStep('测试读写', 150)
+        
+        this.$message.success('连接测试完成')
+      } catch (error) {
+        this.$message.error('连接测试失败')
+      } finally {
+        this.testing = false
+      }
+    },
+    
+    async runTestStep(stepName, duration) {
+      const startTime = Date.now()
+      
+      // 模拟异步操作
+      await new Promise(resolve => setTimeout(resolve, duration))
+      
+      const cost = Date.now() - startTime
+      const log = {
+        ts: Date.now(),
+        step: stepName,
+        status: Math.random() > 0.8 ? 'warn' : 'ok',
+        cost,
+        tip: `${stepName}完成，耗时${cost}ms`
+      }
+      
+      this.testLogs.push(log)
+    },
+    
+    clearTestLogs() {
+      this.testLogs = []
+    }
+  }
+}
+</script>
+```
+
+---
+
+## 📊 D) XtDiffPublishDialog - 差异发布对话框
+
+### 功能描述
+展示配置变更的对比对话框，支持选择性发布和搜索过滤。
+
+### Props
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | Boolean | false | 是否显示对话框 |
+| diffs | Array | [] | 差异数据数组 |
+| loading | Boolean | false | 加载状态 |
+| publishing | Boolean | false | 发布状态 |
+
+### Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| confirm | selectedKeys | 确认发布，返回选中的key数组 |
+| cancel | - | 取消发布 |
+
+### 差异数据格式
+```javascript
+{
+  key: 'database.host',        // 配置键
+  name: '数据库主机',          // 显示名称
+  path: 'config.database',     // 配置路径
+  oldValue: 'localhost',       // 原值
+  newValue: '192.168.1.100',   // 新值
+  isChanged: true,             // 是否变更
+  isNew: false,                // 是否新增
+  isDeleted: false,            // 是否删除
+  description: '主机地址变更'   // 变更说明
+}
+```
+
+### 使用示例
+```vue
+<template>
+  <div>
+    <el-button @click="showPublishDialog = true">发布配置</el-button>
+    
+    <XtDiffPublishDialog
+      :visible="showPublishDialog"
+      :diffs="configDiffs"
+      :loading="loadingDiffs"
+      :publishing="publishingConfig"
+      @confirm="handlePublishConfirm"
+      @cancel="showPublishDialog = false"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showPublishDialog: false,
+      loadingDiffs: false,
+      publishingConfig: false,
+      configDiffs: [
+        {
+          key: 'database.host',
+          name: '数据库主机',
+          path: 'config.database',
+          oldValue: 'localhost',
+          newValue: '192.168.1.100',
+          isChanged: true,
+          isNew: false,
+          isDeleted: false,
+          description: '切换到生产环境数据库'
+        },
+        {
+          key: 'redis.port',
+          name: 'Redis端口',
+          path: 'config.redis',
+          oldValue: 6379,
+          newValue: 6380,
+          isChanged: true,
+          isNew: false,
+          isDeleted: false,
+          description: '避免端口冲突'
+        },
+        {
+          key: 'app.debug',
+          name: '调试模式',
+          path: 'config.app',
+          oldValue: true,
+          newValue: null,
+          isChanged: false,
+          isNew: false,
+          isDeleted: true,
+          description: '生产环境关闭调试'
+        }
+      ]
+    }
+  },
+  
+  methods: {
+    async handlePublishConfirm(selectedKeys) {
+      this.publishingConfig = true
+      
+      try {
+        // 发布选中的配置项
+        await this.publishConfigs(selectedKeys)
+        
+        this.$message.success(`成功发布 ${selectedKeys.length} 项配置`)
+        this.showPublishDialog = false
+        
+        // 刷新配置列表
+        this.loadConfigs()
+      } catch (error) {
+        this.$message.error('发布失败: ' + error.message)
+      } finally {
+        this.publishingConfig = false
+      }
+    },
+    
+    async publishConfigs(keys) {
+      // 模拟发布API调用
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (Math.random() > 0.1) {
+            resolve()
+          } else {
+            reject(new Error('网络错误'))
+          }
+        }, 2000)
+      })
+    }
+  }
+}
+</script>
+```
+
+---
+
+## 📈 E) XtRightSummaryPanel - 右侧摘要面板
+
+### 功能描述
+右侧固定的摘要面板，显示统计信息、配置项状态和快速操作。
+
+### Props
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| stats | Object | `{}` | 统计数据对象 |
+| items | Array | [] | 配置项数组 |
+| loading | Boolean | false | 加载状态 |
+| activeItemKey | String | '' | 当前激活的配置项key |
+
+### Events
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| item-click | item | 配置项点击 |
+| publish-changes | - | 发布变更 |
+| fix-risks | - | 修复风险 |
+| test-all | - | 重新测试 |
+
+### 统计数据格式
+```javascript
+{
+  changed: 5,              // 变更数量
+  passed: 12,              // 通过数量
+  risk: 2,                 // 风险数量
+  lastTestAt: 1640995200000 // 最后测试时间
+}
+```
+
+### 配置项数据格式
+```javascript
+{
+  key: 'database.host',           // 配置键
+  name: '数据库主机',             // 显示名称
+  path: 'config.database',        // 配置路径
+  group: 'Database',              // 分组
+  status: 'passed',               // 状态: 'passed'|'risk'|'pending'|'changed'
+  isChanged: false                // 是否变更
+}
+```
+
+### 使用示例
+```vue
+<template>
+  <div class="config-page">
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 配置表单等内容 -->
+    </div>
+    
+    <!-- 右侧摘要面板 -->
+    <XtRightSummaryPanel
+      :stats="configStats"
+      :items="configItems"
+      :loading="loadingStats"
+      :active-item-key="activeConfigKey"
+      @item-click="handleItemClick"
+      @publish-changes="handlePublishChanges"
+      @fix-risks="handleFixRisks"
+      @test-all="handleTestAll"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loadingStats: false,
+      activeConfigKey: '',
+      configStats: {
+        changed: 3,
+        passed: 15,
+        risk: 1,
+        lastTestAt: Date.now() - 300000 // 5分钟前
+      },
+      configItems: [
+        {
+          key: 'database.host',
+          name: '数据库主机',
+          path: 'config.database',
+          group: 'Database',
+          status: 'changed',
+          isChanged: true
+        },
+        {
+          key: 'redis.port',
+          name: 'Redis端口',
+          path: 'config.redis',
+          group: 'Cache',
+          status: 'passed',
+          isChanged: false
+        },
+        {
+          key: 'app.secret',
+          name: '应用密钥',
+          path: 'config.app',
+          group: 'Security',
+          status: 'risk',
+          isChanged: false
+        }
+      ]
+    }
+  },
+  
+  methods: {
+    handleItemClick(item) {
+      this.activeConfigKey = item.key
+      // 跳转到对应的配置项
+      this.scrollToConfigItem(item.key)
+    },
+    
+    handlePublishChanges() {
+      // 打开发布对话框
+      this.showPublishDialog = true
+    },
+    
+    handleFixRisks() {
+      // 处理风险配置项
+      const riskItems = this.configItems.filter(item => item.status === 'risk')
+      this.showRiskFixDialog(riskItems)
+    },
+    
+    handleTestAll() {
+      // 重新测试所有配置
+      this.runFullTest()
+    },
+    
+    scrollToConfigItem(key) {
+      const element = document.getElementById(`config-${key}`)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-page {
+  display: flex;
+  height: 100vh;
+
+  .main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-6);
+  }
+}
+</style>
+```
+
+---
+
+## 🎨 主题适配
+
+所有组件都完全支持明暗主题切换，使用了设计令牌系统中的颜色变量。组件会自动响应主题变化，无需额外配置。
+
+## 📱 响应式设计
+
+所有组件都内置了响应式设计支持：
+
+- **移动端优化**：在小屏幕设备上自动调整布局
+- **触摸友好**：按钮和交互元素针对触摸操作优化
+- **自适应尺寸**：根据容器大小自动调整组件尺寸
+
+## 🔧 自定义样式
+
+如需自定义组件样式，可以通过以下方式：
+
+1. **使用设计令牌**：修改CSS变量来调整主题色彩
+2. **CSS类覆盖**：使用更高优先级的CSS类覆盖默认样式
+3. **插槽定制**：利用组件提供的插槽来自定义内容
+
+## 🚀 性能优化
+
+- **虚拟滚动**：大列表组件支持虚拟滚动
+- **懒加载**：按需加载数据和组件
+- **防抖节流**：搜索和频繁操作使用防抖节流
+- **内存管理**：组件销毁时正确清理事件监听器
+
+## 📞 技术支持
+
+如有任何问题或建议，请联系前端开发团队。
+
+**Happy Coding! 🎉**

CONNECTION_CONFIG_GUIDE.md

@@ -0,0 +1,415 @@
+# 连接配置页面使用指南
+
+## 📋 概述
+
+全新的连接配置页面采用现代化设计，使用分组表单卡片 + 右侧摘要 + 底部粘性操作栏的布局，提供直观的配置管理体验。
+
+## 🎯 功能特性
+
+### ✨ 核心功能
+- **分组表单管理**：4个配置分组（基础网络、MQTT、HTTP/回调、代理与安全）
+- **实时变更检测**：自动对比初始值，显示变更数量和状态
+- **分组测试**：每个分组独立测试连接状态
+- **发布前对比**：可视化显示配置差异，支持选择性发布
+- **响应式布局**：完美适配桌面端和移动端
+
+### 🔧 技术特性
+- **表单验证**：IP地址、URL、端口等格式校验
+- **敏感值保护**：密钥等敏感字段默认掩码显示
+- **文件上传**：支持证书文件上传，格式验证
+- **Mock API**：完整的模拟后端接口，支持异步测试
+
+## 🏗️ 架构设计
+
+### 文件结构
+```
+src/
+├── api/mock/
+│   └── connection.js           # Mock API 接口
+├── views/config/connectconf/
+│   └── index.vue              # 连接配置主页面
+└── components/                # 通用组件
+    ├── XtGroupedFormCard/     # 分组表单卡片
+    ├── XtRightSummaryPanel/   # 右侧摘要面板
+    ├── XtStickyActionBar/     # 底部粘性操作栏
+    ├── XtTestConnectionDrawer/ # 测试连接抽屉
+    └── XtDiffPublishDialog/   # 差异发布对话框
+```
+
+### 组件关系图
+```mermaid
+graph TD
+    A[连接配置页面] --> B[分组表单卡片]
+    A --> C[右侧摘要面板]
+    A --> D[底部操作栏]
+    A --> E[测试连接抽屉]
+    A --> F[发布确认对话框]
+    
+    B --> B1[基础网络]
+    B --> B2[MQTT配置]
+    B --> B3[HTTP/回调]
+    B --> B4[代理与安全]
+    
+    C --> C1[统计信息]
+    C --> C2[配置项列表]
+    C --> C3[快速操作]
+    
+    D --> D1[保存草稿]
+    D --> D2[测试全部]
+    D --> D3[发布变更]
+    D --> D4[回滚配置]
+```
+
+## 📱 响应式设计
+
+### 断点设置
+- **≥1440px**：两列卡片布局 + 右侧摘要面板
+- **1280-1439px**：单列卡片布局 + 右侧摘要面板
+- **<1280px**：单列卡片布局 + 顶部摘要按钮（抽屉形式）
+- **<768px**：移动端优化布局
+
+### 布局适配
+```scss
+// 大屏双列布局
+@media (min-width: 1440px) {
+  .form-groups {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+// 中屏隐藏右侧面板
+@media (max-width: 1279px) {
+  .desktop-summary {
+    display: none;
+  }
+  .mobile-only {
+    display: block;
+  }
+}
+
+// 移动端优化
+@media (max-width: 768px) {
+  .page-header {
+    padding: var(--spacing-4);
+  }
+  .form-groups {
+    gap: var(--spacing-4);
+  }
+}
+```
+
+## 🔧 配置字段说明
+
+### 1. 基础网络配置
+| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
+|--------|------|------|----------|------|
+| toolIp | String | ✅ | IP格式 | 工具机IP地址 |
+| serverIp | String | ✅ | IP格式 | 服务器IP地址 |
+| enableProxy | Boolean | - | - | 是否启用代理 |
+| netProxy | String | - | URL格式 | 网络代理地址 |
+
+### 2. MQTT 配置
+| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
+|--------|------|------|----------|------|
+| mqttBroker | String | ✅ | MQTT URL格式 | MQTT代理地址 |
+| mqttProductId | String | ✅ | 3-50字符 | 产品ID |
+| mqttDeviceId | String | ✅ | 3-50字符 | 设备ID |
+| mqttSecret | String | ✅ | 最少8位 | 设备密钥（敏感字段） |
+
+### 3. HTTP/回调 配置
+| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
+|--------|------|------|----------|------|
+| httpBase | String | ✅ | HTTP/HTTPS URL | HTTP基础地址 |
+| httpTimeout | Number | ✅ | 1000-300000 | 超时时间（毫秒） |
+
+### 4. 代理与安全配置
+| 字段名 | 类型 | 必填 | 校验规则 | 说明 |
+|--------|------|------|----------|------|
+| packetFilter | Boolean | - | - | 数据包过滤开关 |
+| certFile | File | - | 证书格式，<2MB | 证书文件 |
+
+## 🧪 校验规则
+
+### IP地址验证
+```javascript
+const ipPattern = /^(25[0-5]|2[0-4]\d|1?\d?\d)(\.(25[0-5]|2[0-4]\d|1?\d?\d)){3}$/
+```
+
+### URL验证
+```javascript
+const urlPattern = /^https?:\/\/.+/
+```
+
+### MQTT地址验证
+```javascript
+const mqttPattern = /^mqtt:\/\/.+:\d+$/
+```
+
+### 端口范围验证
+```javascript
+const portRange = { min: 1, max: 65535 }
+```
+
+## 🔄 交互流程
+
+### 1. 页面加载流程
+```mermaid
+sequenceDiagram
+    participant U as 用户
+    participant P as 页面
+    participant A as Mock API
+    
+    U->>P: 访问连接配置页面
+    P->>A: 调用 getConfig()
+    A-->>P: 返回当前配置和草稿
+    P->>P: 初始化表单数据
+    P->>P: 计算变更状态
+    P-->>U: 显示配置界面
+```
+
+### 2. 配置变更流程
+```mermaid
+sequenceDiagram
+    participant U as 用户
+    participant P as 页面
+    participant S as 摘要面板
+    
+    U->>P: 修改配置字段
+    P->>P: 触发字段验证
+    P->>P: 计算变更差异
+    P->>S: 更新摘要统计
+    S-->>U: 实时显示变更状态
+```
+
+### 3. 测试连接流程
+```mermaid
+sequenceDiagram
+    participant U as 用户
+    participant P as 页面
+    participant D as 测试抽屉
+    participant A as Mock API
+    
+    U->>P: 点击"测试该组"
+    P->>D: 打开测试抽屉
+    P->>A: 调用 testConnection()
+    A-->>P: 返回测试日志
+    P->>D: 显示时间轴日志
+    D-->>U: 展示测试结果
+```
+
+### 4. 发布配置流程
+```mermaid
+sequenceDiagram
+    participant U as 用户
+    participant P as 页面
+    participant Diff as 差异对话框
+    participant A as Mock API
+    
+    U->>P: 点击"发布"
+    P->>P: 生成配置差异
+    P->>Diff: 显示差异对话框
+    U->>Diff: 选择要发布的字段
+    Diff->>A: 调用 publishConfig()
+    A-->>Diff: 返回发布结果
+    Diff->>P: 更新原始数据
+    P-->>U: 显示发布成功
+```
+
+## 🎨 UI/UX 特性
+
+### 敏感值保护
+```javascript
+// 密钥字段默认掩码显示
+showSecrets: {
+  mqttSecret: false  // 默认隐藏
+}
+
+// 点击眼睛图标切换显示
+toggleSecret(field) {
+  this.showSecrets[field] = !this.showSecrets[field]
+}
+```
+
+### 变更检测
+```javascript
+// 实时计算变更数量
+dirtyCount() {
+  let count = 0
+  Object.keys(this.formData).forEach(key => {
+    if (JSON.stringify(this.formData[key]) !== JSON.stringify(this.originalData[key])) {
+      count++
+    }
+  })
+  return count
+}
+```
+
+### 错误统计
+```javascript
+// 统计表单验证错误
+errorCount() {
+  let count = 0
+  const forms = ['networkForm', 'mqttForm', 'httpForm', 'securityForm']
+  forms.forEach(formName => {
+    if (this.$refs[formName]) {
+      this.$refs[formName].fields.forEach(field => {
+        if (field.validateState === 'error') {
+          count++
+        }
+      })
+    }
+  })
+  return count
+}
+```
+
+## 📊 Mock API 说明
+
+### API 接口清单
+| 接口名称 | 功能 | 延迟 | 失败率 |
+|----------|------|------|--------|
+| `getConfig()` | 获取配置 | 300ms | 0% |
+| `saveDraft()` | 保存草稿 | 500ms | 10% |
+| `publishConfig()` | 发布配置 | 1000ms | 5% |
+| `rollbackConfig()` | 回滚配置 | 800ms | 3% |
+| `testConnection()` | 测试连接 | 800-1500ms | 动态 |
+
+### 测试日志格式
+```javascript
+{
+  ts: 1640995200000,           // 时间戳
+  step: '连接数据库',           // 步骤名称
+  status: 'ok',                // 状态: 'ok'|'warn'|'fail'
+  cost: 120,                   // 耗时(ms)
+  tip: '连接成功',             // 提示信息
+  details: '详细日志信息...'    // 详细信息(可选)
+}
+```
+
+### 差异数据格式
+```javascript
+{
+  key: 'database.host',        // 配置键
+  name: '数据库主机',          // 显示名称
+  path: 'config.database',     // 配置路径
+  oldValue: 'localhost',       // 原值
+  newValue: '192.168.1.100',   // 新值
+  isChanged: true,             // 是否变更
+  isNew: false,                // 是否新增
+  isDeleted: false,            // 是否删除
+  description: '主机地址变更'   // 变更说明
+}
+```
+
+## 🚀 使用示例
+
+### 1. 基本使用
+```vue
+<template>
+  <!-- 页面会自动加载配置数据 -->
+  <div>
+    <!-- 修改配置字段会自动触发变更检测 -->
+    <!-- 右侧摘要面板会实时更新统计信息 -->
+    <!-- 底部操作栏会显示变更和错误数量 -->
+  </div>
+</template>
+```
+
+### 2. 测试连接
+```javascript
+// 测试单个分组
+await this.testGroup('基础网络')
+
+// 测试所有分组
+await this.handleTestAll()
+```
+
+### 3. 配置发布
+```javascript
+// 获取配置差异
+const diffs = getConfigDiffs(this.originalData, this.formData)
+
+// 发布选中的配置
+await publishConfig(['toolIp', 'serverIp'])
+```
+
+### 4. 主题适配
+所有组件都自动支持明暗主题切换：
+```javascript
+// 切换主题
+window.toggleTheme()
+
+// 设置特定主题
+window.setTheme('dark')  // 或 'light', 'auto'
+```
+
+## 🔧 自定义扩展
+
+### 1. 添加新的配置分组
+```vue
+<XtGroupedFormCard
+  title="新分组"
+  desc="新分组的描述"
+  @test="() => testGroup('新分组')"
+  @reset="() => resetGroup('newGroup')"
+>
+  <!-- 表单内容 -->
+</XtGroupedFormCard>
+```
+
+### 2. 扩展验证规则
+```javascript
+formRules: {
+  newField: [
+    { required: true, message: '请输入新字段', trigger: 'blur' },
+    { validator: customValidator, trigger: 'blur' }
+  ]
+}
+```
+
+### 3. 自定义测试步骤
+```javascript
+// 在 mock/connection.js 中添加
+const testSteps = {
+  '新分组': [
+    {
+      name: '检查新配置',
+      getTip: (status, config) => {
+        return status === 'ok' ? '配置正确' : '配置错误'
+      }
+    }
+  ]
+}
+```
+
+## 🐛 常见问题
+
+### Q: 为什么表单验证不生效？
+**A**: 确保在 `handleFieldChange` 方法中正确映射了表单引用：
+```javascript
+const formMap = {
+  newField: 'newForm'  // 添加新字段映射
+}
+```
+
+### Q: 如何添加新的敏感字段？
+**A**: 在 `showSecrets` 对象中添加字段，并在模板中使用 `show-password` 属性：
+```javascript
+showSecrets: {
+  newSecret: false
+}
+```
+
+### Q: 移动端摘要面板不显示怎么办？
+**A**: 检查响应式断点设置，确保 `isMobile` 计算属性正确：
+```javascript
+isMobile() {
+  return this.windowWidth < 1280
+}
+```
+
+## 📞 技术支持
+
+如有任何问题或建议，请联系前端开发团队。
+
+**Happy Coding! 🎉**

DESIGN_SYSTEM_GUIDE.md

@@ -0,0 +1,514 @@
+# 设计系统使用指南
+
+## 📋 概述
+
+本项目采用了全新的设计令牌系统和主题覆盖机制，在保持 Vue 2.6 + Element UI 2.x + 若依框架技术栈不变的前提下，实现了现代化的 UI/UX 升级。
+
+### 🎨 设计理念
+
+- **科技蓝主色调**：体现专业性和科技感
+- **深色友好**：支持明暗主题无缝切换
+- **去线框化**：现代化的卡片式设计语言
+- **系统化**：基于设计令牌的一致性保障
+
+## 🏗️ 架构设计
+
+### 文件结构
+
+```
+src/styles/
+├── tokens.scss          # 设计令牌定义（颜色、间距、字体等）
+├── overrides-element.scss # Element UI 主题覆盖
+├── utilities.scss       # 基础工具类
+└── index.scss          # 主样式入口
+
+src/utils/
+└── theme.js            # 主题管理工具
+
+src/components/
+└── XtThemeToggle.vue   # 主题切换组件
+```
+
+## 🎯 核心特性
+
+### 1. 设计令牌系统
+
+基于 CSS 变量实现的设计令牌系统，支持明暗主题切换：
+
+```scss
+:root {
+  /* 主色系 */
+  --color-primary: #0EA5E9;
+  --color-primary-light: #38BDF8;
+  --color-primary-dark: #0284C7;
+  
+  /* 语义化颜色 */
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-danger: #EF4444;
+  
+  /* 圆角系统 */
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  
+  /* 阴影系统 */
+  --shadow-card: 0 8px 24px rgba(2, 6, 23, 0.06);
+  --shadow-card-hover: 0 12px 32px rgba(2, 6, 23, 0.12);
+}
+
+/* 暗色主题覆盖 */
+html.dark {
+  --color-bg-primary: #111827;
+  --color-bg-card: #1F2937;
+  --color-text-primary: #F9FAFB;
+  /* ... */
+}
+```
+
+### 2. Element UI 主题覆盖
+
+完全覆盖 Element UI 的默认样式，使其符合新的设计系统：
+
+- ✅ 按钮组件：现代化的悬停效果和状态样式
+- ✅ 表单组件：统一的输入框、选择器样式
+- ✅ 数据展示：表格、标签、进度条等组件
+- ✅ 反馈组件：消息提示、通知、工具提示
+- ✅ 导航组件：标签页、分页器样式
+
+### 3. 工具类系统
+
+提供丰富的 CSS 工具类，支持快速开发：
+
+```html
+<!-- 卡片样式 -->
+<div class="card">
+  <div class="card__header">
+    <h3 class="card__header-title">标题</h3>
+    <p class="card__header-subtitle">副标题</p>
+  </div>
+  <div class="card__content">
+    内容区域
+  </div>
+</div>
+
+<!-- 间距工具类 -->
+<div class="p-4 m-2 rounded-lg shadow-card">
+  <!-- padding: 16px, margin: 8px -->
+</div>
+
+<!-- 文本工具类 -->
+<p class="text-primary font-semibold text-lg">主要文本</p>
+<p class="text-secondary text-sm">次要文本</p>
+<p class="muted">弱化文本</p>
+
+<!-- 布局工具类 -->
+<div class="flex items-center justify-between">
+  <span>左侧内容</span>
+  <span>右侧内容</span>
+</div>
+```
+
+## 🔧 使用方法
+
+### 1. 基础使用
+
+项目已经自动集成了新的设计系统，无需额外配置。所有 Element UI 组件都会自动应用新的主题样式。
+
+### 2. 主题切换
+
+使用内置的主题切换组件：
+
+```vue
+<template>
+  <div>
+    <!-- 按钮模式 -->
+    <XtThemeToggle mode="button" :show-text="true" />
+    
+    <!-- 选择器模式 -->
+    <XtThemeToggle mode="select" />
+    
+    <!-- 分段控制器模式 -->
+    <XtThemeToggle mode="segmented" :show-text="true" />
+    
+    <!-- 开关模式 -->
+    <XtThemeToggle mode="switch" :show-label="true" />
+  </div>
+</template>
+
+<script>
+import XtThemeToggle from '@/components/XtThemeToggle'
+
+export default {
+  components: {
+    XtThemeToggle
+  }
+}
+</script>
+```
+
+### 3. 程序化主题控制
+
+```javascript
+// 在组件中使用
+export default {
+  methods: {
+    toggleTheme() {
+      this.$toggleTheme() // 切换明暗主题
+    },
+    
+    setLightTheme() {
+      this.$setTheme('light') // 设置亮色主题
+    },
+    
+    setDarkTheme() {
+      this.$setTheme('dark') // 设置暗色主题
+    },
+    
+    setAutoTheme() {
+      this.$setTheme('auto') // 跟随系统主题
+    },
+    
+    checkCurrentTheme() {
+      console.log('当前主题:', this.$getTheme())
+      console.log('是否暗色主题:', this.$isDark())
+      console.log('是否亮色主题:', this.$isLight())
+    }
+  }
+}
+```
+
+### 4. 主题变化监听
+
+```javascript
+import { ThemeMixin } from '@/utils/theme'
+
+export default {
+  mixins: [ThemeMixin],
+  
+  methods: {
+    // 主题变化时的自定义处理
+    onThemeChange(event) {
+      console.log('主题已切换:', event)
+      // event.theme - 设置的主题 ('light', 'dark', 'auto')
+      // event.effectiveTheme - 实际生效的主题 ('light', 'dark')
+      // event.isDark - 是否为暗色主题
+      // event.isLight - 是否为亮色主题
+      // event.isAuto - 是否为自动主题
+      
+      // 在这里处理主题变化逻辑
+      if (event.isDark) {
+        // 暗色主题特殊处理
+      } else {
+        // 亮色主题特殊处理
+      }
+    }
+  }
+}
+```
+
+## 🎨 设计令牌参考
+
+### 颜色系统
+
+| 令牌名称 | 用途 | 示例值 |
+|---------|------|--------|
+| `--color-primary` | 主色调 | `#0EA5E9` |
+| `--color-success` | 成功状态 | `#22C55E` |
+| `--color-warning` | 警告状态 | `#F59E0B` |
+| `--color-danger` | 危险状态 | `#EF4444` |
+| `--color-text-primary` | 主要文本 | `#0F172A` / `#F9FAFB` |
+| `--color-text-secondary` | 次要文本 | `#475569` / `#E5E7EB` |
+| `--color-bg-card` | 卡片背景 | `#FFFFFF` / `#1F2937` |
+| `--color-border-primary` | 主要边框 | `rgba(2,6,23,0.08)` / `#374151` |
+
+### 间距系统
+
+| 令牌名称 | 值 | 用途 |
+|---------|---|------|
+| `--spacing-1` | `4px` | 最小间距 |
+| `--spacing-2` | `8px` | 小间距 |
+| `--spacing-3` | `12px` | 中小间距 |
+| `--spacing-4` | `16px` | 中等间距 |
+| `--spacing-6` | `24px` | 大间距 |
+| `--spacing-8` | `32px` | 超大间距 |
+
+### 圆角系统
+
+| 令牌名称 | 值 | 用途 |
+|---------|---|------|
+| `--radius-sm` | `4px` | 小圆角 |
+| `--radius-base` | `6px` | 基础圆角 |
+| `--radius-md` | `8px` | 中等圆角 |
+| `--radius-lg` | `12px` | 大圆角（默认） |
+| `--radius-xl` | `16px` | 超大圆角 |
+| `--radius-full` | `9999px` | 完全圆角 |
+
+### 阴影系统
+
+| 令牌名称 | 用途 |
+|---------|------|
+| `--shadow-sm` | 小阴影 |
+| `--shadow-base` | 基础阴影 |
+| `--shadow-md` | 中等阴影 |
+| `--shadow-lg` | 大阴影 |
+| `--shadow-xl` | 超大阴影 |
+| `--shadow-card` | 卡片阴影 |
+| `--shadow-card-hover` | 卡片悬停阴影 |
+
+## 🚀 最佳实践
+
+### 1. 使用设计令牌
+
+❌ **不推荐** - 硬编码颜色值：
+```scss
+.my-component {
+  background: #0EA5E9;
+  color: #ffffff;
+  border-radius: 12px;
+}
+```
+
+✅ **推荐** - 使用设计令牌：
+```scss
+.my-component {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-lg);
+}
+```
+
+### 2. 组件命名规范
+
+所有自定义组件使用 `Xt` 前缀：
+
+```vue
+<!-- 正确的组件命名 -->
+<XtThemeToggle />
+<XtGroupedFormCard />
+<XtStickyActionBar />
+<XtTestConnectionDrawer />
+<XtDiffPublishDialog />
+<XtRightSummaryPanel />
+```
+
+### 3. 样式组织
+
+```vue
+<template>
+  <div class="xt-my-component">
+    <div class="component-header">
+      <h3 class="header-title">标题</h3>
+    </div>
+    <div class="component-content">
+      内容
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.xt-my-component {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+  box-shadow: var(--shadow-card);
+  
+  .component-header {
+    border-bottom: 1px solid var(--color-border-secondary);
+    padding-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-4);
+    
+    .header-title {
+      color: var(--color-text-primary);
+      font-size: var(--font-size-lg);
+      font-weight: var(--font-weight-semibold);
+      margin: 0;
+    }
+  }
+  
+  .component-content {
+    color: var(--color-text-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+}
+</style>
+```
+
+### 4. 响应式设计
+
+利用内置的响应式工具类：
+
+```html
+<div class="card p-4 lg:p-6">
+  <h3 class="text-lg lg:text-xl font-semibold">
+    响应式标题
+  </h3>
+  <div class="flex flex-col lg:flex-row gap-4">
+    <div class="flex-1">左侧内容</div>
+    <div class="flex-1 lg:hidden">移动端显示</div>
+    <div class="flex-1 hidden lg:block">桌面端显示</div>
+  </div>
+</div>
+```
+
+## 🔍 调试和开发
+
+### 1. 查看设计令牌
+
+在浏览器开发者工具中查看当前生效的设计令牌：
+
+```javascript
+// 控制台中执行
+const style = getComputedStyle(document.documentElement)
+console.log('主色调:', style.getPropertyValue('--color-primary'))
+console.log('卡片背景:', style.getPropertyValue('--color-bg-card'))
+console.log('大圆角:', style.getPropertyValue('--radius-lg'))
+```
+
+### 2. 动态修改主题色
+
+```javascript
+// 临时修改主色调（用于调试）
+document.documentElement.style.setProperty('--color-primary', '#ff6b6b')
+
+// 恢复默认值
+document.documentElement.style.removeProperty('--color-primary')
+```
+
+### 3. 主题切换测试
+
+```javascript
+// 测试所有主题
+this.$setTheme('light')
+setTimeout(() => this.$setTheme('dark'), 1000)
+setTimeout(() => this.$setTheme('auto'), 2000)
+```
+
+## 📱 可访问性支持
+
+设计系统内置了完善的可访问性支持：
+
+- ✅ **键盘导航**：所有交互元素支持键盘操作
+- ✅ **焦点管理**：清晰的焦点指示器
+- ✅ **色彩对比**：符合 WCAG 2.1 AA 标准
+- ✅ **屏幕阅读器**：正确的 ARIA 标签
+- ✅ **减少动画**：支持 `prefers-reduced-motion`
+- ✅ **高对比度**：支持 `prefers-contrast: high`
+
+## 🎯 演示页面
+
+访问 `/design-system-demo` 路由查看完整的设计系统演示，包括：
+
+- 颜色系统展示
+- 组件样式对比
+- 工具类效果演示
+- 主题切换测试
+
+## 🐛 问题排查
+
+### 常见问题
+
+1. **样式不生效**
+   - 确认已正确引入 `@/styles/index.scss`
+   - 检查 CSS 变量是否正确定义
+   - 确认组件使用了 `scoped` 样式
+
+2. **主题切换不工作**
+   - 确认已安装 `ThemePlugin`
+   - 检查 `html` 元素是否有 `dark` 类
+   - 确认 localStorage 权限正常
+
+3. **Element UI 样式覆盖失效**
+   - 确认样式文件加载顺序正确
+   - 检查 CSS 优先级是否足够
+   - 使用 `!important` 强制覆盖（不推荐）
+
+### 调试工具
+
+```javascript
+// 主题状态检查
+console.log('当前主题管理器状态:', {
+  theme: this.$theme.getTheme(),
+  effectiveTheme: this.$theme.getEffectiveCurrentTheme(),
+  isDark: this.$theme.isDark(),
+  isLight: this.$theme.isLight(),
+  isAuto: this.$theme.isAuto()
+})
+
+// CSS 变量检查
+const checkTokens = () => {
+  const tokens = [
+    'color-primary',
+    'color-bg-card',
+    'radius-lg',
+    'shadow-card'
+  ]
+  
+  tokens.forEach(token => {
+    const value = getComputedStyle(document.documentElement)
+      .getPropertyValue(`--${token}`)
+    console.log(`--${token}:`, value)
+  })
+}
+checkTokens()
+```
+
+## 📚 扩展开发
+
+### 1. 添加新的设计令牌
+
+在 `src/styles/tokens.scss` 中添加：
+
+```scss
+:root {
+  /* 新的颜色令牌 */
+  --color-accent: #8B5CF6;
+  --color-accent-light: #A78BFA;
+  --color-accent-dark: #7C3AED;
+  
+  /* 新的间距令牌 */
+  --spacing-18: 72px;
+  --spacing-20: 80px;
+}
+
+html.dark {
+  /* 暗色主题下的覆盖 */
+  --color-accent: #A78BFA;
+}
+```
+
+### 2. 扩展工具类
+
+在 `src/styles/utilities.scss` 中添加：
+
+```scss
+/* 新的工具类 */
+.accent {
+  color: var(--color-accent) !important;
+}
+
+.bg-accent {
+  background-color: var(--color-accent) !important;
+  color: var(--color-text-inverse) !important;
+}
+
+.border-accent {
+  border-color: var(--color-accent) !important;
+}
+```
+
+### 3. 自定义主题色
+
+```javascript
+// 动态设置品牌色
+this.$theme.setThemeColor('primary', '#your-brand-color')
+this.$theme.setThemeColor('primary-light', '#your-light-color')
+this.$theme.setThemeColor('primary-dark', '#your-dark-color')
+```
+
+---
+
+## 📞 技术支持
+
+如有任何问题或建议，请联系前端架构团队或在项目中创建 Issue。
+
+**Happy Coding! 🚀**

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

bin/build.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 打包Web工程，生成dist文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run build:prod
+
+pause

bin/package.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 安装Web工程，生成node_modules文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm install --registry=https://registry.npmmirror.com
+
+pause

bin/run-web.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 使用 Vue CLI 命令运行 Web 工程。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run dev
+
+pause

build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

package.json

@@ -0,0 +1,92 @@
+{
+  "name": "ruoyi",
+  "version": "3.8.8",
+  "description": "星图系统",
+  "author": "eric",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
+  },
+  "dependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
+    "axios": "0.28.1",
+    "clipboard": "2.0.8",
+    "core-js": "3.37.1",
+    "echarts": "5.4.0",
+    "element-ui": "2.15.14",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.4.3",
+    "highlight.js": "9.18.5",
+    "js-beautify": "1.13.0",
+    "js-cookie": "3.0.1",
+    "jsencrypt": "3.0.0-rc.1",
+    "nprogress": "0.2.0",
+    "ol": "^6.15.1",
+    "quill": "2.0.2",
+    "screenfull": "5.0.2",
+    "sortablejs": "1.10.2",
+    "splitpanes": "2.4.1",
+    "vue": "2.6.12",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.5.5",
+    "vue-meta": "2.4.0",
+    "vue-router": "3.4.9",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "4.1.0",
+    "compression-webpack-plugin": "6.1.2",
+    "connect": "3.6.6",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
+    "lint-staged": "10.5.3",
+    "runjs": "4.4.2",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "svg-sprite-loader": "5.1.1",
+    "vue-template-compiler": "2.6.12"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

public/index.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+	  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+    .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+    }
+
+    #loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+    }
+
+    #loader {
+      display: block;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      -ms-animation: spin 2s linear infinite;
+      -moz-animation: spin 2s linear infinite;
+      -o-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      z-index: 1001;
+    }
+
+    #loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      -moz-animation: spin 3s linear infinite;
+      -o-animation: spin 3s linear infinite;
+      -ms-animation: spin 3s linear infinite;
+      animation: spin 3s linear infinite;
+    }
+
+    #loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -moz-animation: spin 1.5s linear infinite;
+      -o-animation: spin 1.5s linear infinite;
+      -ms-animation: spin 1.5s linear infinite;
+      -webkit-animation: spin 1.5s linear infinite;
+      animation: spin 1.5s linear infinite;
+    }
+
+
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+
+    #loader-wrapper .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+      background: #7171C6;
+      z-index: 1000;
+      -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+    }
+
+    #loader-wrapper .loader-section.section-left {
+      left: 0;
+    }
+
+    #loader-wrapper .loader-section.section-right {
+      right: 0;
+    }
+
+
+    .loaded #loader-wrapper .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+      transform: translateX(-100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader-wrapper .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      -ms-transform: translateX(100%);
+      transform: translateX(100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
+
+    .loaded #loader-wrapper {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      -ms-transform: translateY(-100%);
+      transform: translateY(-100%);
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+    }
+
+    .no-js #loader-wrapper {
+      display: none;
+    }
+
+    .no-js h1 {
+      color: #222222;
+    }
+
+    #loader-wrapper .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: absolute;
+      top: 60%;
+      opacity: 1;
+      line-height: 30px;
+    }
+
+    #loader-wrapper .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+    }
+  </style>
+  </head>
+  <body>
+    <div id="app">
+	    <div id="loader-wrapper">
+		    <div id="loader"></div>
+		    <div class="loader-section section-left"></div>
+		    <div class="loader-section section-right"></div>
+		    <div class="load_title">正在加载系统资源，请耐心等待</div>
+        </div>
+	</div>
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="app">
+    <router-view />
+    <theme-picker />
+  </div>
+</template>
+
+<script>
+import ThemePicker from "@/components/ThemePicker";
+
+export default {
+  name: "App",
+  components: { ThemePicker },
+  metaInfo() {
+    return {
+      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+      titleTemplate: title => {
+        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+#app .theme-picker {
+  display: none;
+}
+</style>
+
+<style>
+.el-message-box {
+  border-radius: 10px !important;
+}
+
+.el-dialog {
+  margin-top: 22vh !important;
+  border-radius: 10px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 22vh !important;
+  border-radius: 10px;
+}
+
+.el-table--border{
+  border-radius: 10px;
+}
+
+
+</style>

src/api/login.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 登录方法
+export function login(username, password, code, uuid) {
+  const data = {
+    username,
+    password,
+    code,
+    uuid
+  }
+  return request({
+    url: '/login',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取用户详细信息
+export function getInfo() {
+  return request({
+    url: '/getInfo',
+    method: 'get'
+  })
+}
+
+// 退出方法
+export function logout() {
+  return request({
+    url: '/logout',
+    method: 'post'
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}

src/api/map/map.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询地图列列表
+export function listMap(query) {
+  return request({
+    url: '/system/map/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地图列详细
+export function getMap(id) {
+  return request({
+    url: '/system/map/' + id,
+    method: 'get'
+  })
+}
+
+// 新增地图列
+export function addMap(data) {
+  return request({
+    url: '/system/map',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改地图列
+export function updateMap(data) {
+  return request({
+    url: '/system/map',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除地图列
+export function delMap(id) {
+  return request({
+    url: '/system/map/' + id,
+    method: 'delete'
+  })
+}

src/api/menu.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取路由
+export const getRouters = () => {
+  return request({
+    url: '/getRouters',
+    method: 'get'
+  })
+}

src/api/mock/connection.js

@@ -0,0 +1,456 @@
+/**
+ * 连接配置 Mock API
+ * 模拟后端接口，用于开发阶段
+ * @author 前端架构师
+ */
+
+// 模拟延迟
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+// 模拟配置数据
+const mockConfig = {
+  // 基础网络配置
+  toolIp: '192.168.1.100',
+  serverIp: '192.168.1.200',
+  enableProxy: false,
+  netProxy: 'http://proxy.company.com:8080',
+  
+  // MQTT 配置
+  mqttBroker: 'mqtt://broker.hivemq.com:1883',
+  mqttProductId: 'smart_driving_001',
+  mqttDeviceId: 'vehicle_12345',
+  mqttSecret: 'mqtt_secret_key_2024',
+  
+  // HTTP 配置
+  httpBase: 'https://api.smartdriving.com',
+  httpTimeout: 30000,
+  
+  // 代理与安全配置
+  packetFilter: true,
+  certFile: null
+}
+
+// 存储当前配置（模拟数据库）
+let currentConfig = { ...mockConfig }
+let draftConfig = { ...mockConfig }
+let configHistory = [
+  {
+    version: 'v1.2.3',
+    timestamp: Date.now() - 86400000, // 1天前
+    config: { ...mockConfig }
+  }
+]
+
+/**
+ * 获取当前配置
+ */
+export async function getConfig() {
+  await delay(300)
+  
+  return {
+    code: 200,
+    message: 'success',
+    data: {
+      current: { ...currentConfig },
+      draft: { ...draftConfig },
+      lastModified: Date.now() - 3600000, // 1小时前
+      version: 'v1.2.4-draft'
+    }
+  }
+}
+
+/**
+ * 保存草稿
+ */
+export async function saveDraft(config) {
+  await delay(500)
+  
+  // 模拟保存失败（10%概率）
+  if (Math.random() < 0.1) {
+    return {
+      code: 500,
+      message: '保存失败：网络连接超时',
+      data: null
+    }
+  }
+  
+  draftConfig = { ...config }
+  
+  return {
+    code: 200,
+    message: '草稿保存成功',
+    data: {
+      savedAt: Date.now(),
+      version: 'v1.2.4-draft'
+    }
+  }
+}
+
+/**
+ * 发布配置
+ */
+export async function publishConfig(selectedFields) {
+  await delay(1000)
+  
+  // 模拟发布失败（5%概率）
+  if (Math.random() < 0.05) {
+    return {
+      code: 500,
+      message: '发布失败：配置验证不通过',
+      data: null
+    }
+  }
+  
+  // 只更新选中的字段
+  selectedFields.forEach(field => {
+    if (draftConfig.hasOwnProperty(field)) {
+      currentConfig[field] = draftConfig[field]
+    }
+  })
+  
+  // 添加到历史记录
+  configHistory.unshift({
+    version: `v1.2.${configHistory.length + 4}`,
+    timestamp: Date.now(),
+    config: { ...currentConfig },
+    publishedFields: selectedFields
+  })
+  
+  return {
+    code: 200,
+    message: `成功发布 ${selectedFields.length} 项配置`,
+    data: {
+      publishedAt: Date.now(),
+      version: configHistory[0].version,
+      affectedFields: selectedFields
+    }
+  }
+}
+
+/**
+ * 回滚配置
+ */
+export async function rollbackConfig(targetVersion) {
+  await delay(800)
+  
+  const targetHistory = configHistory.find(h => h.version === targetVersion)
+  if (!targetHistory) {
+    return {
+      code: 404,
+      message: '目标版本不存在',
+      data: null
+    }
+  }
+  
+  // 模拟回滚失败（3%概率）
+  if (Math.random() < 0.03) {
+    return {
+      code: 500,
+      message: '回滚失败：系统正在维护中',
+      data: null
+    }
+  }
+  
+  currentConfig = { ...targetHistory.config }
+  draftConfig = { ...targetHistory.config }
+  
+  return {
+    code: 200,
+    message: `成功回滚到版本 ${targetVersion}`,
+    data: {
+      rolledBackAt: Date.now(),
+      version: targetVersion
+    }
+  }
+}
+
+/**
+ * 测试连接配置
+ */
+export async function testConnection(groupName, config) {
+  const logs = []
+  const startTime = Date.now()
+  
+  // 根据不同组生成不同的测试步骤
+  const testSteps = getTestSteps(groupName)
+  
+  for (let i = 0; i < testSteps.length; i++) {
+    const step = testSteps[i]
+    const stepStartTime = Date.now()
+    
+    // 模拟异步测试
+    const duration = Math.random() * 700 + 800 // 800ms - 1500ms
+    await delay(duration)
+    
+    const cost = Date.now() - stepStartTime
+    const status = getRandomStatus(i, testSteps.length)
+    
+    logs.push({
+      ts: Date.now(),
+      step: step.name,
+      status: status,
+      cost: cost,
+      tip: step.getTip(status, config),
+      details: step.getDetails ? step.getDetails(status, config) : null
+    })
+    
+    // 如果某步失败，后续步骤标记为跳过
+    if (status === 'fail' && i < testSteps.length - 1) {
+      for (let j = i + 1; j < testSteps.length; j++) {
+        logs.push({
+          ts: Date.now(),
+          step: testSteps[j].name,
+          status: 'pending',
+          cost: 0,
+          tip: '由于前置步骤失败，跳过此步骤',
+          details: null
+        })
+      }
+      break
+    }
+  }
+  
+  const totalCost = Date.now() - startTime
+  const hasFailure = logs.some(log => log.status === 'fail')
+  
+  return {
+    code: 200,
+    message: hasFailure ? '测试完成，发现问题' : '测试完成',
+    data: {
+      groupName,
+      logs,
+      totalCost,
+      summary: {
+        total: logs.length,
+        passed: logs.filter(log => log.status === 'ok').length,
+        warning: logs.filter(log => log.status === 'warn').length,
+        failed: logs.filter(log => log.status === 'fail').length
+      }
+    }
+  }
+}
+
+/**
+ * 获取配置历史
+ */
+export async function getConfigHistory() {
+  await delay(200)
+  
+  return {
+    code: 200,
+    message: 'success',
+    data: configHistory
+  }
+}
+
+/**
+ * 获取配置差异
+ */
+export function getConfigDiffs(currentConfig, draftConfig) {
+  const diffs = []
+  const fieldNames = {
+    toolIp: '工具机IP',
+    serverIp: '服务器IP',
+    enableProxy: '启用代理',
+    netProxy: '网络代理',
+    mqttBroker: 'MQTT代理',
+    mqttProductId: 'MQTT产品ID',
+    mqttDeviceId: 'MQTT设备ID',
+    mqttSecret: 'MQTT密钥',
+    httpBase: 'HTTP基础地址',
+    httpTimeout: 'HTTP超时时间',
+    packetFilter: '数据包过滤',
+    certFile: '证书文件'
+  }
+  
+  const fieldPaths = {
+    toolIp: 'config.network.basic',
+    serverIp: 'config.network.basic',
+    enableProxy: 'config.network.basic',
+    netProxy: 'config.network.basic',
+    mqttBroker: 'config.mqtt',
+    mqttProductId: 'config.mqtt',
+    mqttDeviceId: 'config.mqtt',
+    mqttSecret: 'config.mqtt',
+    httpBase: 'config.http',
+    httpTimeout: 'config.http',
+    packetFilter: 'config.security',
+    certFile: 'config.security'
+  }
+  
+  Object.keys(fieldNames).forEach(key => {
+    const oldValue = currentConfig[key]
+    const newValue = draftConfig[key]
+    const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue)
+    
+    diffs.push({
+      key,
+      name: fieldNames[key],
+      path: fieldPaths[key],
+      oldValue,
+      newValue,
+      isChanged,
+      isNew: false,
+      isDeleted: false,
+      description: isChanged ? getChangeDescription(key, oldValue, newValue) : null
+    })
+  })
+  
+  return diffs
+}
+
+// 辅助函数：获取测试步骤
+function getTestSteps(groupName) {
+  const stepMap = {
+    '基础网络': [
+      {
+        name: '检查工具机IP连通性',
+        getTip: (status, config) => {
+          if (status === 'ok') return `工具机 ${config.toolIp} 连接正常`
+          if (status === 'warn') return `工具机连接延迟较高`
+          return `无法连接到工具机 ${config.toolIp}`
+        },
+        getDetails: (status, config) => {
+          if (status === 'fail') {
+            return `Ping ${config.toolIp} 失败\n请检查：\n1. IP地址是否正确\n2. 网络连接是否正常\n3. 防火墙设置`
+          }
+          return null
+        }
+      },
+      {
+        name: '检查服务器IP连通性',
+        getTip: (status, config) => {
+          if (status === 'ok') return `服务器 ${config.serverIp} 连接正常`
+          if (status === 'warn') return `服务器连接不稳定`
+          return `无法连接到服务器 ${config.serverIp}`
+        }
+      },
+      {
+        name: '验证代理配置',
+        getTip: (status, config) => {
+          if (!config.enableProxy) return '代理功能已禁用'
+          if (status === 'ok') return '代理配置验证通过'
+          if (status === 'warn') return '代理配置可能有问题'
+          return '代理配置验证失败'
+        }
+      }
+    ],
+    'MQTT': [
+      {
+        name: '解析MQTT代理地址',
+        getTip: (status, config) => {
+          if (status === 'ok') return `代理地址解析成功: ${config.mqttBroker}`
+          return `代理地址解析失败: ${config.mqttBroker}`
+        }
+      },
+      {
+        name: '建立MQTT连接',
+        getTip: (status) => {
+          if (status === 'ok') return 'MQTT连接建立成功'
+          if (status === 'warn') return 'MQTT连接不稳定'
+          return 'MQTT连接失败'
+        }
+      },
+      {
+        name: '验证设备认证',
+        getTip: (status, config) => {
+          if (status === 'ok') return `设备 ${config.mqttDeviceId} 认证成功`
+          return `设备认证失败，请检查产品ID和设备ID`
+        }
+      },
+      {
+        name: '测试消息发布',
+        getTip: (status) => {
+          if (status === 'ok') return '消息发布测试成功'
+          return '消息发布失败'
+        }
+      }
+    ],
+    'HTTP/回调': [
+      {
+        name: '检查HTTP基础地址',
+        getTip: (status, config) => {
+          if (status === 'ok') return `HTTP地址可访问: ${config.httpBase}`
+          return `HTTP地址无法访问: ${config.httpBase}`
+        }
+      },
+      {
+        name: '测试HTTP连接',
+        getTip: (status) => {
+          if (status === 'ok') return 'HTTP连接正常'
+          if (status === 'warn') return 'HTTP连接超时'
+          return 'HTTP连接失败'
+        }
+      },
+      {
+        name: '验证超时配置',
+        getTip: (status, config) => {
+          if (status === 'ok') return `超时设置合理: ${config.httpTimeout}ms`
+          if (status === 'warn') return `超时时间可能过短: ${config.httpTimeout}ms`
+          return '超时配置有问题'
+        }
+      }
+    ],
+    '代理与安全': [
+      {
+        name: '检查数据包过滤规则',
+        getTip: (status, config) => {
+          if (config.packetFilter) {
+            return status === 'ok' ? '数据包过滤规则正常' : '数据包过滤规则有问题'
+          }
+          return '数据包过滤已禁用'
+        }
+      },
+      {
+        name: '验证证书文件',
+        getTip: (status, config) => {
+          if (!config.certFile) return '未配置证书文件'
+          if (status === 'ok') return '证书文件验证通过'
+          if (status === 'warn') return '证书即将过期'
+          return '证书文件无效'
+        }
+      },
+      {
+        name: '安全策略检查',
+        getTip: (status) => {
+          if (status === 'ok') return '安全策略配置正确'
+          if (status === 'warn') return '安全策略需要优化'
+          return '安全策略存在风险'
+        }
+      }
+    ]
+  }
+  
+  return stepMap[groupName] || []
+}
+
+// 辅助函数：获取随机状态
+function getRandomStatus(stepIndex, totalSteps) {
+  // 前面的步骤更容易成功
+  const successRate = Math.max(0.7, 1 - stepIndex * 0.1)
+  const rand = Math.random()
+  
+  if (rand < successRate) return 'ok'
+  if (rand < successRate + 0.2) return 'warn'
+  return 'fail'
+}
+
+// 辅助函数：获取变更描述
+function getChangeDescription(key, oldValue, newValue) {
+  if (key.includes('Ip')) {
+    return `IP地址从 ${oldValue} 变更为 ${newValue}`
+  }
+  if (key.includes('mqtt')) {
+    return `MQTT配置更新`
+  }
+  if (key.includes('http')) {
+    return `HTTP配置更新`
+  }
+  if (key === 'enableProxy') {
+    return newValue ? '启用代理功能' : '禁用代理功能'
+  }
+  if (key === 'packetFilter') {
+    return newValue ? '启用数据包过滤' : '禁用数据包过滤'
+  }
+  return `配置项已更新`
+}

src/api/mock/connectionSimple.js

@@ -0,0 +1,205 @@
+/**
+ * 简化版连接配置 Mock API
+ */
+
+// 模拟延迟
+const delay = (min = 300, max = 600) => {
+  const time = Math.random() * (max - min) + min
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+// 模拟配置数据
+const mockConfigData = {
+  // IP配置
+  serverIp: '192.168.1.100',
+  mqttBrokerWeb: 'ws://broker.hivemq.com:8000',
+  mqttBrokerNav: 'mqtt://broker.hivemq.com:1883',
+  mqttProductId: 'smart_driving_v2',
+  httpBase: 'https://api.smartdriving.com',
+  
+  // 硬件接口
+  lidarNic: 'enp0s31f6',
+  packetFilterEnabled: true,
+  packetFilterRule: 'tcp and (port 80 or port 443)\nudp and port 53\nicmp',
+  
+  // 网络代理
+  netProxyEnabled: false,
+  netProxyAddr: 'proxy.company.com:8080',
+  map8086: 'localhost:8086',
+  map8088: 'localhost:8088'
+}
+
+// 存储当前配置（模拟数据库）
+let currentConfig = { ...mockConfigData }
+
+/**
+ * 获取所有配置
+ */
+export const getConfig = async () => {
+  await delay()
+  
+  return {
+    code: 200,
+    message: '获取配置成功',
+    data: { ...currentConfig }
+  }
+}
+
+/**
+ * 更新单个配置参数
+ * @param {Object} params - 参数对象
+ * @param {string} params.key - 配置键名
+ * @param {any} params.value - 配置值
+ */
+export const updateParam = async ({ key, value }) => {
+  await delay()
+  
+  // 模拟错误场景（5% 概率）
+  if (Math.random() < 0.05) {
+    throw new Error('网络错误，请重试')
+  }
+  
+  // 验证参数
+  if (!key) {
+    throw new Error('参数键名不能为空')
+  }
+  
+  if (!(key in currentConfig)) {
+    throw new Error(`未知的配置参数: ${key}`)
+  }
+  
+  // 更新配置
+  currentConfig[key] = value
+  
+  return {
+    code: 200,
+    message: '参数更新成功',
+    data: {
+      key,
+      value,
+      timestamp: Date.now()
+    }
+  }
+}
+
+/**
+ * 批量更新配置（备用接口）
+ * @param {Object} config - 配置对象
+ */
+export const updateConfig = async (config) => {
+  await delay(500, 800)
+  
+  // 模拟错误场景
+  if (Math.random() < 0.03) {
+    throw new Error('服务器内部错误')
+  }
+  
+  // 验证并更新配置
+  const validKeys = Object.keys(mockConfigData)
+  const updates = {}
+  
+  for (const [key, value] of Object.entries(config)) {
+    if (validKeys.includes(key)) {
+      currentConfig[key] = value
+      updates[key] = value
+    }
+  }
+  
+  return {
+    code: 200,
+    message: `成功更新 ${Object.keys(updates).length} 个配置项`,
+    data: {
+      updates,
+      timestamp: Date.now()
+    }
+  }
+}
+
+/**
+ * 重置配置到默认值
+ */
+export const resetConfig = async () => {
+  await delay(400, 700)
+  
+  currentConfig = { ...mockConfigData }
+  
+  return {
+    code: 200,
+    message: '配置已重置到默认值',
+    data: { ...currentConfig }
+  }
+}
+
+/**
+ * 导出配置
+ */
+export const exportConfig = async () => {
+  await delay(200, 400)
+  
+  return {
+    code: 200,
+    message: '配置导出成功',
+    data: {
+      config: { ...currentConfig },
+      exportTime: new Date().toISOString(),
+      version: 'v2.0.0-simple'
+    }
+  }
+}
+
+/**
+ * 测试连接（简化版）
+ * @param {string} type - 测试类型 (ip|mqtt|http|hardware|proxy)
+ * @param {Object} config - 相关配置
+ */
+export const testConnection = async (type, config) => {
+  await delay(1000, 2000)
+  
+  // 模拟测试结果
+  const testResults = {
+    ip: {
+      success: Math.random() > 0.2, // 80% 成功率
+      message: Math.random() > 0.2 ? 'IP连接测试通过' : 'IP地址无法访问'
+    },
+    mqtt: {
+      success: Math.random() > 0.3, // 70% 成功率
+      message: Math.random() > 0.3 ? 'MQTT连接测试通过' : 'MQTT代理连接失败'
+    },
+    http: {
+      success: Math.random() > 0.1, // 90% 成功率
+      message: Math.random() > 0.1 ? 'HTTP服务连接正常' : 'HTTP服务响应超时'
+    },
+    hardware: {
+      success: Math.random() > 0.25, // 75% 成功率
+      message: Math.random() > 0.25 ? '硬件接口检测正常' : '激光网卡未检测到'
+    },
+    proxy: {
+      success: config?.netProxyEnabled ? Math.random() > 0.4 : true, // 代理启用时60%成功率
+      message: config?.netProxyEnabled 
+        ? (Math.random() > 0.4 ? '代理连接测试通过' : '代理服务器无响应')
+        : '代理已禁用'
+    }
+  }
+  
+  const result = testResults[type] || { success: false, message: '未知测试类型' }
+  
+  return {
+    code: 200,
+    message: '测试完成',
+    data: {
+      type,
+      success: result.success,
+      message: result.message,
+      timestamp: Date.now()
+    }
+  }
+}
+
+export default {
+  getConfig,
+  updateParam,
+  updateConfig,
+  resetConfig,
+  exportConfig,
+  testConnection
+}

src/api/mock/maps.js

@@ -0,0 +1,404 @@
+/**
+ * 地图列表 Mock API
+ */
+
+// 模拟延迟
+const delay = (min = 300, max = 800) => {
+  const time = Math.random() * (max - min) + min
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+// 模拟地图数据
+const mockMaps = [
+  {
+    id: '1',
+    name: '上海办公楼一层',
+    status: 'ok',
+    thumbUrl: 'http://192.168.1.183:9006/test/218/map/GSY-06/shanghai01/tilemap/thumbnail.png',
+    remark: '办公楼主要区域地图，包含接待区、办公区、会议室等',
+    updatedAt: '2024-01-15T10:30:00Z',
+    starred: true,
+    createdBy: '张三',
+    tags: ['办公', '室内'],
+    size: '2.5MB'
+  },
+  {
+    id: '2', 
+    name: '工厂车间A区',
+    status: 'scanning',
+    thumbUrl: '',
+    remark: '生产车间A区域，正在进行地图扫描更新',
+    updatedAt: '2024-01-14T16:20:00Z',
+    starred: false,
+    createdBy: '李四',
+    tags: ['工厂', '车间'],
+    size: '4.1MB'
+  },
+  {
+    id: '3',
+    name: '仓库主区域',
+    status: 'down',
+    thumbUrl: 'http://192.168.1.183:9006/test/216/YF-01/lantu21/tilemap/thumbnail.png',
+    remark: '仓库主要存储区域，当前地图数据异常需要重新构建',
+    updatedAt: '2024-01-13T09:15:00Z',
+    starred: false,
+    createdBy: '王五',
+    tags: ['仓库', '存储'],
+    size: '1.8MB'
+  },
+  {
+    id: '4',
+    name: '研发中心二楼',
+    status: 'ok',
+    thumbUrl: '',
+    remark: '研发中心实验室区域，包含多个实验室和会议室',
+    updatedAt: '2024-01-12T14:45:00Z',
+    starred: true,
+    createdBy: '赵六',
+    tags: ['研发', '实验室'],
+    size: '3.2MB'
+  },
+  {
+    id: '5',
+    name: '停车场地下一层',
+    status: 'ok',
+    thumbUrl: '',
+    remark: '地下停车场区域图，包含车位信息和通道标识',
+    updatedAt: '2024-01-11T11:20:00Z',
+    starred: false,
+    createdBy: '钱七',
+    tags: ['停车场', '地下'],
+    size: '1.5MB'
+  },
+  {
+    id: '6',
+    name: '食堂餐厅区域',
+    status: 'ok',
+    thumbUrl: '',
+    remark: '员工食堂及餐厅区域，包含用餐区和厨房区域',
+    updatedAt: '2024-01-10T08:30:00Z',
+    starred: false,
+    createdBy: '孙八',
+    tags: ['食堂', '餐厅'],
+    size: '2.1MB'
+  },
+  {
+    id: '7',
+    name: '户外园区',
+    status: 'scanning',
+    thumbUrl: '',
+    remark: '公司户外园区，包含步行道、休息区和绿化带',
+    updatedAt: '2024-01-09T15:10:00Z',
+    starred: true,
+    createdBy: '周九',
+    tags: ['户外', '园区'],
+    size: '5.8MB'
+  },
+  {
+    id: '8',
+    name: '会议中心',
+    status: 'ok',
+    thumbUrl: '',
+    remark: '多功能会议中心，包含大型会议厅和小型讨论室',
+    updatedAt: '2024-01-08T13:25:00Z',
+    starred: false,
+    createdBy: '吴十',
+    tags: ['会议', '中心'],
+    size: '2.9MB'
+  }
+]
+
+// 当前数据（模拟数据库）
+let currentMaps = [...mockMaps]
+
+/**
+ * 获取地图列表
+ * @param {Object} params - 查询参数
+ * @param {number} params.page - 页码
+ * @param {number} params.pageSize - 每页数量
+ * @param {string} params.keyword - 搜索关键字
+ * @param {string} params.status - 状态筛选 ('all'|'ok'|'down'|'scanning')
+ * @param {string} params.sort - 排序方式 ('updated'|'name'|'status')
+ * @param {string} params.order - 排序顺序 ('asc'|'desc')
+ */
+export const listMaps = async (params = {}) => {
+  await delay()
+  
+  const {
+    page = 1,
+    pageSize = 12,
+    keyword = '',
+    status = 'all',
+    sort = 'updated',
+    order = 'desc'
+  } = params
+
+  // 模拟错误（5% 概率）
+  if (Math.random() < 0.05) {
+    throw new Error('网络连接异常，请重试')
+  }
+
+  let filteredMaps = [...currentMaps]
+
+  // 关键字搜索
+  if (keyword.trim()) {
+    const searchKey = keyword.toLowerCase().trim()
+    filteredMaps = filteredMaps.filter(map => 
+      map.name.toLowerCase().includes(searchKey) ||
+      (map.remark && map.remark.toLowerCase().includes(searchKey)) ||
+      (map.tags && map.tags.some(tag => tag.toLowerCase().includes(searchKey)))
+    )
+  }
+
+  // 状态筛选
+  if (status !== 'all') {
+    filteredMaps = filteredMaps.filter(map => map.status === status)
+  }
+
+  // 排序
+  filteredMaps.sort((a, b) => {
+    let aVal, bVal
+    
+    switch (sort) {
+      case 'name':
+        aVal = a.name.toLowerCase()
+        bVal = b.name.toLowerCase()
+        break
+      case 'status':
+        // 状态优先级：ok > scanning > down
+        const statusOrder = { ok: 2, scanning: 1, down: 0 }
+        aVal = statusOrder[a.status] || 0
+        bVal = statusOrder[b.status] || 0
+        break
+      case 'updated':
+      default:
+        aVal = new Date(a.updatedAt).getTime()
+        bVal = new Date(b.updatedAt).getTime()
+        break
+    }
+
+    if (order === 'asc') {
+      return aVal > bVal ? 1 : aVal < bVal ? -1 : 0
+    } else {
+      return aVal < bVal ? 1 : aVal > bVal ? -1 : 0
+    }
+  })
+
+  // 分页
+  const total = filteredMaps.length
+  const start = (page - 1) * pageSize
+  const end = start + pageSize
+  const list = filteredMaps.slice(start, end)
+
+  return {
+    code: 200,
+    message: '获取成功',
+    data: {
+      total,
+      list,
+      page,
+      pageSize,
+      totalPages: Math.ceil(total / pageSize)
+    }
+  }
+}
+
+/**
+ * 获取单个地图信息
+ * @param {string} id - 地图ID
+ */
+export const getMap = async (id) => {
+  await delay(200, 400)
+  
+  const map = currentMaps.find(m => m.id === id)
+  if (!map) {
+    throw new Error('地图不存在')
+  }
+
+  return {
+    code: 200,
+    message: '获取成功',
+    data: map
+  }
+}
+
+/**
+ * 创建地图
+ * @param {Object} mapData - 地图数据
+ */
+export const createMap = async (mapData) => {
+  await delay(500, 1000)
+  
+  // 模拟错误
+  if (Math.random() < 0.1) {
+    throw new Error('创建失败，请重试')
+  }
+
+  const newMap = {
+    id: String(Date.now()),
+    name: mapData.name || '新建地图',
+    status: 'scanning',
+    thumbUrl: '',
+    remark: mapData.remark || '',
+    updatedAt: new Date().toISOString(),
+    starred: false,
+    createdBy: '当前用户',
+    tags: mapData.tags || [],
+    size: '0MB'
+  }
+
+  currentMaps.unshift(newMap)
+
+  return {
+    code: 200,
+    message: '创建成功',
+    data: newMap
+  }
+}
+
+/**
+ * 更新地图
+ * @param {string} id - 地图ID
+ * @param {Object} updateData - 更新数据
+ */
+export const updateMap = async (id, updateData) => {
+  await delay(300, 600)
+  
+  const mapIndex = currentMaps.findIndex(m => m.id === id)
+  if (mapIndex === -1) {
+    throw new Error('地图不存在')
+  }
+
+  currentMaps[mapIndex] = {
+    ...currentMaps[mapIndex],
+    ...updateData,
+    updatedAt: new Date().toISOString()
+  }
+
+  return {
+    code: 200,
+    message: '更新成功',
+    data: currentMaps[mapIndex]
+  }
+}
+
+/**
+ * 删除地图
+ * @param {string|string[]} ids - 地图ID或ID数组
+ */
+export const deleteMap = async (ids) => {
+  await delay(400, 700)
+  
+  const idArray = Array.isArray(ids) ? ids : [ids]
+  
+  // 模拟删除失败
+  if (Math.random() < 0.05) {
+    throw new Error('删除失败，请重试')
+  }
+
+  currentMaps = currentMaps.filter(map => !idArray.includes(map.id))
+
+  return {
+    code: 200,
+    message: `成功删除 ${idArray.length} 个地图`,
+    data: { deletedCount: idArray.length }
+  }
+}
+
+/**
+ * 批量发布地图
+ * @param {string[]} ids - 地图ID数组
+ */
+export const publishMaps = async (ids) => {
+  await delay(800, 1200)
+  
+  const updatedMaps = []
+  
+  ids.forEach(id => {
+    const mapIndex = currentMaps.findIndex(m => m.id === id)
+    if (mapIndex !== -1) {
+      currentMaps[mapIndex] = {
+        ...currentMaps[mapIndex],
+        status: 'ok',
+        updatedAt: new Date().toISOString()
+      }
+      updatedMaps.push(currentMaps[mapIndex])
+    }
+  })
+
+  return {
+    code: 200,
+    message: `成功发布 ${updatedMaps.length} 个地图`,
+    data: { publishedMaps: updatedMaps }
+  }
+}
+
+/**
+ * 复制地图
+ * @param {string} id - 原地图ID
+ * @param {string} newName - 新地图名称
+ */
+export const copyMap = async (id, newName) => {
+  await delay(600, 1000)
+  
+  const originalMap = currentMaps.find(m => m.id === id)
+  if (!originalMap) {
+    throw new Error('原地图不存在')
+  }
+
+  const newMap = {
+    ...originalMap,
+    id: String(Date.now()),
+    name: newName || `${originalMap.name}_副本`,
+    status: 'scanning',
+    updatedAt: new Date().toISOString(),
+    starred: false
+  }
+
+  currentMaps.unshift(newMap)
+
+  return {
+    code: 200,
+    message: '复制成功',
+    data: newMap
+  }
+}
+
+/**
+ * 下载地图
+ * @param {string} id - 地图ID
+ * @param {string[]} components - 下载组件类型
+ */
+export const downloadMap = async (id, components = []) => {
+  await delay(1000, 2000)
+  
+  const map = currentMaps.find(m => m.id === id)
+  if (!map) {
+    throw new Error('地图不存在')
+  }
+
+  // 模拟生成下载链接
+  const downloadUrl = `https://example.com/downloads/map_${id}_${Date.now()}.zip`
+
+  return {
+    code: 200,
+    message: '下载链接生成成功',
+    data: {
+      downloadUrl,
+      components,
+      estimatedSize: map.size,
+      expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString()
+    }
+  }
+}
+
+export default {
+  listMaps,
+  getMap,
+  createMap,
+  updateMap,
+  deleteMap,
+  publishMaps,
+  copyMap,
+  downloadMap
+}

src/api/monitor/cache.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+// 查询缓存详细
+export function getCache() {
+  return request({
+    url: '/monitor/cache',
+    method: 'get'
+  })
+}
+
+// 查询缓存名称列表
+export function listCacheName() {
+  return request({
+    url: '/monitor/cache/getNames',
+    method: 'get'
+  })
+}
+
+// 查询缓存键名列表
+export function listCacheKey(cacheName) {
+  return request({
+    url: '/monitor/cache/getKeys/' + cacheName,
+    method: 'get'
+  })
+}
+
+// 查询缓存内容
+export function getCacheValue(cacheName, cacheKey) {
+  return request({
+    url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey,
+    method: 'get'
+  })
+}
+
+// 清理指定名称缓存
+export function clearCacheName(cacheName) {
+  return request({
+    url: '/monitor/cache/clearCacheName/' + cacheName,
+    method: 'delete'
+  })
+}
+
+// 清理指定键名缓存
+export function clearCacheKey(cacheKey) {
+  return request({
+    url: '/monitor/cache/clearCacheKey/' + cacheKey,
+    method: 'delete'
+  })
+}
+
+// 清理全部缓存
+export function clearCacheAll() {
+  return request({
+    url: '/monitor/cache/clearCacheAll',
+    method: 'delete'
+  })
+}

src/api/monitor/job.js

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+
+// 查询定时任务调度列表
+export function listJob(query) {
+  return request({
+    url: '/monitor/job/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询定时任务调度详细
+export function getJob(jobId) {
+  return request({
+    url: '/monitor/job/' + jobId,
+    method: 'get'
+  })
+}
+
+// 新增定时任务调度
+export function addJob(data) {
+  return request({
+    url: '/monitor/job',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改定时任务调度
+export function updateJob(data) {
+  return request({
+    url: '/monitor/job',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除定时任务调度
+export function delJob(jobId) {
+  return request({
+    url: '/monitor/job/' + jobId,
+    method: 'delete'
+  })
+}
+
+// 任务状态修改
+export function changeJobStatus(jobId, status) {
+  const data = {
+    jobId,
+    status
+  }
+  return request({
+    url: '/monitor/job/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+
+// 定时任务立即执行一次
+export function runJob(jobId, jobGroup) {
+  const data = {
+    jobId,
+    jobGroup
+  }
+  return request({
+    url: '/monitor/job/run',
+    method: 'put',
+    data: data
+  })
+}

src/api/monitor/jobLog.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询调度日志列表
+export function listJobLog(query) {
+  return request({
+    url: '/monitor/jobLog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除调度日志
+export function delJobLog(jobLogId) {
+  return request({
+    url: '/monitor/jobLog/' + jobLogId,
+    method: 'delete'
+  })
+}
+
+// 清空调度日志
+export function cleanJobLog() {
+  return request({
+    url: '/monitor/jobLog/clean',
+    method: 'delete'
+  })
+}

src/api/monitor/logininfor.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 查询登录日志列表
+export function list(query) {
+  return request({
+    url: '/monitor/logininfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除登录日志
+export function delLogininfor(infoId) {
+  return request({
+    url: '/monitor/logininfor/' + infoId,
+    method: 'delete'
+  })
+}
+
+// 解锁用户登录状态
+export function unlockLogininfor(userName) {
+  return request({
+    url: '/monitor/logininfor/unlock/' + userName,
+    method: 'get'
+  })
+}
+
+// 清空登录日志
+export function cleanLogininfor() {
+  return request({
+    url: '/monitor/logininfor/clean',
+    method: 'delete'
+  })
+}

src/api/monitor/online.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 查询在线用户列表
+export function list(query) {
+  return request({
+    url: '/monitor/online/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 强退用户
+export function forceLogout(tokenId) {
+  return request({
+    url: '/monitor/online/' + tokenId,
+    method: 'delete'
+  })
+}

src/api/monitor/operlog.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询操作日志列表
+export function list(query) {
+  return request({
+    url: '/monitor/operlog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除操作日志
+export function delOperlog(operId) {
+  return request({
+    url: '/monitor/operlog/' + operId,
+    method: 'delete'
+  })
+}
+
+// 清空操作日志
+export function cleanOperlog() {
+  return request({
+    url: '/monitor/operlog/clean',
+    method: 'delete'
+  })
+}

src/api/monitor/server.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取服务信息
+export function getServer() {
+  return request({
+    url: '/monitor/server',
+    method: 'get'
+  })
+}

src/api/system/config.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询参数列表
+export function listConfig(query) {
+  return request({
+    url: '/system/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询参数详细
+export function getConfig(configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'get'
+  })
+}
+
+// 根据参数键名查询参数值
+export function getConfigKey(configKey) {
+  return request({
+    url: '/system/config/configKey/' + configKey,
+    method: 'get'
+  })
+}
+
+// 新增参数配置
+export function addConfig(data) {
+  return request({
+    url: '/system/config',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改参数配置
+export function updateConfig(data) {
+  return request({
+    url: '/system/config',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除参数配置
+export function delConfig(configId) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'delete'
+  })
+}
+
+// 刷新参数缓存
+export function refreshCache() {
+  return request({
+    url: '/system/config/refreshCache',
+    method: 'delete'
+  })
+}

src/api/system/dept.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询部门列表
+export function listDept(query) {
+  return request({
+    url: '/system/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（排除节点）
+export function listDeptExcludeChild(deptId) {
+  return request({
+    url: '/system/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门详细
+export function getDept(deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'delete'
+  })
+}

src/api/system/dict/data.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询字典数据列表
+export function listData(query) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典数据详细
+export function getData(dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  })
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
+
+// 新增字典数据
+export function addData(data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典数据
+export function updateData(data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典数据
+export function delData(dictCode) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  })
+}

src/api/system/dict/type.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询字典类型列表
+export function listType(query) {
+  return request({
+    url: '/system/dict/type/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询字典类型详细
+export function getType(dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'get'
+  })
+}
+
+// 新增字典类型
+export function addType(data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典类型
+export function updateType(data) {
+  return request({
+    url: '/system/dict/type',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除字典类型
+export function delType(dictId) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'delete'
+  })
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: '/system/dict/type/refreshCache',
+    method: 'delete'
+  })
+}
+
+// 获取字典选择框列表
+export function optionselect() {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get'
+  })
+}

src/api/system/menu.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询菜单列表
+export function listMenu(query) {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询菜单详细
+export function getMenu(menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'get'
+  })
+}
+
+// 查询菜单下拉树结构
+export function treeselect() {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function roleMenuTreeselect(roleId) {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增菜单
+export function addMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateMenu(data) {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delMenu(menuId) {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  })
+}

src/api/system/notice.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询公告列表
+export function listNotice(query) {
+  return request({
+    url: '/system/notice/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询公告详细
+export function getNotice(noticeId) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'get'
+  })
+}
+
+// 新增公告
+export function addNotice(data) {
+  return request({
+    url: '/system/notice',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改公告
+export function updateNotice(data) {
+  return request({
+    url: '/system/notice',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除公告
+export function delNotice(noticeId) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'delete'
+  })
+}

src/api/system/post.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询岗位列表
+export function listPost(query) {
+  return request({
+    url: '/system/post/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询岗位详细
+export function getPost(postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'get'
+  })
+}
+
+// 新增岗位
+export function addPost(data) {
+  return request({
+    url: '/system/post',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改岗位
+export function updatePost(data) {
+  return request({
+    url: '/system/post',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除岗位
+export function delPost(postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'delete'
+  })
+}

src/api/system/role.js

@@ -0,0 +1,119 @@
+import request from '@/utils/request'
+
+// 查询角色列表
+export function listRole(query) {
+  return request({
+    url: '/system/role/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色详细
+export function getRole(roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增角色
+export function addRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改角色
+export function updateRole(data) {
+  return request({
+    url: '/system/role',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色数据权限
+export function dataScope(data) {
+  return request({
+    url: '/system/role/dataScope',
+    method: 'put',
+    data: data
+  })
+}
+
+// 角色状态修改
+export function changeRoleStatus(roleId, status) {
+  const data = {
+    roleId,
+    status
+  }
+  return request({
+    url: '/system/role/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除角色
+export function delRole(roleId) {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'delete'
+  })
+}
+
+// 查询角色已授权用户列表
+export function allocatedUserList(query) {
+  return request({
+    url: '/system/role/authUser/allocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色未授权用户列表
+export function unallocatedUserList(query) {
+  return request({
+    url: '/system/role/authUser/unallocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 取消用户授权角色
+export function authUserCancel(data) {
+  return request({
+    url: '/system/role/authUser/cancel',
+    method: 'put',
+    data: data
+  })
+}
+
+// 批量取消用户授权角色
+export function authUserCancelAll(data) {
+  return request({
+    url: '/system/role/authUser/cancelAll',
+    method: 'put',
+    params: data
+  })
+}
+
+// 授权用户选择
+export function authUserSelectAll(data) {
+  return request({
+    url: '/system/role/authUser/selectAll',
+    method: 'put',
+    params: data
+  })
+}
+
+// 根据角色ID查询部门树结构
+export function deptTreeSelect(roleId) {
+  return request({
+    url: '/system/role/deptTree/' + roleId,
+    method: 'get'
+  })
+}

src/api/system/user.js

@@ -0,0 +1,136 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+
+// 查询用户列表
+export function listUser(query) {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户详细
+export function getUser(userId) {
+  return request({
+    url: '/system/user/' + parseStrEmpty(userId),
+    method: 'get'
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改用户
+export function updateUser(data) {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除用户
+export function delUser(userId) {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  })
+}
+
+// 用户密码重置
+export function resetUserPwd(userId, password) {
+  const data = {
+    userId,
+    password
+  }
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户状态修改
+export function changeUserStatus(userId, status) {
+  const data = {
+    userId,
+    status
+  }
+  return request({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data: data
+  })
+}
+
+// 查询用户个人信息
+export function getUserProfile() {
+  return request({
+    url: '/system/user/profile',
+    method: 'get'
+  })
+}
+
+// 修改用户个人信息
+export function updateUserProfile(data) {
+  return request({
+    url: '/system/user/profile',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户密码重置
+export function updateUserPwd(oldPassword, newPassword) {
+  const data = {
+    oldPassword,
+    newPassword
+  }
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    data: data
+  })
+}
+
+// 用户头像上传
+export function uploadAvatar(data) {
+  return request({
+    url: '/system/user/profile/avatar',
+    method: 'post',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    data: data
+  })
+}
+
+// 查询授权角色
+export function getAuthRole(userId) {
+  return request({
+    url: '/system/user/authRole/' + userId,
+    method: 'get'
+  })
+}
+
+// 保存授权角色
+export function updateAuthRole(data) {
+  return request({
+    url: '/system/user/authRole',
+    method: 'put',
+    params: data
+  })
+}
+
+// 查询部门下拉树结构
+export function deptTreeSelect() {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  })
+}

src/api/tool/gen.js

@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询生成表数据
+export function listTable(query) {
+  return request({
+    url: '/tool/gen/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询db数据库列表
+export function listDbTable(query) {
+  return request({
+    url: '/tool/gen/db/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询表详细信息
+export function getGenTable(tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'get'
+  })
+}
+
+// 修改代码生成信息
+export function updateGenTable(data) {
+  return request({
+    url: '/tool/gen',
+    method: 'put',
+    data: data
+  })
+}
+
+// 导入表
+export function importTable(data) {
+  return request({
+    url: '/tool/gen/importTable',
+    method: 'post',
+    params: data
+  })
+}
+
+// 创建表
+export function createTable(data) {
+  return request({
+    url: '/tool/gen/createTable',
+    method: 'post',
+    params: data
+  })
+}
+
+// 预览生成代码
+export function previewTable(tableId) {
+  return request({
+    url: '/tool/gen/preview/' + tableId,
+    method: 'get'
+  })
+}
+
+// 删除表数据
+export function delTable(tableId) {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'delete'
+  })
+}
+
+// 生成代码（自定义路径）
+export function genCode(tableName) {
+  return request({
+    url: '/tool/gen/genCode/' + tableName,
+    method: 'get'
+  })
+}
+
+// 同步数据库
+export function synchDb(tableName) {
+  return request({
+    url: '/tool/gen/synchDb/' + tableName,
+    method: 'get'
+  })
+}

src/assets/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

src/assets/icons/svg/404.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>

src/assets/icons/svg/bug.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>

src/assets/icons/svg/build.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>

src/assets/icons/svg/chart.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>

src/assets/icons/svg/checkbox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>

src/assets/icons/svg/clipboard.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>

src/assets/icons/svg/code.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" p-id="2423"></path></svg>

src/assets/icons/svg/documentation.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>

src/assets/icons/svg/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569915748289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" fill="#333333" p-id="3063"></path><path d="M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" fill="#333333" p-id="3064"></path></svg>

src/assets/icons/svg/drag.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M73.137 29.08h-9.209 29.7L63.886.093 34.373 29.08h20.49v27.035H27.238v17.948h27.625v27.133h18.274V74.063h27.41V56.115h-27.41V29.08zm-9.245 98.827l27.518-26.711H36.59l27.302 26.71zM.042 64.982l27.196 27.029V38.167L.042 64.982zm100.505-26.815V92.01l27.41-27.029-27.41-26.815z"/></svg>

src/assets/icons/svg/druid.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036347051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 128H192a64.19 64.19 0 0 0-64 64v640a64.19 64.19 0 0 0 64 64h640a64.19 64.19 0 0 0 64-64V192a64.19 64.19 0 0 0-64-64z m0 703.89l-0.11 0.11H192.11l-0.11-0.11V768h640zM832 544H720L605.6 696.54 442.18 435.07 333.25 544H192v-64h114.75l147.07-147.07L610.4 583.46 688 480h144z m0-288H192v-63.89l0.11-0.11h639.78l0.11 0.11z" p-id="5854"></path></svg>

src/assets/icons/svg/edit.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M106.133 67.2a4.797 4.797 0 0 0-4.8 4.8c0 .187.014.36.027.533h-.027V118.4H9.6V26.667h50.133c2.654 0 4.8-2.147 4.8-4.8 0-2.654-2.146-4.8-4.8-4.8H9.6a9.594 9.594 0 0 0-9.6 9.6V118.4c0 5.307 4.293 9.6 9.6 9.6h91.733c5.307 0 9.6-4.293 9.6-9.6V72.533h-.026c.013-.173.026-.346.026-.533 0-2.653-2.146-4.8-4.8-4.8z"/><path d="M125.16 13.373L114.587 2.8c-3.747-3.747-9.854-3.72-13.6.027l-52.96 52.96a4.264 4.264 0 0 0-.907 1.36L33.813 88.533c-.746 1.76-.226 3.534.907 4.68 1.133 1.147 2.92 1.667 4.693.92l31.4-13.293c.507-.213.96-.52 1.36-.907l52.96-52.96c3.747-3.746 3.774-9.853.027-13.6zM66.107 72.4l-18.32 7.76 7.76-18.32L92.72 24.667l10.56 10.56L66.107 72.4zm52.226-52.227l-8.266 8.267-10.56-10.56 8.266-8.267.027-.026 10.56 10.56-.027.026z"/></svg>

src/assets/icons/svg/education.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>

src/assets/icons/svg/email.svg

@@ -0,0 +1 @@
+<svg width="128" height="96" xmlns="http://www.w3.org/2000/svg"><path d="M64.125 56.975L120.188.912A12.476 12.476 0 0 0 115.5 0h-103c-1.588 0-3.113.3-4.513.838l56.138 56.137z"/><path d="M64.125 68.287l-62.3-62.3A12.42 12.42 0 0 0 0 12.5v71C0 90.4 5.6 96 12.5 96h103c6.9 0 12.5-5.6 12.5-12.5v-71a12.47 12.47 0 0 0-1.737-6.35L64.125 68.287z"/></svg>

src/assets/icons/svg/example.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>

src/assets/icons/svg/excel.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.208 16.576v8.384h38.72v5.376h-38.72v8.704h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.512h38.72v5.376h-38.72v11.136H128v-94.72H78.208zM0 114.368L72.128 128V0L0 13.632v100.736z"/><path d="M28.672 82.56h-11.2l14.784-23.488-14.08-22.592h11.52l8.192 14.976 8.448-14.976h11.136l-14.08 22.208L58.368 82.56H46.656l-8.768-15.68z"/></svg>

src/assets/icons/svg/exit-fullscreen.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>

src/assets/icons/svg/eye-open.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

src/assets/icons/svg/eye.svg

@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>