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

 Conflicts:

	src/main.ts

	yarn.lock

package-lock.json

@@ -17,9 +17,7 @@
         "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.21",
         "exceljs": "^4.3.0",
         "file-saver": "^2.0.5",
@@ -31,7 +29,6 @@
         "path-browserify": "^1.0.1",
         "path-to-regexp": "^6.2.0",
         "pinia": "^2.0.21",
-        "pinia-persistedstate-plugin": "^0.1.0",
         "pinia-plugin-persistedstate": "^2.1.1",
         "print-js": "^1.6.0",
         "sass": "^1.54.0",
@@ -828,11 +825,6 @@
       "resolved": "https://registry.npmmirror.com/@types/event-emitter/-/event-emitter-0.3.3.tgz",
       "integrity": "sha512-UfnOK1pIxO7P+EgPRZXD9jMpimd8QEFcEZ5R67R1UhGbv4zghU5+NE7U8M8G9H5Jc8FI51rqDWQs6FtUfq2e/Q=="
     },
-    "node_modules/@types/js-cookie": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.2.tgz",
-      "integrity": "sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA=="
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://r.cnpmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -2957,11 +2949,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/default-passive-events": {
-      "version": "2.0.0",
-      "resolved": "https://r2.cnpmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
-      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
-    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://r.cnpmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -3175,14 +3162,6 @@
         "zrender": "5.3.2"
       }
     },
-    "node_modules/echarts-liquidfill": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
-      "integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
-      "peerDependencies": {
-        "echarts": "^5.0.1"
-      }
-    },
     "node_modules/element-in-view": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/element-in-view/-/element-in-view-0.1.0.tgz",
@@ -6565,15 +6544,6 @@
         }
       }
     },
-    "node_modules/pinia-persistedstate-plugin": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/pinia-persistedstate-plugin/-/pinia-persistedstate-plugin-0.1.0.tgz",
-      "integrity": "sha512-ToKR/EJzhhXElQ5YL8PVVY4CqLJjywxszAJjOCgprjmIVkTrPBsEOY4b/ATOzHQc1TtuaJs/3MJuoCpA3pv8Ew==",
-      "dependencies": {
-        "@types/js-cookie": "^3.0.1",
-        "pinia": "^2.0.12"
-      }
-    },
     "node_modules/pinia-plugin-persistedstate": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-2.1.1.tgz",
@@ -10160,11 +10130,6 @@
       "resolved": "https://registry.npmmirror.com/@types/event-emitter/-/event-emitter-0.3.3.tgz",
       "integrity": "sha512-UfnOK1pIxO7P+EgPRZXD9jMpimd8QEFcEZ5R67R1UhGbv4zghU5+NE7U8M8G9H5Jc8FI51rqDWQs6FtUfq2e/Q=="
     },
-    "@types/js-cookie": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.2.tgz",
-      "integrity": "sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA=="
-    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://r.cnpmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -11844,11 +11809,6 @@
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.3.2.tgz",
       "integrity": "sha512-qjMjTrk+RKv/sp4RPDpV5CnKhxjFI9p+GkLBOls5A8EEElldYWCWA9zceAkmfd0xIo2aU1nxiaLFoiya2sb6Cg=="
     },
-    "default-passive-events": {
-      "version": "2.0.0",
-      "resolved": "https://r2.cnpmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
-      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
-    },
     "defaults": {
       "version": "1.0.4",
       "resolved": "https://r.cnpmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -12041,12 +12001,6 @@
         "zrender": "5.3.2"
       }
     },
-    "echarts-liquidfill": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
-      "integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
-      "requires": {}
-    },
     "element-in-view": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/element-in-view/-/element-in-view-0.1.0.tgz",
@@ -14687,15 +14641,6 @@
         }
       }
     },
-    "pinia-persistedstate-plugin": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/pinia-persistedstate-plugin/-/pinia-persistedstate-plugin-0.1.0.tgz",
-      "integrity": "sha512-ToKR/EJzhhXElQ5YL8PVVY4CqLJjywxszAJjOCgprjmIVkTrPBsEOY4b/ATOzHQc1TtuaJs/3MJuoCpA3pv8Ew==",
-      "requires": {
-        "@types/js-cookie": "^3.0.1",
-        "pinia": "^2.0.12"
-      }
-    },
     "pinia-plugin-persistedstate": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-2.1.1.tgz",

package.json

@@ -25,7 +25,6 @@
     "core-js": "^3.6.5",
     "dayjs": "^1.11.4",
     "echarts": "^5.3.1",
-    "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.2.21",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",

src/components/PageWrapLayout/index.scss

@@ -0,0 +1,18 @@
+.m-container-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  .m-container-layout-inner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    background: white;
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}

src/components/PageWrapLayout/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="m-container-layout">
+    <div class="m-container-layout-inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/layout/components/Header/ToolRight.vue

@@ -13,11 +13,11 @@
 <script lang="ts" setup>
 import Language from './components/Language.vue'
 import GlobalComSize from './components/globalComSize.vue'
-import HeaderSearch from './components/HeaderSearch'
+import HeaderSearch from './components/HeaderSearch.vue'
-import Remind from './components/Remind'
+import Remind from './components/Remind.vue'
 import ScreenFull from './components/ScreenFull.vue'
 import Setting from './components/Setting.vue'
-import Avatar from './components/Avatar'
+import Avatar from './components/Avatar.vue'
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -30,7 +30,6 @@
   let { device } = useResizeHandler()
 
   watch(()=>device.value,(val)=>{
-    console.log('themeConfig.value.mode',themeConfig.value.mode)
     let vertical = val==='mobile'?'vertical':themeConfig.value.mode
     const body = document.body as HTMLElement;
     body.setAttribute("class", `layout-${vertical}`);

src/main.ts

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './routers'
 import pinia from "./store";
 
+import {registerElIcons} from "@/plugins/ElIcons"
+// 引入全局组件布局
+import PageWrapLayout from '@/components/PageWrapLayout/index.vue'
 // 权限路由
 import './permission'
 // svg-icons注册导入
@@ -18,31 +21,16 @@ import "@/styles/element-dark.scss";
 // 引入阿里图标库
 import "@/assets/iconfont/iconfont.css";
 import "@/assets/iconfont/iconfont.js";
-
-// 引入全局组件布局
-import UContainerLayout from '@/components/u-container-layout/index.vue'
 // i18n
 import I18n from "@/language/index";
 
-
 const app = createApp(App)
+registerElIcons(app)
 
-// 注册全局组件
 app.component('svg-icon',SvgIcon)
-app.component('u-container-layout',UContainerLayout)
+app.component('PageWrapLayout',PageWrapLayout)
 
-// 注册icon组件
-import * as ElIconsModules from '@element-plus/icons-vue'
-// 全局注册element-plus icon图标组件
-Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
-    if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
-        app.component(key, ElIconsModules[key]);
-    } else {
-        app.component(key + "Icon", ElIconsModules[key]);
-    }
-});
 app.use(I18n)
 app.use(pinia)
 app.use(router)
-
 app.use(ElementPlus).mount('#app')

src/plugins/ElIcons.ts

@@ -0,0 +1,16 @@
+
+// 注册icon组件
+import * as ElIconsModules from '@element-plus/icons-vue'
+
+
+export const registerElIcons = (app)=>{
+    // 全局注册element-plus icon图标组件
+    Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
+        if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
+            app.component(key, ElIconsModules[key]);
+        } else {
+            app.component(key + "Icon", ElIconsModules[key]);
+        }
+    });
+}
+

src/routers/modules/form.ts

@@ -32,6 +32,12 @@ const formRouter = [{
             name: 'appendForm',
             meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
         },
+        {
+            path: 'moreForm',
+            component: () => import('@/views/form/moreForm/index.vue'),
+            name: 'moreForm',
+            meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
+        },
     ]
 }]
 

src/styles/common.scss

@@ -6,6 +6,7 @@ body {
   overflow-x: hidden;
   margin: 0;
   padding: 0;
+  font-size: 14px;
 }
 body{
   background: #f0f2f5;
@@ -94,3 +95,14 @@ body{
   }
 }
 
+.el-pager li:focus {
+  border: none;
+}
+.el-dropdown:focus {
+  border: none;
+  outline: none!important;
+}
+.svg-icon:focus {
+  border: none!important;
+  outline: none!important;
+}

src/views/echarts/simple/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout style="width: 100%">
+  <PageWrapLayout style="width: 100%">
     <el-row class="row-bg" :gutter="10">
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card">
@@ -92,7 +92,7 @@
         </el-card>
       </el-col>
     </el-row>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 <script setup lang="ts">
 import LineCharts from './components/line.vue'

src/views/excel/uploadExcel/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout class="m-upload-excel">
+  <PageWrapLayout class="m-upload-excel">
     <el-upload
       style="width: 100%"
       class="upload-demo"
@@ -23,7 +23,7 @@
         </el-table-column>
       </el-table>
     </div>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 
 <script setup lang="ts">

src/views/form/moreForm/components/FormOne.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-card header="表单组件1">
+    <el-form :model="form" :rules="rules" ref="formRuleOneRef" label-width="100px" >
+      <el-row :gutter="35">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="用户名" prop="autograph">
+            <el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="职务" prop="occupation">
+            <el-select v-model="form.occupation" placeholder="请选择职务" clearable >
+              <el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+              <el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+              <el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from 'vue';
+
+// const formRuleOneRef = ref()
+
+const form = reactive({ name: '', email: '', autograph: '', occupation: '' })
+
+const rules = reactive({
+  name: { required: true, message: '请输入姓名', trigger: 'blur' },
+  email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
+  autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
+});
+
+
+</script>

src/views/form/moreForm/components/FormThree.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-card header="表单组件3">
+    <el-form :model="form" :rules="rules" ref="formRuleThreeRef" label-width="100px" >
+      <el-row :gutter="35">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="创建用户" prop="createUser">
+            <el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="修改用户" prop="editUser">
+            <el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="所属用户" prop="user">
+            <el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="所属部门" prop="department">
+            <el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from 'vue';
+
+const formRuleThreeRef = ref()
+const form = reactive( { createUser: '', editUser: '', user: '', department: '' })
+const rules = reactive( {
+  createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
+  editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
+  user: { required: true, message: '请输入所属用户', trigger: 'blur' },
+  department: { required: true, message: '请输入所属部门', trigger: 'blur' },
+})
+
+</script>

src/views/form/moreForm/components/FormTwo.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-card header="表单组件2">
+    <el-form :model="form" :rules="rules" ref="formRuleTwoRef" label-width="100px" >
+      <el-row :gutter="35">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="手机" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="性别">
+            <el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
+              <el-option label="男" value="1"></el-option>
+              <el-option label="女" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="登录密码" prop="password">
+            <el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
+          <el-form-item label="权限角色" prop="auth">
+            <el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from 'vue';
+
+const formRuleTwoRef = ref()
+const form = reactive({ phone: '', sex: '', password: '', auth: '' })
+const rules = reactive( {
+  phone: { required: true, message: '请输入手机', trigger: 'blur' },
+  password: { required: true, message: '请输入登录密码', trigger: 'blur' },
+  auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
+})
+
+</script>

src/views/form/moreForm/index.scss

@@ -0,0 +1,12 @@
+.m-more-form{
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  :deep(.el-card){
+    margin-bottom: 10px;
+  }
+  .footer{
+    width: 100%;
+    text-align: center;
+  }
+}

src/views/form/moreForm/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="m-more-form">
+    <FormOne ref="formRuleOne"/>
+    <FormTwo ref="formRuleTwo"/>
+    <FormThree ref="formRuleThree"/>
+
+    <div class="footer">
+      <el-button @click="onResetForm">重置</el-button>
+      <el-button type="primary" @click="onSubmitForm">验证表单</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {getCurrentInstance} from 'vue'
+import { ElMessage } from 'element-plus';
+import FormOne from './components/FormOne.vue'
+import FormTwo from './components/FormTwo.vue'
+import FormThree from './components/FormThree.vue'
+
+const { proxy } = <any>getCurrentInstance();
+
+// 表单组件验证
+const formRulesValidate = (pageRef: string, sonRef: string) => {
+  return new Promise((resolve) => {
+    proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
+      if (valid) resolve(valid);
+    });
+  });
+};
+
+const formRulesResetFields = ()=>{
+  proxy.$refs.formRuleOne.$refs.formRuleOneRef.resetFields();
+  proxy.$refs.formRuleTwo.$refs.formRuleTwoRef.resetFields();
+  proxy.$refs.formRuleThree.$refs.formRuleThreeRef.resetFields();
+}
+
+const onSubmitForm = ()=>{
+  Promise.all([
+    formRulesValidate('formRuleOne','formRuleOneRef'),
+    formRulesValidate('formRuleTwo','formRuleTwoRef'),
+    formRulesValidate('formRuleThree','formRuleThreeRef'),
+  ]).then(res=>{
+    ElMessage.success('表单全部验证成功');
+  })
+}
+
+// 重置表单
+const onResetForm = () => {
+  formRulesResetFields();
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

src/views/form/validateForm/index.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <u-container-layout>
+  <PageWrapLayout>
     <div style="max-width: 800px">
       <el-form
           ref="ruleFormRef"
@@ -68,7 +68,7 @@
         </el-form-item>
       </el-form>
     </div>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 
 <script lang="ts" setup >

src/views/other/iconfont/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout class="components-container">
+  <PageWrapLayout class="components-container">
     <div class="content-box">
       <el-alert
           title="普通引入方式 Font Class"
@@ -40,7 +40,7 @@
       </div>
 
     </div>
-  </u-container-layout>
+  </PageWrapLayout>
 
 </template>
 

src/views/other/markDown/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout class="mark-down">
+  <PageWrapLayout class="mark-down">
     <el-alert
         title="Markdown 是基于 md-editor-v3 插件完成， 官方文档请查看 ：https://imzbf.github.io/md-editor-v3/index"
         type="warning"
@@ -11,27 +11,21 @@
     <div style="margin-top: 20px; flex-shrink: 0">
       <el-button type="primary" @click="submit">提交</el-button>
     </div>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
-<script lang="ts">
+
-// https://www.jianshu.com/p/0b06128a6117
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+import {ref} from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import MdEditor from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
-export default defineComponent({
+const text = ref( '## 你好呀,欢迎！' )
-  components: { MdEditor },
+
-  data() {
+const submit = ()=> {
-    return { text: '## 你好呀,欢迎！' }
+  console.log('this.text', text.value)
-  },
+  ElMessage.success(`提交数据:${text.value}`)
-  methods: {
+}
-    submit() {
-      console.log('this.text', this.text)
-      ElMessage.success(`提交数据:${this.text}`)
-    },
-  },
-})
 </script>
 
 <style lang="scss">

src/views/other/print/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout>
+  <PageWrapLayout>
     <div id="wrap" style="margin-bottom: 20px">
       <div>
         <el-button type="primary" @click="print(1)" >打印图片</el-button>
@@ -30,7 +30,7 @@
       <el-descriptions-item label="honorColor"> 要以彩色打印文本，请将此属性设置为true。默认情况下，所有文本都将以黑色打印。 </el-descriptions-item>
       <el-descriptions-item label="css"> 这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串，也可以是包含多个URL的数组。 </el-descriptions-item>
     </el-descriptions>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 
 <script lang="ts" setup>

src/views/other/qrcode/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout>
+  <PageWrapLayout>
     <div style="display: flex">
       <el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
       <el-button type="primary" @click="handleQrcode(1)">
@@ -26,7 +26,7 @@
       <el-descriptions-item label="colorLight"> 空白区的颜色 </el-descriptions-item>
       <el-descriptions-item label="callback"> 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) </el-descriptions-item>
     </el-descriptions>
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'

src/views/other/rightMenu/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <u-container-layout style="min-height: 300px">
+  <PageWrapLayout style="min-height: 300px">
     <el-button @contextmenu.prevent="rightClick" style="width: 200px">右键菜单</el-button>
     <RightClickMenu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data" />
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 
 <script lang="ts" setup>

src/views/other/svgIcon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout class="components-container">
+  <PageWrapLayout class="components-container">
     <div class="content-box">
       <el-alert
           title="SVG 图标目前使用 vite-plugin-svg-icons 插件完成，官方文档请查看 ：https://github.com/vbenjs/vite-plugin-svg-icons"
@@ -26,7 +26,7 @@
         <el-descriptions-item label="iconStyle"> 图标的样式，默认样式为 { width: "1em", height: " 1em" } </el-descriptions-item>
       </el-descriptions>
     </div>
-  </u-container-layout>
+  </PageWrapLayout>
 
 </template>
 

src/views/table/EditableProTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-container-layout>
+  <PageWrapLayout>
     <div style="margin-bottom: 20px">
       <div style="display: flex; justify-content: flex-end">
         <el-radio-group v-model="radio">
@@ -36,7 +36,7 @@
       <el-descriptions-item label="onChange"> 数据实时改变 </el-descriptions-item>
     </el-descriptions>
 
-  </u-container-layout>
+  </PageWrapLayout>
 </template>
 
 <script lang="ts" setup>

tsconfig.json

@@ -12,8 +12,18 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     // 跳过库检查，解决打包失败
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    // 解析非相对模块名的基准目录
+    "baseUrl": "./",
+    // 模块名到基于 baseUrl 的路径映射的列表。
+    "paths": {
+      "@": ["src"],
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ],
+  "exclude": ["node_modules","dist","**/*.js"]
 }