From 1fe0acf540f4baf6ca3a7b25ebfd2a194d18e26f Mon Sep 17 00:00:00 2001
From: tanyp <742354529@qq.com>
Date: Tue, 25 Apr 2023 16:22:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/layout/Index copy.vue      | 294 ++++++++++++++++++
 .../src/components/layout/Index.vue           | 160 +++++-----
 tansci-boot-ui/src/styles/index.scss          |   2 +-
 tansci-boot-ui/src/utils/global.ts            |   2 +-
 4 files changed, 371 insertions(+), 87 deletions(-)
 create mode 100644 tansci-boot-ui/src/components/layout/Index copy.vue

diff --git a/tansci-boot-ui/src/components/layout/Index copy.vue b/tansci-boot-ui/src/components/layout/Index copy.vue
new file mode 100644
index 0000000..78c266d
--- /dev/null
+++ b/tansci-boot-ui/src/components/layout/Index copy.vue	
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+    import { reactive, onMounted, onBeforeMount, onDeactivated, getCurrentInstance, ref } from "vue"
+    import type { FormInstance, Action } from 'element-plus'
+    import { ElMessageBox } from 'element-plus'
+    import { isDark, toggleDark } from '@/composables'
+    import { getMenus, logout } from "@/api/auth"
+    import { modifyPass } from "@/api/system/user"
+    import Submenu from "@/components/Submenu.vue"
+    import TabsMenu from "@/components/TabsMenu.vue"
+
+    const { proxy } = getCurrentInstance()
+    const logo = new URL('../../assets/image/logo.png', import.meta.url).href
+    const state = reactive({
+        headerHeight: '52px',
+        asideWidth: '180px',
+        routers: [],
+        defaultHeight: null,
+        userVisible: false,
+        user: {
+            avatar: '',
+            username: '',
+            nickname: '未登录',
+            password: '',
+            rePassword: '',
+            oldPassword: ''
+        }
+    })
+
+    onBeforeMount(() => {
+        state.defaultHeight = (document.body.clientHeight || document.documentElement.clientHeight);
+    })
+
+    onMounted(()=>{
+        // 获取菜单
+        let routers:any = [];
+        let _routes:any = getMenus();
+
+        _routes.forEach((item:any)=>{
+            if(item.children && item.isShow){
+                routers.push(item)
+            }
+        })
+        state.routers = routers
+
+        state.user = proxy.$global.user.info
+
+        window.addEventListener('resize', onDefaultHeight);
+    })
+
+    onDeactivated(()=>{
+        window.removeEventListener('resize', onDefaultHeight, false)
+    })
+
+    function onDefaultHeight(){
+        state.defaultHeight = window.innerHeight
+    }
+    function onHeaderCommand(command:any){
+        if('logout' === command){
+            logout()
+        } else if('personal' === command){
+            state.userVisible = true
+        }
+    }
+
+    const userRef = ref<FormInstance>();
+    const validatePass = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入确认密码'));
+        } else if (value !== state.user.password) {
+            callback(new Error('两次输入密码不一致!'));
+        } else {
+            callback();
+        }
+    }
+    const onUserSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid)=>{
+      if(valid){
+        modifyPass({
+            username: state.user.username, 
+            password: state.user.password,
+            oldPassword: state.user.oldPassword
+        }).then(res=>{
+            if(res){
+                state.userVisible = false
+                ElMessageBox.alert('修改密码成功，请重新登录！', '提示', {
+                    confirmButtonText: '确定',
+                    type: 'warning',
+                    callback: (action: Action) =>{
+                        logout()
+                    }
+                })
+            }
+        })
+      }
+    })
+  }
+
+</script>
+<template>
+  <div class="layout-container">
+    <el-container>
+        <el-header :height="state.headerHeight">
+            <div class="header-logo">
+                <el-image :src="logo"></el-image>
+                <span class="title">{{proxy.$global.title}}</span>
+            </div>
+            <div class="header-content">
+                <div class="header-dark">
+                    <el-button @click="toggleDark()" link type="primary">
+                        <template #icon>
+                            <el-icon :size="20"><Sunny v-show="!isDark"/></el-icon>
+                            <el-icon :size="20"><Moon v-show="isDark"/></el-icon>
+                        </template>
+                    </el-button>
+                </div>
+                <div class="header-login">
+                    <el-dropdown @command="onHeaderCommand">
+                        <span class="el-dropdown-link">
+                            <span>{{state.user.nickname}}</span>
+                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item command="personal">个人中心</el-dropdown-item>
+                                <el-dropdown-item command="logout">退出</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
+            </div>
+        </el-header>
+        <el-container>
+            <el-aside :width="state.asideWidth" :style="{height: state.defaultHeight+'px'}">
+                <el-menu router :default-active="$route.path">
+                    <template v-for="item in state.routers" :key="item">
+                        <el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
+                            <el-icon v-if="item.icon" style="vertical-align: middle;">
+                                <component :is="item.icon"></component>
+                            </el-icon>
+                            <span style="vertical-align: middle;">{{item.meta.title}}</span>
+                        </el-menu-item>
+                        <Submenu v-else :data="item"></Submenu>
+                    </template>
+                </el-menu>
+            </el-aside>
+            <el-main> 
+                <TabsMenu></TabsMenu>
+                <el-card :shadow="proxy.$global.cardShadow" style="margin: 0.3rem;">
+                    <el-scrollbar :height="state.defaultHeight-150">
+                        <router-view />
+                    </el-scrollbar>
+                </el-card>
+            </el-main>
+        </el-container>
+        <el-backtop target=".el-main"></el-backtop>
+    </el-container>
+    <el-dialog v-model="state.userVisible" title="个人中心" width="40%" :show-close="false">
+        <el-form :model="state.user" ref="userRef" :rules="rules" label-width="80px" status-icon>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="用户头像" prop="avatar">
+                        <el-avatar :size="50" :src="state.user.avatar" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="用户名称" prop="username">
+                        <el-input v-model="state.user.username" disabled style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="用户昵称" prop="nickname">
+                        <el-input v-model="state.user.nickname" disabled placeholder="请输入昵称" style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="用户电话" prop="phone">
+                        <el-input v-model="state.user.phone" disabled style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="用户邮箱" prop="email">
+                        <el-input v-model="state.user.email" disabled style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="原始密码" prop="oldPassword" :rules="[{required: true, message: '请输入原始密码', trigger: 'blur'}]">
+                        <el-input v-model="state.user.oldPassword" type="password" placeholder="请输入原始密码" style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="用户密码" prop="password" :rules="[{required: true, message: '请输入密码', trigger: 'blur'},
+                        {pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线', trigger: 'blur'}]">
+                        <el-input v-model="state.user.password" type="password" placeholder="请输入密码" style="width: 100%"/>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item prop="rePassword" label="确认密码" :rules="[{required: true, message: '请输入确认密码', trigger: 'blur'},{validator: validatePass, trigger: 'blur'}]">
+                        <el-input v-model="state.user.rePassword" type="password" placeholder="请输入确认密码"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <el-button @click="onUserSubmit(userRef)" type="primary">修改密码</el-button>
+        </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+    .layout-container{
+        background: var(--el-bg-color);
+        .el-header{
+            display: flex;
+            justify-content: space-between;
+            line-height: 52px;
+            .header-logo{
+                display: flex;
+                height: 52px;
+                line-height: 52px;
+                padding-left: 0.2rem;
+                cursor: pointer;
+                .title{
+                    padding-left: 0.6rem;
+                    color: var(-t);
+                    font-weight: 700;
+                    font-size: 18px;
+                }
+            }
+            .header-content{
+                display: flex;
+                justify-content: right;
+                .header-dark{
+                    padding-right: 1rem;
+                }
+                .header-login{
+                    .el-dropdown{
+                        cursor: pointer;
+                        line-height: 52px;
+                    }
+                }
+            }
+        }
+        .el-aside{
+            :deep(.el-menu) {
+                margin: 0 0.6rem;
+                padding: 0 0.2rem;
+                border-right: none;
+                background: transparent;
+                .el-menu-item, .el-sub-menu__title {
+                    border-radius: 0.2rem;
+                    height: 36px;
+                    line-height: 36px;
+                    margin: 0.4rem 0;
+                }
+                .el-menu-item, .el-menu-item-group__title, .el-sub-menu, .el-sub-menu__title{
+                    padding-left: 0;
+                }
+                .el-sub-menu__title:hover{
+                    background: transparent;
+                    color: var(--theme);
+                }
+                .el-menu-item:hover{
+                    background: transparent;
+                    color: var(--theme);
+                }
+                .el-menu-item.is-active {
+                    background: transparent;
+                }
+            }
+        }
+        .el-aside::-webkit-scrollbar{
+            width: 0px;
+        }
+        .el-main{
+            padding: 0;
+            overflow-x: hidden;
+            overflow-y: hidden;
+        }
+        .el-main::-webkit-scrollbar{
+            width: 0px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/tansci-boot-ui/src/components/layout/Index.vue b/tansci-boot-ui/src/components/layout/Index.vue
index 78c266d..50e741b 100644
--- a/tansci-boot-ui/src/components/layout/Index.vue
+++ b/tansci-boot-ui/src/components/layout/Index.vue
@@ -12,7 +12,7 @@
     const logo = new URL('../../assets/image/logo.png', import.meta.url).href
     const state = reactive({
         headerHeight: '52px',
-        asideWidth: '180px',
+        asideWidth: '260px',
         routers: [],
         defaultHeight: null,
         userVisible: false,
@@ -54,12 +54,8 @@
     function onDefaultHeight(){
         state.defaultHeight = window.innerHeight
     }
-    function onHeaderCommand(command:any){
-        if('logout' === command){
-            logout()
-        } else if('personal' === command){
-            state.userVisible = true
-        }
+    function onPersonal(){
+        state.userVisible = true
     }
 
     const userRef = ref<FormInstance>();
@@ -100,61 +96,72 @@
 <template>
   <div class="layout-container">
     <el-container>
-        <el-header :height="state.headerHeight">
-            <div class="header-logo">
-                <el-image :src="logo"></el-image>
-                <span class="title">{{proxy.$global.title}}</span>
-            </div>
-            <div class="header-content">
-                <div class="header-dark">
-                    <el-button @click="toggleDark()" link type="primary">
+        <el-aside :width="state.asideWidth">
+            <el-card :shadow="proxy.$global.cardShadow" :body-style="{padding: '1rem'}">
+                <div class="logo">
+                    <el-image :src="logo" fit="fit" style="width: 20%; height:00%"></el-image>
+                    <span class="title">{{proxy.$global.title}}</span>
+                </div>
+                <el-scrollbar :height="state.defaultHeight-115">
+                    <el-menu router :default-active="$route.path">
+                        <template v-for="item in state.routers" :key="item">
+                            <el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
+                                <el-icon v-if="item.icon" style="vertical-align: middle;">
+                                    <component :is="item.icon"></component>
+                                </el-icon>
+                                <span style="vertical-align: middle;">{{item.meta.title}}</span>
+                            </el-menu-item>
+                            <Submenu v-else :data="item"></Submenu>
+                        </template>
+                    </el-menu>
+                </el-scrollbar>
+            </el-card>
+        </el-aside>
+        <el-container>
+            <el-header :height="state.headerHeight">
+                <TabsMenu></TabsMenu>
+                <div>
+                <el-card :shadow="proxy.$global.cardShadow" :body-style="{padding: '0 1rem', 'line-height': state.headerHeight+'px'}">
+                    <el-button link>
                         <template #icon>
-                            <el-icon :size="20"><Sunny v-show="!isDark"/></el-icon>
-                            <el-icon :size="20"><Moon v-show="isDark"/></el-icon>
+                            <el-icon :size="24"><Monitor /></el-icon>
                         </template>
                     </el-button>
-                </div>
-                <div class="header-login">
-                    <el-dropdown @command="onHeaderCommand">
-                        <span class="el-dropdown-link">
-                            <span>{{state.user.nickname}}</span>
-                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
-                        </span>
-                        <template #dropdown>
-                            <el-dropdown-menu>
-                                <el-dropdown-item command="personal">个人中心</el-dropdown-item>
-                                <el-dropdown-item command="logout">退出</el-dropdown-item>
-                            </el-dropdown-menu>
+                    <el-button link>
+                        <template #icon>
+                            <el-icon :size="24"><FullScreen /></el-icon>
                         </template>
-                    </el-dropdown>
+                    </el-button>
+                    <el-button @click="toggleDark()" link>
+                        <template #icon>
+                            <el-icon :size="24"><Sunny v-show="!isDark"/></el-icon>
+                            <el-icon :size="24"><Sunrise v-show="isDark"/></el-icon>
+                        </template>
+                    </el-button>
+                    <el-popover placement="bottom" :width="260"  trigger="click">
+                        <template #reference>
+                            <el-button link>{{state.user.nickname}}</el-button>
+                        </template>
+                        <div style="text-align: center;">
+                            <div><el-avatar :size="50" :src="state.user.avatar" /></div>
+                            <div style="font-size: 22px; padding: 0.4rem 0;">{{state.user.username}}</div>
+                            <el-button @click="onPersonal()" type="primary" plain>个人中心</el-button>
+                            <el-button @click="logout()" type="danger" plain>注销登录</el-button>
+                        </div>
+                    </el-popover>
+                </el-card>
                 </div>
-            </div>
-        </el-header>
-        <el-container>
-            <el-aside :width="state.asideWidth" :style="{height: state.defaultHeight+'px'}">
-                <el-menu router :default-active="$route.path">
-                    <template v-for="item in state.routers" :key="item">
-                        <el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
-                            <el-icon v-if="item.icon" style="vertical-align: middle;">
-                                <component :is="item.icon"></component>
-                            </el-icon>
-                            <span style="vertical-align: middle;">{{item.meta.title}}</span>
-                        </el-menu-item>
-                        <Submenu v-else :data="item"></Submenu>
-                    </template>
-                </el-menu>
-            </el-aside>
-            <el-main> 
-                <TabsMenu></TabsMenu>
-                <el-card :shadow="proxy.$global.cardShadow" style="margin: 0.3rem;">
+            </el-header>
+            <el-main>
+                <el-card :shadow="proxy.$global.cardShadow">
                     <el-scrollbar :height="state.defaultHeight-150">
                         <router-view />
                     </el-scrollbar>
                 </el-card>
             </el-main>
         </el-container>
-        <el-backtop target=".el-main"></el-backtop>
     </el-container>
+    <el-backtop target=".el-main"></el-backtop>
     <el-dialog v-model="state.userVisible" title="个人中心" width="40%" :show-close="false">
         <el-form :model="state.user" ref="userRef" :rules="rules" label-width="80px" status-icon>
             <el-row :gutter="20">
@@ -223,12 +230,24 @@
         .el-header{
             display: flex;
             justify-content: space-between;
-            line-height: 52px;
-            .header-logo{
+            align-items: center;
+            .el-card{
+                margin-top: 1.2rem;
+                .el-button{
+                    margin: 1rem 0.8rem;
+                }
+            }
+        }
+        .el-aside{
+            margin: 0.6rem;
+            padding: 0.4rem;
+            overflow-x: auto;
+            overflow-y: hidden;
+            .logo{
                 display: flex;
-                height: 52px;
-                line-height: 52px;
-                padding-left: 0.2rem;
+                justify-content: center;
+                align-items: center;
+                padding-top: 0.4rem;
                 cursor: pointer;
                 .title{
                     padding-left: 0.6rem;
@@ -237,35 +256,13 @@
                     font-size: 18px;
                 }
             }
-            .header-content{
-                display: flex;
-                justify-content: right;
-                .header-dark{
-                    padding-right: 1rem;
-                }
-                .header-login{
-                    .el-dropdown{
-                        cursor: pointer;
-                        line-height: 52px;
-                    }
-                }
-            }
-        }
-        .el-aside{
             :deep(.el-menu) {
-                margin: 0 0.6rem;
-                padding: 0 0.2rem;
+                padding-left: 0;
                 border-right: none;
                 background: transparent;
                 .el-menu-item, .el-sub-menu__title {
-                    border-radius: 0.2rem;
-                    height: 36px;
-                    line-height: 36px;
                     margin: 0.4rem 0;
                 }
-                .el-menu-item, .el-menu-item-group__title, .el-sub-menu, .el-sub-menu__title{
-                    padding-left: 0;
-                }
                 .el-sub-menu__title:hover{
                     background: transparent;
                     color: var(--theme);
@@ -279,16 +276,9 @@
                 }
             }
         }
-        .el-aside::-webkit-scrollbar{
-            width: 0px;
-        }
         .el-main{
-            padding: 0;
             overflow-x: hidden;
             overflow-y: hidden;
         }
-        .el-main::-webkit-scrollbar{
-            width: 0px;
-        }
     }
 </style>
\ No newline at end of file
diff --git a/tansci-boot-ui/src/styles/index.scss b/tansci-boot-ui/src/styles/index.scss
index bfce088..a54fea3 100644
--- a/tansci-boot-ui/src/styles/index.scss
+++ b/tansci-boot-ui/src/styles/index.scss
@@ -11,7 +11,7 @@
   // 局部背景
   // --el-bg-color: radial-gradient( white 0%, #FAFDFE 10%, #ddf8e7 50%, #FAFDFE 90%, white 100%);
   // --el-bg-color: radial-gradient(#d9f8e5 0%, #FAFDFE 80%, #e7fcef 100%);
-  --el-bg-color: #FAFDFE;
+  --el-bg-color: #f5f5f5;
   // 背景色
   --bg1: #FAFAFA;
 
diff --git a/tansci-boot-ui/src/utils/global.ts b/tansci-boot-ui/src/utils/global.ts
index f4d638a..752846c 100644
--- a/tansci-boot-ui/src/utils/global.ts
+++ b/tansci-boot-ui/src/utils/global.ts
@@ -2,7 +2,7 @@
 export default {
   title: 'Tansci Boot',
   baseApi: import.meta.env.VITE_BASE_API,
-  cardShadow: 'never',
+  cardShadow: 'always',
   user: {
     info: {},
     authorities: [],