Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

Conflicts: yarn.lock
2022-11-10 14:17:34 +08:00 · 2022-11-10 14:17:34 +08:00 · 69401cb7f8
parent c99d218b93 f7dac95732
commit 69401cb7f8
37 changed files with 17742 additions and 3842 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" >
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico">
@ -9,60 +9,112 @@
  <body>
  <div id="app">
      <style>
-          html,
-          body,
-          #app {
-              width: 100%;
-              height: 100%;
-              padding: 0;
-              margin: 0;
+          .first-loading-wrp {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              height: 90vh;
+              min-height: 90vh;
          }
-          .init-loading-wrap{
-              width: 100%;
-              height: 100%;
+          .first-loading-wrp > h1 {
+              font-size: 30px;
+              font-weight: bolder;
+          }
+          .first-loading-wrp .loading-wrp {
              display: flex;
              align-items: center;
              justify-content: center;
+              padding: 98px;
          }
-          .init-loading-inner {
-              width: 20px;
-              height: 50px;
-              background: #1890ff;
-              float: left;
-              margin: 0 3px;
-              animation: init-loading-inner linear 1s infinite;
-              -webkit-animation: init-loading-inner linear 1s infinite;
+          .dot {
+              position: relative;
+              box-sizing: border-box;
+              display: inline-block;
+              width: 64px;
+              height: 64px;
+              font-size: 64px;
+              transform: rotate(45deg);
+              animation: antRotate 1.2s infinite linear;
          }
-          .init-loading-inner:nth-child(1){
-              animation-delay:0s;
+
+          .dot i {
+              position: absolute;
+              display: block;
+              width: 28px;
+              height: 28px;
+              background-color: #1890ff;
+              border-radius: 100%;
+              opacity: 0.3;
+              transform: scale(0.75);
+              transform-origin: 50% 50%;
+              animation: antSpinMove 1s infinite linear alternate;
          }
-          .init-loading-inner:nth-child(2){
-              animation-delay:0.15s;
+
+          .dot i:nth-child(1) {
+              top: 0;
+              left: 0;
          }
-          .init-loading-inner:nth-child(3){
-              animation-delay:0.3s;
+
+          .dot i:nth-child(2) {
+              top: 0;
+              right: 0;
+              -webkit-animation-delay: 0.4s;
+              animation-delay: 0.4s;
          }
-          .init-loading-inner:nth-child(4){
-              animation-delay:0.45s;
+
+          .dot i:nth-child(3) {
+              right: 0;
+              bottom: 0;
+              -webkit-animation-delay: 0.8s;
+              animation-delay: 0.8s;
          }
-          .init-loading-inner:nth-child(5){
-              animation-delay:0.6s;
+
+          .dot i:nth-child(4) {
+              bottom: 0;
+              left: 0;
+              -webkit-animation-delay: 1.2s;
+              animation-delay: 1.2s;
          }
-          @keyframes init-loading-inner{
-              0%,60%,100% {transform: scale(1);}
-              30% {transform: scaleY(3);}
+          @keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
          }
-          @-webkit-keyframes init-loading-inner{
-              0%,60%,100% {transform: scale(1);}
-              30% {transform: scaleY(3);}
+
+          @-webkit-keyframes antRotate {
+              to {
+                  -webkit-transform: rotate(405deg);
+                  transform: rotate(405deg);
+              }
          }
+
+          @keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
+          @-webkit-keyframes antSpinMove {
+              to {
+                  opacity: 1;
+              }
+          }
+
      </style>
-      <div class="init-loading-wrap">
-          <div class="init-loading-inner"></div>
-          <div class="init-loading-inner"></div>
-          <div class="init-loading-inner"></div>
-          <div class="init-loading-inner"></div>
-          <div class="init-loading-inner"></div>
+      <div id="vue-admin-perfect">
+          <div class="first-loading-wrp">
+              <div class="loading-wrp">
+          <span class="dot dot-spin">
+            <i></i>
+            <i></i>
+            <i></i>
+            <i></i>
+          </span>
+              </div>
+              <h1>vue-admin-perfect</h1>
+          </div>
      </div>
  </div>
    <script type="module" src="/src/main.ts"></script>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -21,12 +21,13 @@
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^0.27.2",
    "clipboard": "^2.0.10",
+    "codemirror": "^5.65.9",
    "core-js": "^3.6.5",
    "dayjs": "^1.11.4",
    "default-passive-events": "^2.0.0",
    "echarts": "^5.3.1",
    "echarts-liquidfill": "^3.1.0",
-    "element-plus": "^2.2.16",
+    "element-plus": "^2.2.20",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "fuse.js": "^6.6.2",
@ -54,8 +55,6 @@
    "vue-splitpane": "^1.0.6",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.0.0-0",
-    "vxe-table": "^4.3.5",
-    "xe-utils": "^3.5.6",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
--- a/public/index.html
+++ b/public/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
--- a/src/components/CodeMirror/index.vue
+++ b/src/components/CodeMirror/index.vue
@ -0,0 +1,121 @@
+<template>
+  <textarea ref="codeEditor" placeholder="请输入..." ></textarea>
+</template>
+
+<script>
+import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
+// codemirror基础资源引入
+import _CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+// language
+import 'codemirror/mode/javascript/javascript.js'
+
+// theme css
+import 'codemirror/theme/monokai.css'
+// 折叠资源引入:开始
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/foldgutter.js";
+// 折叠资源引入:结束
+
+// 搜索资源引入:开始
+import "codemirror/addon/scroll/annotatescrollbar.js";
+import "codemirror/addon/search/matchesonscrollbar.js";
+import "codemirror/addon/search/match-highlighter.js";
+import "codemirror/addon/search/jump-to-line.js";
+
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/search.js";
+// 搜索资源引入:结束
+
+// 启用placeholder
+import "codemirror/addon/display/placeholder.js";
+
+import "codemirror/addon/selection/active-line.js"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
+
+const CodeMirror = window.CodeMirror || _CodeMirror;
+
+export default defineComponent({
+  props: {
+    modelValue: String,
+    defaultValue: String,
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, context) {
+    const { modelValue, defaultValue, readOnly } = toRefs(props);
+    const codeEditor = ref();
+    let editor;
+    watch(modelValue, () => {
+      if (null != editor && modelValue.value && modelValue.value !== editor.getValue()) {
+        // 触发v-model的双向绑定
+        editor.setValue(modelValue.value);
+      }
+    });
+    watch(readOnly, () => {
+      if (null != editor) {
+        editor.setOption("readOnly", readOnly.value);
+      }
+    });
+    onMounted(() => {
+      editor = CodeMirror.fromTextArea(codeEditor.value, {
+        value: modelValue.value,
+        // mime: "text/javascript",
+        mode: "application/json",
+        indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
+        smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
+        lineNumbers: true, // 是否在编辑器左侧显示行号
+        matchBrackets: true, // 括号匹配
+        readOnly: readOnly.value,
+        // 启用代码折叠相关功能:开始
+        foldGutter: true,
+        lineWrapping: true, //是否自动换行
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+        // 启用代码折叠相关功能:结束
+        styleActiveLine: false // 光标行高亮
+      });
+      // 监听编辑器的change事件
+      editor.on("change", () => {
+        // 触发v-model的双向绑定
+        context.emit("update:modelValue", editor.getValue());
+      });
+      if (defaultValue.value) {
+        editor.setValue(defaultValue.value);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (null !== editor) {
+        editor.toTextArea();
+        editor = null;
+      }
+    });
+    return { codeEditor };
+  }
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.CodeMirror-wrap{
+  height: 100%;
+}
+
+.CodeMirror-gutters {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  min-height: 100%;
+  white-space: nowrap;
+  background-color: transparent;
+  border-right: 1px solid #ddd;
+}
+
+</style>
--- a/src/components/Theme/components/switchDark.vue
+++ b/src/components/Theme/components/switchDark.vue
@ -4,13 +4,13 @@

 <script setup lang="ts" name="switchDark">
  import {computed, ref} from "vue";
+  import { useDark, useToggle } from '@vueuse/core'
  import {useSettingStore} from "@/store/modules/setting"
-  import {toggleDark} from '../../../hooks/dark'
  const SettingStore = useSettingStore()
-  // 横向
+  // // 横向
  const isDark = ref(SettingStore.themeConfig.isDark)
-
  const changeSwitch = ()=>{
-    toggleDark()
+    let isDark = useDark()
+    useToggle(isDark)
  }
 </script>
--- a/src/hooks/dark.ts
+++ b/src/hooks/dark.ts
@ -1,4 +0,0 @@
-import { useDark, useToggle } from '@vueuse/core'
-
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
--- a/src/layout/Footer/index.vue
+++ b/src/layout/Footer/index.vue
@ -1,11 +1,11 @@
 <template>
-	<div class="footer ">
+	<div class="footer-layout">
 		<span href="/" target="_blank"> 2022 © VUE-ADMIN-PERFECT By ZB Technology. </span>
 	</div>
 </template>

 <style scoped lang="scss">
-.footer{
+.footer-layout{
  height: 40px;
  font-size: 12px;
  display: flex;
--- a/src/layout/Header/components/CollapseIcon.vue
+++ b/src/layout/Header/components/CollapseIcon.vue
@ -6,7 +6,7 @@
 </template>
 <script lang="ts" setup>
 import {useSettingStore} from "@/store/modules/setting"
-import {computed} from "_vue@3.2.40@vue";
+import {computed} from "vue";
 const SettingStore = useSettingStore()
 const isCollapse = computed(() =>!SettingStore.isCollapse)
 const handleCollapse = () => {
--- a/src/layout/Header/components/globalComSize.vue
+++ b/src/layout/Header/components/globalComSize.vue
@ -1,6 +1,6 @@
 <template>
-  <el-dropdown trigger="click" @command="setAssemblySize">
-    <svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;"/>
+  <el-dropdown trigger="hover" @command="setAssemblySize">
+    <svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">
--- a/src/plugins/vxeTable.ts
+++ b/src/plugins/vxeTable.ts
@ -1,13 +0,0 @@
-import VXETable from 'vxe-table'
-import 'vxe-table/lib/style.css'
-
-function useTable (app: App) {
-    app.use(VXETable)
-    // 给 vue 实例挂载内部对象，例如：
-    // app.config.globalProperties.$XModal = VXETable.modal
-    // app.config.globalProperties.$XPrint = VXETable.print
-    // app.config.globalProperties.$XSaveFile = VXETable.saveFile
-    // app.config.globalProperties.$XReadFile = VXETable.readFile
-}
-
-export default useTable
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@ -24,6 +24,12 @@ const othersRouter = [{
      name: 'editor',
      meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
    },
+    {
+      path: 'code-mirror',
+      component: () => import('@/views/other/codeMirror/index.vue'),
+      name: 'code-mirror',
+      meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
+    },
    {
      path: 'mark-down',
      component: () => import('@/views/other/markDown/index.vue'),
@ -32,7 +38,7 @@ const othersRouter = [{
    },
    {
      path: 'print',
-      component: () => import('@/views/other/print.vue'),
+      component: () => import('@/views/other/print/index.vue'),
      name: 'print',
      meta: { title: '打印' , icon: 'MenuIcon'}
    },
@ -43,20 +49,20 @@ const othersRouter = [{
      meta: { title: '头像裁剪' , icon: 'MenuIcon'}
    },
    {
-      path: 'grid-sorter',
-      component: () => import('@/views/other/grid-sorter.vue'),
-      name: 'grid-sorter',
+      path: 'card-drag',
+      component: () => import('@/views/other/cardDrag/index.vue'),
+      name: 'card-drag',
      meta: { title: '卡片拖拽', icon: 'MenuIcon' }
    },
    {
      path: 'upload',
-      component: () => import('@/views/other/upload.vue'),
+      component: () => import('@/views/other/upload/index.vue'),
      name: 'upload',
      meta: { title: '上传图片', icon: 'MenuIcon' }
    },
    {
      path: 'qrcode',
-      component: () => import('@/views/other/qrcode.vue'),
+      component: () => import('@/views/other/qrcode/index.vue'),
      name: 'qrcode',
      meta: { title: '生成二维码', icon: 'MenuIcon' }
    },
@ -74,19 +80,19 @@ const othersRouter = [{
    },
    {
      path: 'water-marker',
-      component: () => import('@/views/other/water-marker.vue'),
+      component: () => import('@/views/other/waterMarker/index.vue'),
      name: 'water-marker',
      meta: { title: '生成水印' , icon: 'MenuIcon'}
    },
    {
      path: 'right-menu',
-      component: () => import('@/views/other/right-menu.vue'),
+      component: () => import('@/views/other/rightMenu/index.vue'),
      name: 'right-menu',
      meta: { title: '右键菜单' , icon: 'MenuIcon'}
    },
    {
      path: 'count',
-      component: () => import('@/views/other/count.vue'),
+      component: () => import('@/views/other/count/index.vue'),
      name: 'count',
      meta: { title: '数字自增长', icon: 'MenuIcon' }
    }
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@ -14,25 +14,25 @@ const systemRouter = [{
    children: [
        {
            path: 'page',
-            component: () => import('@/views/system/page.vue'),
+            component: () => import('@/views/system/page/index.vue'),
            name: 'page',
-            meta: { title: '页面权限', icon: 'trend-charts',  roles:['other']  }
+            meta: { title: '页面权限', icon: 'MenuIcon',  roles:['other']  }
        },
        {
            path: 'user',
-            component: () => import('@/views/system/user.vue'),
+            component: () => import('@/views/system/user/index.vue'),
            name: 'user',
            meta: { title: '用户管理', roles: ['other'] , icon: 'MenuIcon'}
        },
        {
            path: 'role',
-            component: () => import('@/views/system/role.vue'),
+            component: () => import('@/views/system/role/index.vue'),
            name: 'role',
            meta: { title: '角色管理', roles: ['other'], icon: 'MenuIcon' }
        },
        {
            path: 'menu',
-            component: () => import('@/views/system/menu.vue'),
+            component: () => import('@/views/system/menu/index.vue'),
            name: 'menu',
            meta: { title: '菜单管理', roles: ['other'] , icon: 'MenuIcon'}
        },
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@ -83,4 +83,5 @@ body{
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  background: white;
  padding: 20px;
+  box-sizing: border-box;
 }
--- a/src/styles/element-dark.scss
+++ b/src/styles/element-dark.scss
@ -154,5 +154,27 @@ html.dark {
    font-weight: bold;
    color: white;
  }
+  .footer-layout{
+    background: none;
+    color: white;
+  }
+  .app-container-inner{
+    background: none;
+  }
+  .list-group-item{
+    background: none!important;
+    border: 1px solid white;
+  }
+  .app-container{
+    .header{
+      background: none;
+    }
+    .footer{
+      background: none;
+    }
+  }
+  .zb-pro-table .el-table__header th{
+    color: white!important;
+  }

 }
--- a/src/views/other/cardDrag/index.vue
+++ b/src/views/other/cardDrag/index.vue
--- a/src/views/other/clipboard/index.vue
+++ b/src/views/other/clipboard/index.vue
@ -1,17 +1,19 @@
 <template>
-  <u-container-layout>
-    <el-card style="margin-bottom: 20px">
-      <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
-      <el-input v-model="copyValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
-      <el-button type="primary" @click="handleCopy(copyValue, $event)">
-        <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
-      </el-button>
-    </el-card>
-    <el-card>
-      <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
-      <el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
-    </el-card>
-  </u-container-layout>
+  <div class="app-container">
+    <div class="app-container-inner">
+      <el-card style="margin-bottom: 20px">
+        <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
+        <el-input v-model="copyValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
+        <el-button type="primary" @click="handleCopy(copyValue, $event)">
+          <el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
+        </el-button>
+      </el-card>
+      <el-card>
+        <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
+        <el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
+      </el-card>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
--- a/src/views/other/codeMirror/index.vue
+++ b/src/views/other/codeMirror/index.vue
@ -0,0 +1,43 @@
+<template>
+  <div class="m-code-mirror">
+    <div class="header">
+      <el-card >
+        <div>
+          <span>代码编辑器组件示例</span>
+        </div>
+      </el-card>
+    </div>
+    <div class="footer">
+      <div class="footer-inner">
+        <CodeMirror/>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import CodeMirror from '@/components/CodeMirror/index.vue'
+</script>
+
+<style lang="scss" scoped>
+.m-code-mirror{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  & .header{
+    flex-shrink: 0;
+  }
+  & .footer{
+    flex: 1;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+  }
+  .footer-inner{
+    padding: 10px;
+    flex: 1;
+    background: white;
+    box-sizing: border-box;
+  }
+}
+</style>
--- a/src/views/other/count.vue
+++ b/src/views/other/count.vue
@ -1,207 +0,0 @@
-<template>
-  <u-container-layout class="components-container">
-    <count-to
-      ref="example"
-      class="example"
-      :start-val="options.startValInput"
-      :end-val="options.endValInput"
-      :duration="options.durationInput"
-      :decimals="options.decimals"
-      :prefix="options.prefix"
-      :suffix="options.suffix"
-      :autoplay="true"
-      :separator="options.separator"
-    ></count-to>
-    <div style="margin-top: 40px;margin-bottom: 30px">
-      <label class="label"
-        >起始值:
-        <el-input-number
-          v-model="options.startValInput"
-          @change="(val) => handleChange(val, 'startValInput')"
-          :min="0"
-          label="描述文字"
-        ></el-input-number>
-      </label>
-      <label class="label"
-        >最终值:
-        <el-input-number
-          v-model="options.endValInput"
-          @change="(val) => handleChange(val, 'endValInput')"
-          :min="1"
-          label="描述文字"
-        ></el-input-number>
-      </label>
-      <label class="label"
-        >持续时间:
-        <el-input-number
-          v-model="options.durationInput"
-          @change="(val) => handleChange(val, 'durationInput')"
-          :min="1"
-          label="描述文字"
-        ></el-input-number>
-      </label>
-      <br />
-      <label class="label"
-        >小数位数:
-        <el-input-number
-          v-model="options.decimals"
-          @change="(val) => handleChange(val, 'decimals')"
-          :min="0"
-          label="描述文字"
-        ></el-input-number>
-      </label>
-      <label class="label">
-        分隔符:<el-input
-          v-model="options.separator"
-          @change="(val) => handleChange(val, 'prefix')"
-          style="width: 100px; margin-left: 10px"
-        ></el-input>
-      </label>
-      <label class="label">
-        前缀:<el-input
-          v-model="options.prefix"
-          @change="(val) => handleChange(val, 'prefix')"
-          style="width: 100px; margin-left: 10px"
-        ></el-input>
-      </label>
-      <label class="label"
-        >后缀:
-        <el-input
-          v-model="options.suffix"
-          @change="(val) => handleChange(val, 'suffix')"
-          style="width: 100px; margin-left: 10px"
-        ></el-input>
-      </label>
-
-      <el-button type="primary" @click="start">开始</el-button>
-      <el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
-    </div>
-    <el-descriptions title="配置项 " :column="1" border class="descriptions">
-      <el-descriptions-item label="startValInput"> 起始值，默认为0 </el-descriptions-item>
-      <el-descriptions-item label="endValInput"> 最终值，默认为2017 </el-descriptions-item>
-      <el-descriptions-item label="durationInput"> 持续时间，默认为3000 </el-descriptions-item>
-      <el-descriptions-item label="decimals"> 小数位数 </el-descriptions-item>
-      <el-descriptions-item label="separator"> 分隔符，默认为 ',' </el-descriptions-item>
-      <el-descriptions-item label="prefix"> 前缀 </el-descriptions-item>
-      <el-descriptions-item label="suffix"> 后缀 </el-descriptions-item>
-    </el-descriptions>
-  </u-container-layout>
-</template>
-
-<script lang="ts" setup>
-  import CountTo from '@/components/CountTo/index.vue'
-  const example = ref()
-  import { reactive, ref } from 'vue'
-  let options = reactive({
-    startValInput: 0,
-    endValInput: 9888,
-    durationInput: 2000,
-    decimals: 1,
-    prefix: '价钱：',
-    suffix: '元',
-    separator: ',',
-  })
-  const handleChange = (val, type) => {
-
-  }
-  const start = () => {
-    example.value.start()
-  }
-  const pauseResume = () => {
-    example.value.pauseResume()
-  }
-</script>
-
-<style scoped>
-  .example-btn {
-    display: inline-block;
-    margin-bottom: 0;
-    font-weight: 500;
-    text-align: center;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    border: 1px solid transparent;
-    white-space: nowrap;
-    line-height: 1.5;
-    padding: 4px 15px;
-    font-size: 12px;
-    border-radius: 4px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    position: relative;
-    color: rgba(0, 0, 0, 0.65);
-    background-color: #fff;
-    border-color: #d9d9d9;
-  }
-
-  .example-btn:hover {
-    color: #4ab7bd;
-    background-color: #fff;
-    border-color: #4ab7bd;
-  }
-  .example {
-    font-size: 50px;
-    color: #f6416c;
-    display: block;
-    margin: 10px 0;
-    text-align: center;
-    font-size: 80px;
-    font-weight: 500;
-  }
-
-  .label {
-    color: #2f4f4f;
-    font-size: 16px;
-    display: inline-block;
-    margin: 15px 30px 15px 0;
-  }
-
-  input {
-    position: relative;
-    display: inline-block;
-    padding: 4px 7px;
-    width: 70px;
-    height: 28px;
-    cursor: text;
-    font-size: 12px;
-    line-height: 1.5;
-    color: rgba(0, 0, 0, 0.65);
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    -webkit-transition: all 0.3s;
-    transition: all 0.3s;
-  }
-
-  .startBtn {
-    margin-left: 20px;
-    font-size: 20px;
-    color: #30b08f;
-    background-color: #fff;
-  }
-
-  .startBtn:hover {
-    background-color: #30b08f;
-    color: #fff;
-    border-color: #30b08f;
-  }
-
-  .pause-resume-btn {
-    font-size: 20px;
-    color: #e65d6e;
-    background-color: #fff;
-  }
-
-  .pause-resume-btn:hover {
-    background-color: #e65d6e;
-    color: #fff;
-    border-color: #e65d6e;
-  }
-</style>
--- a/src/views/other/count/index.scss
+++ b/src/views/other/count/index.scss
@ -0,0 +1,14 @@
+.count-to {
+  display: block;
+  margin: 10px 0;
+  text-align: center;
+  font-size: 40px;
+  font-weight: 500;
+  color: $primaryColor;
+}
+.label {
+  color: #2f4f4f;
+  font-size: 16px;
+  display: inline-block;
+  margin: 15px 30px 15px 0;
+}
--- a/src/views/other/count/index.vue
+++ b/src/views/other/count/index.vue
@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+   <div class="app-container-inner">
+     <count-to
+         ref="example"
+         class="count-to"
+         :start-val="options.startValInput"
+         :end-val="options.endValInput"
+         :duration="options.durationInput"
+         :decimals="options.decimals"
+         :prefix="options.prefix"
+         :suffix="options.suffix"
+         :autoplay="true"
+         :separator="options.separator"
+     ></count-to>
+     <div style="margin-top: 40px;margin-bottom: 30px">
+       <label class="label"
+       >起始值:
+         <el-input-number
+             v-model="options.startValInput"
+             @change="(val) => handleChange(val, 'startValInput')"
+             :min="0"
+             label="描述文字"
+         ></el-input-number>
+       </label>
+       <label class="label"
+       >最终值:
+         <el-input-number
+             v-model="options.endValInput"
+             @change="(val) => handleChange(val, 'endValInput')"
+             :min="1"
+             label="描述文字"
+         ></el-input-number>
+       </label>
+       <label class="label"
+       >持续时间:
+         <el-input-number
+             v-model="options.durationInput"
+             @change="(val) => handleChange(val, 'durationInput')"
+             :min="1"
+             label="描述文字"
+         ></el-input-number>
+       </label>
+       <br />
+       <label class="label"
+       >小数位数:
+         <el-input-number
+             v-model="options.decimals"
+             @change="(val) => handleChange(val, 'decimals')"
+             :min="0"
+             label="描述文字"
+         ></el-input-number>
+       </label>
+       <label class="label">
+         分隔符:<el-input
+           v-model="options.separator"
+           @change="(val) => handleChange(val, 'prefix')"
+           style="width: 100px; margin-left: 10px"
+       ></el-input>
+       </label>
+       <label class="label">
+         前缀:<el-input
+           v-model="options.prefix"
+           @change="(val) => handleChange(val, 'prefix')"
+           style="width: 100px; margin-left: 10px"
+       ></el-input>
+       </label>
+       <label class="label"
+       >后缀:
+         <el-input
+             v-model="options.suffix"
+             @change="(val) => handleChange(val, 'suffix')"
+             style="width: 100px; margin-left: 10px"
+         ></el-input>
+       </label>
+
+       <el-button type="primary" @click="start">开始</el-button>
+       <el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
+     </div>
+     <el-descriptions title="配置项 " :column="1" border class="descriptions">
+       <el-descriptions-item label="startValInput"> 起始值，默认为0 </el-descriptions-item>
+       <el-descriptions-item label="endValInput"> 最终值，默认为2017 </el-descriptions-item>
+       <el-descriptions-item label="durationInput"> 持续时间，默认为3000 </el-descriptions-item>
+       <el-descriptions-item label="decimals"> 小数位数 </el-descriptions-item>
+       <el-descriptions-item label="separator"> 分隔符，默认为 ',' </el-descriptions-item>
+       <el-descriptions-item label="prefix"> 前缀 </el-descriptions-item>
+       <el-descriptions-item label="suffix"> 后缀 </el-descriptions-item>
+     </el-descriptions>
+   </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import CountTo from '@/components/CountTo/index.vue'
+  const example = ref()
+  import { reactive, ref } from 'vue'
+  let options = reactive({
+    startValInput: 0,
+    endValInput: 9888,
+    durationInput: 2000,
+    decimals: 1,
+    prefix: '价钱：',
+    suffix: '元',
+    separator: ',',
+  })
+  const handleChange = (val, type) => {}
+  const start = () => {
+    example.value.start()
+  }
+  const pauseResume = () => {
+    example.value.pauseResume()
+  }
+</script>
+
+<style scoped lang="scss">
+@import "./index";
+</style>
--- a/src/views/other/editor/index.vue
+++ b/src/views/other/editor/index.vue
@ -27,9 +27,6 @@
        <el-descriptions-item label="参考文档"> 	<a href="https://www.wangeditor.com/v5/for-frame.html" target="_blank"> https://www.wangeditor.com/v5/for-frame.html </a> </el-descriptions-item>

      </el-descriptions>
-
-
-
      <el-dialog
          v-model="dialogVisible"
          title="预览"
--- a/src/views/other/fullScreen/index.vue
+++ b/src/views/other/fullScreen/index.vue
--- a/src/views/other/print/index.vue
+++ b/src/views/other/print/index.vue
--- a/src/views/other/qrcode/index.vue
+++ b/src/views/other/qrcode/index.vue
--- a/src/views/other/rightMenu/index.vue
+++ b/src/views/other/rightMenu/index.vue
--- a/src/views/other/share.vue
+++ b/src/views/other/share.vue
--- a/src/views/other/splitpane.vue
+++ b/src/views/other/splitpane.vue
@ -1,59 +0,0 @@
-<template>
-  <u-container-layout>
-    <splitpanes style="height: 800px">
-      <pane min-size="20" class="left">1</pane>
-      <pane>
-        <splitpanes horizontal>
-          <pane class="item1">2</pane>
-          <pane class="item2">3</pane>
-          <pane class="item3">4</pane>
-        </splitpanes>
-      </pane>
-      <pane class="item4">5</pane>
-    </splitpanes>
-  </u-container-layout>
-</template>
-
-<script lang="ts" setup>
-  // 参考文档 https://antoniandre.github.io/splitpanes/
-  import { Splitpanes, Pane } from 'splitpanes'
-  import 'splitpanes/dist/splitpanes.css'
-</script>
-
-<style scoped lang="scss">
-  .splitpanes__pane {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: red;
-    font-family: Helvetica, Arial, sans-serif;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 5em;
-  }
-  .left {
-    background: #f38181;
-  }
-  .item1 {
-    background: #fce38a;
-  }
-  .item2 {
-    background: #95e1d3;
-  }
-  .item3 {
-    background: rgb(72, 239, 205);
-  }
-  .item4 {
-    background: rgb(106, 170, 20);
-  }
-  .item5 {
-    background: rgb(72, 239, 205);
-  }
-  ::v-deep(.splitpanes__splitter) {
-    min-width: 6px;
-  }
-  ::v-deep(.splitpanes__splitter) {
-    min-height: 6px;
-    cursor: row-resize;
-    background: white;
-  }
-</style>
--- a/src/views/other/upload/index.vue
+++ b/src/views/other/upload/index.vue
@ -1,6 +1,5 @@
 <template>
-  <u-container-layout>
-    <div>
+  <div class="app-container">
      <el-card style="margin-bottom: 10px">
        <template #header>
          <span>按钮上传</span>
@ -21,14 +20,14 @@
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-card>
-      <el-card>
+      <el-card style="margin-bottom: 10px">
        <template #header>
          <span>多图片上传</span>
        </template>
        <Upload @update="update" v-model="imgs" />
      </el-card>

-      <el-card>
+      <el-card >
        <template #header>
          <span>拖拽上传</span>
        </template>
@ -53,8 +52,7 @@
          <div class="el-upload__text"> 拖拽上传 <em>或者点击上传</em> </div>
        </el-upload>
      </el-card>
-    </div>
-  </u-container-layout>
+  </div>
 </template>

 <script setup lang="ts">
--- a/src/views/other/waterMarker/index.vue
+++ b/src/views/other/waterMarker/index.vue
--- a/src/views/system/data/user.ts
+++ b/src/views/system/data/user.ts
@ -1,237 +0,0 @@
-export const userData =[
-    {
-        username:'zzb',
-        nickname:'林峰',
-        sex:'男',
-        role:'超级管理员',
-        status:true,
-    },
-    {
-        username:'zhangsan',
-        nickname:'张三',
-        sex:'女',
-        role:'管理员',
-        status:true,
-    },
-    {
-        username:'lisi',
-        nickname:'李四',
-        sex:'男',
-        role:'管理员',
-        status:true,
-    },
-    {
-        username:'wangwu',
-        nickname:'王五',
-        sex:'男',
-        role:'超级管理员',
-        status:false,
-    },
-    {
-        username:'zhaoliu',
-        nickname:'赵柳',
-        sex:'男',
-        role:'普通用户',
-        status:false,
-    },
-
-]
-
-
-export const roleData =[
-    {
-        roleName:'超级管理员',
-        roleId:'admin',
-        createTime:'2022-09-02',
-    },
-    {
-        roleName:'管理员',
-        roleId:'role',
-        createTime:'2022-09-02',
-    },
-    {
-        roleName:'普通用户',
-        roleId:'other',
-        createTime:'2022-09-02',
-    },
-
-]
-
-
-export const menuData =[
-    {
-        menuName:'首页',
-        menuType:'菜单',
-        menuRouter:'/home',
-        identification:'menu:home',
-        parentId:0,
-        level:1,
-        id:0,
-        createTime:'2022-09-02',
-    },
-    {
-        menuName:'表格',
-        menuType:'目录',
-        menuRouter:'/table',
-        identification:'menu:table',
-        parentId:0,
-        level:1,
-        id:1,
-        createTime:'2022-09-02',
-        children:[
-            {
-                menuName:'菜单1',
-                menuType:'菜单',
-                menuRouter:'/table',
-                identification:'menu1:view',
-                parentId:1,
-                level:2,
-                id:10,
-                createTime:'2022-09-02',
-                children:[
-                    {
-                        menuName:'按钮1',
-                        menuType:'按钮',
-                        menuRouter:'/table',
-                        identification:'menu1:view:btn1',
-                        parentId:10,
-                        id:20,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮2',
-                        menuType:'按钮',
-                        menuRouter:'/table',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:21,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮3',
-                        menuType:'按钮',
-                        menuRouter:'/table',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:22,
-                        level:3,
-                        createTime:'2022-09-02',
-                    }
-                ]
-            }
-        ]
-    },
-
-    {
-        menuName:'可视化图表',
-        menuType:'目录',
-        menuRouter:'/charts',
-        identification:'menu:charts',
-        parentId:0,
-        level:1,
-        id:1,
-        createTime:'2022-09-02',
-        children:[
-            {
-                menuName:'菜单1',
-                menuType:'菜单',
-                menuRouter:'/charts',
-                identification:'menu1:view',
-                parentId:1,
-                level:2,
-                id:10,
-                createTime:'2022-09-02',
-                children:[
-                    {
-                        menuName:'按钮1',
-                        menuType:'按钮',
-                        menuRouter:'/charts',
-                        identification:'menu1:view:btn1',
-                        parentId:10,
-                        id:20,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮2',
-                        menuType:'按钮',
-                        menuRouter:'/charts',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:21,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮3',
-                        menuType:'按钮',
-                        menuRouter:'/charts',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:22,
-                        level:3,
-                        createTime:'2022-09-02',
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        menuName:'基础组件',
-        menuType:'目录',
-        menuRouter:'/components',
-        identification:'menu:components',
-        parentId:0,
-        level:1,
-        id:1,
-        createTime:'2022-09-02',
-        children:[
-            {
-                menuName:'菜单1',
-                menuType:'菜单',
-                menuRouter:'/components',
-                identification:'menu1:view',
-                parentId:1,
-                level:2,
-                id:10,
-                createTime:'2022-09-02',
-                children:[
-                    {
-                        menuName:'按钮1',
-                        menuType:'按钮',
-                        menuRouter:'/components',
-                        identification:'menu1:view:btn1',
-                        parentId:10,
-                        id:20,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮2',
-                        menuType:'按钮',
-                        menuRouter:'/components',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:21,
-                        level:3,
-                        createTime:'2022-09-02',
-                    },
-                    {
-                        menuName:'按钮3',
-                        menuType:'按钮',
-                        menuRouter:'/components',
-                        identification:'menu1:view:btn2',
-                        parentId:10,
-                        id:22,
-                        level:3,
-                        createTime:'2022-09-02',
-                    }
-                ]
-            }
-        ]
-    },
-]
-
-
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
--- a/src/views/system/page/index.vue
+++ b/src/views/system/page/index.vue
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
--- a/vite.config.ts
+++ b/vite.config.ts
@ -63,7 +63,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    server: {
      // 服务器主机名，如果允许外部访问，可设置为 "0.0.0.0" 也可设置成你的ip地址
      host: '0.0.0.0',
-      port: 8100,
+      port: 8080,
      open: true,
      https: false,
      cors: true,
--- a/yarn.lock
+++ b/yarn.lock