From 1caf9733e248690420035d40b4b8486952b42c1c Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Mon, 5 Dec 2022 09:10:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=92=A5=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=A4=9A=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 -
 src/components/PageWrapLayout/index.scss      | 18 ++++++
 src/components/PageWrapLayout/index.vue       | 13 +++++
 src/layout/components/Header/ToolRight.vue    |  6 +-
 src/layout/index.vue                          |  1 -
 src/main.ts                                   | 19 ++-----
 src/plugins/ElIcons.ts                        | 16 ++++++
 src/routers/modules/form.ts                   |  6 ++
 src/styles/common.scss                        |  1 +
 src/views/echarts/simple/index.vue            |  4 +-
 src/views/excel/uploadExcel/index.vue         |  4 +-
 .../form/moreForm/components/FormOne.vue      | 48 ++++++++++++++++
 .../form/moreForm/components/FormThree.vue    | 42 ++++++++++++++
 .../form/moreForm/components/FormTwo.vue      | 44 ++++++++++++++
 src/views/form/moreForm/index.scss            | 12 ++++
 src/views/form/moreForm/index.vue             | 57 +++++++++++++++++++
 src/views/form/validateForm/index.vue         |  4 +-
 src/views/other/iconfont/index.vue            |  4 +-
 src/views/other/markDown/index.vue            | 30 ++++------
 src/views/other/print/index.vue               |  4 +-
 src/views/other/qrcode/index.vue              |  4 +-
 src/views/other/rightMenu/index.vue           |  4 +-
 src/views/other/svgIcon/index.vue             |  4 +-
 src/views/table/EditableProTable/index.vue    |  4 +-
 24 files changed, 295 insertions(+), 55 deletions(-)
 create mode 100644 src/components/PageWrapLayout/index.scss
 create mode 100644 src/components/PageWrapLayout/index.vue
 create mode 100644 src/plugins/ElIcons.ts
 create mode 100644 src/views/form/moreForm/components/FormOne.vue
 create mode 100644 src/views/form/moreForm/components/FormThree.vue
 create mode 100644 src/views/form/moreForm/components/FormTwo.vue
 create mode 100644 src/views/form/moreForm/index.scss
 create mode 100644 src/views/form/moreForm/index.vue

diff --git a/package.json b/package.json
index 3b5bd9f..3db9c89 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/PageWrapLayout/index.scss b/src/components/PageWrapLayout/index.scss
new file mode 100644
index 0000000..95810a3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/PageWrapLayout/index.vue b/src/components/PageWrapLayout/index.vue
new file mode 100644
index 0000000..eb8f256
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/Header/ToolRight.vue b/src/layout/components/Header/ToolRight.vue
index a0c5497..78234a3 100644
--- a/src/layout/components/Header/ToolRight.vue
+++ b/src/layout/components/Header/ToolRight.vue
@@ -11,11 +11,11 @@
 
 <script lang="ts" setup>
 import GlobalComSize from './components/globalComSize.vue'
-import HeaderSearch from './components/HeaderSearch'
-import Remind from './components/Remind'
+import HeaderSearch from './components/HeaderSearch.vue'
+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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0591aaf..6e2b946 100644
--- a/src/layout/index.vue
+++ b/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}`);
diff --git a/src/main.ts b/src/main.ts
index b9b6091..b4d1ba8 100644
--- a/src/main.ts
+++ b/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注册导入
@@ -19,24 +22,12 @@ import "@/styles/element-dark.scss";
 import "@/assets/iconfont/iconfont.css";
 import "@/assets/iconfont/iconfont.js";
 
-// 引入全局组件布局
-import UContainerLayout from '@/components/u-container-layout/index.vue'
-
 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(pinia)
 app.use(router)
 
diff --git a/src/plugins/ElIcons.ts b/src/plugins/ElIcons.ts
new file mode 100644
index 0000000..497abda
--- /dev/null
+++ b/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]);
+        }
+    });
+}
+
diff --git a/src/routers/modules/form.ts b/src/routers/modules/form.ts
index 803b7d3..92d0c11 100644
--- a/src/routers/modules/form.ts
+++ b/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'}
+        },
     ]
 }]
 
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 87639fa..05f66cf 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -6,6 +6,7 @@ body {
   overflow-x: hidden;
   margin: 0;
   padding: 0;
+  font-size: 14px;
 }
 body{
   background: #f0f2f5;
diff --git a/src/views/echarts/simple/index.vue b/src/views/echarts/simple/index.vue
index 426eabf..e3de1d0 100644
--- a/src/views/echarts/simple/index.vue
+++ b/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'
diff --git a/src/views/excel/uploadExcel/index.vue b/src/views/excel/uploadExcel/index.vue
index aae5921..cb34687 100644
--- a/src/views/excel/uploadExcel/index.vue
+++ b/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">
diff --git a/src/views/form/moreForm/components/FormOne.vue b/src/views/form/moreForm/components/FormOne.vue
new file mode 100644
index 0000000..861d36a
--- /dev/null
+++ b/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>
diff --git a/src/views/form/moreForm/components/FormThree.vue b/src/views/form/moreForm/components/FormThree.vue
new file mode 100644
index 0000000..3723fbe
--- /dev/null
+++ b/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>
diff --git a/src/views/form/moreForm/components/FormTwo.vue b/src/views/form/moreForm/components/FormTwo.vue
new file mode 100644
index 0000000..ac80205
--- /dev/null
+++ b/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>
diff --git a/src/views/form/moreForm/index.scss b/src/views/form/moreForm/index.scss
new file mode 100644
index 0000000..9c7ee27
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/views/form/moreForm/index.vue b/src/views/form/moreForm/index.vue
new file mode 100644
index 0000000..494e259
--- /dev/null
+++ b/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>
diff --git a/src/views/form/validateForm/index.vue b/src/views/form/validateForm/index.vue
index 4974ba5..654a938 100644
--- a/src/views/form/validateForm/index.vue
+++ b/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 >
diff --git a/src/views/other/iconfont/index.vue b/src/views/other/iconfont/index.vue
index 02c42b2..c7e0b6b 100644
--- a/src/views/other/iconfont/index.vue
+++ b/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>
 
diff --git a/src/views/other/markDown/index.vue b/src/views/other/markDown/index.vue
index 4c75d08..b3c1931 100644
--- a/src/views/other/markDown/index.vue
+++ b/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
-import { defineComponent } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+import { ElMessage } from 'element-plus'
 import MdEditor from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
 
-export default defineComponent({
-  components: { MdEditor },
-  data() {
-    return { text: '## 你好呀,欢迎！' }
-  },
-  methods: {
-    submit() {
-      console.log('this.text', this.text)
-      ElMessage.success(`提交数据:${this.text}`)
-    },
-  },
-})
+const text = ref( '## 你好呀,欢迎！' )
+
+const submit = ()=> {
+  console.log('this.text', text.value)
+  ElMessage.success(`提交数据:${text.value}`)
+}
 </script>
 
 <style lang="scss">
diff --git a/src/views/other/print/index.vue b/src/views/other/print/index.vue
index 149ab59..e6ede15 100644
--- a/src/views/other/print/index.vue
+++ b/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>
diff --git a/src/views/other/qrcode/index.vue b/src/views/other/qrcode/index.vue
index 13cf974..8765078 100644
--- a/src/views/other/qrcode/index.vue
+++ b/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'
diff --git a/src/views/other/rightMenu/index.vue b/src/views/other/rightMenu/index.vue
index 0e855fe..625e3c5 100644
--- a/src/views/other/rightMenu/index.vue
+++ b/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>
diff --git a/src/views/other/svgIcon/index.vue b/src/views/other/svgIcon/index.vue
index 7815426..82ae30c 100644
--- a/src/views/other/svgIcon/index.vue
+++ b/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>
 
diff --git a/src/views/table/EditableProTable/index.vue b/src/views/table/EditableProTable/index.vue
index f738675..ea3f0a3 100644
--- a/src/views/table/EditableProTable/index.vue
+++ b/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>