From 15d7e0c5558e04914400e4ca7a2eb7ea1bdeb213 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Wed, 28 Sep 2022 22:06:33 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E4=BC=98=E5=8C=96=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=EF=BC=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |  4 +-
 public/index.html                             |  2 +-
 src/components/u-Hamburger/index.vue          | 49 +++++--------------
 src/layout/Header/components/Personal.vue     | 21 ++++----
 .../Header/components/globalComSize.vue       |  6 ++-
 src/layout/Header/index.vue                   | 36 ++++++++++----
 src/layout/Sidebar/components/Menu.vue        |  6 +--
 src/layout/Sidebar/index.vue                  |  2 +-
 src/router/modules/charts.ts                  |  2 +-
 src/router/modules/chat.ts                    |  2 +-
 src/router/modules/clipboard.ts               |  2 +-
 src/router/modules/error.ts                   |  2 +-
 src/router/modules/excel.ts                   |  2 +-
 src/router/modules/from.ts                    |  2 +-
 src/router/modules/nested.ts                  |  2 +-
 src/router/modules/other.ts                   |  2 +-
 src/router/modules/system.ts                  |  2 +-
 src/router/modules/table.ts                   |  2 +-
 src/styles/element-dark.scss                  | 13 ++++-
 src/styles/element.scss                       |  5 ++
 src/styles/index.scss                         |  1 +
 src/styles/transition.scss                    | 13 +++++
 src/utils/index.ts                            | 13 +++++
 src/views/excel/export-excel.vue              | 34 ++++++++++---
 src/views/excel/export-style-excel.vue        | 34 ++++++++++---
 src/views/login/index.vue                     | 11 ++++-
 src/views/other/right-menu.vue                |  3 +-
 27 files changed, 179 insertions(+), 94 deletions(-)
 create mode 100644 src/styles/element.scss
diff --git a/index.html b/index.html
index 8fe7e04..70a38a2 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Vue admin perfect</title>
   </head>
   <body>
   <div id="app">
diff --git a/public/index.html b/public/index.html
index 3e5a139..7003270 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/src/components/u-Hamburger/index.vue b/src/components/u-Hamburger/index.vue
index 092be10..83e5ea2 100644
--- a/src/components/u-Hamburger/index.vue
+++ b/src/components/u-Hamburger/index.vue
@@ -1,8 +1,8 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb" mode="out-in">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in matched" :key="item.name">
+        <span v-if="item.redirect === 'noRedirect' || index == matched.length - 1" class="no-redirect">{{ item.meta.title }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -11,45 +11,20 @@
 
 <script lang="ts" setup>
   import pathToRegexp from 'path-to-regexp'
-  import { onMounted, ref, watch } from 'vue'
-  import { useRoute } from 'vue-router'
+  import { onMounted, ref, watch,computed } from 'vue'
+  import { useRoute ,useRouter} from 'vue-router'
 
   const levelList = ref([])
   const route = useRoute()
+  const router = useRouter()
 
-  // 获取面包屑
-  const getBreadcrumb = () => {
-    let matched = route.matched.filter((item) => item.meta && item.meta.title)
-    const first = matched[0]
-    levelList.value = matched.filter(
-      (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false,
-    )
-  }
-
-  const handleLink = ()=>{
-
-  }
-
-  onMounted(() => {
-    getBreadcrumb()
-    watch(route, () => {
-      if (route.path.startsWith('/redirect/')) {
-        return
-      }
-      getBreadcrumb()
+  const handleLink = (item)=>{
+    router.push({
+      path:item.path
     })
-  })
+  }
+
+  const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
+
 </script>
 
-<style lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    margin-left: 10px;
-    display: inline-block;
-    font-size: 14px;
-    margin-bottom: 4px;
-    .no-redirect {
-      color:#303133;
-      cursor: text;
-    }
-  }
-</style>
diff --git a/src/layout/Header/components/Personal.vue b/src/layout/Header/components/Personal.vue
index 252abbc..1d19dab 100644
--- a/src/layout/Header/components/Personal.vue
+++ b/src/layout/Header/components/Personal.vue
@@ -11,11 +11,11 @@
       <el-form-item label="姓名">
         <el-input v-model="ruleForm.name" disabled></el-input>
       </el-form-item>
-      <el-form-item label="手机号码">
-        <el-input v-model="ruleForm.mobile" disabled></el-input>
+      <el-form-item label="旧的密码" prop="password">
+        <el-input v-model="ruleForm.password" type="password"></el-input>
       </el-form-item>
-      <el-form-item label="修改密码" prop="password">
-        <el-input v-model="ruleForm.password"></el-input>
+      <el-form-item label="新的密码" prop="configPassword">
+        <el-input v-model="ruleForm.configPassword" type="password"></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -29,9 +29,10 @@
 
 <script lang="ts" setup>
   import { ref, defineExpose, reactive } from 'vue'
-  import { ElMessageBox } from 'element-plus'
   import type { ElForm } from 'element-plus'
   const dialogVisible = ref(false)
+  import {useUserStore} from "@/store/modules/user"
+  const UserStore = useUserStore()
   const show = () => {
     dialogVisible.value = true
   }
@@ -43,15 +44,15 @@
   const formSize = ref('')
   const ruleFormRef = ref<FormInstance>()
   const ruleForm = reactive({
-    name: '',
-    mobile: '',
-    password: '',
+    name: UserStore.userInfo.username,
+    password: UserStore.userInfo.password,
+    configPassword: '',
   })
   const rules = reactive({
-    password: [
+    configPassword: [
       {
         required: true,
-        message: '请输入密码',
+        message: '请输入新的密码',
         trigger: 'blur',
       },
     ],
diff --git a/src/layout/Header/components/globalComSize.vue b/src/layout/Header/components/globalComSize.vue
index 8505f6e..3868d0e 100644
--- a/src/layout/Header/components/globalComSize.vue
+++ b/src/layout/Header/components/globalComSize.vue
@@ -33,5 +33,9 @@ const setAssemblySize = (item: string) => {
 </script>
 
 <style scoped lang="scss">
-
+.transverseMenu {
+  .size-icon {
+    color: white;
+  }
+}
 </style>
diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
index b8af54c..9d4062e 100644
--- a/src/layout/Header/index.vue
+++ b/src/layout/Header/index.vue
@@ -2,12 +2,10 @@
   <div
     class="m-layout-header"
     :class="[
-        SettingStore.themeConfig.fixedHeader&&'zb-fixed-header',
-        isCollapse?'fixed-header-collapse':'fixed-header-no-collapse'
+        SettingStore.themeConfig.fixedHeader?'zb-fixed-header':'zb-no-fixed-header',
+          mode === 'horizontal'?'':isCollapse?'fixed-header-collapse':'fixed-header-no-collapse'
         ]"
-
   >
-<!--    :style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '60' : '210'}px` }"-->
     <div
       class="header"
       :class="{
@@ -16,7 +14,7 @@
     >
       <u-menu v-if="mode === 'horizontal'" />
       <div class="left" v-if="mode === 'vertical'">
-        <div>
+        <div class="hamburger-container">
           <el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon>
           <el-icon class="icon" v-else @click="handleCollapse"><fold /></el-icon>
         </div>
@@ -44,8 +42,10 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item :command="1">退出登录</el-dropdown-item>
-              <el-dropdown-item :command="2">修改密码</el-dropdown-item>
+              <el-dropdown-item :command="2" >
+                <el-icon><Edit /></el-icon>修改密码</el-dropdown-item>
+              <el-dropdown-item :command="1" divided>
+                <el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -98,10 +98,14 @@
     })
       .then(async () => {
         try {
-          await UserStore.logout()
           router.push({ path: '/login' })
+          await UserStore.logout()
           PermissionStore.clearRoutes()
           TagsViewStore.clearVisitedView()
+          ElMessage({
+            type: "success",
+            message: "退出登录成功！"
+          });
         } catch (e) {}
       })
       .catch(() => {})
@@ -139,12 +143,13 @@
     border-bottom: 1px solid #eee;
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding: 0 10px 0 0;
     box-sizing: border-box;
     justify-content: space-between;
     .left {
       display: flex;
       align-items: center;
+      height: 100%;
     }
     .right {
       display: flex;
@@ -160,7 +165,18 @@
     right: 0;
     z-index: 9;
   }
-
+  .zb-no-fixed-header{
+    width: 100%!important;;
+  }
+  .hamburger-container{
+    padding: 0px 15px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
   .m-layout-header {
     width: 100%;
     background: white;
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index 5f648d3..618c6ad 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -2,7 +2,7 @@
   <el-menu
     :default-active="activeMenu"
     background-color="#304156"
-    text-color="#fff"
+    text-color="#bfcbd9"
     :mode="mode"
     :unique-opened="SettingStore.themeConfig.uniqueOpened"
     :collapse-transition="false"
@@ -23,7 +23,7 @@
   import { useRoute } from 'vue-router'
   import {usePermissionStore} from "@/store/modules/permission"
   import {useSettingStore} from "@/store/modules/setting"
-  import { ref, computed } from 'vue'
+  import { computed } from 'vue'
 
   // 在setup中获取store
   const route = useRoute()
@@ -33,8 +33,6 @@
   // 获取路由
   const permission_routes = computed(() => PermissionStore.permission_routes)
 
-
-
   const activeMenu = computed(() => {
     const { meta, path } = route
     // if set path, the sidebar will highlight the path you set
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index 5208cfe..f5e0cf5 100644
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -11,7 +11,7 @@
 import UMenu from './components/Menu.vue'
 import logo from './components/Logo.vue'
 import {useSettingStore} from "@/store/modules/setting"
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 
 const SettingStore = useSettingStore()
 // 是否折叠
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index f8227ee..0452245 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
 const chartsRouter = {
     path: '/charts',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/charts/migration',
     name: 'Charts',
     meta: {
         title: '可视化图表',
diff --git a/src/router/modules/chat.ts b/src/router/modules/chat.ts
index 0c717c0..5fb755a 100644
--- a/src/router/modules/chat.ts
+++ b/src/router/modules/chat.ts
@@ -5,7 +5,7 @@ import Layout from "@/layout/index.vue";
 const chartsRouter = {
     path: '/chat',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/charts/index',
     name: 'chat',
     meta: {
         title: '聊天框',
diff --git a/src/router/modules/clipboard.ts b/src/router/modules/clipboard.ts
index d58db9f..9edf65a 100644
--- a/src/router/modules/clipboard.ts
+++ b/src/router/modules/clipboard.ts
@@ -3,7 +3,7 @@ import Layout from '@/layout/index.vue'
 const clipboardTable = {
     path: '/clipboard',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/clipboard/index',
     name: 'clipboard',
     meta: {
         title: 'clipboard',
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index de139db..645461b 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -7,7 +7,7 @@ import Layout from "@/layout/index.vue";
 const errorRouter = {
     path: '/error',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/error/404',
     name: 'error',
     meta: {
         title: '错误页面',
diff --git a/src/router/modules/excel.ts b/src/router/modules/excel.ts
index 48b7598..d5f9808 100644
--- a/src/router/modules/excel.ts
+++ b/src/router/modules/excel.ts
@@ -7,7 +7,7 @@ import Layout from "@/layout/index.vue";
 const excelRouter = {
     path: '/excel',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/excel/export-excel',
     name: 'excel',
     meta: {
         title: 'Excel',
diff --git a/src/router/modules/from.ts b/src/router/modules/from.ts
index bd8ae7b..293d575 100644
--- a/src/router/modules/from.ts
+++ b/src/router/modules/from.ts
@@ -6,7 +6,7 @@ import Layout from "@/layout/index.vue";
 const formRouter = {
     path: '/form',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/form/validateForm',
     name: 'form',
     alwaysShow:true,
     meta: {
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
index 266318e..37bfdca 100644
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -7,7 +7,7 @@ import Layout from "@/layout/index.vue";
 const nestedRouter = {
     path: '/nested',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/form/menu1',
     name: 'nested',
     meta: {
         title: '路由嵌套',
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
index d3028e0..d99c2d6 100644
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@@ -5,7 +5,7 @@ import Layout from '@/layout/index.vue'
 const othersRouter = {
   path: '/other',
   component: Layout,
-  redirect: 'noRedirect',
+  redirect: '/other/editor',
   name: 'other',
   meta: {
     title: '扩展组件',
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 6435eec..ed777ef 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -5,7 +5,7 @@ import Layout from '@/layout/index.vue'
 const systemRouter = {
     path: '/system',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/system/page',
     name: 'system',
     meta: {
         title: '系统管理',
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
index eb286e0..def470e 100644
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -6,7 +6,7 @@ import Layout from "@/layout/index.vue";
 const tableRouter = {
     path: '/table',
     component: Layout,
-    redirect: 'noRedirect',
+    redirect: '/table/comprehensive',
     name: 'table',
     meta: {
         title: '超级表格',
diff --git a/src/styles/element-dark.scss b/src/styles/element-dark.scss
index 7ea19cc..8b93166 100644
--- a/src/styles/element-dark.scss
+++ b/src/styles/element-dark.scss
@@ -104,7 +104,14 @@ html.dark {
       }
     }
   }
-
+  .zb-pro-table .header{
+    background: none!important;
+    border: var(--zb-border-light);
+  }
+  .zb-pro-table .footer{
+    background: none!important;
+    border: var(--zb-border-light);
+  }
   // m-layout-header
   .m-layout-header{
     color: var(--el-text-color-primary) !important;
@@ -143,5 +150,9 @@ html.dark {
     color: white!important;
   }
 
+  .el-table__header th {
+    font-weight: bold;
+    color: white;
+  }
 
 }
diff --git a/src/styles/element.scss b/src/styles/element.scss
new file mode 100644
index 0000000..240386e
--- /dev/null
+++ b/src/styles/element.scss
@@ -0,0 +1,5 @@
+.el-table__header th {
+  font-weight: bold;
+  color: #252525;
+  background: #fafafa;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 20b2e8c..7cce0d7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,5 +2,6 @@
 @import './sidebar.scss';
 @import './transition.scss';
 @import "./common.scss";
+@import "./element.scss";
 
 
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index da2b579..00eab2e 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -63,6 +63,19 @@
 //  position: absolute;
 //  z-index: -1;
 //}
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.2s ease;
+}
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.breadcrumb-leave-active {
+  position: absolute;
+  z-index: -1;
+}
 
 
 .fade-transform-leave-active,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 670451e..df3b8e8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -479,3 +479,16 @@ export function getLightColor(color: string, level: number) {
   for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
   return rgbToHex(rgb[0], rgb[1], rgb[2]);
 }
+
+export function getTimeState() {
+  // 获取当前时间
+  let timeNow = new Date();
+  // 获取当前小时
+  let hours = timeNow.getHours();
+  // 判断当前时间段
+  if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
+  if (hours >= 10 && hours <= 14) return `中午好 🌞`;
+  if (hours >= 14 && hours <= 18) return `下午好 🌞`;
+  if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
+  if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
+}
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index bd644cf..391b630 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -1,6 +1,6 @@
 <template>
   <u-container-layout>
-    <div style="margin-bottom: 15px; display: flex; align-items: center">
+    <div class="header">
       <el-input
         v-model="input"
         placeholder="请输入文件名"
@@ -22,11 +22,13 @@
         <el-icon style="margin-right: 10px"><document-remove /></el-icon>导出 Excel
       </el-button>
     </div>
-    <el-table :data="list" style="width: 100%" border>
-      <template v-for="(item, index) in column" :key="index">
-        <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
-      </template>
-    </el-table>
+    <div class="footer">
+      <el-table :data="list"  border class="table">
+        <template v-for="(item, index) in column" :key="index">
+          <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
+        </template>
+      </el-table>
+    </div>
   </u-container-layout>
 </template>
 
@@ -100,4 +102,22 @@
   }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+.footer{
+  flex: 1;
+  position: relative;
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
+</style>
diff --git a/src/views/excel/export-style-excel.vue b/src/views/excel/export-style-excel.vue
index b026ad9..bd9f790 100644
--- a/src/views/excel/export-style-excel.vue
+++ b/src/views/excel/export-style-excel.vue
@@ -1,6 +1,6 @@
 <template>
   <u-container-layout>
-    <div style="margin-bottom: 15px; display: flex; align-items: center">
+    <div class=".header">
       <el-input
         v-model="input"
         placeholder="请输入文件名"
@@ -10,11 +10,13 @@
         <el-icon style="margin-right: 10px"><document-remove /></el-icon>导出样式 Excel
       </el-button>
     </div>
-    <el-table :data="list" style="width: 100%" border>
-      <template v-for="(item, index) in column" :key="index">
-        <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
-      </template>
-    </el-table>
+    <div class="footer">
+      <el-table :data="list" class="table" border>
+        <template v-for="(item, index) in column" :key="index">
+          <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
+        </template>
+      </el-table>
+    </div>
   </u-container-layout>
 </template>
 
@@ -88,4 +90,22 @@
   }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+.footer{
+  flex: 1;
+  position: relative;
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f8a92cf..271056b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -63,9 +63,12 @@
 <script lang="ts" setup>
   import { ref, reactive } from 'vue'
   import type { FormInstance } from 'element-plus'
+  import { ElNotification } from "element-plus";
   import { useRouter } from 'vue-router'
   import {useUserStore} from "@/store/modules/user"
   import { ElMessage } from 'element-plus'
+  import {getTimeState} from '@/utils/index'
+
   const ruleFormRef = ref<FormInstance>()
   const router = useRouter()
   const UserStore = useUserStore()
@@ -108,14 +111,18 @@
   const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
     formEl.validate(async (valid) => {
-      console.log('valid==', valid)
       if (valid) {
         // 登录
         await UserStore.login( ruleForm)
-        ElMessage.success('登录成功')
         router.push({
           path: '/',
         })
+        ElNotification({
+          title: getTimeState(),
+          message: "欢迎登录 Vue Admin Perfect",
+          type: "success",
+          duration: 3000
+        });
       } else {
         console.log('error submit!')
         return false
diff --git a/src/views/other/right-menu.vue b/src/views/other/right-menu.vue
index 1aea1fa..7736e63 100644
--- a/src/views/other/right-menu.vue
+++ b/src/views/other/right-menu.vue
@@ -1,6 +1,6 @@
 <template>
   <u-container-layout style="min-height: 300px">
-    <el-button @contextmenu.prevent="rightClick">右键菜单</el-button>
+    <el-button @contextmenu.prevent="rightClick" style="width: 200px">右键菜单</el-button>
     <u-right-click-menu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data" />
   </u-container-layout>
 </template>
@@ -8,6 +8,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
   import URightClickMenu from '@/components/u-rightClickMenu/index.vue'
+
   const clientX = ref(0)
   const clientY = ref(0)
   import { useRouter } from 'vue-router'
