首次提交

2026-01-13 10:06:37 +08:00
commit 71de5323aa
517 changed files with 54169 additions and 0 deletions
--- a/VScode/.browserslistrc
+++ b/VScode/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/VScode/.editorconfig
+++ b/VScode/.editorconfig
@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
--- a/VScode/.env.development
+++ b/VScode/.env.development
@@ -0,0 +1,3 @@
+NODE_ENV=development
+VITE_APP_API=http://152.136.153.72:27005/admin
+# VITE_APP_API=http://10.8.0.3/api/admin
--- a/VScode/.env.production
+++ b/VScode/.env.production
@@ -0,0 +1,2 @@
+NODE_ENV=development
+VITE_APP_API=http://152.136.153.72:27005/admin
--- a/VScode/.eslintrc.js
+++ b/VScode/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    "vue/setup-compiler-macros": true
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier"
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    "no-console": "off",
+    "no-debugger": "off",
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "@typescript-eslint/no-var-requires": 0,
+    "vue/multi-word-component-names": "off"
+  }
+};
--- a/VScode/.gitignore
+++ b/VScode/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/VScode/.prettierrc
+++ b/VScode/.prettierrc
@@ -0,0 +1,22 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    },
+    {
+      "files": "*.vue",
+      "options": {
+        "parser": "vue",
+        "printWidth": 300
+      }
+    }
+  ]
+}
--- a/VScode/README.md
+++ b/VScode/README.md
@@ -0,0 +1,48 @@
+## renren-ui
+- renren-ui是基于Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、Vite等开发，实现 【[renren-security](https://gitee.com/renrenio/renren-security)】 后台管理前端功能，提供一套更优的前端解决方案
+- 前后端分离，通过token进行数据交互，可独立部署
+- 动态菜单，通过菜单管理统一管理访问路由
+- 后端地址：https://gitee.com/renrenio/renren-security
+- 演示地址：http://demo.open.renren.io/renren-security (账号密码：admin/admin)
+
+<br> 
+
+
+## 安装
+
+您需要提前在本地安装[Node.js](https://nodejs.org/en/)，版本号为：[18、20]，再使用[Git](https://git-scm.com/)克隆项目或者直接下载项目后，然后通过`终端命令行`执行以下命令。
+
+```bash
+# 切换到项目根目录
+
+# 安装插件
+npm install
+
+# 启动项目
+npm run dev
+```
+
+> 如网络不稳定，安装时出错或进度过慢！请移步 [cnpm](https://npmmirror.com/) 淘宝镜像进行安装。
+
+启动完成后，会自动打开浏览器访问 [http://localhost:8001](http://localhost:8001)，如您看到下面的页面代表`前端项目`运行成功！因为前后端分离项目，需保证`前端项目`和`后台项目`分别独立正常运行。
+
+请留意下面的页面，其中`验证码`未能正常显示，控制台有`API请求`报错信息！这时需检查`后台项目`是否正常运行。
+
+
+
+## 如何交流、反馈、参与贡献？
+- 开发文档：https://www.renren.io/guide/security
+- 官方社区：https://www.renren.io/community
+- [人人开源](https://www.renren.io)：https://www.renren.io
+- 如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持
+- 技术讨论、二次开发等咨询、问题和建议，请移步到官方社区，我会在第一时间进行解答和回复！
+- 微信扫码并关注【人人开源】，获得项目最新动态及更新提醒<br>
+
+  <br>
+
+## 微信交流群
+我们提供了微信交流群，扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！
+<br><br>
+
+<br>
+<br>
--- a/VScode/babel.config.js
+++ b/VScode/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
--- a/VScode/index.html
+++ b/VScode/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BAITU - 人生何处不青山</title>
+    <script>
+      //全局钩子
+      window.SITE_CONFIG = {
+        //api
+        apiURL: "<%=apiURL%>"
+      };
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
--- a/VScode/package-lock.json
+++ b/VScode/package-lock.json
--- a/VScode/package.json
+++ b/VScode/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "renren-ui",
+  "version": "5.5.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:prod",
+    "build:prod": "vite build --mode production",
+    "serve": "npm run build && vite preview",
+    "lint": "eslint \"src/**/*.{vue,ts}\" --fix"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "2.3.1",
+    "@vueuse/core": "9.1.1",
+    "@wangeditor/editor": "5.1.1",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "1.11.0",
+    "classnames": "^2.3.1",
+    "core-js": "^3.14.0",
+    "echarts": "^5.2.2",
+    "element-plus": "2.10.5",
+    "lodash": "^4.17.21",
+    "mitt": "^2.1.0",
+    "nprogress": "^0.2.0",
+    "pinia": "2.3.1",
+    "qs": "^6.10.1",
+    "vue": "^3.5.18",
+    "vue-echarts": "^6.0.0",
+    "vue-router": "4.2.5"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.172",
+    "@types/nprogress": "^0.2.0",
+    "@types/qs": "^6.9.6",
+    "@types/sortablejs": "^1.10.6",
+    "@vitejs/plugin-vue": "5.1.5",
+    "@vue/compiler-sfc": "^3.5.18",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.13.0",
+    "eslint-plugin-vue": "^8.6.0",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.0",
+    "sass": "^1.50.1",
+    "lint-staged": "^11.0.0",
+    "prettier": "^2.6.2",
+    "typescript": "^5.7.2",
+    "vite": "5.4.19",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-svg-icons": "2.0.1",
+    "vite-tsconfig-paths": "3.4.0",
+    "vue-tsc": "2.1.10"
+  }
+}
--- a/VScode/public/favicon.ico
+++ b/VScode/public/favicon.ico
--- a/VScode/src/App.vue
+++ b/VScode/src/App.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import "@/assets/css/app.less";
+import "@/assets/theme/index.less";
+import "@/assets/theme/mobile.less";
+import FullscreenLayout from "@/layout/fullscreen-layout.vue";
+import Layout from "@/layout/index.vue";
+import { ElConfigProvider } from "element-plus";
+import { defineComponent, onMounted, reactive, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore } from "@/store";
+import app from "./constants/app";
+import { EPageLayoutEnum, EThemeColor, EThemeSetting } from "./constants/enum";
+import { IObject } from "./types/interface";
+import { getThemeConfigCache, setThemeColor, updateTheme } from "./utils/theme";
+
+export default defineComponent({
+  name: "App",
+  components: { Layout, FullscreenLayout, [ElConfigProvider.name]: ElConfigProvider },
+  setup() {
+    const store = useAppStore();
+    const route = useRoute();
+    const state = reactive({
+      layout: location.href.includes("pop=true") ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page
+    });
+    onMounted(() => {
+      //读取主题色缓存
+      const themeCache = getThemeConfigCache();
+      const themeColor = themeCache[EThemeSetting.ThemeColor];
+      setThemeColor(EThemeColor.ThemeColor, themeColor);
+      updateTheme(themeColor);
+    });
+    watch(
+      () => [route.path, route.query, route.fullPath],
+      ([path, query, fullPath]) => {
+        store.updateState({ activeTabName: fullPath });
+        state.layout = app.fullscreenPages.includes(path as string) || (query as IObject)["pop"] ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page;
+      }
+    );
+    return {
+      store,
+      state,
+      pageTag: EPageLayoutEnum.page
+    };
+  }
+});
+</script>
+<template>
+  <el-config-provider>
+    <div v-if="!store.state.appIsRender" v-loading="true" :element-loading-fullscreen="true" :element-loading-lock="true" style="width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 99999; background: #fff"></div>
+    <template v-if="store.state.appIsReady">
+      <layout v-if="state.layout === pageTag"> </layout>
+      <fullscreen-layout v-else></fullscreen-layout>
+    </template>
+  </el-config-provider>
+</template>
--- a/VScode/src/assets/css/app.less
+++ b/VScode/src/assets/css/app.less
@@ -0,0 +1,567 @@
+@import "../theme/base.less";
+
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  color: #595959;
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "微软雅黑", Arial, sans-serif;
+  color: #595959;
+  background: #f0f2f5;
+
+  //字体
+  .text {
+    &-2 {
+      color: #8c8c8c;
+    }
+  }
+  .text-center {
+    text-align: center;
+  }
+
+  a {
+    color: @--color-primary;
+    text-decoration: none;
+    &:focus,
+    &:hover {
+      color: @--color-primary;
+    }
+  }
+}
+
+.iconfont {
+  cursor: pointer;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: text-bottom;
+  display: inline-block;
+  fill: currentColor;
+  width: 17px;
+  height: 17px;
+}
+.icon-svg {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+.el-badge__content {
+  height: 16px;
+  line-height: 16px;
+  padding: 0 5px;
+  border: none;
+  background: #ff4d4f !important;
+}
+
+.ele-badge-static {
+  line-height: 0;
+}
+
+.ele-badge-static .el-badge__content {
+  position: static;
+  transform: none;
+}
+
+//alert
+.ele-alert-border.is-light.el-alert--warning {
+  border: 1px solid #faad144d !important;
+}
+
+.el-alert--warning.is-light {
+  background-color: #fff7e8 !important;
+  color: #faad14 !important;
+}
+.ele-alert-border.is-light .el-alert__title {
+  color: #262626 !important;
+  font-size: 14px !important;
+}
+.el-alert__content {
+  padding: 0;
+}
+//menu
+.el-menu-item a,
+.el-menu-item span,
+.el-sub-menu > .el-sub-menu__title a,
+.el-sub-menu > .el-sub-menu__title span {
+  color: @dark-text;
+  text-decoration: none;
+  margin-left: 5px;
+  display: inline-flex;
+  width: 100%;
+}
+.rr-sidebar-menu.el-menu--horizontal > .el-menu-item {
+  padding: 0 12px;
+  height: 50px;
+  line-height: 50px;
+}
+.rr-sidebar-menu-pop-dark,
+.rr-sidebar-menu-pop-light {
+  box-shadow: none !important;
+  border-width: 0 !important;
+}
+.el-sub-menu__icon-arrow {
+  font-weight: bold;
+}
+
+//pop
+.el-popper.is-dark a {
+  color: #fff;
+  text-decoration: none;
+}
+.el-popover.el-popper {
+  max-height: 300px;
+  overflow: auto;
+}
+
+//表格
+.el-table thead {
+  color: #303133 !important;
+  th {
+    background-color: #f5f7fa !important;
+  }
+}
+.el-table__fixed-right::before {
+  background: transparent !important; //element-plus表格高度动态计算bug，强制下划线不显示颜色
+}
+
+.el-form--inline .el-form-item{
+  margin-right: 16px !important;
+}
+
+//分页
+.el-pagination {
+  margin-top: 15px !important;
+  justify-content: right;
+}
+
+//tinymce
+.tox-tinymce-aux {
+  z-index: 3000 !important;
+}
+
+//弹窗popover
+.popover-pop {
+  padding: 10px 0 5px 5px !important;
+  &-body {
+    max-height: 255px;
+    overflow: auto;
+  }
+}
+
+//弹窗
+.rr-dialog {
+  min-width: 600px;
+}
+
+.rr {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+  &-loading {
+    z-index: 9999;
+  }
+
+  //全屏页面渲染
+  &-fullscreen {
+    width: 100vw;
+
+    &.new-pop-window > div {
+      padding: 15px;
+      margin: 15px;
+      background: #fff;
+      border-radius: 4px;
+    }
+  }
+
+  &-error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+    z-index: 1200;
+  }
+
+  &-drawer {
+    .el-drawer__header {
+      color: #595959;
+      font-size: 15px;
+      margin-bottom: 0;
+      padding: 13px 16px;
+      border-bottom: 1px solid #f4f4f4;
+    }
+    .el-drawer__body {
+      padding: 15px;
+      overflow: auto;
+    }
+  }
+
+  //顶部
+  &-header {
+    background: #fff;
+    padding: 0 !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 200;
+    &-ctx {
+      display: flex;
+      height: 50px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      &-logo {
+        display: flex;
+        color: #ffffffe6;
+        background-color: #191a23;
+        font-size: 19px;
+        font-weight: 500;
+        letter-spacing: 1.5px;
+        width: 230px;
+        height: 50px;
+        overflow: hidden;
+        white-space: nowrap;
+        justify-content: center;
+        font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+          Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+          Noto Color Emoji;
+        align-items: center;
+        position: relative;
+        transition: width 0.3s;
+        padding: 0 15px;
+
+        &-img {
+          width: 32px;
+          height: 32px;
+          display: inline-block;
+          flex-shrink: 0;
+          &-wrap {
+            display: flex;
+            &.enabled-logo {
+              &-false {
+                display: none;
+              }
+            }
+          }
+        }
+        &-line {
+          display: inline-block;
+          width: 10px;
+          height: 1px;
+        }
+        &-text {
+          display: inline-block;
+          line-height: 1;
+          overflow: hidden;
+          text-transform: uppercase;
+          font-weight: 700;
+          font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+            "微软雅黑", Arial, sans-serif;
+        }
+      }
+    }
+  }
+  &-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  //左侧侧边栏
+  &-sidebar {
+    margin-top: 50px;
+    width: 230px !important;
+    min-height: calc(100vh - 50px);
+    overflow-x: hidden !important;
+    transition: width 0.3s;
+    z-index: 120;
+    scrollbar-width: none;
+
+    &-menu {
+      transition: width 0.3s;
+      overflow: hidden;
+      &.el-menu--horizontal {
+        border-bottom: none !important;
+      }
+      .el-menu-item {
+        transition: none !important;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .el-menu {
+      width: 230px !important;
+      border-right: 0 !important;
+      &-item {
+        height: 45px;
+        line-height: 45px;
+        margin: 2px 0;
+      }
+      &-item,
+      .el-sub-menu__title {
+        background: transparent !important;
+        &:focus {
+          background: transparent !important;
+        }
+      }
+      &-item,
+      .el-sub-menu__title,
+      &-item-group__title {
+        font-size: 14px;
+      }
+      .el-sub-menu {
+        .el-sub-menu__title {
+          i {
+            color: inherit !important;
+          }
+        }
+      }
+
+      .el-menu-item,
+      .el-sub-menu .el-sub-menu__title {
+        margin: 0;
+        height: 48px;
+        line-height: 48px;
+      }
+      .el-sub-menu {
+        .el-menu-item {
+          height: 45px;
+          line-height: 45px;
+          margin: 2px 0;
+        }
+      }
+
+      .el-menu-item [class^="el-icon"],
+      .el-sub-menu > .el-sub-menu__title [class^="el-icon"] {
+        font-size: 17px;
+        margin-right: 0;
+        width: auto;
+      }
+
+      .el-menu-item a,
+      .el-menu-item span,
+      .el-sub-menu > .el-sub-menu__title a,
+      .el-sub-menu > .el-sub-menu__title span {
+        margin-left: 10px;
+        > a {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  //页面内容区域外层
+  &-view {
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    padding: 0 !important;
+    border-top: 1px solid #f4f4f4 !important;
+    &-container {
+      margin-top: 50px;
+    }
+    &-wrap {
+      display: flex;
+      flex-direction: column;
+    }
+    &-ctx {
+      margin-top: 39px;
+      padding: 15px !important;
+      flex: 1;
+      //页面内容区域
+      &-card {
+        min-height: calc(100% - 5px);
+        border-width: 0 !important;
+      }
+    }
+    //页面内容顶部tab标签栏
+    &-tab {
+      background: #fff;
+      width: 100%;
+      height: 39px;
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+
+      &__header {
+        &:hover {
+          background: inherit !important;
+        }
+      }
+
+      &-wrap {
+        position: fixed;
+        top: 50px;
+        left: 230px;
+        right: 0;
+        display: flex;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        z-index: 100;
+        transition: left 0.3s;
+      }
+
+      &-ops {
+        width: 40px;
+        flex-shrink: 0;
+        background: #fff;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        border-left: 1px solid #f4f4f4;
+        cursor: pointer;
+        text-align: center;
+        color: #8c8c8c !important;
+        font-weight: 400 !important;
+        font-size: 16px !important;
+        margin-right: 5px; //element-plus el-dropdown自动定位bug bottom-end指令不生效，临时采用偏移5px
+      }
+
+      .el-tabs__active-bar {
+        height: 0;
+      }
+
+      .el-tabs__nav {
+        &-prev,
+        &-next {
+          .el-icon {
+            display: none;
+          }
+        }
+        .el-tabs__item {
+          padding: 0 15px !important;
+          border-right: 1px solid #f4f4f4;
+          user-select: none;
+          color: #8c8c8c;
+          &:hover {
+            color: #262626;
+            background-color: rgba(0, 0, 0, 0.02);
+          }
+          .is-icon-close {
+            transition: none !important;
+            &:hover {
+              color: #fff;
+              background-color: #ff4d4f;
+            }
+          }
+          &::before {
+            content: "";
+            width: 9px;
+            height: 9px;
+            margin-right: 8px;
+            display: inline-block;
+            background-color: #ddd;
+            border-radius: 50%;
+          }
+
+          &.is-active {
+            color: @primary-bg-light;
+            background-color: @primary-bg-light !important;
+            &:before {
+              background-color: @primary-bg-light;
+            }
+          }
+          &:nth-child(2) {
+            &::before {
+              content: none;
+            }
+          }
+        }
+      }
+
+      .el-tabs__nav-wrap {
+        padding: 0px 39px 0 40px !important;
+        &::before,
+        &::after {
+          width: 40px;
+          height: 40px;
+          line-height: 44px;
+          text-align: center;
+          box-sizing: border-box;
+          font-size: 16px;
+          color: #8c8c8c;
+          transition: background-color 0.2s;
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-family: element-icons !important;
+          font-style: normal;
+          font-weight: 400;
+          font-variant: normal;
+          text-transform: none;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          cursor: not-allowed;
+        }
+        &::before {
+          content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path></svg>');
+          border-right: 1px solid #f4f4f4;
+        }
+        &::after {
+          content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" color="rgb(140 140 140)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg>');
+          right: 0;
+          left: auto;
+          bottom: auto;
+          height: auto;
+          background-color: transparent;
+          border-left: 1px solid #f4f4f4;
+        }
+      }
+
+      .el-tabs__nav-next,
+      .el-tabs__nav-prev {
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        box-sizing: border-box;
+        font-size: 16px;
+        color: #8c8c8c;
+        transition: background-color 0.2s;
+        z-index: 10;
+
+        i {
+          vertical-align: middle;
+          margin-top: -4px;
+        }
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.02);
+        }
+      }
+
+      .el-tabs__nav-prev {
+        border-right: 1px solid #f4f4f4;
+      }
+    }
+  }
+}
+.ql-toolbar.ql-snow{
+  width: 100% !important;
+}
+
+.el-form--inline {
+  .el-form-item {
+    & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
+      min-width: 200px;
+    }
+  }
+}
--- a/VScode/src/assets/css/header.less
+++ b/VScode/src/assets/css/header.less
@@ -0,0 +1,101 @@
+.rr-header-ctx {
+  [class^="el-icon"] {
+    font-size: 18px;
+    width: auto;
+    margin-right: 0;
+  }
+  .rr-header-right {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    overflow: hidden;
+    align-items: center;
+    > div {
+      height: 100%;
+    }
+    &-items {
+      display: flex;
+      padding: 0 8px 0 0;
+
+      > div {
+        padding: 0 12px;
+        height: 50px;
+        line-height: 56px;
+        cursor: pointer;
+      }
+      &-icon {
+        height: 50px;
+        line-height: 56px;
+        display: inline-block;
+      }
+      .el-badge {
+        line-height: normal;
+      }
+      .el-dropdown {
+        vertical-align: inherit;
+        .el-icon {
+          .icon {
+            vertical-align: bottom;
+          }
+        }
+      }
+    }
+    &-left {
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      flex: 1;
+      box-sizing: border-box;
+
+      &-br {
+        padding: 0 10px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex: 1;
+        .el-breadcrumb {
+          white-space: nowrap;
+        }
+        .el-breadcrumb__inner,
+        .el-breadcrumb__inner a,
+        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
+        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
+        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
+        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
+          color: #8c8c8c;
+        }
+        .el-breadcrumb__item {
+          float: none !important;
+          display: inline-block;
+        }
+        .el-breadcrumb__inner.is-link {
+          color: #595959;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .el-space__item {
+      &:last-child {
+        flex-shrink: 0;
+      }
+    }
+
+    .rr-sidebar-menu.el-menu--horizontal {
+      display: flex;
+      span {
+        width: inherit;
+      }
+      .el-sub-menu {
+        .el-sub-menu__icon-arrow {
+          margin-left: 3px;
+          margin-top: 0;
+        }
+        .el-sub-menu__title {
+          padding: 0 10px 0 12px;
+          height: 50px;
+          line-height: 50px;
+        }
+      }
+    }
+  }
+}
--- a/VScode/src/assets/css/setting.less
+++ b/VScode/src/assets/css/setting.less
@@ -0,0 +1,161 @@
+.rr-setting {
+  padding: 20px;
+  .el-divider {
+    margin: 20px 0;
+  }
+  &-wrap {
+    .el-drawer__header {
+      color: #595959;
+      font-size: 15px;
+      margin-bottom: 0;
+      padding: 13px 16px;
+      border-bottom: 1px solid #f4f4f4;
+    }
+    .el-drawer__body {
+      overflow: auto;
+      padding: 0;
+    }
+  }
+  &-title {
+    font-size: 13px;
+  }
+  // 主题
+  .rr-theme {
+    .card {
+      width: 50px;
+      height: 35px;
+      border-radius: 3px;
+      margin: 0 20px 20px 0;
+      background-color: #f5f7fa;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      cursor: pointer;
+      //侧边栏
+      &.side {
+        &::before {
+          content: "";
+          width: 15px;
+          height: 100%;
+          background-color: #fff;
+          border-top-left-radius: 3px;
+          border-bottom-left-radius: 3px;
+          display: inline-block;
+          vertical-align: top;
+        }
+        &.dark {
+          &::before {
+            background-color: #2e3549;
+          }
+        }
+      }
+      //顶栏
+      &.header {
+        &::before {
+          content: "";
+          border-top-left-radius: 3px;
+          border-bottom-left-radius: 3px;
+          display: inline-block;
+          vertical-align: top;
+          width: 100%;
+          height: 10px;
+          background-color: #fff;
+          border-bottom-left-radius: 0;
+          border-top-right-radius: 3px;
+        }
+        &.light {
+          &::before {
+            width: 100%;
+            height: 10px;
+            background-color: #fff;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 3px;
+          }
+        }
+        &.dark {
+          &::before {
+            background-color: #2e3549;
+          }
+        }
+        &.primary {
+          &::before {
+            background-color: #409eff;
+          }
+        }
+      }
+
+      &.mix {
+        background-color: #2e3549;
+        &.dark {
+          &::before {
+            background-color: #f0f2f5;
+            width: 35px;
+            height: 25px;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 3px;
+          }
+        }
+      }
+
+      &.side,
+      &.header,
+      &.mix {
+        &.active {
+          &::after {
+            content: "";
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: #19be6b;
+            position: absolute;
+            left: 50%;
+            bottom: -15px;
+            margin-left: -3px;
+          }
+        }
+      }
+    }
+    //主色调
+    .color {
+      width: 20px;
+      height: 20px;
+      margin: 8px 8px 0 0;
+      border-radius: 2px;
+      display: inline-block;
+      box-shadow: 0 1px 3px rgba(0 0 0, 0.1);
+      vertical-align: top;
+      position: relative;
+      cursor: pointer;
+      &.active {
+        &::after {
+          content: url('data:image/svg+xml;charset=utf-8,<svg width="14" height="14" color="rgb(255 255 255)" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z"></path></svg>');
+          font-family: element-icons !important;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          margin: -7px 0 0 -7px;
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .rr-theme,
+  .rr-other {
+    width: 100%;
+    > .el-space__item {
+      width: 100%;
+    }
+  }
+  .rr-switch {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
--- a/VScode/src/assets/icons/iconfont/iconfont.js
+++ b/VScode/src/assets/icons/iconfont/iconfont.js
--- a/VScode/src/assets/icons/svg/button.svg
+++ b/VScode/src/assets/icons/svg/button.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="1641477417057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6229" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 887.466667C303.786667 887.466667 136.533333 720.213333 136.533333 512S303.786667 136.533333 512 136.533333s375.466667 167.253333 375.466667 375.466667-167.253333 375.466667-375.466667 375.466667z m0-716.8C324.266667 170.666667 170.666667 324.266667 170.666667 512s153.6 341.333333 341.333333 341.333333 341.333333-153.6 341.333333-341.333333S699.733333 170.666667 512 170.666667z" fill="" p-id="6230"></path><path d="M512 1024C228.693333 1024 0 795.306667 0 512S228.693333 0 512 0s512 228.693333 512 512-228.693333 512-512 512z m0-989.866667C249.173333 34.133333 34.133333 249.173333 34.133333 512s215.04 477.866667 477.866667 477.866667 477.866667-215.04 477.866667-477.866667S774.826667 34.133333 512 34.133333z" fill="" p-id="6231"></path><path d="M375.466667 409.6m-34.133334 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6232"></path><path d="M648.533333 409.6m-34.133333 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6233"></path><path d="M375.466667 648.533333m-34.133334 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6234"></path><path d="M648.533333 648.533333m-34.133333 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6235"></path></svg>
--- a/VScode/src/assets/icons/svg/cascader.svg
+++ b/VScode/src/assets/icons/svg/cascader.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="1576153230908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="971" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M772.87036133 734.06115723c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714843H475.90991211c-56.60705567 0-102.66723633-46.06018067-102.66723633-102.66723633V600.82446289h305.859375c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012S827.9942627 467.50537109 772.87036133 467.50537109c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714844H373.24267578V401.01062011h321.92687989c55.12390137 0 99.94812012-44.82421875 99.94812011-99.94812011V190.07312011C795.11767578 134.94921875 750.29345703 90.125 695.16955567 90.125H251.12963867C196.0057373 90.125 151.18151855 134.94921875 151.18151855 190.07312011V301.0625c0 55.12390137 44.82421875 99.94812012 99.94812012 99.94812012h55.53588867v296.96044921c0 93.35632325 75.97045898 169.32678223 169.32678224 169.32678223h203.19213866c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012s-44.90661622-99.86572266-100.03051758-99.86572265z m0-199.89624024c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857423s-14.91394043 33.28857422-33.28857422 33.28857421-33.28857422-14.91394043-33.28857422-33.28857421 14.91394043-33.28857422 33.28857422-33.28857422zM217.75866699 301.0625V190.07312011c0-18.37463379 14.91394043-33.28857422 33.28857423-33.28857421h444.03991698c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857422V301.0625c0 18.37463379-14.91394043 33.28857422-33.28857422 33.28857422H251.12963867c-18.37463379 0-33.37097168-14.91394043-33.37097168-33.28857422z m555.11169434 566.23535156c-18.37463379 0-33.28857422-14.91394043-33.28857422-33.28857422 0-18.37463379 14.91394043-33.28857422 33.28857422-33.28857422s33.28857422 14.91394043 33.28857422 33.28857422c0.08239747 18.29223633-14.91394043 33.28857422-33.28857422 33.28857422z" p-id="972"></path></svg>
--- a/VScode/src/assets/icons/svg/checkbox.svg
+++ b/VScode/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>
--- a/VScode/src/assets/icons/svg/color.svg
+++ b/VScode/src/assets/icons/svg/color.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="1577252187056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M747.59340925 691.12859384c11.51396329 0.25305413 22.43746719-0.21087818 40.74171707-1.51832482 29.35428085-2.10878421 35.84933734-2.36183835 46.47761114-0.8856895 24.71495444 3.37405491 41.12129828 21.76265671 32.47528161 47.95376084-85.57447632 258.19957947-442.00123984 249.76444099-628.67084683 50.73735554-153.47733892-159.33976008-153.09775772-414.41833795 0.92786545-573.42069196 159.71934128-162.67163983 424.03439521-166.59397897 565.78689185 0.63263534 80.38686649 94.81095318 108.34934958 169.16669549 89.11723508 230.57450162-15.01454608 47.99593598-50.61082928 77.68762207-119.77896259 114.63352789-4.89237973 2.65706845-29.35428085 15.52065436-35.84933652 19.02123633-46.94154346 25.30541465-63.51659033 41.20565021-62.20914449 58.45550757 2.95229856 39.13904114 24.16667102 52.7196135 70.98168823 53.81618115z m44.41100207 50.10472101c-19.82257471 1.43397372-32.05352527 1.940082-45.63409763 1.6448519-70.34905207-1.60267593-115.98314969-30.91478165-121.38163769-101.64341492-3.45840683-46.05585397 24.7571304-73.13264758 89.24376132-107.96976837 6.7902866-3.66928501 31.37871396-16.57504688 36.06021551-19.06341229 57.69634516-30.83042972 85.15271997-53.73183005 94.76877722-84.47790866 12.77923398-40.78389304-9.10994898-98.94417051-79.24812286-181.6507002-121.17075953-142.97559219-350.14258521-139.60153647-489.2380134 2.06660824-134.49827774 138.84237405-134.79350784 362.12048163-0.42175717 501.637667 158.53842169 168.99799328 451.9968783 181.18676788 534.57688175-11.80919339-4.68150156 0.2952301-10.71262573 0.67481131-18.72600705 1.26527069z" p-id="2509"></path><path d="M346.03865637 637.18588562a78.82636652 78.82636652 0 0 0 78.32025825-79.29029883c0-43.69401562-35.005823-79.29029883-78.32025825-79.29029882a78.82636652 78.82636652 0 0 0-78.36243338 79.29029882c0 43.69401562 35.005823 79.29029883 78.36243338 79.29029883z m0-51.7495729a27.07679361 27.07679361 0 0 1-26.5706845-27.54072593c0-15.30977536 11.97789643-27.54072593 26.5706845-27.54072592 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072592a27.07679361 27.07679361 0 0 1-26.57068533 27.54072593zM475.7289063 807.11174353a78.82636652 78.82636652 0 0 0 78.3624334-79.29029882c0-43.69401562-34.96364785-79.29029883-78.32025825-79.29029883a78.82636652 78.82636652 0 0 0-78.32025742 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029882z m0-51.74957208a27.07679361 27.07679361 0 0 1-26.57068532-27.54072674c0-15.30977536 12.06224753-27.54072593 26.57068532-27.54072593 14.59278892 0 26.57068533 12.23095057 26.57068453 27.54072593a27.07679361 27.07679361 0 0 1-26.57068453 27.54072674zM601.24376214 377.21492718a78.82636652 78.82636652 0 0 0 78.32025742-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025742-79.29029882a78.82636652 78.82636652 0 0 0-78.32025823 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025824 79.29029883z m1e-8-51.74957208a27.07679361 27.07679361 0 0 1-26.57068534-27.54072675c0-15.30977536 11.97789643-27.54072593 26.57068534-27.54072591 14.55061295 0 26.57068533 12.23095057 26.57068451 27.54072592a27.07679361 27.07679361 0 0 1-26.57068451 27.54072674zM378.80916809 433.85687983a78.82636652 78.82636652 0 0 0 78.32025824-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025824-79.29029802a78.82636652 78.82636652 0 0 0-78.32025742 79.29029802c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029883z m0-51.74957209a27.07679361 27.07679361 0 0 1-26.57068451-27.54072674c0-15.30977536 11.97789643-27.54072593 26.57068451-27.54072593 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072593a27.07679361 27.07679361 0 0 1-26.57068533 27.54072674z" p-id="2510"></path></svg>
--- a/VScode/src/assets/icons/svg/component.svg
+++ b/VScode/src/assets/icons/svg/component.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="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>
--- a/VScode/src/assets/icons/svg/date-range.svg
+++ b/VScode/src/assets/icons/svg/date-range.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="1579774833889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1376" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M887.466667 192.853333h-100.693334V119.466667c0-10.24-6.826667-17.066667-17.066666-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H303.786667V119.466667c0-10.24-6.826667-17.066667-17.066667-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H168.96c-46.08 0-85.333333 37.546667-85.333333 85.333334V836.266667c0 46.08 37.546667 85.333333 85.333333 85.333333H887.466667c46.08 0 85.333333-37.546667 85.333333-85.333333V278.186667c0-47.786667-37.546667-85.333333-85.333333-85.333334z m-718.506667 34.133334h100.693333v66.56c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56h450.56v66.56c0 10.24 6.826667 17.066667 17.066666 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56H887.466667c27.306667 0 51.2 22.186667 51.2 51.2v88.746666H117.76v-88.746666c0-29.013333 22.186667-51.2 51.2-51.2zM887.466667 887.466667H168.96c-27.306667 0-51.2-22.186667-51.2-51.2V401.066667H938.666667V836.266667c0 27.306667-22.186667 51.2-51.2 51.2z" p-id="1377"></path><path d="M858.453333 493.226667H327.68c-10.24 0-17.066667 6.826667-17.066667 17.066666v114.346667h-116.053333c-10.24 0-17.066667 6.826667-17.066667 17.066667v133.12c0 10.24 6.826667 17.066667 17.066667 17.066666H460.8c10.24 0 17.066667-6.826667 17.066667-17.066666v-114.346667h380.586666c10.24 0 17.066667-6.826667 17.066667-17.066667v-133.12c0-10.24-6.826667-17.066667-17.066667-17.066666z m-413.013333 34.133333v97.28h-98.986667v-97.28h98.986667z m-230.4 131.413333h98.986667v98.986667h-98.986667v-98.986667z m131.413333 97.28v-97.28h98.986667v97.28h-98.986667z m133.12-228.693333h97.28v98.986667h-97.28v-98.986667z m131.413334 0h98.986666v98.986667h-98.986666v-98.986667z m230.4 97.28h-98.986667v-98.986667h98.986667v98.986667z" p-id="1378"></path></svg>
--- a/VScode/src/assets/icons/svg/date.svg
+++ b/VScode/src/assets/icons/svg/date.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="1577186573535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1068" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M479.85714249 608.42857168h64.28571502c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285751s-12.85714249-32.14285751-32.14285664-32.14285664h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285662s12.85714249 32.14285751 32.14285664 32.14285753z m-2e-8 122.14285665h64.28571504c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285665s-12.85714249-32.14285751-32.14285664-32.14285751h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285751s12.85714249 32.14285751 32.14285664 32.14285664z m353.57142921-559.28571416h-128.57142921v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285664-32.14285753s-32.14285751 12.85714249-32.14285751 32.14285753v32.14285664h-257.14285665v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285752-32.14285753s-32.14285751 12.85714249-32.14285664 32.14285753v32.14285664h-128.57142919c-70.71428585 0-128.57142832 57.85714249-128.57142832 122.14285751v501.42857081c0 70.71428585 57.85714249 128.57142832 128.57142832 122.14285751h642.85714335c70.71428585 0 128.57142832-57.85714249 128.57142833-122.14285751v-501.42857081c0-70.71428585-57.85714249-122.14285753-128.57142833-122.14285751z m64.28571415 623.57142832c0 32.14285751-32.14285751 64.28571415-64.28571416 64.28571504h-642.85714335c-32.14285751 0-64.28571415-25.71428583-64.28571417-64.28571504v-372.85714249h771.42857168v372.85714249z m0-437.14285664h-771.42857168v-64.28571417c0-32.14285751 32.14285751-64.28571415 64.28571417-64.28571415h128.57142919v32.14285664c0 19.28571417 12.85714249 32.14285751 32.14285664 32.14285751s32.14285751-12.85714249 32.14285753-32.14285751v-32.14285664h257.14285665v32.14285664c0 19.28571417 12.85714249 32.14285751 32.1428575 32.14285751s32.14285751-12.85714249 32.14285664-32.14285751v-32.14285664h128.57142921c32.14285751 0 64.28571415 25.71428583 64.28571415 64.28571415v64.28571417z m-610.71428583 372.85714247h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285664s-12.85714249-32.14285751-32.14285753-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285751s12.85714249 32.14285751 32.14285751 32.14285665z m385.71428583-122.14285664h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285751s-12.85714249-32.14285751-32.14285751-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285664s12.85714249 32.14285751 32.14285753 32.14285751z m-385.71428583 0h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285751s-12.85714249-32.14285751-32.14285753-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285664s12.85714249 32.14285751 32.14285751 32.14285751z m385.71428583 122.14285665h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285665s-12.85714249-32.14285751-32.14285751-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285751s12.85714249 32.14285751 32.14285753 32.14285665z" p-id="1069"></path></svg>
--- a/VScode/src/assets/icons/svg/earth.svg
+++ b/VScode/src/assets/icons/svg/earth.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="1622124729495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="653" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M854.4 800.9c0.2-0.3 0.5-0.6 0.7-0.9C920.6 722.1 960 621.7 960 512s-39.4-210.1-104.8-288c-0.2-0.3-0.5-0.5-0.7-0.8-1.1-1.3-2.1-2.5-3.2-3.7-0.4-0.5-0.8-0.9-1.2-1.4-1.4-1.6-2.7-3.1-4.1-4.7l-0.1-0.1c-1.5-1.7-3.1-3.4-4.6-5.1l-0.1-0.1c-3.2-3.4-6.4-6.8-9.7-10.1l-0.1-0.1-4.8-4.8-0.3-0.3c-1.5-1.5-3-2.9-4.5-4.3-0.5-0.5-1-1-1.6-1.5-1-1-2-1.9-3-2.8-0.3-0.3-0.7-0.6-1-1C736.4 109.2 629.5 64 512 64s-224.4 45.2-304.3 119.2c-0.3 0.3-0.7 0.6-1 1-1 0.9-2 1.9-3 2.9-0.5 0.5-1 1-1.6 1.5-1.5 1.4-3 2.9-4.5 4.3l-0.3 0.3-4.8 4.8-0.1 0.1c-3.3 3.3-6.5 6.7-9.7 10.1l-0.1 0.1c-1.6 1.7-3.1 3.4-4.6 5.1l-0.1 0.1c-1.4 1.5-2.8 3.1-4.1 4.7-0.4 0.5-0.8 0.9-1.2 1.4-1.1 1.2-2.1 2.5-3.2 3.7-0.2 0.3-0.5 0.5-0.7 0.8C103.4 301.9 64 402.3 64 512s39.4 210.1 104.8 288c0.2 0.3 0.5 0.6 0.7 0.9 1 1.2 2.1 2.5 3.1 3.7 0.4 0.5 0.8 0.9 1.2 1.4 1.4 1.6 2.7 3.1 4.1 4.7 0 0.1 0.1 0.1 0.1 0.2 1.5 1.7 3 3.4 4.6 5l0.1 0.1c3.2 3.4 6.4 6.8 9.6 10.1l0.1 0.1c1.6 1.6 3.1 3.2 4.7 4.7l0.3 0.3c3.3 3.3 6.7 6.5 10.1 9.6 80.1 74 187 119.2 304.5 119.2s224.4-45.2 304.3-119.2c3.4-3.1 6.7-6.3 10-9.6l0.3-0.3c1.6-1.6 3.2-3.1 4.7-4.7l0.1-0.1c3.3-3.3 6.5-6.7 9.6-10.1l0.1-0.1c1.5-1.7 3.1-3.3 4.6-5 0-0.1 0.1-0.1 0.1-0.2 1.4-1.5 2.8-3.1 4.1-4.7 0.4-0.5 0.8-0.9 1.2-1.4 1.2-1.3 2.3-2.5 3.3-3.7z m4.1-142.6c-13.8 32.6-32 62.8-54.2 90.2-24.9-21.5-52.2-40.3-81.5-55.9 11.6-46.9 18.8-98.4 20.7-152.6H887c-3 40.9-12.6 80.6-28.5 118.3zM887 484H743.5c-1.9-54.2-9.1-105.7-20.7-152.6 29.3-15.6 56.6-34.4 81.5-55.9 22.2 27.4 40.4 57.6 54.2 90.2C874.4 403.4 884 443.1 887 484zM658.3 165.5c39.7 16.8 75.8 40 107.6 69.2-18.5 15.8-38.4 29.7-59.4 41.8-15.7-45-35.8-84.1-59.2-115.4 3.7 1.4 7.4 2.9 11 4.4z m-90.6 700.6c-9.2 7.2-18.4 12.7-27.7 16.4V697c39.9 2.8 78.6 11.6 115.7 26.2-8.3 24.6-17.9 47.3-29 67.8-17.4 32.4-37.8 58.3-59 75.1z m59-633.1c11 20.6 20.7 43.3 29 67.8-37.1 14.6-75.8 23.4-115.7 26.2V141.6c9.2 3.7 18.5 9.1 27.7 16.4 21.2 16.7 41.6 42.6 59 75zM540 640.9V540h147.5c-1.6 44.2-7.1 87.1-16.3 127.8l-0.3 1.2c-41.1-15.6-85.1-25.3-130.9-28.1z m0-156.9V383.1c45.8-2.8 89.8-12.5 130.9-28.1l0.3 1.2c9.2 40.7 14.7 83.5 16.3 127.8H540z m-56 56v100.9c-45.8 2.8-89.8 12.5-130.9 28.1l-0.3-1.2c-9.2-40.7-14.7-83.5-16.3-127.8H484z m-147.5-56c1.6-44.2 7.1-87.1 16.3-127.8l0.3-1.2c41.1 15.6 85 25.3 130.9 28.1V484H336.5zM484 697v185.4c-9.2-3.7-18.5-9.1-27.7-16.4-21.2-16.7-41.7-42.7-59.1-75.1-11-20.6-20.7-43.3-29-67.8 37.2-14.6 75.9-23.3 115.8-26.1z m0-370c-39.9-2.8-78.6-11.6-115.7-26.2 8.3-24.6 17.9-47.3 29-67.8 17.4-32.4 37.8-58.4 59.1-75.1 9.2-7.2 18.4-12.7 27.7-16.4V327zM365.7 165.5c3.7-1.5 7.3-3 11-4.4-23.4 31.3-43.5 70.4-59.2 115.4-21-12-40.9-26-59.4-41.8 31.8-29.2 67.9-52.4 107.6-69.2zM165.5 365.7c13.8-32.6 32-62.8 54.2-90.2 24.9 21.5 52.2 40.3 81.5 55.9-11.6 46.9-18.8 98.4-20.7 152.6H137c3-40.9 12.6-80.6 28.5-118.3zM137 540h143.5c1.9 54.2 9.1 105.7 20.7 152.6-29.3 15.6-56.6 34.4-81.5 55.9-22.2-27.4-40.4-57.6-54.2-90.2C149.6 620.6 140 580.9 137 540z m228.7 318.5c-39.7-16.8-75.8-40-107.6-69.2 18.5-15.8 38.4-29.7 59.4-41.8 15.7 45 35.8 84.1 59.2 115.4-3.7-1.4-7.4-2.9-11-4.4z m292.6 0c-3.7 1.5-7.3 3-11 4.4 23.4-31.3 43.5-70.4 59.2-115.4 21 12 40.9 26 59.4 41.8-31.8 29.2-67.9 52.4-107.6 69.2z" p-id="654"></path></svg>
--- a/VScode/src/assets/icons/svg/extfullscreen.svg
+++ b/VScode/src/assets/icons/svg/extfullscreen.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="1622128472748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1971" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M128 128h256v64H192v192H128V128zM896 640v256h-256v-64h192v-192h64zM384 686.496L174.496 896 128 849.504 337.504 640H192v-64h256v256h-64v-145.504zM849.504 128L640 337.504V192h-64v256h256v-64h-145.504L896 174.496 849.504 128z" p-id="1972"></path></svg>
--- a/VScode/src/assets/icons/svg/fanyiline.svg
+++ b/VScode/src/assets/icons/svg/fanyiline.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="1622128325471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1563" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M608 416h288c35.36 0 64 28.48 64 64v416c0 35.36-28.48 64-64 64H480c-35.36 0-64-28.48-64-64v-288H128c-35.36 0-64-28.48-64-64V128c0-35.36 28.48-64 64-64h416c35.36 0 64 28.48 64 64v288z m0 64v64c0 35.36-28.48 64-64 64h-64v256.032c0 17.664 14.304 31.968 31.968 31.968H864a31.968 31.968 0 0 0 31.968-31.968V512a31.968 31.968 0 0 0-31.968-31.968H608zM128 159.968V512c0 17.664 14.304 31.968 31.968 31.968H512a31.968 31.968 0 0 0 31.968-31.968V160A31.968 31.968 0 0 0 512.032 128H160A31.968 31.968 0 0 0 128 159.968z m64 244.288V243.36h112.736V176h46.752c6.4 0.928 9.632 1.824 9.632 2.752a10.56 10.56 0 0 1-1.376 4.128c-2.752 7.328-4.128 16.032-4.128 26.112v34.368h119.648v156.768h-50.88v-20.64h-68.768v118.272H306.112v-118.272H238.752v24.768H192z m46.72-122.368v60.48h67.392V281.92H238.752z m185.664 60.48V281.92h-68.768v60.48h68.768z m203.84 488H576L668.128 576h64.64l89.344 254.4h-54.976l-19.264-53.664h-100.384l-19.232 53.632z m33.024-96.256h72.864l-34.368-108.608h-1.376l-37.12 108.608zM896 320h-64a128 128 0 0 0-128-128V128a192 192 0 0 1 192 192zM128 704h64a128 128 0 0 0 128 128v64a192 192 0 0 1-192-192z" p-id="1564"></path></svg>
--- a/VScode/src/assets/icons/svg/fullscreen2.svg
+++ b/VScode/src/assets/icons/svg/fullscreen2.svg
--- a/VScode/src/assets/icons/svg/gitee.svg
+++ b/VScode/src/assets/icons/svg/gitee.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="1695003505593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4091" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" p-id="4092"></path></svg>
--- a/VScode/src/assets/icons/svg/indent.svg
+++ b/VScode/src/assets/icons/svg/indent.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="1622128506901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2107" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM400 646c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zM904 160H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 792H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519c4.5-3.5 4.5-10.3 0-13.9L142.4 381.9c-5.8-4.6-14.4-0.5-14.4 6.9v246.3c0 7.4 8.5 11.6 14.4 7z" p-id="2108"></path></svg>
--- a/VScode/src/assets/icons/svg/input.svg
+++ b/VScode/src/assets/icons/svg/input.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="1575802859706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3102" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 224H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z" p-id="3103"></path><path d="M224 352c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V384c0-16-12.8-32-32-32z" p-id="3104"></path></svg>
--- a/VScode/src/assets/icons/svg/morevertical.svg
+++ b/VScode/src/assets/icons/svg/morevertical.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="1622128442421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1835" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M426.666667 512a85.333333 85.333333 0 1 1 170.709333 0.042667A85.333333 85.333333 0 0 1 426.666667 512z m0 298.666667a85.333333 85.333333 0 1 1 170.709333 0.042666A85.333333 85.333333 0 0 1 426.666667 810.666667z m0-597.333334a85.333333 85.333333 0 1 1 170.709333 0.042667A85.333333 85.333333 0 0 1 426.666667 213.333333z" p-id="1836"></path></svg>
--- a/VScode/src/assets/icons/svg/number.svg
+++ b/VScode/src/assets/icons/svg/number.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="1575802851180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2867" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.272727 791.272727h512a46.545455 46.545455 0 0 1 0 93.090909H279.272727a46.545455 46.545455 0 0 1 0-93.090909z m33.838546-617.984V651.636364H193.722182V395.170909c0-37.003636-0.884364-59.298909-2.653091-66.746182a24.948364 24.948364 0 0 0-14.615273-16.989091c-8.005818-3.863273-25.786182-5.771636-53.341091-5.771636h-11.822545v-55.854545c57.716364-12.381091 101.562182-37.888 131.490909-76.520728h70.283636z m303.709091 396.8V651.636364H354.164364v-68.235637c77.777455-127.255273 124.043636-206.010182 138.705454-236.218182 14.661818-30.254545 22.016-53.853091 22.016-70.74909 0-13.032727-2.234182-22.714182-6.656-29.137455-4.421818-6.376727-11.170909-9.588364-20.247273-9.588364a22.248727 22.248727 0 0 0-20.200727 10.612364c-4.468364 7.121455-6.656 21.178182-6.656 42.263273v45.521454H354.164364v-17.454545c0-26.763636 1.396364-47.941818 4.142545-63.348364 2.746182-15.499636 9.541818-30.72 20.386909-45.661091 10.798545-14.987636 24.901818-26.298182 42.216727-33.978182 17.361455-7.68 38.167273-11.543273 62.37091-11.543272 47.476364 0 83.316364 11.776 107.706181 35.328 24.296727 23.552 36.445091 53.341091 36.445091 89.367272 0 27.368727-6.842182 56.32-20.48 86.853819-13.730909 30.533818-54.039273 95.325091-121.018182 194.420363h130.885819z m270.615272-189.393454c18.152727 6.097455 31.650909 16.104727 40.494546 29.975272 8.843636 13.917091 13.312 46.452364 13.312 97.652364 0 38.027636-4.328727 67.490909-13.032727 88.529455-8.657455 20.945455-23.598545 36.910545-44.869819 47.848727-21.271273 10.938182-48.593455 16.384-81.873454 16.384-37.794909 0-67.490909-6.330182-89.088-19.083636-21.550545-12.660364-35.746909-28.253091-42.542546-46.638546-6.795636-18.432-10.193455-50.362182-10.193454-95.883636v-37.841455h119.389091v77.730909c0 20.666182 1.210182 33.838545 3.723636 39.424 2.420364 5.585455 7.912727 8.424727 16.337455 8.424728 9.309091 0 15.36-3.537455 18.338909-10.612364 2.932364-7.121455 4.421818-25.6 4.421818-55.575273v-33.047273c0-18.338909-2.048-31.744-6.190546-40.215272a30.72 30.72 0 0 0-18.338909-16.709818c-8.052364-2.653091-23.738182-4.189091-46.964363-4.561455V357.050182c28.392727 0 45.893818-1.070545 52.596363-3.258182a22.946909 22.946909 0 0 0 14.475637-14.149818c2.932364-7.307636 4.421818-18.711273 4.421818-34.257455v-26.624c0-16.756364-1.722182-27.741091-5.12-33.047272-3.490909-5.352727-8.843636-8.005818-16.151273-8.005819-8.285091 0-13.963636 2.792727-16.989091 8.378182-3.025455 5.632-4.561455 17.640727-4.561454 35.933091v39.284364h-119.389091v-40.773818c0-45.661091 10.472727-76.567273 31.325091-92.625455 20.898909-16.058182 54.085818-24.064 99.607272-24.064 56.878545 0 95.511273 11.170909 115.805091 33.373091 20.293818 22.248727 30.394182 53.201455 30.394182 92.765091 0 26.810182-3.630545 46.173091-10.891636 58.088727-7.307636 11.915636-20.107636 22.807273-38.446546 32.628364z" p-id="2868"></path></svg>
--- a/VScode/src/assets/icons/svg/outdent.svg
+++ b/VScode/src/assets/icons/svg/outdent.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="1622128519822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2243" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM400 646c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zM904 160H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM904 792H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4 0.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1c-4.5 3.5-4.5 10.3 0 13.8z" p-id="2244"></path></svg>
--- a/VScode/src/assets/icons/svg/password.svg
+++ b/VScode/src/assets/icons/svg/password.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="1575802846045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751"></path></svg>
--- a/VScode/src/assets/icons/svg/radio.svg
+++ b/VScode/src/assets/icons/svg/radio.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="1575966775973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="879" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M507.39346659 71.84873358c241.53533667 0 437.39770766 195.85422109 437.39770767 437.37442191 0 241.53766571-195.86237099 437.38955776-437.39770767 437.38955776-241.50040803 0-437.34997219-195.85189205-437.34997219-437.38955776C70.0434944 267.70295467 265.89189347 71.84873358 507.39346659 71.84873358L507.39346659 71.84873358zM507.39346659 282.81899805c-125.00686734 0-226.37039389 101.38914133-226.37039388 226.41813048 0 125.01268821 101.36352768 226.39717262 226.37039388 226.39717262 125.04295993 0 226.42395136-101.38448441 226.42395136-226.39717262C733.81625401 384.20813938 632.43642653 282.81899805 507.39346659 282.81899805L507.39346659 282.81899805zM507.39346659 120.78172615c-214.46664192 0-388.42047261 173.95150279-388.4204726 388.44026539 0 214.51204949 173.95499463 388.46122325 388.4204726 388.46122325 214.52369237 0 388.46005817-173.94800981 388.46005818-388.46122325C895.85236082 294.73322894 721.91715897 120.78172615 507.39346659 120.78172615z" p-id="880"></path></svg>
--- a/VScode/src/assets/icons/svg/rate.svg
+++ b/VScode/src/assets/icons/svg/rate.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="1577246781606" class="icon" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1098" xmlns:xlink="http://www.w3.org/1999/xlink" width="84.5595703125" height="81"><defs><style type="text/css"></style></defs><path d="M633.72929961 378.02038203l9.49872568 18.68789795 20.78025469 2.79745225 206.61592412 27.33248408a11.46496817 11.46496817 0 0 1 6.6095543 19.47324902l-147.2675168 147.35350284-14.89299345 14.89299345 3.8006376 20.68280244 37.84585956 204.89044571a11.46496817 11.46496817 0 0 1-16.4808914 12.2961788L554.68980898 751.84713388l-18.68789794-9.49299345-18.48726123 9.99171915-183.23885392 99.34968163a11.46496817 11.46496817 0 0 1-16.78471347-11.8662416l32.5433127-205.79617881 3.29617793-20.78598692-15.19108243-14.49172002-151.03375839-143.48407587a11.46496817 11.46496817 0 0 1 6.09936328-19.63949062l205.79617881-32.63503185 20.78598691-3.2961788L428.87898125 380.72038203 518.59235674 192.64331182a11.46496817 11.46496817 0 0 1 20.56815264-0.26369385l94.56879023 185.63503183zM496.64840732 85.52038203l-121.75796162 254.98089229L95.76433145 384.76178369A34.3949045 34.3949045 0 0 0 77.46050938 443.66879023l204.87324901 194.66369385-44.16879023 279.1146498a34.3949045 34.3949045 0 0 0 50.36560489 35.61592325l248.4-134.67898038 251.84522285 128.27579591a34.3949045 34.3949045 0 0 0 49.43694287-36.89426777l-51.30573223-277.85350284 199.73120977-199.90891758a34.3949045 34.3949045 0 0 0-19.82866201-58.40827998l-280.11783428-37.03184736L558.32993633 84.71210205a34.3949045 34.3949045 0 0 0-61.68152901 0.80254775z" p-id="1099"></path></svg>
--- a/VScode/src/assets/icons/svg/rich-text.svg
+++ b/VScode/src/assets/icons/svg/rich-text.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="1588552949749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1802" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M834.2654461 933.87476599H189.7345539A99.37494442 99.37494442 0 0 1 90.12523401 834.2654461V189.7345539A99.37494442 99.37494442 0 0 1 189.7345539 90.12523401h644.53089221A99.37494442 99.37494442 0 0 1 933.87476599 189.7345539v644.53089221A99.37494442 99.37494442 0 0 1 834.2654461 933.87476599zM189.7345539 140.04708127a49.68747262 49.68747262 0 0 0-49.68747263 49.68747263v644.53089221a49.68747262 49.68747262 0 0 0 49.68747262 49.68747262h644.53089221a49.68747262 49.68747262 0 0 0 49.68747263-49.68747262V189.7345539a49.68747262 49.68747262 0 0 0-49.68747263-49.68747263z" p-id="1803"></path><path d="M561.68747262 239.18765188h247.73423676a23.43748728 23.43748728 0 0 1 24.84373673 24.84373591 23.43748728 23.43748728 0 0 1-24.84373673 24.84373589H561.68747262a23.43748728 23.43748728 0 0 1-24.84373672-24.84373589 23.43748728 23.43748728 0 0 1 24.84373672-24.84373591z m0 123.9843057h247.73423676a24.84373591 24.84373591 0 0 1 0 49.68747262H561.68747262a24.84373591 24.84373591 0 1 1 0-49.68747262z m0 123.98430652h247.73423676a24.84373591 24.84373591 0 0 1 0 49.68747181H561.68747262a24.84373591 24.84373591 0 0 1 0-49.68747181zM214.57829062 611.1405698h594.84341876a24.84373591 24.84373591 0 0 1 0 49.68747263H214.57829062a24.84373591 24.84373591 0 0 1 0-49.68747263z m0 123.98430652h594.84341876a24.84373591 24.84373591 0 0 1 0 49.6874718H214.57829062a24.84373591 24.84373591 0 1 1 0-49.6874718z m52.03122061-280.07797001h133.82805103l32.10935696 81.79682959h46.87497372l-123.51555642-297.65608402H311.14073697l-121.40618308 297.65608403h46.87497373z m61.87496594-156.32803812a171.56240497 171.56240497 0 0 0 4.92187226-19.68748901 72.18745972 72.18745972 0 0 1 5.15624688 19.68748901l49.45309717 123.98430652H279.03137918z" p-id="1804"></path></svg>
--- a/VScode/src/assets/icons/svg/row.svg
+++ b/VScode/src/assets/icons/svg/row.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="1579339929870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M152 854.856875h325.7146875V237.715625H134.856875v600q0 6.99375 5.0746875 12.0684375T152 854.856875z m737.143125-17.1421875v-600H546.284375v617.1421875H872q6.99375 0 12.0684375-5.07375t5.0746875-12.0684375z m68.5715625-651.429375V837.715625q0 35.3821875-25.16625 60.5484375T872 923.4284375H152q-35.383125 0-60.5484375-25.1653125T66.284375 837.7146875V186.284375q0-35.3821875 25.16625-60.5484375T152 100.5715625h720q35.383125 0 60.5484375 25.1653125t25.16625 60.5484375z" p-id="1183"></path></svg>
--- a/VScode/src/assets/icons/svg/select.svg
+++ b/VScode/src/assets/icons/svg/select.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="1575803481213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62 511.97954521C62 263.86590869 263.90681826 62 511.97954521 62s449.97954521 201.825 449.97954521 449.97954521c0 248.19545479-201.90681826 449.97954521-449.97954521 449.97954521C263.90681826 962 62 760.175 62 511.97954521M901.98636348 511.97954521c0-215.24318174-175.00909131-390.41590869-390.00681827-390.41590869-215.03863652 0-389.96590869 175.17272695-389.96590868 390.41590869 0 215.28409131 175.00909131 390.45681826 389.96590868 390.45681826C727.01818174 902.47727305 901.98636348 727.30454521 901.98636348 511.97954521M264.17272695 430.28409131c0-5.76818174 2.12727305-11.51590869 6.64772696-15.87272696 8.71363652-8.75454521 22.88863652-8.75454521 31.725 0l209.4340913 208.22727305L721.45454521 414.53409131c8.75454521-8.71363652 22.97045479-8.71363652 31.90909132 0 8.71363652 8.75454521 8.71363652 22.88863652 0 31.60227304L511.97954521 685.74090869 270.71818174 446.01363653C266.27954521 441.77954521 264.17272695 436.05227305 264.17272695 430.28409131" p-id="805"></path></svg>
--- a/VScode/src/assets/icons/svg/slider.svg
+++ b/VScode/src/assets/icons/svg/slider.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="1577185310368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1238" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M951.453125 476.84375H523.671875a131.8359375 131.8359375 0 0 0-254.1796875 0H72.546875v70.3125h196.9453125a131.8359375 131.8359375 0 0 0 254.1796875 0H951.453125z" p-id="1239"></path></svg>
--- a/VScode/src/assets/icons/svg/switch.svg
+++ b/VScode/src/assets/icons/svg/switch.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="1576042673958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1110" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M692 792H332c-150 0-270-120-270-270s120-270 270-270h360c150 0 270 120 270 270 0 147-120 270-270 270zM332 312c-117 0-210 93-210 210s93 210 210 210h360c117 0 210-93 210-210s-93-210-210-210H332z" p-id="1111"></path><path d="M341 522m-150 0a150 150 0 1 0 300 0 150 150 0 1 0-300 0Z" p-id="1112"></path></svg>
--- a/VScode/src/assets/icons/svg/table.svg
+++ b/VScode/src/assets/icons/svg/table.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="1595774196464" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4269" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M856.187 65.711H167.215c-56.054 0-101.554 45.5-101.554 101.554v688.972c0 56.054 45.5 101.554 101.554 101.554h688.972c56.054 0 101.554-45.5 101.554-101.554V167.265c0-56.054-45.5-101.554-101.554-101.554z m-677.024 51.773H844.24c34.05 0 61.729 27.678 61.729 61.728v183.594H117.434V179.212c0-34.05 27.678-61.728 61.729-61.728z m217.046 297.094H634.66v219.934H396.209V414.578z m-51.773 219.834H117.434V414.578h227.002v219.834z m341.997-219.834H905.97v219.934H686.433V414.578z m157.807 491.44H179.163c-34.05 0-61.73-27.678-61.73-61.728V686.185h227.003v219.833h51.773V686.185H634.66v219.833h51.772V686.185H905.97V844.29c0 34.05-27.679 61.728-61.729 61.728z" p-id="4270"></path></svg>
--- a/VScode/src/assets/icons/svg/textarea.svg
+++ b/VScode/src/assets/icons/svg/textarea.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="1575802855098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 160H128c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64z m0 608c0 16-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-16 12.8-32 32-32h704c19.2 0 32 12.8 32 32v512z" p-id="2985"></path><path d="M224 288c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V320c0-16-12.8-32-32-32z m608 480c19.2 0 32-12.8 32-32V608L704 768h128z" p-id="2986"></path></svg>
--- a/VScode/src/assets/icons/svg/time-range.svg
+++ b/VScode/src/assets/icons/svg/time-range.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="1579774825624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1248" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M498.595712 482.290351 345.420077 482.290351l0 57.307194 210.477712 0L555.897789 274.196942l-57.301054 0L498.596735 482.290351zM498.595712 482.290351" p-id="1249"></path><path d="M577.685002 644.98478l379.879913 0 0 57.302077L577.685002 702.286858 577.685002 644.98478 577.685002 644.98478zM577.685002 644.98478" p-id="1250"></path><path d="M577.685002 773.764795l379.879913 0 0 57.307194L577.685002 831.071989 577.685002 773.764795 577.685002 773.764795zM577.685002 773.764795" p-id="1251"></path><path d="M577.685002 902.549927l379.879913 0 0 57.307194L577.685002 959.857121 577.685002 902.549927 577.685002 902.549927zM577.685002 902.549927" p-id="1252"></path><path d="M102.523001 382.290823c4.450359 2.615571 9.470699 3.954055 14.530948 3.954055 2.969635 0 5.952572-0.461511 8.836249-1.394766l190.809767-61.886489c15.052834-4.882194 23.297612-21.040199 18.415418-36.08894-4.882194-15.052834-21.040199-23.297612-36.093033-18.415418L175.676092 308.458257c15.994276-26.115797 35.170011-50.537 57.370639-72.743768 73.767074-73.767074 171.845857-114.388237 276.16783-114.388237 104.32095 0 202.39564 40.622186 276.16169 114.388237s114.393353 171.845857 114.393353 276.16783c0 26.427906-2.615571 52.449559-7.709589 77.780481l58.302871 0c4.464685-25.499767 6.708795-51.470255 6.708795-77.780481 0-60.449767-11.845793-119.102608-35.204803-174.336584-22.559808-53.334719-54.850236-101.226472-95.968725-142.349055-41.122583-41.122583-89.017406-73.408917-142.348032-95.968725C628.317169 75.866898 569.659211 64.021106 509.215584 64.021106c-60.448744 0-119.106702 11.845793-174.336584 35.207873-53.334719 22.559808-101.230566 54.846142-142.349055 95.968725-23.980157 23.980157-44.934398 50.278103-62.727647 78.601172l-20.738323-105.655342c-3.043313-15.527648-18.105357-25.642007-33.631982-22.599717-15.527648 3.048429-25.64303 18.105357-22.599717 33.637098l36.102243 183.932126C90.51348 371.153158 95.460142 378.13313 102.523001 382.290823L102.523001 382.290823zM102.523001 382.290823" p-id="1253"></path><path d="M126.020158 587.9416 67.768453 587.9416c5.759167 33.679054 15.368012 66.544579 28.789697 98.278327 22.559808 53.333696 54.850236 101.225449 95.971795 142.348032 41.122583 41.122583 89.014336 73.408917 142.349055 95.968725 54.112432 22.88829 111.517863 34.71157 170.668031 35.18229L505.547031 902.395408c-102.94972-0.941442-199.594851-41.445948-272.499277-114.349351C177.545672 732.543975 140.810003 663.275355 126.020158 587.9416L126.020158 587.9416zM126.020158 587.9416" p-id="1254"></path></svg>
--- a/VScode/src/assets/icons/svg/time.svg
+++ b/VScode/src/assets/icons/svg/time.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="1577099827399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M520 559h204c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H488c-17.673 0-32-14.327-32-32 0-0.167 0.001-0.334 0.004-0.5a32.65 32.65 0 0 1-0.004-0.5V277c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v282z m-8 401C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-64c212.077 0 384-171.923 384-384S724.077 128 512 128 128 299.923 128 512s171.923 384 384 384z" p-id="1009"></path></svg>
--- a/VScode/src/assets/icons/svg/tuichuquanping.svg
+++ b/VScode/src/assets/icons/svg/tuichuquanping.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="1623495517222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19363" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M128 128h256v64H192v192H128V128zM896 640v256h-256v-64h192v-192h64zM384 686.496L174.496 896 128 849.504 337.504 640H192v-64h256v256h-64v-145.504zM849.504 128L640 337.504V192h-64v256h256v-64h-145.504L896 174.496 849.504 128z" p-id="19364"></path></svg>
--- a/VScode/src/assets/icons/svg/upload.svg
+++ b/VScode/src/assets/icons/svg/upload.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="1577540289643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M530.944 458.24l4.8 3.456 122.176 106.816a32 32 0 0 1-37.44 51.584l-4.672-3.392L546.56 556.16v280.704a32 32 0 0 1-26.24 31.488l-5.76 0.512a32 32 0 0 1-31.424-26.24l-0.512-5.76-0.064-280.704-69.12 60.48a32 32 0 0 1-40.96 0.896l-4.16-3.968a32 32 0 0 1-0.96-40.96l4.032-4.16 122.176-106.816a32 32 0 0 1 37.312-3.456zM497.92 128c128.128 0 239.168 82.304 275.52 199.04 123.968 11.264 221.312 113.088 221.312 237.44 0 128.128-103.68 232.96-234.88 238.272h-5.888l-35.52 0.192a32 32 0 0 1-0.192-64l35.264-0.128 4.672-0.064c96.384-3.84 172.544-80.896 172.544-174.272 0-96.128-80.512-174.464-179.584-174.464h-1.984a32 32 0 0 1-32-25.28C695.872 264.96 604.736 192 497.92 192 381.824 192 285.44 277.76 274.816 388.48a32 32 0 0 1-28.352 28.8c-83.968 9.152-147.84 78.208-147.84 159.552l0.192 7.936c3.84 85.76 77.056 154.112 166.592 154.112h45.632a32 32 0 0 1 0 64h-45.632C142.016 802.944 40.32 708.032 34.88 586.88l-0.192-9.28c0-106.88 76.352-197.184 179.968-219.904C239.488 226.112 357.76 128 497.856 128z" p-id="7923"></path></svg>
--- a/VScode/src/assets/icons/svg/zhy-AI.svg
+++ b/VScode/src/assets/icons/svg/zhy-AI.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="1767716591648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7840" id="mx_n_1767716591648" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M501.824 32C303.552 32 141.504 176.992 141.504 357.76c0 23.712 2.816 47.104 8.32 69.856l-51.008 114.208a32 32 0 0 0 24.704 44.736c54.272 7.744 76.672 31.168 76.672 77.312v111.552a64 64 0 0 0 64 64h20.704a64 64 0 0 1 64 64V960a32 32 0 0 0 32 32h345.6a32 32 0 0 0 0-64h-313.6v-24.608a128 128 0 0 0-128-128h-20.736v-111.552c0-65.664-32.192-110.688-91.2-131.136l39.872-89.28a31.968 31.968 0 0 0 1.568-21.792 233.088 233.088 0 0 1-8.896-63.904c0-143.712 131.936-261.76 296.32-261.76s296.32 118.016 296.32 261.76a32 32 0 0 0 64 0C862.144 176.992 700.064 32 501.824 32zM904 448a32 32 0 0 0-32 32v360a32 32 0 0 0 64 0V480a32 32 0 0 0-32-32z" p-id="7841"></path><path d="M673.888 466.656c-11.744-25.568-48.416-24.64-58.816 1.536l-132.8 333.76a32 32 0 0 0 59.488 23.68l32.608-81.92c0.576 0.032 1.088 0.32 1.664 0.32h154.848l38.176 83.104a31.968 31.968 0 1 0 58.144-26.72l-153.312-333.76zM599.68 680l47.264-118.72 54.528 118.72H599.68z" p-id="7842"></path></svg>
--- a/VScode/src/assets/icons/svg/zhy-blog.svg
+++ b/VScode/src/assets/icons/svg/zhy-blog.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="1767716707556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14411" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M514.3625 80.2203125c204.4546875-0.39375 380.75625 143.4234375 421.4109375 343.74375 40.6546875 200.3203125-65.6578125 401.5265625-254.0671875 480.8671875-218.4328125 92.4328125-470.4328125-9.7453125-562.865625-228.178125-92.4328125-218.4328125 9.7453125-470.4328125 228.178125-562.865625a430.171875 430.171875 0 0 1 167.34375-33.5671875m0-71.5640625C276.14375 8.65625 70.9015625 176.590625 23.6515625 410.084375c-47.25 233.49375 76.6828125 467.971875 296.1984375 560.503125 254.75625 107.3953125 548.3953125-12.009375 655.8890625-266.765625C1083.134375 449.065625 963.63125 155.4265625 708.875 48.03125 647.3515625 22.04375 581.2015625 8.65625 514.3625 8.65625z m0 0" p-id="14412"></path><path d="M514.3625 776.8625v-71.5640625c93.7125 0.590625 174.7265625-65.165625 193.33125-157.0078125C726.2984375 456.546875 677.375 364.3109375 590.8484375 328.38125c-48.7265625-20.475-103.6546875-20.475-152.38125 0-72.84375 30.6140625-120.290625 101.8828125-120.1921875 180.928125h-71.5640625c0-107.49375 64.18125-204.6515625 163.1109375-246.7828125C510.03125 219.903125 626.1875 242.54375 703.0671875 319.71875c76.78125 76.3875 99.815625 191.559375 58.471875 291.6703125-41.2453125 100.209375-138.8953125 165.4734375-247.1765625 165.4734375z m0 0" p-id="14413"></path><path d="M442.7984375 509.309375c0 39.4734375 31.9921875 71.5640625 71.5640625 71.5640625 39.4734375 0 71.5640625-31.9921875 71.5640625-71.5640625 0-39.4734375-31.9921875-71.5640625-71.5640625-71.5640625-39.4734375 0.0984375-71.5640625 32.090625-71.5640625 71.5640625z m0 0" p-id="14414"></path><path d="M299.76875 903.453125c-2.559375-162.815625 68.4140625-318.0515625 193.134375-422.690625l43.6078125 56.503125C430.5921875 628.7140625 370.25 762.096875 371.3328125 901.9765625l-71.5640625 1.4765625z m0 0" p-id="14415"></path></svg>
--- a/VScode/src/assets/icons/svg/zhy-voice.svg
+++ b/VScode/src/assets/icons/svg/zhy-voice.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="1767716540343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6613" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M519.312 392h16a16 16 0 0 1 16 16v168.352a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V408a16 16 0 0 1 16-16zM408 436.528h16a16 16 0 0 1 16 16v79.296a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-79.296a16 16 0 0 1 16-16z m222.608 0h16a16 16 0 0 1 16 16v79.296a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-79.296a16 16 0 0 1 16-16zM418.512 719.28l0.032-0.08A311.04 311.04 0 0 0 520 736C675.2 736 800 624.32 800 488S675.2 240 520 240 240 351.68 240 488c0 70.592 33.52 136.56 91.568 183.392l-0.08 0.096 3.328 92.8 83.696-45.008z m-134-25.184C225.84 639.536 192 566.304 192 488 192 323.888 339.408 192 520 192S848 323.888 848 488 700.592 784 520 784c-32.992 0-65.328-4.4-96.224-12.944l-109.792 59.76a16 16 0 0 1-23.632-13.312l-5.84-123.408z" fill="#000000" p-id="6614"></path></svg>
--- a/VScode/src/assets/images/logo.png
+++ b/VScode/src/assets/images/logo.png
--- a/VScode/src/assets/images/user.png
+++ b/VScode/src/assets/images/user.png
--- a/VScode/src/assets/theme/base.less
+++ b/VScode/src/assets/theme/base.less
@@ -0,0 +1,32 @@
+//定义基础色
+
+//主色
+
+body {
+  --color-primary: #409eff;
+  --color-primary-light: rgb(64 158 255 / 8%);
+}
+
+@--color-primary:~ 'var(--color-primary)';
+@--color-primary-light:~ 'var(--color-primary-light)';
+
+@text: #595959;
+@text-2: #8c8c8c;
+
+//导航菜单
+@dark-text: rgb(255 255 255 / 66%);
+@dark-text-active: #eee;
+@dark-bg: #263238;
+@dark-bg-active: @--color-primary;
+
+@light-text: @text;
+@light-text-active: @--color-primary;
+@light-bg: #fff;
+@light-bg-active: @--color-primary-light;
+
+@primary-text: rgb(255 255 255 / 66%);
+@primary-text-2: rgb(255 255 255 / 65%);
+@primary-text-active: #fff;
+@primary-bg: @--color-primary;
+@primary-bg-light: @--color-primary-light;
+@primary-bg-active: @--color-primary-light;
--- a/VScode/src/assets/theme/index.less
+++ b/VScode/src/assets/theme/index.less
@@ -0,0 +1,935 @@
+@import "./base.less";
+
+//主题样式
+
+//=================
+.el-menu--vertical.rr-sidebar-menu-pop-light,
+.el-menu--vertical.rr-sidebar-menu-pop-dark {
+  border-radius: 4px !important;
+  box-shadow: none !important;
+  .el-menu.el-menu--popup {
+    min-width: 160px;
+    border-radius: 4px !important;
+  }
+  .el-menu-item,
+  .el-sub-menu__title {
+    height: 45px;
+    line-height: 45px;
+  }
+  .is-active {
+    &.el-menu-item {
+      border: 0 !important;
+    }
+  }
+}
+//深色侧边栏
+.ui-sidebar-dark .rr-sidebar,
+.rr-sidebar-menu-pop-dark {
+  background: @dark-bg !important;
+  box-shadow: 0 4px 4px rgba(0, 21, 41, 0.35);
+  .el-menu {
+    background: @dark-bg !important;
+    .el-menu-item,
+    .el-sub-menu__title {
+      &:hover {
+        i,
+        a {
+          color: @dark-text-active !important;
+        }
+      }
+      i,
+      a {
+        color: @dark-text !important;
+      }
+      &:not(.is-active):hover {
+        background: inherit !important;
+      }
+    }
+    .is-active {
+      &.el-menu-item {
+        border-right: none !important;
+        background: @dark-bg-active !important;
+      }
+      &.el-menu-item,
+      > .el-sub-menu__title:first-child {
+        i,
+        a {
+          color: @dark-text-active !important;
+        }
+      }
+    }
+  }
+}
+//浅色侧边栏
+.ui-sidebar-light .rr-sidebar,
+.rr-sidebar-menu-pop-light {
+  background: @light-bg !important;
+  box-shadow: 0 4px 4px rgba(0, 21, 41, 0.25);
+  .el-menu {
+    background: @light-bg !important;
+    .el-menu-item,
+    .el-sub-menu__title {
+      &:hover {
+        i,
+        a {
+          color: @light-text-active !important;
+        }
+      }
+      i,
+      a {
+        color: @light-text !important;
+      }
+      &:not(.is-active):hover {
+        background: inherit !important;
+      }
+    }
+    .is-active {
+      &.el-menu-item {
+        border-right: 2px solid @light-text-active !important;
+        background: @light-bg-active !important;
+      }
+      &.el-menu-item,
+      > .el-sub-menu__title:first-child {
+        i,
+        a {
+          color: @light-text-active !important;
+        }
+      }
+    }
+  }
+}
+
+//================================
+.el-menu--horizontal.rr-sidebar-menu-pop-light,
+.el-menu--horizontal.rr-sidebar-menu-pop-dark {
+  border-radius: 4px !important;
+  box-shadow: none !important;
+  background-color: @light-bg !important;
+  border: none !important;
+  margin-top: -5px;
+  margin-left: 0;
+  .el-popper {
+    border: 0 !important;
+  }
+  .el-menu--horizontal {
+    margin-left: -5px;
+  }
+
+  .el-menu.el-menu--popup {
+    min-width: 160px;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
+  }
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    height: 45px;
+    line-height: 45px;
+  }
+  .is-active {
+    &.el-menu-item {
+      border: 0 !important;
+    }
+  }
+}
+//浅色顶栏
+.ui-topHeader-light {
+  .rr-header-ctx {
+    box-shadow: 0 1px 1px #f1f1f1;
+    &-logo {
+      background: @light-bg !important;
+      color: #000000bf;
+    }
+  }
+  &.ui-sidebar-dark {
+    .rr-header-ctx {
+      box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+    }
+  }
+  .rr-header-right {
+    background: @light-bg !important;
+    .rr-header-right-items {
+      * {
+        color: @light-text !important;
+      }
+      > div {
+        &:hover {
+          color: #262626 !important;
+          background: rgba(0, 0, 0, 0.1) !important;
+        }
+      }
+      .el-badge__content {
+        color: #fff !important;
+      }
+    }
+    .rr-sidebar-menu {
+      &.el-menu {
+        background: @light-bg !important;
+        .el-menu-item,
+        .el-sub-menu__title {
+          &:hover {
+            background: rgba(0, 0, 0, 0.1) !important;
+            i,
+            a {
+              color: @light-text-active !important;
+            }
+          }
+          i,
+          a {
+            color: @light-text !important;
+          }
+
+          i:not(.el-sub-menu__icon-arrow) {
+            width: 17px !important;
+            height: 17px !important;
+            margin-right: 0 !important;
+            margin-top: -4px;
+            line-height: 17px;
+          }
+          span {
+            margin-right: 0;
+          }
+        }
+        .is-active {
+          &.el-menu-item {
+            border-bottom: 2px solid @light-text-active !important;
+            background: @light-bg !important;
+          }
+          &.el-menu-item,
+          .el-sub-menu__title {
+            i,
+            a {
+              color: @light-text-active !important;
+            }
+            &:hover {
+              background: rgba(0, 0, 0, 0.1) !important;
+            }
+          }
+          &.isLink {
+            border-bottom: 0 !important;
+            i,
+            a {
+              color: @light-text !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+//深色顶栏
+.ui-topHeader-dark {
+  .rr-header-ctx {
+    &-logo {
+      background: @dark-bg !important;
+    }
+  }
+  .rr-header-right {
+    background: @dark-bg !important;
+    .rr-header-right-items {
+      * {
+        color: @dark-text !important;
+        &:hover {
+          color: @dark-text-active !important;
+        }
+      }
+      .el-badge__content {
+        color: #fff !important;
+      }
+    }
+    .rr-sidebar-menu {
+      &.el-menu {
+        background: @dark-bg !important;
+        .el-menu-item,
+        .el-sub-menu__title {
+          &:hover {
+            background: @dark-bg !important;
+            i,
+            a {
+              color: @dark-text-active !important;
+            }
+          }
+          i,
+          a {
+            color: @dark-text !important;
+          }
+          &:not(.is-active):hover {
+            background: inherit !important;
+          }
+          i:not(.el-sub-menu__icon-arrow) {
+            width: 17px !important;
+            height: 17px !important;
+            margin-right: 0 !important;
+            margin-top: -4px;
+            line-height: 17px;
+          }
+          span {
+            margin-right: 0;
+          }
+        }
+        .is-active {
+          &.el-menu-item {
+            border-bottom: 2px solid @dark-text-active !important;
+            background: @dark-bg !important;
+          }
+          &.el-menu-item,
+          .el-sub-menu__title {
+            border-bottom: 2px solid @dark-text-active !important;
+            i,
+            a {
+              color: @dark-text-active !important;
+            }
+          }
+          &.isLink {
+            border-bottom: 0 !important;
+            i,
+            a {
+              color: @dark-text !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+//主题色
+.ui-topHeader-primary {
+  .rr-header-ctx {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+    position: relative;
+    z-index: 102;
+  }
+  .rr-header-ctx-logo {
+    background: @primary-bg !important;
+  }
+  .rr-header-right {
+    background: @primary-bg !important;
+    .rr-header-right-items,
+    .rr-header-right-left-br {
+      div,
+      span,
+      svg,
+      i {
+        color: @primary-text !important;
+        &:hover {
+          color: @primary-text-active !important;
+        }
+      }
+      > div:not(.el-breadcrumb) {
+        &:hover {
+          color: #262626 !important;
+          background: rgba(0, 0, 0, 0.1) !important;
+        }
+      }
+      .el-badge__content {
+        color: #fff !important;
+      }
+      .el-breadcrumb {
+        .el-breadcrumb__item {
+          &:not(:first-child) {
+            * {
+              color: @primary-text-2 !important;
+              font-weight: 400 !important;
+            }
+          }
+        }
+      }
+    }
+    .rr-sidebar-menu {
+      &.el-menu {
+        background: @primary-bg !important;
+        .el-menu-item,
+        .el-sub-menu__title {
+          &:hover,
+          &:focus {
+            background: rgba(0, 0, 0, 0.1) !important;
+            i,
+            a {
+              color: @primary-text-active !important;
+            }
+          }
+          i,
+          a {
+            color: @primary-text !important;
+          }
+          i:not(.el-sub-menu__icon-arrow) {
+            width: 17px !important;
+            height: 17px !important;
+            margin-right: 0 !important;
+            margin-top: -4px;
+            line-height: 17px;
+          }
+          span {
+            margin-right: 0;
+          }
+        }
+        .is-active {
+          &.el-menu-item {
+            border-bottom: 2px solid @primary-text-active !important;
+          }
+          &.el-menu-item,
+          .el-sub-menu__title {
+            border-bottom: 2px solid @primary-text-active !important;
+            i,
+            a {
+              color: @primary-text-active !important;
+            }
+            &:hover {
+              background: rgba(0, 0, 0, 0.1) !important;
+            }
+          }
+          &.isLink {
+            border-bottom: 0 !important;
+            i,
+            a {
+              color: @primary-text !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//=============
+//导航模式
+.ui-navLayout-left {
+  &.ui-sidebar-light {
+    .rr-sidebar {
+      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
+      z-index: 101;
+    }
+  }
+}
+
+.ui-navLayout-top {
+  &.ui-topHeader-light {
+    .rr-header-right {
+      border-bottom: none !important;
+    }
+  }
+  .rr-header-ctx-logo {
+    max-width: inherit !important;
+    &-text {
+      max-width: inherit !important;
+      overflow: inherit !important;
+    }
+  }
+  .rr-view-tab-wrap {
+    left: 0 !important;
+  }
+}
+
+.ui-navLayout-mix {
+  .rr-header-ctx-logo {
+    max-width: inherit !important;
+    &-text {
+      max-width: inherit !important;
+      overflow: inherit !important;
+    }
+  }
+  &.ui-sidebar-light {
+    .rr-sidebar {
+      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
+      z-index: 101;
+    }
+  }
+  .rr-sidebar {
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
+    z-index: 101;
+  }
+  .rr-header-right-left-br {
+    padding: 0 !important;
+  }
+}
+
+//========
+//内容不铺满
+.ui-contentFull-false {
+  .rr-view-ctx {
+    width: 1200px !important;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+//=======
+//tab标签栏开关
+.ui-openTabsPage {
+  &-false {
+    .rr-view-ctx {
+      margin-top: 0;
+    }
+  }
+}
+
+//=======
+//logo自动
+//导航模式在顶部时logo自动要取消
+.ui-logoAuto-true,
+.ui-navLayout-top {
+  .rr-header-ctx-logo {
+    width: inherit !important;
+    padding: 0 15px 0 20px;
+    box-shadow: none !important;
+  }
+  &.ui-topHeader-primary .rr-header-ctx-logo {
+    background: @primary-bg !important;
+    color: #ffffffd9 !important;
+  }
+  &.ui-topHeader-dark .rr-header-ctx-logo {
+    background: @dark-bg !important;
+    color: #ffffffd9 !important;
+  }
+  &.ui-topHeader-light .rr-header-ctx-logo {
+    background: @light-bg !important;
+    color: #000000bf;
+    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
+  }
+}
+
+//侧边栏多彩图标
+.ui-colorIcon-true {
+  .rr-sidebar {
+    .el-menu {
+      .el-sub-menu__title,
+      .el-menu-item,
+      .isLink {
+        margin-left: -5px !important;
+      }
+      li {
+        [class^="el-icon"] {
+          &:first-child {
+            flex-shrink: 0;
+            width: 28px;
+            height: 28px;
+            line-height: 28px;
+            font-size: 14px;
+            background-color: rgb(97, 178, 252);
+            border-radius: 50%;
+            text-align: center;
+            color: rgb(255, 255, 255) !important;
+
+            .iconfont {
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+        &:nth-child(2n) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(125, 215, 51);
+            }
+          }
+        }
+        &:nth-child(3) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(50, 162, 212);
+            }
+          }
+        }
+        &:nth-child(4) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(115, 131, 207);
+            }
+          }
+        }
+        &:nth-child(5) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(245, 104, 111);
+            }
+          }
+        }
+        &:nth-child(6) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(43, 204, 206);
+            }
+          }
+        }
+        &:nth-child(7) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(125, 215, 51);
+            }
+          }
+        }
+        &:nth-child(8) {
+          [class^="el-icon"] {
+            &:first-child {
+              background-color: rgb(250, 173, 20);
+            }
+          }
+        }
+      }
+      //--
+      .el-sub-menu {
+        .el-menu {
+          li,
+          .el-sub-menu__title {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                width: 8px;
+                height: 8px;
+                line-height: 8px;
+                font-size: 30px;
+                overflow: hidden;
+                border-radius: 50%;
+                margin: 0 0 0 10px;
+                background: @dark-text !important;
+                color: @dark-text !important;
+                &:before {
+                  content: "";
+                  margin-left: -11px;
+                  font-family: element-icons !important;
+                }
+              }
+            }
+          }
+        }
+      }
+      .el-menu-item,
+      .el-sub-menu.is-active .el-sub-menu__title {
+        i:first-child {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+  &.ui-sidebar-light {
+    .rr-sidebar {
+      .el-sub-menu .el-menu {
+        .el-sub-menu {
+          .el-sub-menu__title {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                color: @light-text !important;
+                opacity: 0.25;
+              }
+            }
+            &:hover {
+              [class^="el-icon"] {
+                &:first-child:not(.el-sub-menu__icon-arrow) {
+                  color: @light-text-active !important;
+                  opacity: 0.25;
+                }
+              }
+            }
+          }
+          &.is-active .el-sub-menu__title [class^="el-icon"] {
+            &:first-child:not(.el-sub-menu__icon-arrow) {
+              color: @light-text-active !important;
+              opacity: 1;
+            }
+          }
+        }
+        .el-menu-item {
+          [class^="el-icon"] {
+            &:first-child:not(.el-sub-menu__icon-arrow) {
+              background: @light-text !important;
+              color: @light-text !important;
+              opacity: 0.25;
+            }
+          }
+          &.is-active,
+          &:hover {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                background: @light-text-active !important;
+                color: @light-text-active !important;
+                opacity: 1;
+              }
+            }
+          }
+          &:hover:not(.is-active) {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                opacity: 0.2;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.ui-sidebar-dark {
+    .rr-sidebar {
+      .el-sub-menu {
+        .el-sub-menu.is-opened {
+          &.is-active {
+            .el-sub-menu__title {
+              [class^="el-icon"] {
+                &:first-child:not(.el-sub-menu__icon-arrow) {
+                  background: @dark-text-active !important;
+                  color: @dark-text-active !important;
+                  opacity: 1;
+                }
+              }
+            }
+          }
+        }
+        .el-menu .el-menu-item,
+        .el-sub-menu.is-opened .el-sub-menu__title {
+          [class^="el-icon"] {
+            &:first-child:not(.el-sub-menu__icon-arrow) {
+              background: @dark-text !important;
+              color: @dark-text !important;
+              opacity: 0.85;
+            }
+          }
+          &.is-active,
+          &:hover {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                background: @dark-text-active !important;
+                color: @dark-text-active !important;
+                opacity: 1;
+              }
+            }
+          }
+          &:hover:not(.is-active) {
+            [class^="el-icon"] {
+              &:first-child:not(.el-sub-menu__icon-arrow) {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//侧边栏收缩状态
+.rr.ui-sidebarCollapse {
+  &-true {
+    .rr-view-tab-wrap {
+      left: 60px;
+    }
+    .rr-header-ctx-logo-line {
+      width: 0;
+    }
+    .enabled-logo-false {
+      display: flex;
+    }
+    &.ui-logoAuto {
+      &-false {
+        .rr-header-ctx-logo {
+          width: 60px !important;
+          &-text {
+            display: none;
+          }
+        }
+      }
+      &-true {
+        .enabled-logo-false {
+          display: none;
+        }
+        .rr-header-ctx-logo-line {
+          width: 10px;
+        }
+      }
+    }
+    &.ui-navLayout-top {
+      //导航模式为顶部时自动展开logo状态
+      .rr-header-ctx-logo {
+        width: inherit !important;
+        padding: 0 15px 0 20px;
+        box-shadow: none !important;
+        &-text {
+          display: block;
+        }
+      }
+      .enabled-logo-false {
+        display: none;
+      }
+    }
+    .rr-sidebar:not(.rr-sidebar-mobile) {
+      width: 60px !important;
+      .el-menu {
+        width: 60px !important;
+      }
+      // 收起效果
+      .rr-sidebar-menu {
+        .el-menu-item,
+        .el-sub-menu__title,
+        .el-sub-menu {
+          a,
+          .el-menu {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  &-false {
+    .rr-header-ctx-logo {
+      &-text {
+        display: block;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+//tabStyle
+.ui-tabStyle-default {
+  .rr-view-tab {
+    .el-tabs__item {
+      border-right: none !important;
+      padding: 0 15px 0 !important;
+      &.is-active {
+        color: @--color-primary !important;
+      }
+      &:before {
+        content: none;
+      }
+      &:after {
+        content: "";
+        height: 3px;
+        width: 0;
+        background-color: @--color-primary !important;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+      &.is-active:after,
+      &:hover:after {
+        width: 100%;
+      }
+    }
+    .el-tabs__nav-wrap {
+      &:before,
+      &:after,
+      .el-tabs__nav-next,
+      .el-tabs__nav-prev {
+        height: 40px;
+        line-height: 44px;
+      }
+    }
+  }
+}
+.ui-tabStyle-dot {
+  .rr-view-tab-wrap {
+    .rr-view-tab {
+      .el-tabs__item {
+        &.is-active {
+          color: @--color-primary !important;
+          &:before {
+            background-color: @--color-primary !important;
+          }
+        }
+      }
+    }
+  }
+}
+.ui-tabStyle-card {
+  .rr-view-tab-wrap {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding-top: 10px;
+    .rr-view-tab {
+      height: 30px;
+      background: transparent !important;
+      &-ops {
+        border-radius: 4px;
+        height: 30px;
+        line-height: 30px;
+        width: 30px;
+        background-color: #fff;
+        margin-right: 10px;
+        .el-icon--right {
+          margin-left: 0;
+        }
+      }
+      .el-tabs__item {
+        margin-left: 8px;
+        padding: 0 15px 0 !important;
+        border-radius: 4px;
+        height: 30px;
+        line-height: 30px;
+        background-color: #fff;
+        &:nth-child(2) {
+          margin-left: 0;
+          padding: 0 15px !important;
+        }
+        &.is-active {
+          background-color: @--color-primary !important;
+          color: #fff;
+        }
+        &:before {
+          content: none;
+        }
+        &:after {
+          content: none;
+        }
+      }
+      .el-tabs__nav-wrap {
+        &:before,
+        &:after,
+        .el-tabs__nav-next,
+        .el-tabs__nav-prev {
+          height: 30px;
+          line-height: 30px;
+          background: #eff2f5 !important;
+        }
+        .el-tabs__nav-next,
+        .el-tabs__nav-prev {
+          &:hover {
+            background: transparent !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+//外链
+.rr-sidebar-menu.el-menu .el-menu-item.is-active.isLink {
+  background: inherit !important;
+}
+
+//不同语言下的差异
+[lang="en-US"] {
+  .rr-header-ctx-logo-text {
+    letter-spacing: 0px !important;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  :not(html):not(body)::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background: transparent;
+  }
+
+  :not(html):not(body)::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  :not(html):not(body)::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: hsla(0, 0%, 54.9%, 0.3);
+  }
+
+  :not(html):not(body)::-webkit-scrollbar-thumb:hover {
+    background-color: hsla(0, 0%, 54.9%, 0.5);
+  }
+
+  .ele-scrollbar-mini::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .ele-scrollbar-mini::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+  }
+
+  .ele-scrollbar-hide::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
--- a/VScode/src/assets/theme/mobile.less
+++ b/VScode/src/assets/theme/mobile.less
@@ -0,0 +1,97 @@
+@import "./base.less";
+
+@media only screen and (max-width: 768px) {
+  .rr-header-action {
+    display: flex !important;
+  }
+  .show-xs-only {
+    display: block !important;
+  }
+}
+@media only screen and (min-width: 768px) {
+}
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+}
+@media only screen and (max-width: 992px) {
+}
+@media only screen and (min-width: 992px) {
+}
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+}
+@media only screen and (max-width: 1200px) {
+}
+@media only screen and (min-width: 1200px) {
+}
+@media only screen and (min-width: 1200px) and (max-width: 1920px) {
+}
+@media only screen and (max-width: 1920px) {
+}
+@media only screen and (min-width: 1920px) {
+}
+
+//
+.ui-mobile {
+  .rr-view-tab-wrap {
+    left: 0 !important;
+    transition: left 0s !important;
+  }
+  .rr-header-ctx-logo-img-wrap {
+    display: none !important;
+  }
+}
+
+.rr-sidebar-mobile {
+  z-index: 9999 !important;
+  &-inner {
+    margin: 0;
+    padding: 0;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+.ui-sidebar-light .rr-sidebar-mobile {
+  .el-drawer__body,
+  .rr-header-ctx-logo-mobile {
+    background: @light-bg !important;
+  }
+  .rr-header-ctx-logo-mobile {
+    color: @light-text !important;
+  }
+}
+.ui-sidebar-dark .rr-sidebar-mobile {
+  .el-drawer__body,
+  .rr-header-ctx-logo-mobile {
+    background: @dark-bg !important;
+  }
+  .rr-header-ctx-logo-mobile {
+    color: @dark-text !important;
+  }
+}
+.ui-sidebarCollapse-true,
+.ui-sidebarCollapse-false {
+  .rr-sidebar-mobile {
+    width: initial !important;
+    .el-menu.rr-sidebar-menu {
+      width: 230px !important;
+      .el-menu-item,
+      .el-sub-menu__title {
+        a {
+          display: inline-block !important;
+        }
+      }
+    }
+    .rr-header-ctx-logo.rr-header-ctx-logo-mobile {
+      width: auto !important;
+      .rr-header-ctx-logo-text {
+        display: inline-block !important;
+      }
+    }
+
+    .el-drawer,
+    .el-drawer__body {
+      box-shadow: none !important;
+    }
+  }
+}
--- a/VScode/src/components/base/svg-icon/index.ts
+++ b/VScode/src/components/base/svg-icon/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@/utils/utils";
+import SvgIcon from "./index.vue";
+
+export default withInstall(SvgIcon);
--- a/VScode/src/components/base/svg-icon/index.vue
+++ b/VScode/src/components/base/svg-icon/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg aria-hidden="true" :class="`iconfont ${className}`" :style="`width:${width};height:${height};color:${color};${style}`">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+/**
+ * 自定义svg图标，可自行将svg图标下载后存放在/src/assets/icons/svg目录下
+ * `使用方法：<svg-icon name="earth" color="red"></svg-icon>`
+ */
+export default defineComponent({
+  name: "SvgIcon",
+  props: {
+    prefix: {
+      type: String,
+      default: "icon"
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    width: String,
+    height: String,
+    className: { type: String, default: "" },
+    style: { type: String, default: "" }
+  },
+  setup(props) {
+    const symbolId = computed(() => `#${props.prefix}-${props.name.replace("icon-", "")}`);
+    return { symbolId };
+  }
+});
+</script>
--- a/VScode/src/components/ren-dept-tree/index.ts
+++ b/VScode/src/components/ren-dept-tree/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "@/utils/utils";
+import RenDeptTree from "./src/ren-dept-tree.vue";
+
+RenDeptTree.name = "RenDeptTree";
+export default withInstall(RenDeptTree);
--- a/VScode/src/components/ren-dept-tree/src/ren-dept-tree.vue
+++ b/VScode/src/components/ren-dept-tree/src/ren-dept-tree.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-input v-model="showDeptName" :placeholder="placeholder" @click="deptDialog">
+      <template v-slot:append>
+        <el-button icon="search" @click="deptDialog"></el-button>
+      </template>
+    </el-input>
+    <el-dialog v-model="visibleDept" width="30%" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form size="small" :inline="true">
+        <el-form-item label="关键字：">
+          <el-input v-model="filterText" :style="{ width: '150px' }"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="default">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-tree class="filter-tree" :data="deptList" :default-expanded-keys="expandedKeys" :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" :highlight-current="true" node-key="id" ref="treeRef"> </el-tree>
+      <template v-slot:footer>
+        <el-button type="default" @click="cancelHandle()">取消</el-button>
+        <el-button v-if="query" type="info" @click="clearHandle()">清除</el-button>
+        <el-button type="primary" @click="commitHandle()">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { nextTick, ref, watch } from "vue";
+import { IObject } from "@/types/interface";
+import baseService from "@/service/baseService";
+import { ElMessage } from "element-plus";
+
+const filterText = ref("");
+const visibleDept = ref(false);
+const deptList = ref<any[]>([]);
+const showDeptName = ref("");
+const expandedKeys = ref<any[]>([]);
+const treeRef = ref();
+
+const props = defineProps({
+  modelValue: String,
+  deptName: String,
+  query: Boolean,
+  placeholder: String
+});
+
+watch(
+  () => filterText.value,
+  (val) => {
+    treeRef.value.filter(val);
+  }
+);
+
+watch(
+  () => props.deptName,
+  (val) => {
+    showDeptName.value = val as string;
+  }
+);
+
+const deptDialog = () => {
+  expandedKeys.value = [];
+  visibleDept.value = true;
+  getDeptList(props.modelValue);
+};
+
+const filterNode = (value: string, data: IObject) => {
+  if (!value) return true;
+  return data.name.indexOf(value) !== -1;
+};
+
+const getDeptList = (id?: string) => {
+  return baseService.get("/sys/dept/list").then((res) => {
+    deptList.value = res.data;
+    nextTick(() => {
+      if (id) {
+        treeRef.value.setCurrentKey(id);
+        expandedKeys.value = [id];
+      }
+    });
+  });
+};
+
+const cancelHandle = () => {
+  visibleDept.value = false;
+  deptList.value = [];
+  filterText.value = "";
+};
+
+const emit = defineEmits(["update:modelValue", "update:deptName"]);
+
+const clearHandle = () => {
+  emit("update:modelValue", "");
+  emit("update:deptName", "");
+  showDeptName.value = "";
+  visibleDept.value = false;
+  deptList.value = [];
+  filterText.value = "";
+};
+
+const commitHandle = () => {
+  const node = treeRef.value.getCurrentNode();
+  if (!node) {
+    ElMessage.error("请选择部门");
+    return;
+  }
+  emit("update:modelValue", node.id);
+  emit("update:deptName", node.name);
+  showDeptName.value = node.name;
+  visibleDept.value = false;
+  deptList.value = [];
+  filterText.value = "";
+};
+</script>
--- a/VScode/src/components/ren-radio-group/index.ts
+++ b/VScode/src/components/ren-radio-group/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@/utils/utils";
+import RenRadioGroup from "./src/ren-radio-group.vue";
+
+export default withInstall(RenRadioGroup);
--- a/VScode/src/components/ren-radio-group/src/ren-radio-group.vue
+++ b/VScode/src/components/ren-radio-group/src/ren-radio-group.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-radio-group v-model="value" @change="$emit('update:modelValue', $event)">
+    <el-radio :label="data.dictValue" v-for="data in dataList" :key="data.dictValue">{{ data.dictLabel }}</el-radio>
+  </el-radio-group>
+</template>
+<script lang="ts">
+import { getDictDataList } from "@/utils/utils";
+import { computed, defineComponent } from "vue";
+import { useAppStore } from "@/store";
+export default defineComponent({
+  name: "RenRadioGroup",
+  props: {
+    modelValue: [Number, String],
+    dictType: String
+  },
+  setup(props) {
+    const store = useAppStore();
+    return {
+      value: computed(() => `${props.modelValue}`),
+      dataList: getDictDataList(store.state.dicts, props.dictType)
+    };
+  }
+});
+</script>
--- a/VScode/src/components/ren-region-tree/index.ts
+++ b/VScode/src/components/ren-region-tree/index.ts
@@ -0,0 +1,5 @@
+import { withInstall } from "@/utils/utils";
+import RenRegionTree from "./src/ren-region-tree.vue";
+
+RenRegionTree.name = "RenRegionTree";
+export default withInstall(RenRegionTree);
--- a/VScode/src/components/ren-region-tree/src/ren-region-tree.vue
+++ b/VScode/src/components/ren-region-tree/src/ren-region-tree.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="ren-region">
+    <el-input v-model="showName" :placeholder="placeholder" @click="treeDialog">
+      <template v-slot:append>
+        <el-button icon="search" @click="treeDialog"></el-button>
+      </template>
+    </el-input>
+    <el-dialog v-model="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form size="small" :inline="true">
+        <el-form-item label="关键字">
+          <el-input v-model="filterText" :style="{ width: '150px' }"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="default">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-tree class="filter-tree" :data="dataList" :default-expanded-keys="expandedKeys" :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" :highlight-current="true" node-key="id" ref="treeRef"> </el-tree>
+      <template v-slot:footer>
+        <el-button type="default" @click="cancelHandle()">取消</el-button>
+        <el-button type="info" @click="clearHandle()">清除</el-button>
+        <el-button type="primary" @click="commitHandle()">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref, watch } from "vue";
+import { treeDataTranslate } from "@/utils/utils";
+import { IObject } from "@/types/interface";
+import baseService from "@/service/baseService";
+import { ElMessage } from "element-plus";
+
+const filterText = ref("");
+const visibleTree = ref(false);
+const dataList = ref<any[]>([]);
+const showName = ref("");
+const expandedKeys = ref<any[]>([]);
+const treeRef = ref();
+
+const props = defineProps({
+  modelValue: [Number, String],
+  parentName: String,
+  placeholder: String
+});
+
+watch(
+  () => filterText.value,
+  (val) => {
+    treeRef.value.filter(val);
+  }
+);
+
+watch(
+  () => props.parentName,
+  (val) => {
+    showName.value = val as string;
+  }
+);
+
+const treeDialog = () => {
+  expandedKeys.value = [];
+  if (treeRef.value) {
+    treeRef.value.setCurrentKey(null);
+  }
+  visibleTree.value = true;
+  getDataList(props.modelValue);
+};
+
+const filterNode = (value: string, data: IObject) => {
+  if (!value) return true;
+  return data.name.indexOf(value) !== -1;
+};
+
+const getDataList = (id: any) => {
+  return baseService.get("/sys/region/tree").then((res) => {
+    dataList.value = treeDataTranslate(res.data);
+    nextTick(() => {
+      treeRef.value.setCurrentKey(id);
+      expandedKeys.value = [id];
+    });
+  });
+};
+
+const cancelHandle = () => {
+  visibleTree.value = false;
+  dataList.value = [];
+  filterText.value = "";
+};
+
+const emit = defineEmits(["update:modelValue", "update:parentName"]);
+
+const clearHandle = () => {
+  emit("update:modelValue", "0");
+  emit("update:parentName", "");
+  showName.value = "";
+  visibleTree.value = false;
+  dataList.value = [];
+  filterText.value = "";
+};
+
+const commitHandle = () => {
+  const node = treeRef.value.getCurrentNode();
+  if (!node) {
+    ElMessage.error("请选择");
+    return;
+  }
+  emit("update:modelValue", node.id);
+  emit("update:parentName", node.name);
+
+  showName.value = node.name;
+  visibleTree.value = false;
+  dataList.value = [];
+  filterText.value = "";
+};
+</script>
+
+<style lang="less" scoped>
+.ren-region {
+  .filter-tree {
+    max-height: 230px;
+    overflow: auto;
+  }
+  .el-dialog__body {
+    padding: 0 0 0 20px;
+  }
+  .el-dialog__footer {
+    padding: 10px 20px 8px 20px;
+  }
+}
+</style>
--- a/VScode/src/components/ren-select/index.ts
+++ b/VScode/src/components/ren-select/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from "@/utils/utils";
+import RenSelect from "./src/ren-select.vue";
+
+export default withInstall(RenSelect);
--- a/VScode/src/components/ren-select/src/ren-select.vue
+++ b/VScode/src/components/ren-select/src/ren-select.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-select v-model="value" @change="$emit('update:modelValue', $event)" :placeholder="placeholder" clearable>
+    <el-option :label="data.dictLabel" v-for="data in dataList" :key="data.dictValue" :value="data.dictValue">{{ data.dictLabel }}</el-option>
+  </el-select>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { getDictDataList } from "@/utils/utils";
+import { useAppStore } from "@/store";
+export default defineComponent({
+  name: "RenSelect",
+  props: {
+    modelValue: [Number, String],
+    dictType: String,
+    placeholder: String
+  },
+  setup(props) {
+    const store = useAppStore();
+    return {
+      value: computed(() => `${props.modelValue}`),
+      dataList: getDictDataList(store.state.dicts, props.dictType)
+    };
+  }
+});
+</script>
--- a/VScode/src/components/wang-editor/index.vue
+++ b/VScode/src/components/wang-editor/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div style="border: 1px solid #ccc; z-index: 100">
+    <!-- 工具栏 -->
+    <Toolbar :editor="editorRef" :mode="mode" style="border-bottom: 1px solid #ccc" />
+    <!-- 编辑器 -->
+    <Editor :model-value="modelValue" :style="style" :disabled="disabled" :default-config="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import "@wangeditor/editor/dist/css/style.css";
+import { onBeforeUnmount, shallowRef } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
+import app from "@/constants/app";
+import { getToken } from "@/utils/cache";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  mode: {
+    type: String,
+    default: "default" // 可选值：[default | simple]
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  style: {
+    type: String,
+    default: "height: 300px;"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+type InsertFnType = (url: string, alt: string, href: string) => void;
+
+// 编辑器配置
+const editorConfig: Partial<IEditorConfig> = {
+  placeholder: props.placeholder,
+  readOnly: props.disabled,
+  MENU_CONF: {
+    uploadImage: {
+      server: `${app.api}/sys/oss/upload?token=${getToken()}`, // 上传地址
+      fieldName: "file",
+      // 自定义插入图片
+      customInsert(res: any, insertFn: InsertFnType) {
+        // res 即服务端的返回结果
+        // 从 res 中找到 url alt href ，然后插图图片
+        insertFn(res.data.src, "", "");
+      }
+    }
+  }
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) {
+    return;
+  }
+  editor.destroy();
+});
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor;
+};
+
+// 编辑器change事件触发
+const emit = defineEmits(["update:modelValue"]);
+const handleChange = (editor: IDomEditor) => {
+  emit("update:modelValue", editor.getHtml());
+};
+</script>
--- a/VScode/src/constants/app.ts
+++ b/VScode/src/constants/app.ts
@@ -0,0 +1,40 @@
+import { getValueByKeys } from "@/utils/utils";
+import appPack from "../../package.json";
+/**
+ * app系统配置
+ */
+export default {
+  /**
+   * 系统版本号，自动读取package.json中的version字段
+   */
+  version: appPack.version,
+
+  /**
+   * 系统默认语言
+   */
+  defaultLang: "zh-CN",
+
+  /**
+   * api请求地址，这里读取env环境变量中的VITE_APP_API，优先使用全局变量window.SITE_CONFIG.apiURL钩子，支持在index.html中配置
+   */
+  api: getValueByKeys(window, "SITE_CONFIG.apiURL") || import.meta.env.VITE_APP_API,
+
+  /**
+   * 启用logo图标，logo尺寸32*32，存放路径@/assets/images/logo.png
+   */
+  enabledLogo: false,
+
+  /**
+   * 开启页面缓存
+   */
+  enabledKeepAlive: true,
+  /**
+   * 网络请求超时时间，单位毫秒
+   */
+  requestTimeout: 30000,
+
+  /**
+   * 全屏渲染的页面
+   */
+  fullscreenPages: ["/login"]
+};
--- a/VScode/src/constants/cacheKey.ts
+++ b/VScode/src/constants/cacheKey.ts
@@ -0,0 +1,13 @@
+/**
+ * token值
+ */
+export const CacheToken = "CacheToken";
+
+/**
+ * 语言
+ */
+export const CacheLang = "CacheLang";
+/**
+ * 主题
+ */
+export const CacheTheme = "CacheTheme";
--- a/VScode/src/constants/config.ts
+++ b/VScode/src/constants/config.ts
@@ -0,0 +1,16 @@
+/**
+ * 主题设置默认值
+ */
+export const themeSetting = {
+  sidebar: "dark",
+  topHeader: "primary",
+  themeColor: "#786C5E",
+  navLayout: "left",
+  contentFull: true,
+  logoAuto: false,
+  colorIcon: false,
+  sidebarUniOpened: true,
+  openTabsPage: true,
+  tabStyle: "default",
+  sidebarCollapse: false
+};
--- a/VScode/src/constants/enum.ts
+++ b/VScode/src/constants/enum.ts
@@ -0,0 +1,143 @@
+/**
+ * 页面渲染布局
+ */
+export enum EPageLayoutEnum {
+  "page",
+  "fullscreen"
+}
+
+/**
+ * 导航模式
+ */
+export enum ESidebarLayoutEnum {
+  /**
+   * 左侧导航
+   */
+  Left = "left",
+  /**
+   * 顶部导航
+   */
+  Top = "top",
+  /**
+   * 混合导航
+   */
+  Mix = "mix"
+}
+
+/**
+ * 主题设置
+ */
+export enum EThemeSetting {
+  /**
+   * 侧边栏风格
+   */
+  Sidebar = "sidebar",
+  /**
+   * 顶部风格
+   */
+  TopHeader = "topHeader",
+  /**
+   * 主题色
+   */
+  ThemeColor = "themeColor",
+  //---
+  /**
+   * 布局模式
+   */
+  NavLayout = "navLayout",
+  /**
+   * 内容是否铺满
+   */
+  ContentFull = "contentFull",
+  //---
+  /**
+   * logo宽度自动
+   */
+  LogoAuto = "logoAuto",
+  /**
+   * 多彩图标
+   */
+  ColorIcon = "colorIcon",
+  /**
+   * 侧边栏排他展开
+   */
+  SidebarUniOpened = "sidebarUniOpened",
+  /**
+   * 开启tab标签页
+   */
+  OpenTabsPage = "openTabsPage",
+  /**
+   * tab标签风格
+   */
+  TabStyle = "tabStyle",
+  //---
+  /**
+   * 侧边栏展开收起
+   */
+  SidebarCollapse = "sidebarCollapse"
+}
+
+/**
+ * 系统框架事件枚举
+ */
+export enum EMitt {
+  /**
+   * 全局加载
+   */
+  OnLoading = "onLoading",
+  /**
+   * 切换左侧侧边栏
+   */
+  OnSwitchLeftSidebar = "onSwitchLeftSidebar",
+  /**
+   * 推送菜单到tab标签页
+   */
+  OnPushMenuToTabs = "onPushMenuToTabs",
+  /**
+   * 设置主题
+   */
+  OnSetTheme = "onSetTheme",
+  /**
+   * 设置侧边栏排他展开
+   */
+  OnSetThemeNotUniqueOpened = "onSetTheme_not_uniqueOpened",
+  /**
+   * 设置开启标签页
+   */
+  OnSetThemeTabsPage = "onSetTheme_tabsPage",
+  /**
+   * 设置导航模式
+   */
+  OnSetNavLayout = "onSetNavLayout",
+  /**
+   * 刷新tab标签页
+   */
+  OnReloadTabPage = "onReloadTabPage",
+
+  //
+  /**
+   * 移动端打开侧边栏
+   */
+  OnMobileOpenSidebar = "onMobileOpenSidebar",
+
+  //
+  /**
+   * 混合导航选中顶部主菜单
+   */
+  OnSelectHeaderNavMenusByMixNav = "onSelectHeaderNavMenusByMixNav",
+
+  /**
+   * 关闭当前tab页
+   */
+  OnCloseCurrTab = "onCloseCurrTab"
+}
+
+/**
+ * 主题是key
+ */
+export enum EThemeColor {
+  /**
+   * 主题色
+   */
+  ThemeColor = "--color-primary"
+}
--- a/VScode/src/hooks/useView.ts
+++ b/VScode/src/hooks/useView.ts
@@ -0,0 +1,246 @@
+import app from "@/constants/app";
+import { EMitt, EThemeSetting } from "@/constants/enum";
+import { IObject, IViewHooks, IViewHooksOptions } from "@/types/interface";
+import { registerDynamicToRouterAndNext } from "@/router";
+import baseService from "@/service/baseService";
+import { getToken } from "@/utils/cache";
+import emits from "@/utils/emits";
+import { getThemeConfigCacheByKey } from "@/utils/theme";
+import { checkPermission, getDictLabel } from "@/utils/utils";
+import qs from "qs";
+import { onActivated, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useAppStore } from "@/store";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+/**
+ * 通用视图业务逻辑（列表/增删改查基本业务）
+ * @param props 自定义通用业务state
+ * @returns 返回响应式自定义state和通用方法
+ */
+const useView = (props: IViewHooksOptions | IObject): IViewHooks => {
+  const router = useRouter();
+  const route = useRoute();
+  const store = useAppStore();
+  const defaultOptions: IViewHooksOptions = {
+    createdIsNeed: true,
+    activatedIsNeed: false,
+    getDataListURL: "",
+    getDataListIsPage: false,
+    deleteURL: "",
+    deleteIsBatch: false,
+    deleteIsBatchKey: "id",
+    exportURL: "",
+    dataForm: {},
+    dataList: [],
+    order: "",
+    orderField: "",
+    page: 1,
+    limit: 10,
+    total: 0,
+    dataListLoading: false,
+    dataListSelections: [],
+    elTable: {}
+  };
+  const mergeDefaultStateToPageState = (options: IObject, props: IObject): IViewHooksOptions => {
+    for (const key in options) {
+      if (!Object.getOwnPropertyDescriptor(props, key)) {
+        props[key] = options[key];
+      }
+    }
+    return props;
+  };
+  const state = mergeDefaultStateToPageState(defaultOptions, props);
+  onMounted(() => {
+    if (state.createdIsNeed && !state.activatedIsNeed) {
+      viewFns.query();
+    }
+  });
+  onActivated(() => {
+    if (store.state.closedTabs.includes(store.state.activeTabName)) {
+      //如果当前打开的tab页面是之前已经关闭过的会存在keep-alive缓存
+      //这里采用临时刷新页面解决方案
+      //待vue官方开放缓存策略后再行实现 https://github.com/vuejs/vue-next/pull/4339   https://github.com/vuejs/rfcs/pull/284
+
+      const closedTabs = store.state.closedTabs;
+      store.updateState({
+        closedTabs: closedTabs.filter((x: string) => x !== store.state.activeTabName)
+      });
+      emits.emit(EMitt.OnReloadTabPage);
+    }
+
+    if (state.activatedIsNeed) {
+      viewFns.query();
+    }
+  });
+
+  //
+  const rejectFns = {
+    hasPermission(key: string) {
+      return checkPermission(store.state.permissions as string[], key);
+    },
+    getDictLabel(dictType: string, dictValue: number) {
+      return getDictLabel(store.state.dicts, dictType, dictValue);
+    }
+  };
+
+  //
+  const viewFns = {
+    // 获取数据列表
+    query() {
+      if (!state.getDataListURL) {
+        return;
+      }
+      state.dataListLoading = true;
+      baseService
+        .get(state.getDataListURL, {
+          order: state.order,
+          orderField: state.orderField,
+          page: state.getDataListIsPage ? state.page : null,
+          limit: state.getDataListIsPage ? state.limit : null,
+          ...state.dataForm
+        })
+        .then((res) => {
+          state.dataListLoading = false;
+          state.dataList = state.getDataListIsPage ? res.data.list : res.data;
+          state.total = state.getDataListIsPage ? res.data.total : 0;
+        })
+        .catch(() => {
+          state.dataListLoading = false;
+        });
+    },
+    // 多选
+    dataListSelectionChangeHandle(val: IObject[]) {
+      state.dataListSelections = val;
+    },
+    // 排序
+    dataListSortChangeHandle(data: IObject) {
+      if (!data.order || !data.prop) {
+        state.order = "";
+        state.orderField = "";
+        return false;
+      }
+      state.order = data.order.replace(/ending$/, "");
+      state.orderField = data.prop.replace(/([A-Z])/g, "_$1").toLowerCase();
+      viewFns.query();
+    },
+    // 分页, 每页条数
+    pageSizeChangeHandle(val: number) {
+      state.page = 1;
+      state.limit = val;
+      viewFns.query();
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle(val: number) {
+      state.page = val;
+      viewFns.query();
+    },
+    //搜索
+    getDataList() {
+      state.page = 1;
+      viewFns.query();
+    },
+    // 删除
+    deleteHandle(id?: string): Promise<any> {
+      return new Promise((resolve, reject) => {
+        if (
+          state.deleteIsBatch &&
+          !id &&
+          state.dataListSelections &&
+          state.dataListSelections.length <= 0
+        ) {
+          ElMessage.warning({
+            message: "请选择操作项",
+            duration: 500
+          });
+          return;
+        }
+        ElMessageBox.confirm("确定进行[删除]操作?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            baseService
+              .delete(
+                `${state.deleteURL}${state.deleteIsBatch ? "" : "/" + id}`,
+                state.deleteIsBatch
+                  ? id
+                    ? [id]
+                    : state.dataListSelections
+                    ? state.dataListSelections.map(
+                        (item: IObject) => state.deleteIsBatchKey && item[state.deleteIsBatchKey]
+                      )
+                    : {}
+                  : {}
+              )
+              .then((res) => {
+                ElMessage.success({
+                  message: "成功",
+                  duration: 500,
+                  onClose: () => {
+                    viewFns.query();
+                    resolve(true);
+                  }
+                });
+              });
+          })
+          .catch(() => {
+            //
+          });
+      });
+    },
+    // 导出
+    exportHandle() {
+      window.location.href = `${app.api}${state.exportURL}?${qs.stringify({
+        ...state.dataForm,
+        token: getToken()
+      })}`;
+      // baseService.download(state.exportURL, { ...state.dataForm, token: getToken() });
+    },
+    //关闭当前窗口
+    closeCurrentTab() {
+      if (getThemeConfigCacheByKey(EThemeSetting.OpenTabsPage)) {
+        emits.emit(EMitt.OnCloseCurrTab);
+      } else {
+        router.replace("/home");
+      }
+    },
+    // 处理流程路由
+    handleFlowRoute(data: IObject) {
+      const routeParams = {
+        path: `/flow/task-form`,
+        query: {
+          taskId: data.taskId,
+          processInstanceId: data.processInstanceId,
+          processDefinitionId: data.processDefinitionId,
+          showType: "taskHandle",
+          _mt: `${route.meta.title} - ${data.processDefinitionName}`
+        }
+      };
+      registerDynamicToRouterAndNext(routeParams);
+    },
+    // 查看流程详情
+    flowDetailRoute(data: IObject) {
+      const routeParams = {
+        path: `/flow/task-form`,
+        query: {
+          taskId: data.taskId,
+          processInstanceId: data.processInstanceId,
+          processDefinitionId: data.processDefinitionId,
+          showType: "detail",
+          _mt: `${route.meta.title} - ${data.processDefinitionName}`
+        }
+      };
+      registerDynamicToRouterAndNext(routeParams);
+    }
+  };
+
+  //
+  return {
+    ...viewFns,
+    ...rejectFns
+  };
+};
+
+export default useView;
--- a/VScode/src/layout/fullscreen-layout.vue
+++ b/VScode/src/layout/fullscreen-layout.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useRoute } from "vue-router";
+
+/**
+ * 全屏布局
+ */
+export default defineComponent({
+  name: "FullScreenLayout",
+  setup() {
+    const route = useRoute();
+    return { route };
+  }
+});
+</script>
+<template>
+  <div :class="`rr-fullscreen ${route.query.pop ? 'new-pop-window' : ''}`">
+    <router-view />
+  </div>
+</template>
--- a/VScode/src/layout/header/base-header.vue
+++ b/VScode/src/layout/header/base-header.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+import logo from "@/assets/images/logo.png";
+import { EMitt, ESidebarLayoutEnum, EThemeSetting } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { getThemeConfigCacheByKey } from "@/utils/theme";
+import { defineComponent, reactive } from "vue";
+import { useAppStore } from "@/store";
+import BaseSidebar from "../sidebar/base-sidebar.vue";
+import Breadcrumb from "./breadcrumb.vue";
+import CollapseSidebarBtn from "./collapse-sidebar-btn.vue";
+import Expand from "./expand.vue";
+import HeaderMixNavMenus from "./header-mix-nav-menus.vue";
+import Logo from "./logo.vue";
+import "@/assets/css/header.less";
+
+/**
+ * 顶部主区域
+ */
+export default defineComponent({
+  name: "Header",
+  components: { BaseSidebar, Breadcrumb, CollapseSidebarBtn, Expand, HeaderMixNavMenus, Logo },
+  setup() {
+    const store = useAppStore();
+    const state = reactive({
+      sidebarLayout: getThemeConfigCacheByKey(EThemeSetting.NavLayout)
+    });
+    emits.on(EMitt.OnSetNavLayout, (vl) => {
+      state.sidebarLayout = vl;
+    });
+    const onRefresh = () => {
+      emits.emit(EMitt.OnReloadTabPage);
+    };
+    return { store, state, onRefresh, logo, ESidebarLayoutEnum };
+  }
+});
+</script>
+<template>
+  <div class="rr-header-ctx">
+    <div class="rr-header-ctx-logo hidden-xs-only">
+      <logo :logoUrl="logo" logoName="BAITU"></logo>
+    </div>
+    <div class="rr-header-right">
+      <div class="rr-header-right-left">
+        <div class="rr-header-right-items rr-header-action" :style="`display:${state.sidebarLayout === ESidebarLayoutEnum.Top ? 'none' : ''}`">
+          <collapse-sidebar-btn></collapse-sidebar-btn>
+          <div @click="onRefresh" style="cursor: pointer">
+            <div class="el-badge">
+              <el-icon><refresh-right /></el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="rr-header-right-left-br ele-scrollbar-hide hidden-xs-only">
+          <base-sidebar v-if="state.sidebarLayout === ESidebarLayoutEnum.Top" mode="horizontal" :router="true"></base-sidebar>
+          <header-mix-nav-menus v-else-if="state.sidebarLayout === ESidebarLayoutEnum.Mix"></header-mix-nav-menus>
+          <breadcrumb v-else></breadcrumb>
+        </div>
+      </div>
+      <div style="flex-shrink: 0">
+        <expand :userName="store.state.user.username"></expand>
+      </div>
+    </div>
+  </div>
+</template>
--- a/VScode/src/layout/header/breadcrumb.vue
+++ b/VScode/src/layout/header/breadcrumb.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+import { IObject } from "@/types/interface";
+import { getValueByKeys } from "@/utils/utils";
+import { defineComponent, ref, watch } from "vue";
+import { RouteLocationMatched, useRouter } from "vue-router";
+
+/**
+ * 顶部面包屑
+ */
+export default defineComponent({
+  name: "Breadcrumb",
+  setup() {
+    const router = useRouter();
+    const breadcrumbs = ref<IObject[]>([]);
+    const { currentRoute } = router;
+    const firstRoute = (router.options.routes[0] || {}) as RouteLocationMatched;
+    const home: RouteLocationMatched = firstRoute.children && firstRoute.children.length > 0 ? (firstRoute.children[0] as RouteLocationMatched) : firstRoute;
+    watch(
+      () => currentRoute.value,
+      () => {
+        breadcrumbs.value = currentRoute.value.path !== home.path ? getValueByKeys(currentRoute.value, "meta.matched", []) : [];
+      }
+    );
+
+    return { breadcrumbs, currentRoute, home };
+  }
+});
+</script>
+<template>
+  <el-breadcrumb separator="/" style="padding-top: 4px">
+    <el-breadcrumb-item :to="{ path: home.path }"> 主页 </el-breadcrumb-item>
+    <el-breadcrumb-item v-for="x in breadcrumbs" :key="x.path">{{ currentRoute.query._mt || x.title || "" }} </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
--- a/VScode/src/layout/header/collapse-sidebar-btn.vue
+++ b/VScode/src/layout/header/collapse-sidebar-btn.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import SvgIcon from "@/components/base/svg-icon";
+import { EMitt, EThemeSetting } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { getThemeConfigCacheByKey, setThemeConfigToCache } from "@/utils/theme";
+import { defineComponent, reactive } from "vue";
+
+/**
+ * PC和移动端下的侧边栏展开收起按钮
+ */
+export default defineComponent({
+  name: "CollapseSidebarBtn",
+  components: { SvgIcon },
+  setup() {
+    const state = reactive({
+      collapseSidebar: getThemeConfigCacheByKey(EThemeSetting.SidebarCollapse)
+    });
+    const onClickSidebarSwitcher = () => {
+      const key = EThemeSetting.SidebarCollapse;
+      state.collapseSidebar = !state.collapseSidebar;
+      emits.emit(EMitt.OnSwitchLeftSidebar);
+      emits.emit(EMitt.OnSetTheme, [key, key + "-" + state.collapseSidebar]);
+      setThemeConfigToCache(key, state.collapseSidebar);
+    };
+    const onClickSidebarSwitcherByMobile = () => {
+      emits.emit(EMitt.OnMobileOpenSidebar);
+    };
+    return { state, onClickSidebarSwitcher, onClickSidebarSwitcherByMobile };
+  }
+});
+</script>
+<template>
+  <div class="hidden-xs-only" @click="onClickSidebarSwitcher">
+    <svg-icon :name="state.collapseSidebar ? 'indent' : 'outdent'"></svg-icon>
+  </div>
+  <div class="hidden-sm-and-up show-xs-only" @click="onClickSidebarSwitcherByMobile">
+    <svg-icon name="icon-indent"></svg-icon>
+  </div>
+</template>
--- a/VScode/src/layout/header/expand.vue
+++ b/VScode/src/layout/header/expand.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import SvgIcon from "@/components/base/svg-icon";
+import baseService from "@/service/baseService";
+import { useFullscreen } from "@vueuse/core";
+import { defineComponent } from "vue";
+import { useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+import userLogo from "@/assets/images/user.png";
+import "@/assets/css/header.less";
+import { ElMessageBox } from "element-plus";
+
+interface IExpand {
+  userName?: string;
+}
+
+/**
+ * 顶部右侧扩展区域
+ */
+export default defineComponent({
+  name: "Expand",
+  components: { SvgIcon },
+  props: {
+    userName: String
+  },
+  setup(props: IExpand) {
+    const router = useRouter();
+    const store = useAppStore();
+    const { isFullscreen, toggle } = useFullscreen();
+
+    const onClickUserMenus = (path: string) => {
+      if (path === "/login") {
+        ElMessageBox.confirm("确定进行[退出]操作?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            baseService.post("/logout").finally(() => {
+              router.push(path);
+            });
+          })
+          .catch(() => {
+            //
+          });
+      } else {
+        router.push(path);
+      }
+    };
+    return {
+      props,
+      store,
+      isFullscreen,
+      userLogo,
+      onClickUserMenus,
+      toggle
+    };
+  }
+});
+</script>
+<template>
+  <div class="rr-header-right-items">
+    <div @click="toggle" class="hidden-xs-only">
+      <span>
+        <svg-icon :name="isFullscreen ? 'tuichuquanping' : 'fullscreen2'"></svg-icon>
+      </span>
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center">
+      <img :src="userLogo" :alt="props.userName" style="width: 30px; height: 30px; border-radius: 50%; margin-top: 3px; margin-right: 5px" />
+      <el-dropdown @command="onClickUserMenus">
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item icon="lock" command="/user/password"> 修改密码 </el-dropdown-item>
+            <el-dropdown-item icon="switch-button" divided command="/login"> 退出登录 </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+        <span class="el-dropdown-link" style="display: flex">
+          {{ props.userName }}
+          <el-icon class="el-icon--right" style="font-size: 14px"><arrow-down /></el-icon>
+        </span>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
--- a/VScode/src/layout/header/header-mix-nav-menus.vue
+++ b/VScode/src/layout/header/header-mix-nav-menus.vue
@@ -0,0 +1,64 @@
+<script lang="ts">
+import { EMitt, ESidebarLayoutEnum, EThemeSetting } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { getThemeConfigCacheByKey } from "@/utils/theme";
+import { getValueByKeys } from "@/utils/utils";
+import { computed, defineComponent, reactive, watch } from "vue";
+import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+import BaseSidebar from "../sidebar/base-sidebar.vue";
+
+/**
+ * 顶部导航菜单，混合布局模式下用到
+ */
+export default defineComponent({
+  name: "HeaderMixNavMenus",
+  components: { BaseSidebar },
+  setup() {
+    const store = useAppStore();
+    const router = useRouter();
+    const route = useRoute();
+    const routers = router.options.routes;
+    const state = reactive({
+      currRoute: getValueByKeys(getValueByKeys(router.currentRoute.value.meta, "matched", [])[0], "path", "")
+    });
+    watch(
+      () => route.path,
+      () => {
+        if (getThemeConfigCacheByKey(EThemeSetting.NavLayout) === ESidebarLayoutEnum.Mix) {
+          const matchedRoute = getValueByKeys(getValueByKeys(router.currentRoute.value.meta, "matched", [])[0], "path", "");
+          if (matchedRoute) {
+            state.currRoute = matchedRoute;
+            emits.emit(EMitt.OnSelectHeaderNavMenusByMixNav, matchedRoute);
+          }
+        }
+      }
+    );
+    const topHeaderMenus = computed(() => {
+      const rs: any[] = [];
+      store.state.routes.forEach((x: RouteRecordRaw) => {
+        rs.push({
+          path: x.path,
+          children: [],
+          meta: x.meta ? x.meta : {}
+        });
+      });
+      return rs;
+    });
+    const onSelect = (path: string) => {
+      const curr = routers.find((x: RouteRecordRaw) => x.path === path);
+
+      if (!curr?.children?.length) {
+        router.push(path);
+      } else {
+        state.currRoute = path;
+        emits.emit(EMitt.OnSelectHeaderNavMenusByMixNav, path);
+      }
+    };
+    return { state, topHeaderMenus, onSelect };
+  }
+});
+</script>
+<template>
+  <base-sidebar mode="horizontal" :menus="topHeaderMenus" :router="false" :currRoute="state.currRoute" :is-mobile="false" :onSelect="onSelect"></base-sidebar>
+</template>
--- a/VScode/src/layout/header/logo.vue
+++ b/VScode/src/layout/header/logo.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import app from "@/constants/app";
+import { defineComponent } from "vue";
+interface ILogo {
+  logoUrl?: string;
+  logoName?: string;
+}
+
+/**
+ * 顶部logo
+ */
+export default defineComponent({
+  name: "Logo",
+  props: {
+    logoUrl: String,
+    logoName: {
+      type: String,
+      default: "logo"
+    }
+  },
+  setup(props: ILogo) {
+    return { props, app };
+  }
+});
+</script>
+
+<template>
+  <span :class="`rr-header-ctx-logo-img-wrap ${'enabled-logo-' + app.enabledLogo}`">
+    <!-- 支持显示图片logo或者产品名称缩写，二选一模式，通过注释开启功能，app.enabledLogo控制正常模式下图片logo是否显示，如果有图片logo，收起状态会强制显示图片logo -->
+    <!-- <img :src="props.logoUrl" class="rr-header-ctx-logo-img" :alt="props.logoName" /> -->
+    <span>人人</span>
+    <span class="rr-header-ctx-logo-line"></span>
+  </span>
+  <span class="rr-header-ctx-logo-text">{{ props.logoName }}</span>
+</template>
--- a/VScode/src/layout/index.vue
+++ b/VScode/src/layout/index.vue
@@ -0,0 +1,80 @@
+<script lang="ts">
+import { EMitt, ESidebarLayoutEnum, EThemeSetting } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { getThemeConfigCache, getThemeConfigCacheByKey, getThemeConfigToClass } from "@/utils/theme";
+import { getValueByKeys } from "@/utils/utils";
+import { useMediaQuery } from "@vueuse/core";
+import { computed, defineComponent, reactive } from "vue";
+import { RouteRecordRaw, useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+import BaseHeader from "./header/base-header.vue";
+import BaseSidebar from "./sidebar/base-sidebar.vue";
+import MobileSidebar from "./sidebar/mobile-sidebar.vue";
+import BaseView from "./view/base-view.vue";
+
+/**
+ * 多标签页布局
+ */
+export default defineComponent({
+  name: "Layout",
+  components: { BaseView, BaseHeader, BaseSidebar, MobileSidebar },
+  setup() {
+    const isMobile = useMediaQuery("(max-width: 768px)");
+    const themeCache = getThemeConfigCache();
+    const sidebarLayoutCache = getThemeConfigCacheByKey(EThemeSetting.NavLayout, themeCache);
+    const router = useRouter();
+    const store = useAppStore();
+    const state = reactive({
+      isShowNav: sidebarLayoutCache !== ESidebarLayoutEnum.Top,
+      sidebarLayout: sidebarLayoutCache,
+      themeClass: getThemeConfigToClass(themeCache),
+      loading: false,
+      mixLayoutRoutes: router.options.routes.find((x: RouteRecordRaw) => x.path === "/")?.children ?? ([] as RouteRecordRaw[])
+    });
+    const containerClassNames = computed(() =>
+      Object.values(state.themeClass)
+        .concat(isMobile.value ? ["ui-mobile"] : [])
+        .join(" ")
+    );
+    emits.on(EMitt.OnSelectHeaderNavMenusByMixNav, (path) => {
+      state.mixLayoutRoutes = store.state.routes.find((x: RouteRecordRaw) => x.path === path)?.children ?? [];
+    });
+    emits.on(EMitt.OnSetTheme, ([type, value]) => {
+      state.themeClass[type] = "ui-" + value;
+    });
+    emits.on(EMitt.OnSetNavLayout, (vl) => {
+      state.sidebarLayout = vl;
+      state.isShowNav = vl !== ESidebarLayoutEnum.Top;
+      if (vl === ESidebarLayoutEnum.Mix) {
+        const currRoute = getValueByKeys(getValueByKeys(router.currentRoute.value.meta, "matched", [])[0], "path", "");
+        state.mixLayoutRoutes = store.state.routes.find((x: RouteRecordRaw) => x.path === currRoute)?.children ?? [];
+      }
+    });
+    emits.on(EMitt.OnLoading, (vl) => {
+      state.loading = vl;
+    });
+    return { state, ESidebarLayoutEnum, containerClassNames };
+  }
+});
+</script>
+<template>
+  <el-container :class="`rr ${containerClassNames}`" v-loading="state.loading" element-loading-background="#0000" element-loading-lock="true" element-loading-custom-class="rr-loading">
+    <el-header class="rr-header" height="50px">
+      <base-header></base-header>
+    </el-header>
+    <el-container class="rr-body">
+      <el-aside v-if="state.isShowNav" class="rr-sidebar hidden-xs-only" width="auto">
+        <base-sidebar v-if="state.sidebarLayout === ESidebarLayoutEnum.Left" :router="true" mode="vertical" :is-mobile="false"></base-sidebar>
+        <base-sidebar v-else :menus="state.mixLayoutRoutes" :router="true" mode="vertical" :is-mobile="false"></base-sidebar>
+      </el-aside>
+      <div class="rr-sidebar rr-sidebar-mobile hidden-sm-and-up show-xs-only">
+        <mobile-sidebar></mobile-sidebar>
+      </div>
+      <el-container class="rr-view-container">
+        <el-main class="rr-view">
+          <base-view></base-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
--- a/VScode/src/layout/layout.vue
+++ b/VScode/src/layout/layout.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
--- a/VScode/src/layout/sidebar/base-sidebar.vue
+++ b/VScode/src/layout/sidebar/base-sidebar.vue
@@ -0,0 +1,162 @@
+<script lang="ts">
+import { themeSetting } from "@/constants/config";
+import { EMitt, EThemeSetting } from "@/constants/enum";
+import { IObject } from "@/types/interface";
+import Layout from "@/layout/layout.vue";
+import emits from "@/utils/emits";
+import { toValidRoutes } from "@/utils/router";
+import { getThemeConfigCacheByKey } from "@/utils/theme";
+import { useWindowSize } from "@vueuse/core";
+import { defineComponent, onMounted, reactive, ref, watch } from "vue";
+import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+import SidebarMenusItems from "./sidebar-menus-items.vue";
+import { getValueByKeys } from "@/utils/utils";
+
+/**
+ * 侧边栏导航菜单
+ */
+export default defineComponent({
+  name: "BaseSidebar",
+  components: { SidebarMenusItems },
+  props: {
+    mode: { type: String, default: "vertical" },
+    menus: Array,
+    currRoute: String,
+    router: Boolean,
+    onSelect: Function,
+    isMobile: Boolean
+  },
+  setup(props) {
+    const route = useRoute();
+    const router = useRouter();
+    const win = useWindowSize();
+    const store = useAppStore();
+    const defaultMenus = toValidRoutes((props.menus ?? store.state.routes) as RouteRecordRaw[]);
+    const getPopClassName = () => {
+      const sidebarCache = getThemeConfigCacheByKey(EThemeSetting.Sidebar);
+      return `rr-sidebar-menu-pop-${props.mode === "vertical" && sidebarCache === "dark" ? "dark" : "light"}`;
+    };
+    const state = reactive({
+      collapseSidebar: getThemeConfigCacheByKey(EThemeSetting.SidebarCollapse),
+      uniqueOpened: themeSetting.sidebarUniOpened,
+      windowWidth: win.width || 800,
+      hiddenIndex: -1,
+      rawMenus: defaultMenus,
+      menus: defaultMenus,
+      popClassName: getPopClassName(),
+      currRoute: props.currRoute ?? route.path
+    });
+    const elm = ref({} as IObject);
+    const li = ref({
+      widths: [] as number[]
+    });
+    const initComputeSidebarLayout = (width: number) => {
+      if (props.mode === "horizontal") {
+        //存储水平布局元素信息
+        const el = elm.value.$el;
+        const lis = el.querySelectorAll("li");
+        li.value.widths = [];
+        lis.forEach((x: Element) => {
+          li.value.widths.push(x.getBoundingClientRect().width);
+        });
+        computeSidebarLayout(width);
+      }
+    };
+
+    //
+    onMounted(() => {
+      initComputeSidebarLayout(state.windowWidth);
+    });
+    watch(
+      () => props.menus,
+      (vl) => {
+        const ms = toValidRoutes((vl ? vl : store.state.routes) as RouteRecordRaw[]);
+        state.menus = ms;
+        state.rawMenus = ms;
+      }
+    );
+    watch(
+      () => store.state.routes,
+      (vl) => {
+        const ms = toValidRoutes(vl as RouteRecordRaw[]);
+        state.rawMenus = ms;
+        state.menus = ms;
+      }
+    );
+    emits.on(EMitt.OnSwitchLeftSidebar, () => {
+      state.collapseSidebar = !state.collapseSidebar;
+    });
+    emits.on(EMitt.OnSetThemeNotUniqueOpened, (vl) => {
+      state.uniqueOpened = vl;
+    });
+    emits.on(EMitt.OnSetTheme, ([vl]) => {
+      if (vl === EThemeSetting.Sidebar) {
+        state.popClassName = getPopClassName();
+      }
+    });
+    watch(
+      () => route.path,
+      (vl) => {
+        const matchedRoute = getValueByKeys(getValueByKeys(router.currentRoute.value.meta, "matched", [])[0], "path", "");
+        if (!route.query.pop && matchedRoute) {
+          setTimeout(() => {
+            state.currRoute = vl;
+          }, 10);
+        }
+      }
+    );
+    watch(
+      () => state.windowWidth,
+      (vl) => {
+        computeSidebarLayout(vl);
+      }
+    );
+
+    const computeSidebarLayout = (windowWidth: number) => {
+      if (props.mode === "horizontal" && windowWidth > 768 && elm.value.$el) {
+        //菜单水平方向菜单过长，采用折叠效果
+        const width = elm.value.$el.parentNode.getBoundingClientRect().width;
+        let liWidth = 0;
+        let index = -1;
+        for (let i = 0; i < li.value.widths.length; i++) {
+          liWidth += li.value.widths[i];
+          if (liWidth > width) {
+            index = i - 1;
+            break;
+          }
+        }
+
+        state.hiddenIndex = index;
+        state.menus =
+          index > -1
+            ? state.rawMenus.slice(0, index).concat({
+                path: "/__more",
+                component: Layout,
+                meta: { title: "更多菜单", icon: false, isMore: true },
+                children: state.rawMenus.slice(index)
+              })
+            : state.rawMenus;
+      }
+    };
+
+    return { elm, props, state };
+  }
+});
+</script>
+
+<template>
+  <el-menu
+    ref="elm"
+    :default-active="props.currRoute ?? state.currRoute"
+    :mode="props.mode"
+    :collapse="props.isMobile ? false : props.mode === 'vertical' && state.collapseSidebar"
+    :router="props.router"
+    :unique-opened="state.uniqueOpened"
+    :onSelect="props.onSelect"
+    :collapse-transition="false"
+    class="rr-sidebar-menu"
+  >
+    <sidebar-menus-items :className="state.popClassName" :menus="state.menus" :hiddenIndex="state.hiddenIndex"></sidebar-menus-items>
+  </el-menu>
+</template>
--- a/VScode/src/layout/sidebar/mobile-sidebar.vue
+++ b/VScode/src/layout/sidebar/mobile-sidebar.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import { EMitt } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { defineComponent, reactive } from "vue";
+import BaseSidebar from "./base-sidebar.vue";
+import Logo from "../header/logo.vue";
+import logoUrl from "@/assets/images/logo.png";
+
+/**
+ * 移动端侧边栏菜单
+ */
+export default defineComponent({
+  name: "MobileSidebar",
+  components: { BaseSidebar, Logo },
+  setup() {
+    const state = reactive({
+      show: true
+    });
+    emits.on(EMitt.OnMobileOpenSidebar, () => {
+      state.show = true;
+    });
+    const onSelect = () => {
+      state.show = false;
+    };
+    return { state, onSelect, logoUrl };
+  }
+});
+</script>
+
+<template>
+  <el-drawer v-model="state.show" :append-to-body="false" size="230" :withHeader="false" direction="ltr" class="rr-setting-wrap">
+    <div class="rr-header-ctx-logo rr-header-ctx-logo-mobile">
+      <logo :logoUrl="logoUrl" logoName="人人开源"></logo>
+    </div>
+    <div class="rr-sidebar-mobile-inner" style="overflow: auto; height: calc(100vh - 50px); width: initial !important">
+      <base-sidebar :router="true" mode="vertical" :isMobile="true" :onSelect="onSelect"></base-sidebar>
+    </div>
+  </el-drawer>
+</template>
--- a/VScode/src/layout/sidebar/sidebar-menus-items.vue
+++ b/VScode/src/layout/sidebar/sidebar-menus-items.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import classNames from "classnames";
+import SvgIcon from "@/components/base/svg-icon";
+import { RouteRecordRaw } from "vue-router";
+
+export default defineComponent({
+  name: "SidebarMenusItems",
+  components: { SvgIcon },
+  props: {
+    menus: Array as PropType<RouteRecordRaw[]>,
+    hiddenIndex: Number,
+    className: String
+  },
+  setup(props) {
+    const getStyle = (index: number): string => {
+      const styles: Array<any> = [];
+      const isHidden = props.hiddenIndex ? props.hiddenIndex > -1 && index > props.hiddenIndex : false;
+      styles.push("display:" + (isHidden ? "none" : "block"));
+      return styles.join(";");
+    };
+    return { props, classNames, getStyle };
+  }
+});
+</script>
+<template>
+  <template v-for="(x, index) in props.menus || []" :key="x.path">
+    <el-sub-menu v-if="x.children && x.children.length > 0" :index="x.path" :popper-class="props.className" :class="classNames({ isMore: x.meta?.isMore })" :style="getStyle(index)">
+      <template #title>
+        <el-icon v-if="x.meta?.icon !== false">
+          <svg-icon :name="`${x.meta?.icon || 'icon-file-fill'}`"></svg-icon>
+        </el-icon>
+        <span>
+          <a>{{ x.meta?.title }}</a>
+        </span>
+      </template>
+      <sidebar-menus-items :menus="x.children"></sidebar-menus-items>
+    </el-sub-menu>
+    <el-menu-item v-else :index="x.meta?.isNewPage ? x.path : x.path" :class="classNames({ isLink: !!x.meta?.isNewPage, isMore: x.meta?.isMore })" :style="getStyle(index)">
+      <template #title>
+        <a v-if="x.meta?.isNewPage" :href="`${x.meta.url}`" target="_blank" rel="opener">
+          {{ x.meta.title }}
+        </a>
+        <a v-else>{{ x.meta?.title }}</a>
+      </template>
+      <el-icon v-if="x.meta?.icon !== false">
+        <svg-icon :name="`${x.meta?.icon || 'icon-file-fill'}`"></svg-icon>
+      </el-icon>
+    </el-menu-item>
+  </template>
+</template>
--- a/VScode/src/layout/view/base-view.vue
+++ b/VScode/src/layout/view/base-view.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+import app from "@/constants/app";
+import { EMitt, EThemeSetting } from "@/constants/enum";
+import emits from "@/utils/emits";
+import { getThemeConfigCacheByKey } from "@/utils/theme";
+import { defineComponent, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore } from "@/store";
+import Tabs from "./tabs.vue";
+
+/**
+ * 业务内容视图框架
+ */
+export default defineComponent({
+  name: "View",
+  components: { Tabs },
+  setup() {
+    const store = useAppStore();
+    const route = useRoute();
+    const state = reactive({
+      openTabsPage: getThemeConfigCacheByKey(EThemeSetting.OpenTabsPage)
+    });
+    const routerKeys = ref({} as any);
+    emits.on(EMitt.OnSetThemeTabsPage, (vl) => {
+      state.openTabsPage = vl;
+    });
+    emits.on(EMitt.OnReloadTabPage, () => {
+      routerKeys.value[route.fullPath] = new Date().getTime();
+    });
+    return { state, store, enabledKeepAlive: app.enabledKeepAlive, routerKeys };
+  }
+});
+</script>
+
+<template>
+  <tabs v-if="state.openTabsPage" :tabs="store.state.tabs" :activeTabName="store.state.activeTabName"></tabs>
+  <div class="rr-view-ctx">
+    <el-card shadow="never" class="rr-view-ctx-card">
+      <router-view v-slot="{ Component }">
+        <keep-alive v-if="enabledKeepAlive">
+          <component :is="Component" :key="routerKeys[$route.fullPath] || $route.fullPath" />
+        </keep-alive>
+        <component :is="Component" v-if="!enabledKeepAlive" />
+      </router-view>
+    </el-card>
+  </div>
+</template>
--- a/VScode/src/layout/view/tabs.vue
+++ b/VScode/src/layout/view/tabs.vue
@@ -0,0 +1,155 @@
+<script lang="ts">
+import SvgIcon from "@/components/base/svg-icon";
+import { EMitt } from "@/constants/enum";
+import { IObject } from "@/types/interface";
+import emits from "@/utils/emits";
+import { arrayToObject } from "@/utils/utils";
+import { ElMessage } from "element-plus";
+import { findIndex } from "lodash";
+import { defineComponent, reactive, watch } from "vue";
+import { RouteLocationMatched, useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+
+/**
+ * tab标签页
+ */
+export default defineComponent({
+  name: "Tabs",
+  components: { SvgIcon },
+  props: {
+    tabs: Array,
+    activeTabName: String
+  },
+  setup(props) {
+    const ops = [
+      { label: "关闭当前标签页", value: 5, icon: "close" },
+      { label: "关闭其他标签页", value: 1, icon: "close" },
+      { label: "关闭全部标签页", value: 4, icon: "circle-close" }
+    ];
+    const router = useRouter();
+    const store = useAppStore();
+    const firstRoute = (router.options.routes[0] || {}) as RouteLocationMatched;
+    const home: RouteLocationMatched = firstRoute.children && firstRoute.children.length > 0 ? (firstRoute.children[0] as RouteLocationMatched) : firstRoute;
+    const defaultTab = { label: "", value: home.path };
+    const state = reactive({
+      activeTabName: props.activeTabName || defaultTab.value,
+      tabs: (props.tabs && props.tabs.length ? props.tabs : [defaultTab]) as IObject[]
+    });
+    watch(
+      () => state.tabs,
+      (res) => {
+        store.updateState({ tabs: res });
+      },
+      { deep: true }
+    );
+    emits.on(EMitt.OnPushMenuToTabs, (route) => {
+      const path: string = route.value;
+      if (path.includes("/error")) {
+        return;
+      }
+      const tabKeys: IObject<number> = arrayToObject(state.tabs, "value", () => 1);
+      if (!tabKeys[path]) {
+        state.tabs.push(route);
+      }
+      if (state.activeTabName !== path) {
+        state.activeTabName = path;
+      }
+    });
+    emits.on(EMitt.OnCloseCurrTab, () => {
+      onClose(5);
+    });
+    const onTabClick = (tab: any) => {
+      tab.props.name && router.push(tab.props.name);
+    };
+    const onTabRemove = (targetName: string) => {
+      const index = findIndex(state.tabs, (x) => x.value === targetName);
+      if (state.tabs.length > 1) {
+        updateClosedTabs([...store.state.closedTabs, targetName], false);
+        if (state.activeTabName === targetName) {
+          const toIndex = index === 0 ? index + 1 : index - 1;
+          state.activeTabName = state.tabs[toIndex].value;
+          router.push(state.activeTabName);
+        }
+        state.tabs.splice(index, 1);
+      } else {
+        ElMessage({ type: "error", message: "只剩下一个标签页，不支持关闭", offset: 0 });
+      }
+    };
+    const updateClosedTabs = (closedTabs: any[], isTransform = true) => {
+      if (isTransform) {
+        closedTabs = closedTabs.map((x) => x.value);
+      }
+      store.updateState({ closedTabs });
+    };
+    const onClose = (value: number) => {
+      let index = null;
+      const rawTabs = state.tabs;
+      switch (value) {
+        case 1:
+          //其他
+          state.tabs = state.tabs.filter((x) => [home.path, state.activeTabName].includes(x.value));
+          updateClosedTabs(rawTabs.filter((x) => ![home.path, state.activeTabName].includes(x.value)));
+          break;
+        case 2:
+          //右侧
+          index = findIndex(state.tabs, (x) => x.value === state.activeTabName);
+          state.tabs.splice(index + 1, state.tabs.length - (index + 1));
+          updateClosedTabs(rawTabs.slice(index + 1));
+          break;
+        case 3:
+          //左侧
+          index = findIndex(state.tabs, (x) => x.value === state.activeTabName);
+          state.tabs.splice(1, index - 1);
+          updateClosedTabs(rawTabs.slice(1, index - 1));
+          break;
+        case 4:
+          //全部
+          state.tabs = [defaultTab];
+          state.activeTabName = defaultTab.value;
+          updateClosedTabs(rawTabs);
+          router.push(state.activeTabName);
+          break;
+        case 5:
+          //当前
+          if (state.activeTabName !== defaultTab.value) {
+            updateClosedTabs([...store.state.closedTabs, state.activeTabName], false);
+            index = findIndex(state.tabs, (x) => x.value === state.activeTabName);
+            state.tabs.splice(index, 1);
+            state.activeTabName = state.tabs[state.tabs.length - 1].value;
+            router.push(state.activeTabName);
+          }
+          break;
+        default:
+          break;
+      }
+    };
+    return { state, onTabClick, onTabRemove, home, onClose, ops };
+  }
+});
+</script>
+<template>
+  <div class="rr-view-tab-wrap">
+    <el-tabs class="rr-view-tab" v-model="state.activeTabName" @tab-click="onTabClick" @tab-remove="onTabRemove">
+      <el-tab-pane :name="home.path" :closable="false">
+        <template #label>
+          <!-- 文字主页和图标主页tab -->
+          <!-- {{ t("ui.router.pageHome") }} -->
+          <svg-icon name="home"></svg-icon>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane v-for="x in state.tabs.slice(1)" :key="x.value" :label="x.label" :name="x.value" :closable="true"></el-tab-pane>
+    </el-tabs>
+    <el-dropdown trigger="click" placement="bottom-end" class="rr-view-tab-ops" @command="onClose">
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="x in ops" :key="x.value" :icon="x.icon" :command="x.value">
+            {{ x.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+      <span class="el-dropdown-link">
+        <el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </span>
+    </el-dropdown>
+  </div>
+</template>
--- a/VScode/src/main.ts
+++ b/VScode/src/main.ts
@@ -0,0 +1,34 @@
+import "@/assets/icons/iconfont/iconfont.js";
+import RenDeptTree from "@/components/ren-dept-tree";
+import RenRadioGroup from "@/components/ren-radio-group";
+import RenRegionTree from "@/components/ren-region-tree";
+import RenSelect from "@/components/ren-select";
+import ElementPlus from "element-plus";
+import "element-plus/theme-chalk/display.css";
+import "element-plus/theme-chalk/index.css";
+import locale from "element-plus/es/locale/lang/zh-cn";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import * as ElementPlusIcons from "@element-plus/icons-vue";
+
+import axios from "axios";
+import "virtual:svg-icons-register";
+
+const app = createApp(App);
+Object.keys(ElementPlusIcons).forEach((iconName) => {
+  app.component(iconName, ElementPlusIcons[iconName as keyof typeof ElementPlusIcons]);
+});
+
+app
+  .use(createPinia())
+  .use(router)
+  .use(RenRadioGroup)
+  .use(RenSelect)
+  .use(RenDeptTree)
+  .use(RenRegionTree)
+  .use(ElementPlus, { size: "default", locale: locale })
+  .mount("#app");
+
+window.axios = axios;
--- a/VScode/src/router/base.ts
+++ b/VScode/src/router/base.ts
@@ -0,0 +1,52 @@
+import Layout from "@/layout/layout.vue";
+import Error from "@/views/error.vue";
+import { RouteRecordRaw } from "vue-router";
+import Login from "@/views/login.vue";
+import Iframe from "@/views/iframe.vue";
+
+/**
+ * 框架基础路由
+ */
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    component: Layout,
+    redirect: "/home",
+    meta: { title: "工作台", icon: "icon-desktop" },
+    children: [
+      {
+        path: "/home",
+        component: () => import("@/views/home.vue"),
+        meta: { title: "主页", icon: "icon-home" }
+      }
+    ]
+  },
+  {
+    path: "/login",
+    component: Login,
+    meta: { title: "登录", isNavigationMenu: false }
+  },
+  {
+    path: "/user/password",
+    component: () => import("@/views/sys/user-update-password.vue"),
+    meta: { title: "修改密码", requiresAuth: true, isNavigationMenu: false }
+  },
+  {
+    path: "/iframe/:id?",
+    component: Iframe,
+    meta: { title: "iframe", isNavigationMenu: false }
+  },
+  {
+    path: "/error",
+    name: "error",
+    component: Error,
+    meta: { title: "错误页面", isNavigationMenu: false }
+  },
+  {
+    path: "/:path(.*)*",
+    redirect: { path: "/error", query: { to: 404 }, replace: true },
+    meta: { isNavigationMenu: false }
+  }
+];
+
+export default routes;
--- a/VScode/src/router/index.ts
+++ b/VScode/src/router/index.ts
@@ -0,0 +1,187 @@
+import { IObject } from "@/types/interface";
+import { useAppStore } from "@/store";
+import { getToken } from "@/utils/cache";
+import { getBaseRouteToMeta, registerToRouter } from "@/utils/router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import {
+  createRouter,
+  createWebHashHistory,
+  RouteLocationNormalized,
+  RouteRecordRaw
+} from "vue-router";
+import baseRoutes from "./base";
+import emits from "@/utils/emits";
+import { EMitt } from "@/constants/enum";
+
+interface dynamicRouteParams {
+  path: string;
+  query?: IObject;
+  mete?: IObject;
+}
+
+NProgress.configure({ showSpinner: false });
+
+const router = createRouter({
+  history: createWebHashHistory(), //createWebHashHistory() hash模式
+  routes: baseRoutes
+});
+
+// 路由加载前
+router.beforeEach((to, from, next) => {
+  //外链
+  if (to.meta.isNewPage) {
+    if (to.query.pop !== "true") {
+      next(undefined);
+      return false;
+    }
+  }
+
+  const store = useAppStore();
+
+  //token
+  const token = getToken();
+  const isPop = to.query.pop === "true"; //新窗口打开内页
+  NProgress.start();
+  if (to.path !== "/login") {
+    if (store.state.routes.length) {
+      if (to.name === "error") {
+        const isMatched = autoRegisterDynamicToRouterAndNext(to);
+        if (!isMatched) {
+          store.updateState({ appIsRender: true, appIsReady: true });
+          next();
+        }
+      } else {
+        if (!to.query.pop) {
+          const routeMeta: IObject = store.state.routeToMeta[to.path];
+          emits.emit(EMitt.OnPushMenuToTabs, {
+            label: to.query._mt || routeMeta.title || to.path,
+            value: to.fullPath,
+            mete: routeMeta
+          });
+        }
+        store.updateState({ appIsRender: true, appIsReady: true });
+        next();
+      }
+    } else {
+      if (token) {
+        store.initApp().then((res: Array<RouteRecordRaw>) => {
+          const mergeRoute = baseRoutes.concat(res);
+          router.options.routes = mergeRoute;
+          registerToRouter(router, mergeRoute);
+          if (!to.matched.length) {
+            registerDynamicToRouterAndNext({ path: to.path, query: to.query });
+          }
+          store.updateState({
+            appIsReady: true,
+            routes: mergeRoute,
+            routeToMeta: { ...store.state.routeToMeta, ...getBaseRouteToMeta(baseRoutes) }
+          });
+          setTimeout(() => {
+            store.updateState({ appIsRender: true, appIsLogin: true });
+          }, 600);
+          next({ ...to, replace: true });
+        });
+      } else {
+        if (isPop) {
+          if (!to.matched.length) {
+            registerDynamicToRouterAndNext({ path: to.path, query: to.query });
+            store.updateState({ appIsRender: true, appIsReady: true });
+            next(to.fullPath);
+          } else {
+            store.updateState({ appIsRender: true, appIsReady: true });
+            if (to.meta.requiresAuth) {
+              next("/login");
+            } else {
+              next();
+            }
+          }
+        } else {
+          next("/login");
+        }
+      }
+    }
+  } else {
+    store.updateState({ appIsReady: true, appIsRender: true });
+    next();
+  }
+});
+
+// 路由加载后
+router.afterEach(() => {
+  NProgress.done();
+});
+
+/**
+ * 获取系统视图路径映射
+ * @returns
+ */
+export const getSysRouteMap = (): IObject => {
+  return import.meta.glob("/src/views/**/*.vue");
+};
+
+/**
+ * 根据路由path转换为系统视图组件路径
+ * @param path
+ * @returns
+ */
+export const toSysViewComponentPath = (path: string): string => {
+  path = path.replace("_", "-");
+  return `/src/views${path}.vue`;
+};
+/**
+ * 自动注册路由
+ * @param to
+ * @returns
+ */
+const autoRegisterDynamicToRouterAndNext = (to: RouteLocationNormalized): boolean => {
+  if (to.redirectedFrom) {
+    const path = to.redirectedFrom.path;
+    const component = matchedSysRouteComponent(path);
+    if (component) {
+      registerToRouter(router, [
+        {
+          path: path,
+          name: path,
+          component,
+          redirect: ""
+        }
+      ]);
+      router.push(to.redirectedFrom);
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * 寻找视图组件
+ * @param path
+ * @returns
+ */
+const matchedSysRouteComponent = (path: string): any => {
+  const sysRouteMap = getSysRouteMap();
+  const component = sysRouteMap[toSysViewComponentPath(path)];
+  if (!component) {
+    console.error("实时注册动态路由失败，未找到组件路径", path);
+  }
+  return component;
+};
+
+/**
+ * 实时注册动态路由并直接跳转过去
+ * @param route
+ */
+export const registerDynamicToRouterAndNext = (route: dynamicRouteParams): void => {
+  const component = matchedSysRouteComponent(route.path);
+  const newRoute: RouteRecordRaw = {
+    path: route.path,
+    name: route.path,
+    component,
+    redirect: !component ? { path: "/error", query: { to: 404 }, replace: true } : ""
+  };
+  registerToRouter(router, [newRoute]);
+  router.push(route);
+};
+
+export default router;
--- a/VScode/src/service/baseService.ts
+++ b/VScode/src/service/baseService.ts
@@ -0,0 +1,65 @@
+import { IHttpResponse, IObject } from "@/types/interface";
+import http from "../utils/http";
+
+/**
+ * 常用CRUD
+ */
+export default {
+  /**
+   * 删除
+   * @param path
+   * @param params
+   * @returns
+   */
+  delete(path: string, params: IObject): Promise<IHttpResponse> {
+    return http({
+      url: path,
+      data: params,
+      method: "DELETE"
+    });
+  },
+  get(path: string, params?: IObject, headers?: IObject): Promise<IHttpResponse> {
+    return new Promise((resolve, reject) => {
+      http({
+        url: path,
+        params,
+        headers,
+        method: "GET"
+      })
+        .then(resolve)
+        .catch((error) => {
+          if (error !== "-999") {
+            reject(error);
+          }
+        });
+    });
+  },
+  put(path: string, params?: IObject, headers?: IObject): Promise<IHttpResponse> {
+    return http({
+      url: path,
+      data: params,
+      headers: {
+        "Content-Type": "application/json;charset=UTF-8",
+        ...headers
+      },
+      method: "PUT"
+    });
+  },
+  /**
+   * 通用post方法
+   * @param path
+   * @param body
+   * @returns
+   */
+  post(path: string, body?: IObject, headers?: IObject): Promise<IHttpResponse> {
+    return http({
+      url: path,
+      method: "post",
+      headers: {
+        "Content-Type": "application/json;charset=UTF-8",
+        ...headers
+      },
+      data: body
+    });
+  }
+};
--- a/VScode/src/store/index.ts
+++ b/VScode/src/store/index.ts
@@ -0,0 +1,83 @@
+import { CacheToken } from "@/constants/cacheKey";
+import { IObject } from "@/types/interface";
+import { getSysRouteMap } from "@/router";
+import baseService from "@/service/baseService";
+import { removeCache } from "@/utils/cache";
+import { mergeServerRoute } from "@/utils/router";
+import { defineStore } from "pinia";
+
+export const useAppStore = defineStore("useAppStore", {
+  state: () => ({
+    state: {
+      appIsLogin: false, //是否登录
+      appIsReady: false, //app数据是否就绪
+      appIsRender: false, //app是否开始渲染内容
+      permissions: [], //权限集合
+      user: {
+        createDate: "",
+        deptId: "",
+        deptName: "",
+        email: "",
+        gender: 0,
+        headUrl: "",
+        id: "",
+        mobile: "",
+        postIdList: "",
+        realName: "",
+        roleIdList: "",
+        status: 0,
+        superAdmin: 0,
+        username: ""
+      }, //用户信息
+      dicts: [], //字典
+      routes: [], //最终的路由集合
+      menus: [], //菜单集合
+      routeToMeta: {}, //url对应标题meta信息
+      tabs: [], //tab标签页集合
+      activeTabName: "", //tab当前焦点页
+      closedTabs: [] //存储已经关闭过的tab
+    } as IObject
+  }),
+  actions: {
+    updateState(data: IObject) {
+      Object.keys(data).forEach((x: string) => {
+        this.state[x] = data[x];
+      });
+    },
+    initApp() {
+      return Promise.all([
+        baseService.get("/sys/menu/nav"), //加载菜单
+        baseService.get("/sys/menu/permissions"), //加载权限
+        baseService.get("/sys/user/info"), //加载用户信息
+        baseService.get("/sys/dict/type/all") //加载字典
+      ]).then(([menus, permissions, user, dicts]) => {
+        if (user.code !== 0) {
+          console.error("初始化用户数据错误", user.msg);
+        }
+        const [routes, routeToMeta] = mergeServerRoute(menus.data || [], getSysRouteMap());
+        this.updateState({
+          permissions: permissions.data || [],
+          user: user.data || {},
+          dicts: dicts.data || [],
+          routeToMeta: routeToMeta || {},
+          menus: []
+        });
+        return routes;
+      });
+    },
+    //退出
+    logout() {
+      removeCache(CacheToken, true);
+      this.updateState({
+        appIsLogin: false,
+        permissions: [],
+        user: {},
+        dicts: [],
+        menus: [],
+        routes: [],
+        tabs: [],
+        activeTabName: ""
+      });
+    }
+  }
+});
--- a/VScode/src/types/env.d.ts
+++ b/VScode/src/types/env.d.ts
@@ -0,0 +1,6 @@
+interface ImportMetaEnv {
+  /**
+   * api接口环境
+   */
+  VITE_APP_API: string;
+}
--- a/VScode/src/types/index.d.ts
+++ b/VScode/src/types/index.d.ts
@@ -0,0 +1,3 @@
+declare interface Window {
+  axios: any;
+}
--- a/VScode/src/types/interface.ts
+++ b/VScode/src/types/interface.ts
@@ -0,0 +1,176 @@
+export interface IFunction<T = any> {
+  (x?: any): T;
+}
+
+export interface IObject<T = any> {
+  [key: string]: T;
+}
+
+export interface IHttpResponse {
+  code: number;
+  msg: string;
+  data: any;
+}
+
+/**
+ * 菜单
+ */
+export interface IServerMenus {
+  createDate: string;
+  icon: string | boolean;
+  id: string;
+  name: string;
+  parentName: string;
+  permissions: string;
+  pid: string;
+  sort: number;
+  type: number;
+  url: string;
+  openStyle: number;
+  redirect?: string;
+  children?: IServerMenus[];
+}
+
+export interface ICacheOptions {
+  /**
+   * 是否取值后立即删除缓存
+   */
+  isDelete?: boolean;
+  /**
+   * 是否采用JSON格式化缓存值
+   */
+  isParse?: boolean;
+  /**
+   * 是否采用会话缓存介质
+   */
+  isSessionStorage?: boolean;
+}
+
+export interface IViewHooksOptions {
+  //  设置属性
+  /**
+   * 此页面是否在创建时，调用查询数据列表接口？
+   */
+  createdIsNeed?: boolean;
+  /**
+   * 此页面是否在激活（进入）时，调用查询数据列表接口？
+   */
+  activatedIsNeed?: boolean;
+  /**
+   * 数据列表接口，API地址
+   */
+  getDataListURL?: string;
+  /**
+   * 数据列表接口，是否需要分页？
+   */
+  getDataListIsPage?: boolean;
+  /**
+   * 删除接口，API地址
+   */
+  deleteURL?: "";
+  /**
+   * 删除接口，是否需要批量？
+   */
+  deleteIsBatch?: boolean;
+  /**
+   * 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
+   */
+  deleteIsBatchKey?: string;
+  /**
+   * 导出接口，API地址
+   */
+  exportURL?: string;
+
+  /**
+   * 查询条件
+   */
+  dataForm?: IObject;
+  /**
+   * 数据列表
+   */
+  dataList?: IObject[];
+  /**
+   * 排序，asc／desc
+   */
+  order?: string;
+  /**
+   * 排序，字段
+   */
+  orderField?: string;
+  /**
+   * 当前页码
+   */
+  page?: number;
+  /**
+   * 每页数
+   */
+  limit?: number;
+  /**
+   * 总条数
+   */
+  total?: number;
+  /**
+   * 数据列表，loading状态
+   */
+  dataListLoading?: boolean;
+  /**
+   * 数据列表，多选项
+   */
+  dataListSelections?: IObject[];
+  elTable?: IObject;
+}
+
+export interface IViewHooks extends IViewHooksOptions, IObject {
+  /**
+   * 检查权限
+   */
+  hasPermission: (key: string) => boolean;
+  /**
+   * 获取字典名称
+   */
+  getDictLabel: (dictType: string, dictValue: number) => string | number;
+  /**
+   * 查询列表记录
+   */
+  query: () => void;
+  /**
+   * 列表多选事件
+   */
+  dataListSelectionChangeHandle: (list: IObject[]) => void;
+  /**
+   * 列表排序事件
+   */
+  dataListSortChangeHandle: (sort: IObject) => void;
+  /**
+   * 列表切换每页显示数量事件
+   */
+  pageSizeChangeHandle: (pageSize: number) => void;
+  /**
+   * 列表分页事件
+   */
+  pageCurrentChangeHandle: (pageIndex: number) => void;
+  /**
+   * 列表搜索事件
+   */
+  getDataList: () => void;
+  /**
+   * 列表删除事件
+   */
+  deleteHandle: (id?: string) => Promise<any>;
+  /**
+   * 列表导出事件
+   */
+  exportHandle: () => void;
+  /**
+   * 关闭当前tab页
+   */
+  closeCurrentTab: () => void;
+  /**
+   * 处理流程
+   */
+  handleFlowRoute: (e: IObject) => void;
+  /**
+   * 查看流程详情
+   */
+  flowDetailRoute: (e: IObject) => void;
+}
--- a/VScode/src/types/shims.d.ts
+++ b/VScode/src/types/shims.d.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";
+declare module "*.gif";
+
+declare module "*.less";
+
+declare global {
+  interface ImportMeta {
+    env: Record<string, unknown>;
+    globEager<T = unknown>(globPath: string): Record<string, T>;
+  }
+}
+
+declare module "virtual:*" {
+  const result: any;
+  export default result;
+}
--- a/VScode/src/utils/cache.ts
+++ b/VScode/src/utils/cache.ts
@@ -0,0 +1,71 @@
+import { CacheToken } from "@/constants/cacheKey";
+import { ICacheOptions } from "@/types/interface";
+import { isNullOrUndefined } from "./utils";
+
+const fix = "v1@";
+
+/**
+ * 存储介质适配器
+ * @param isSessionStorage
+ * @returns
+ */
+const cacheAdapter = (isSessionStorage?: boolean) => {
+  return isSessionStorage ? sessionStorage : localStorage;
+};
+
+/**
+ * 取缓存值
+ * @param {*} key
+ * @param {*} options
+ */
+export const getCache = (key: string, options?: ICacheOptions, defaultValue?: unknown): any => {
+  key = fix + key;
+  options = { isParse: true, isDelete: false, ...options };
+  try {
+    const value = cacheAdapter(options.isSessionStorage).getItem(key);
+    if (options.isDelete) {
+      cacheAdapter(options.isSessionStorage).removeItem(key);
+    }
+    return isNullOrUndefined(value)
+      ? defaultValue
+      : options.isParse
+      ? value
+        ? JSON.parse(value)
+        : defaultValue
+      : value;
+  } catch (error) {
+    console.error("getCache", error);
+    return defaultValue;
+  }
+};
+
+/**
+ * 设置缓存值
+ * @param {*} key
+ * @param {*} value
+ */
+export const setCache = (
+  key: string,
+  value: string | Record<string, unknown> | Array<any>[],
+  isSessionStorage?: boolean
+): void => {
+  key = fix + key;
+  cacheAdapter(isSessionStorage).setItem(
+    key,
+    typeof value === "object" ? JSON.stringify(value) : value
+  );
+};
+
+/**
+ * 清除缓存
+ * @param key
+ * @param isSessionStorage
+ */
+export const removeCache = (key: string, isSessionStorage?: boolean): void => {
+  key = fix + key;
+  cacheAdapter(isSessionStorage).removeItem(key);
+};
+
+export const getToken = (): string => {
+  return getCache(CacheToken, { isSessionStorage: true }, {})["token"];
+};
--- a/VScode/src/utils/emits.ts
+++ b/VScode/src/utils/emits.ts
@@ -0,0 +1,6 @@
+import mitt, { Emitter } from "mitt";
+
+/**
+ * 事件总线
+ */
+export default mitt() as Emitter;
--- a/VScode/src/utils/http.ts
+++ b/VScode/src/utils/http.ts
@@ -0,0 +1,90 @@
+import app from "@/constants/app";
+import { IHttpResponse, IObject } from "@/types/interface";
+import router from "@/router";
+import axios, { AxiosRequestConfig } from "axios";
+import qs from "qs";
+import { getToken } from "./cache";
+import { getValueByKeys } from "./utils";
+import { ElMessage } from "element-plus";
+
+const http = axios.create({
+  baseURL: app.api,
+  timeout: app.requestTimeout
+});
+
+http.interceptors.request.use(
+  function (config: any) {
+    config.headers["X-Requested-With"] = "XMLHttpRequest";
+    config.headers["Request-Start"] = new Date().getTime();
+    const token = getToken();
+    if (token) {
+      config.headers["token"] = token;
+    }
+    if (config.method?.toUpperCase() === "GET") {
+      config.params = { ...config.params, _t: new Date().getTime() };
+    }
+    if (Object.values(config.headers).includes("application/x-www-form-urlencoded")) {
+      config.data = qs.stringify(config.data);
+    }
+    return config;
+  },
+  function (error) {
+    return Promise.reject(error);
+  }
+);
+http.interceptors.response.use(
+  (response) => {
+    // 响应成功
+    if (response.data.code === 0) {
+      return response;
+    }
+
+    // 错误提示
+    ElMessage.error(response.data.msg);
+
+    if (response.data.code === 401) {
+      //自定义业务状态码
+      redirectLogin();
+    }
+
+    return Promise.reject(new Error(response.data.msg || "Error"));
+  },
+  (error) => {
+    const status = getValueByKeys(error, "response.status", 500);
+    const httpCodeLabel: IObject<string> = {
+      400: "请求参数错误",
+      401: "未授权，请登录",
+      403: "拒绝访问",
+      404: `请求地址出错: ${getValueByKeys(error, "response.config.url", "")}`,
+      408: "请求超时",
+      500: "API接口报500错误",
+      501: "服务未实现",
+      502: "网关错误",
+      503: "服务不可用",
+      504: "网关超时",
+      505: "HTTP版本不受支持"
+    };
+    if (error && error.response) {
+      console.error("请求错误", error.response.data);
+    }
+    if (status === 401) {
+      redirectLogin();
+    }
+    return Promise.reject(new Error(httpCodeLabel[status] || "接口错误"));
+  }
+);
+
+const redirectLogin = () => {
+  router.replace("/login");
+  return;
+};
+
+export default (o: AxiosRequestConfig): Promise<IHttpResponse> => {
+  return new Promise((resolve, reject) => {
+    http(o)
+      .then((res) => {
+        return resolve(res.data);
+      })
+      .catch(reject);
+  });
+};
--- a/VScode/src/utils/router.ts
+++ b/VScode/src/utils/router.ts
@@ -0,0 +1,181 @@
+import app from "@/constants/app";
+import Layout from "@/layout/layout.vue";
+import { toSysViewComponentPath } from "@/router";
+import { IObject, IServerMenus } from "@/types/interface";
+import Iframe from "@/views/iframe.vue";
+import { Router, RouteRecordNormalized, RouteRecordRaw } from "vue-router";
+import { getValueByKeys, isExternalLink } from "./utils";
+
+/**
+ * 合并本地路由和服务端菜单，追加isIframe和isNewPage参数到meta中
+ * @param serverRoutes
+ * @param sysRouteMap
+ * @returns
+ */
+export const mergeServerRoute = (
+  serverRoutes: IServerMenus[],
+  sysRouteMap: IObject,
+  matched: IObject[] = []
+): [RouteRecordRaw[], IObject] => {
+  const rs: RouteRecordRaw[] = [];
+  let routeToMeta: IObject = {};
+  serverRoutes.forEach((x: IServerMenus) => {
+    const [path, meta] = mergeRouteToOpenStyle(x.url, x);
+    const viewComponent = sysRouteMap[toSysViewComponentPath(path)];
+    const isNotMatchComponent =
+      !viewComponent && !meta.isIframe && !meta.isNewPage && !(x.children && x.children.length);
+    const r: RouteRecordRaw = {
+      path,
+      name: path,
+      component: meta.isIframe ? Iframe : x.children && x.children.length ? Layout : viewComponent
+    };
+    r.meta = {
+      title: x.name,
+      icon: x.icon,
+      openStyle: x.openStyle,
+      id: x.id,
+      url: x.url,
+      matched: [...matched, { path, title: x.name }],
+      ...meta
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    r.redirect =
+      x.redirect ||
+      (isNotMatchComponent ? { path: "/error", query: { to: 404 }, replace: true } : "");
+    if (path) {
+      routeToMeta[path] = r.meta;
+    }
+    if (x.children && x.children.length) {
+      const childrenRoutes = mergeServerRoute(
+        x.children,
+        sysRouteMap,
+        getValueByKeys(r.meta, "matched", [])
+      );
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      r.children = childrenRoutes[0];
+      routeToMeta = { ...routeToMeta, ...childrenRoutes[1] };
+    }
+    rs.push(r);
+  });
+  return [rs, routeToMeta];
+};
+
+/**
+ * 重置路由
+ * @param router
+ * @param routes
+ */
+export const resetRoute = (router: Router, routes: RouteRecordRaw[]): void => {
+  routes.forEach((route: any) => {
+    const { name } = route;
+    router.hasRoute(name) && router.removeRoute(name);
+  });
+};
+
+/**
+ * 路由转换成对象格式
+ * @param routes
+ * @returns
+ */
+export const routesToObject = (routes: any[]): IObject<RouteRecordNormalized> => {
+  const rs: IObject<RouteRecordNormalized> = {};
+  const loop = (ms: any[]) => {
+    ms.forEach((x: RouteRecordNormalized): void => {
+      rs[x.path] = x;
+      if (x.children && x.children.length) {
+        loop(x.children);
+      }
+    });
+  };
+  loop(routes);
+  return rs;
+};
+
+/**
+ * 转化为有效的导航路由
+ * @param routes
+ * @returns
+ */
+export const toValidRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
+  const rs: RouteRecordRaw[] = [];
+  routes.forEach((x: RouteRecordRaw) => {
+    if (x.meta && x.meta.isNavigationMenu !== false) {
+      if (x.children && x.children.length) {
+        x.children = toValidRoutes(x.children);
+      }
+      rs.push(x);
+    }
+  });
+  return rs;
+};
+
+/**
+ * 注册路由，keep-alive不支持多级路由，这里将多级路由转化为1级路由
+ * @param router
+ * @param rs
+ */
+export const registerToRouter = (router: Router, rs: RouteRecordRaw[]): void => {
+  rs.forEach((x: RouteRecordRaw) => {
+    if (!router.hasRoute(x.path)) {
+      if (x.children && x.children.length) {
+        router.addRoute({ ...x, children: [] });
+        registerToRouter(router, x.children);
+      } else {
+        router.addRoute(x);
+      }
+    }
+  });
+};
+
+export const mergeRouteToOpenStyle = (url: string, item: IServerMenus): [string, IObject] => {
+  url = url || `/iframe/${item.id}`;
+  let meta: IObject = {};
+  const toRoutePath = (url: string): string => {
+    return (url = !/^\//g.test(url) ? "/" + url : url);
+  };
+  //生成变量路由数据
+  const renderVariableHook = (url: string): string => {
+    return url.replace("{{ApiUrl}}", app.api);
+  };
+  if (item.openStyle === 1) {
+    //外部
+    if (isExternalLink(url)) {
+      url = renderVariableHook(url);
+      meta = { url, isNewPage: true };
+      url = `/webview/${item.id}`; //虚拟无效地址
+    } else {
+      url = toRoutePath(url);
+      meta = { url: `/#${url}?pop=true`, isNewPage: true };
+    }
+  } else {
+    //内部
+    if (isExternalLink(url)) {
+      url = renderVariableHook(url);
+      meta = { url, isIframe: true };
+      url = `/iframe/${item.id}`;
+    } else {
+      url = toRoutePath(url);
+    }
+  }
+  return [url, meta];
+};
+
+/**
+ *
+ * @param routes 获取基础路由url和meta数据
+ * @returns
+ */
+export const getBaseRouteToMeta = (routes: RouteRecordRaw[]): IObject => {
+  let routeToMeta: IObject = {};
+  routes.forEach((x) => {
+    if (x.path && x.meta) {
+      routeToMeta[x.path] = { ...x.meta, openStyle: 0, id: x.path, url: x.path };
+    }
+    if (x.children && x.children.length) {
+      routeToMeta = { ...routeToMeta, ...getBaseRouteToMeta(x.children) };
+    }
+  });
+  return routeToMeta;
+};
--- a/Show More
+++ b/Show More
				`@@ -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="1641477417057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6229" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 887.466667C303.786667 887.466667 136.533333 720.213333 136.533333 512S303.786667 136.533333 512 136.533333s375.466667 167.253333 375.466667 375.466667-167.253333 375.466667-375.466667 375.466667z m0-716.8C324.266667 170.666667 170.666667 324.266667 170.666667 512s153.6 341.333333 341.333333 341.333333 341.333333-153.6 341.333333-341.333333S699.733333 170.666667 512 170.666667z" fill="" p-id="6230"></path><path d="M512 1024C228.693333 1024 0 795.306667 0 512S228.693333 0 512 0s512 228.693333 512 512-228.693333 512-512 512z m0-989.866667C249.173333 34.133333 34.133333 249.173333 34.133333 512s215.04 477.866667 477.866667 477.866667 477.866667-215.04 477.866667-477.866667S774.826667 34.133333 512 34.133333z" fill="" p-id="6231"></path><path d="M375.466667 409.6m-34.133334 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6232"></path><path d="M648.533333 409.6m-34.133333 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6233"></path><path d="M375.466667 648.533333m-34.133334 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6234"></path><path d="M648.533333 648.533333m-34.133333 0a34.133333 34.133333 0 1 0 68.266667 0 34.133333 34.133333 0 1 0-68.266667 0Z" fill="" p-id="6235"></path></svg>