From 4b99b44d08859bdac244fa6b90a6245c7c258d31 Mon Sep 17 00:00:00 2001
From: tanyp <742354529@qq.com>
Date: Sat, 6 May 2023 16:30:37 +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.vue           | 70 +++++++++++--------
 .../components/layout/component/TbHeader.vue  | 18 ++++-
 .../components/layout/component/TbMenu.vue    | 11 +--
 3 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/tansci-boot-ui/src/components/layout/Index.vue b/tansci-boot-ui/src/components/layout/Index.vue
index 1a1750f..f5457e8 100644
--- a/tansci-boot-ui/src/components/layout/Index.vue
+++ b/tansci-boot-ui/src/components/layout/Index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-    import { reactive, onMounted, onBeforeMount, onDeactivated, getCurrentInstance } from "vue"
+    import { computed, reactive, onMounted, onBeforeMount, onDeactivated, getCurrentInstance } from "vue"
+    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+    import en from 'element-plus/dist/locale/en.mjs'
     import { getMenus } from "@/api/auth"
     import TbMenu from "./component/TbMenu.vue"
     import TbHeader from "./component/TbHeader.vue"
@@ -8,9 +10,10 @@
     const logo = new URL('../../assets/image/logo.png', import.meta.url).href
     const state = reactive({
         headerHeight: '52px',
-        asideWidth: '260px',
+        asideWidth: '220px',
         defaultHeight: null,
         isCollapse: false,
+        language: 'zh-cn',
         routers: [],
     })
 
@@ -44,40 +47,47 @@
     function onCollapse(val:Boolean){
         if(val){
             state.isCollapse = false
-            state.asideWidth = "260px"
+            state.asideWidth = "220px"
         } else {
             state.isCollapse = true
-            state.asideWidth = "110px"
+            state.asideWidth = "80px"
         }
     }
 
+    const locale = computed(() => (state.language === 'zh-cn' ? zhCn : en))
+    function onLanguage(val:any){
+        state.language = val
+    }
+
 </script>
 <template>
-  <div class="layout-container">
-    <el-container>
-        <el-aside :width="state.asideWidth">
-            <TbMenu :routers="state.routers" 
-                :logo="logo" 
-                :shadow="proxy.$global.cardShadow" 
-                :title="proxy.$global.title" 
-                :height="state.defaultHeight-105"
-                :isCollapse="state.isCollapse"
-                @onCollapse="onCollapse"/>
-        </el-aside>
-        <el-container>
-            <el-header :height="state.headerHeight">
-                <TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse"/>
-            </el-header>
-            <el-main>
-                <el-card :shadow="proxy.$global.cardShadow">
-                    <el-scrollbar :height="state.defaultHeight-126">
-                        <router-view />
-                    </el-scrollbar>
-                </el-card>
-            </el-main>
-        </el-container>
-    </el-container>
-  </div>
+    <div class="layout-container">
+        <el-config-provider :locale="locale">
+            <el-container>
+                <el-aside :width="state.asideWidth">
+                    <TbMenu :routers="state.routers" 
+                        :logo="logo" 
+                        :shadow="proxy.$global.cardShadow" 
+                        :title="proxy.$global.title" 
+                        :height="state.defaultHeight-105"
+                        :isCollapse="state.isCollapse"
+                        @onCollapse="onCollapse"/>
+                </el-aside>
+                <el-container>
+                    <el-header :height="state.headerHeight">
+                        <TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse" @onLanguage="onLanguage"/>
+                    </el-header>
+                    <el-main>
+                        <el-card :shadow="proxy.$global.cardShadow">
+                            <el-scrollbar :height="state.defaultHeight-126">
+                                <router-view />
+                            </el-scrollbar>
+                        </el-card>
+                    </el-main>
+                </el-container>
+            </el-container>
+        </el-config-provider>
+    </div>
 </template>
 <style lang="scss" scoped>
     .layout-container{
@@ -85,7 +95,7 @@
         background: var(--el-bg-color);
         .el-aside{
             margin: 0.2rem;
-            padding: 0.4rem;
+            padding: 0.1rem;
             overflow-x: auto;
             overflow-y: hidden;
             transition: all .5s;
diff --git a/tansci-boot-ui/src/components/layout/component/TbHeader.vue b/tansci-boot-ui/src/components/layout/component/TbHeader.vue
index 1a16827..be803bc 100644
--- a/tansci-boot-ui/src/components/layout/component/TbHeader.vue
+++ b/tansci-boot-ui/src/components/layout/component/TbHeader.vue
@@ -8,8 +8,9 @@
     import { modifyPass } from "@/api/system/user"
 
     const { proxy } = getCurrentInstance()
+    const emit = defineEmits(['onLanguage'])
 	const props = defineProps({
-        height: Number,
+        height: Number
 	})
     
     const state = reactive({
@@ -78,6 +79,19 @@
         <TbNavTabs />
         <div>
             <el-card :shadow="proxy.$global.cardShadow" :body-style="{padding: '0 1rem', 'line-height': height +'px'}">
+                <el-popover placement="bottom"  trigger="hover">
+                    <template #reference>
+                        <el-button link>
+                            <template #icon>
+                                <el-icon :size="24"><ChromeFilled /></el-icon>
+                            </template>
+                        </el-button>
+                    </template>
+                    <div>
+                        <el-button @click="$emit('onLanguage', 'zh-cn')" link>中文</el-button><br/>
+                        <el-button @click="$emit('onLanguage', 'en')" link>English</el-button>
+                    </div>
+                </el-popover>
                 <el-button link>
                     <template #icon>
                         <el-icon :size="24"><Monitor /></el-icon>
@@ -94,7 +108,7 @@
                         <el-icon :size="24"><Sunrise v-show="isDark"/></el-icon>
                     </template>
                 </el-button>
-                <el-popover placement="bottom" :width="260"  trigger="click">
+                <el-popover placement="bottom" :width="260"  trigger="hover">
                     <template #reference>
                         <el-button link>{{state.user.nickname}}</el-button>
                     </template>
diff --git a/tansci-boot-ui/src/components/layout/component/TbMenu.vue b/tansci-boot-ui/src/components/layout/component/TbMenu.vue
index 04340aa..1fd6077 100644
--- a/tansci-boot-ui/src/components/layout/component/TbMenu.vue
+++ b/tansci-boot-ui/src/components/layout/component/TbMenu.vue
@@ -21,12 +21,12 @@
 
 </script>
 <template>
-    <el-card :shadow="shadow" :body-style="{padding: '1rem 0.8rem', position: 'relative'}">
+    <el-card :shadow="shadow" :body-style="{padding: '1rem 0.2rem', position: 'relative'}">
         <div @click="toHome" class="logo">
             <el-image :src="logo" fit="fit" :style="{width: isCollapse?'60%':'20%', height: '100%'}"></el-image>
             <span v-show="!isCollapse" class="title">{{title}}</span>
         </div>
-        <el-scrollbar :height="height">
+        <el-scrollbar :height="height" :min-size="10">
             <el-menu router :default-active="$route.path" :collapse="isCollapse">
                 <template v-for="item in routers" :key="item">
                     <el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
@@ -39,7 +39,7 @@
                 </template>
             </el-menu>
         </el-scrollbar>
-        <el-button @click="$emit('onCollapse', isCollapse)" :icon="isCollapse ? 'ArrowRightBold':'ArrowLeftBold'" circle size="small" class="collapse"></el-button>
+        <el-button @click="$emit('onCollapse', isCollapse)" :icon="isCollapse ? 'CaretRight':'CaretLeft'" circle size="small" class="collapse"></el-button>
     </el-card>
 </template>
 <style lang="scss" scoped>
@@ -74,7 +74,8 @@
     }
     .collapse{
         position: absolute;
-        right: -10px;
-        top: 25%;
+        right: -7px;
+        bottom: -7px;
+        transform:rotate(50deg);
     }
 </style>
\ No newline at end of file