update

src/constants/language.ts

@@ -37,4 +37,15 @@ export function getLanguageList() {
         { label: 'ภาษาไทย', value: Language.Thai },
         { label: 'Tiếng Việt', value: Language.Vietnamese },
     ]
+}
+
+/**
+ * 获取语言名称
+ * @param languageValue 
+ * @returns 
+ */
+export function getLanguageLabelByValue(languageValue: Language) {
+    const languages = getLanguageList()
+    const item = languages.find((e) => e.value === languageValue)
+    return item?.label ?? languageValue
 }

src/packages/pc/components/layouts/sidebar/index.less

@@ -28,7 +28,7 @@
         border-bottom: var(--sidebar-header-border);
 
         &:not(.is-hide) {
-            width: var(--sidebar-width);
+            width: 100%;
             height: var(--sidebar-header-height);
         }
 
@@ -47,7 +47,7 @@
         margin-top: auto;
 
         &:not(.is-hide) {
-            width: var(--sidebar-width);
+            width: 100%;
         }
 
         a {
@@ -64,7 +64,7 @@
             background-color: transparent;
 
             &:not(&--collapse) {
-                width: var(--sidebar-width);
+                min-width: var(--sidebar-width);
             }
 
             &--inline {

src/packages/pc/views/auth/components/layout/index.less

@@ -4,14 +4,21 @@
     justify-content: center;
     align-items: center;
     height: 100%;
-    background-color: #e4ecf6;
+    background:#eaeff5 url("~@pc/assets/images/login-bg.jpg") no-repeat center center;
+    background-size: cover;
 
     &__wrapper {
+        .language {
+            display: flex;
+            justify-content: end;
+            margin-bottom: 10px;
+        }
+
         .header {
             color: #fff;
             font-size: 24px;
             padding: 30px 80px;
-            background-color: #1f75fe;
+            background-color: #354d67;
 
             &-version {
                 font-size: 12px;

src/packages/pc/views/auth/components/layout/index.vue

@@ -1,14 +1,31 @@
 <template>
   <div class="sign-layout">
     <div class="sign-layout__wrapper">
-      <div class="header">
-        <div>{{ t('app.name') }}</div>
-        <div class="header-version">v1.0.{{ version }}</div>
-      </div>
-      <div class="body">
-        <div class="body-container">
-          <h1 class="body-title">{{ title }}</h1>
-          <slot></slot>
+      <el-dropdown class="language" trigger="click">
+        <el-button link>
+          <span>{{ languageLabel }}</span>
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <template v-for="item in getLanguageList()" :key="item.value">
+              <el-dropdown-item @click="switchLanguage(item.value)">{{ item.label }}</el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div style="box-shadow: 0 10px 15px rgba(42, 65, 93, 0.1);">
+        <div class="header">
+          <div>{{ t('app.name') }}</div>
+          <div class="header-version">v1.0.{{ version }}</div>
+        </div>
+        <div class="body">
+          <div class="body-container">
+            <h1 class="body-title">{{ title }}</h1>
+            <slot></slot>
+          </div>
         </div>
       </div>
     </div>
@@ -16,8 +33,10 @@
 </template>
 
 <script lang="ts" setup>
-
+import { computed } from 'vue'
+import { getLanguageList, getLanguageLabelByValue, Language } from '@/constants/language'
 import { i18n } from '@/stores'
+import { localData } from '@/stores/storage'
 
 defineProps({
   title: {
@@ -30,6 +49,15 @@ const t = i18n.global.t
 
 const meta = document.getElementsByTagName('meta')
 const version = meta.namedItem('revised')?.content ?? '0'
+
+// 当前语言
+const languageLabel = computed(() => getLanguageLabelByValue(i18n.global.locale))
+
+// 切换语言
+const switchLanguage = (lange: Language) => {
+  i18n.global.locale = lange
+  localData.setValue('appLanguage', lange)
+}
 </script>
 
 <style lang="less">

src/packages/pc/views/auth/login/index.vue

@@ -15,10 +15,10 @@
         </div>
       </el-form-item>
       <!-- <el-form-item>
-        <el-checkbox label="记住密码" v-model="remember"></el-checkbox>
+        <el-checkbox label="记住密码" />
       </el-form-item> -->
       <el-form-item>
-        <el-button class="submit" type="primary" :loading="loading" @click="formSubmit">
+        <el-button class="submit" color="#354d67" :loading="loading" @click="formSubmit">
           <span v-if="loading">{{ t('auth.login.loading') }}</span>
           <span v-else>{{ t('operation.login') }}</span>
         </el-button>