style：优化ui

src/assets/styles/black.scss

@@ -1,138 +0,0 @@
-// 黑夜模式
-[data-theme='theme-black'] {
-  --base-color: #22272e; // #304156;
-  --base-color-rgba: rgba(34,39,46, 0.3);
-  --base-color-white: #ffffff;
-
-  // root
-  --base-bg-main: var(--base-color);
-  --base-menu-background: var(--base-color);
-  --base-logo-title-color: var(--base-color-white);
-  --base-topBar-background: var(--base-color) !important;
-  --base-topBar-color: var(--base-color-white);
-
-  --base-color-bar: #dadada;
-  --base-border-color: #424242;
-  --base-border-black: #333333;
-  --base-text-color-regular: #9b9da1;
-  --base-text-color-placeholder: #7a7a7a;
-  --base-color-hover: #3c3c3c;
-
-  // el-ement ui 设置
-  --el-fill-color-light: var(--base-color-rgba) !important;
-  --el-fill-color-blank: var(--base-bg-main) !important;
-  // --el-table-bg-color: var(--el-fill-color-blank);
-  --el-color-white: var(--base-color) !important;
-  --el-text-color-primary: var(--base-color-bar) !important;
-  --el-border-color-base: var(--base-border-black) !important;
-  --el-border-color-light: var(--base-border-black) !important;
-  --el-text-color-regular: var(--base-text-color-regular) !important;
-  --el-bg-color: var(--base-bg-main) !important;
-  --el-color-success-lighter: var(--base-color) !important;
-  --el-color-warning-lighter: var(--base-color) !important;
-  --el-color-danger-lighter: var(--base-color) !important;
-  --el-color-primary-lighter: var(--base-color) !important;
-  --el-color-primary-light-9: var(--base-color-hover) !important;
-  --el-text-color-disabled-base: var(--el-color-primary) !important;
-  --el-border-color-lighter: var(--base-border-black) !important;
-  // --el-text-color-placeholder: var(--base-text-color-placeholder) !important;
-  // --el-disabled-bg-color: var(--base-color) !important;
-  --el-fill-base: var(--base-color-white) !important;
-  // el-date-picker bg
-  --el-bg-color-overlay: var(--base-bg-main) !important;
-  --el-disabled-text-color: var(--base-bg-main) !important;
-  // drawer
-  .drawer-item,
-  .drawer-title {
-    color: var(--base-color-white) !important;
-  }
-
-  .el-button--primary,
-  .el-button--info,
-  .el-button--danger,
-  .el-button--success,
-  .el-button--warning {
-    --el-button-text-color: var(--base-color-white) !important;
-    --el-button-hover-text-color: var(--base-color-white) !important;
-    --el-button-disabled-text-color: var(--base-color-white) !important;
-    &:hover {
-      border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
-    }
-  }
-
-  // pagination
-  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    color: var(--base-color-white) !important;
-  }
-  .el-pagination.is-background .btn-next,
-  .el-pagination.is-background .btn-prev,
-  .el-pagination.is-background .el-pager li {
-    background-color: var(--main-bg-color);
-  }
-
-  // tabs
-  .el-tabs--border-card {
-    background-color: var(--el-color-white) !important;
-  }
-  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-    background: var(--base-color) !important;
-  }
-
-  // alert / notice-bar
-  .home-card-item {
-    border: 1px solid var(--base-border-color-light) !important;
-  }
-  .el-alert,
-  .notice-bar {
-    border: 1px solid var(--base-border-color) !important;
-    background-color: var(--base-color) !important;
-  }
-
-  // colorPicker
-  .el-color-picker__mask {
-    background: unset !important;
-  }
-  .el-color-picker__trigger {
-    border: 1px solid var(--base-border-color-light) !important;
-  }
-
-  // popper / dropdown
-  .el-popper {
-    border: 1px solid var(--base-border-color) !important;
-    color: var(--el-text-color-primary) !important;
-    .el-popper__arrow:before {
-      background: var(--el-color-white) !important;
-      border: 1px solid var(--base-border-color);
-    }
-    a {
-      color: var(--el-text-color-primary) !important;
-    }
-  }
-  .el-popper,
-  .el-dropdown-menu {
-    background: var(--el-color-white) !important;
-  }
-  .el-dropdown-menu__item:hover:not(.is-disabled) {
-    background: var(--el-bg-color) !important;
-  }
-  .el-dropdown-menu__item.is-disabled {
-    font-weight: 700 !important;
-  }
-
-  //tags menu 选择
-  .tags-view-container .tags-view-wrapper .tags-view-item.active {
-    background-color: var(--base-color) !important;
-    // border-color: var(--base-color) !important;
-  }
-
-  // md 编辑器、图片加载错误、
-  .md,
-  .el-upload--picture-card,
-  .el-image__error {
-    background: none !important;
-  }
-  //el table loading mask
-  .el-loading-mask {
-    background-color: var(--base-color-rgba) !important;
-  }
-}

src/assets/styles/index.scss

@@ -5,7 +5,6 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
-// @import './black.scss';
 
 html,
 body,

src/assets/styles/login.scss

@@ -1,13 +1,12 @@
 .login {
-  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
+  background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
-  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
   background-attachment: fixed;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
-  // background-image: url('../assets/images/login-background.jpg');
+  // background-image: url('@/assets/images/login-bg.jpg');
   background-size: cover;
 }
 
@@ -21,7 +20,7 @@
   border-radius: 6px;
   background: #ffffff;
   // background-color: hsla(0, 0%, 100%, 0.3);
-  width: 310px;
+  width: var(--base-login-width);
   padding: 25px 15px 5px 15px;
   position: relative;
 
@@ -44,6 +43,7 @@
   float: right;
 
   img {
+    width: 100%;
     cursor: pointer;
     vertical-align: middle;
   }

src/assets/styles/variables.module.scss

@@ -12,17 +12,19 @@ $panGreen: #30b08f;
 :root {
   --base-text-color-rgba: rgba(0, 0, 0, 0.85);
   --base-sidebar-width: 220px;
-	// 左侧菜单宽度
+  // 左侧菜单宽度
   --el-aside-width: 220px;
-	//底部高度
+  //底部高度
   --base-footer-height: 30px;
   --base-tags-height: 34px;
   --base-header-height: 50px;
+  //登录框宽度
+  --base-login-width: 280px;
 }
 
 /***侧边栏深色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-background: #304156;
+  --base-menu-background: #324157;
   --base-logo-title-color: #ffffff;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;

src/components/LangSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dropdown trigger="hover" @command="handleLanguageChange" style="vertical-align: middle">
-      <svg-icon class-name="size-icon" name="language" />
+      <svg-icon class-name="size-icon" name="language" :color="props.color" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item v-for="item of langOptions" :key="item.value" :disabled="lang === item.value" :command="item.value">
@@ -17,12 +17,16 @@
 import useAppStore from '@/store/modules/app'
 const appStore = useAppStore()
 const lang = computed(() => useAppStore().lang)
-
+const props = defineProps({
+  color: {
+    type: String
+  }
+})
 const { proxy } = getCurrentInstance()
 const langOptions = ref([
   { label: '简体中文', value: 'zh-cn' },
   { label: 'English', value: 'en' },
-  { label: '繁體中文', value: 'zh-tw' },
+  { label: '繁體中文', value: 'zh-tw' }
 ])
 
 function handleLanguageChange(lang) {

src/i18n/pages/login/zh-cn.json

@@ -10,6 +10,6 @@
     "reLogin": "重新登录",
     "invalidSession": "无效的会话，或者会话已过期，请重新登录。",
     "otherLoginWay": "其他登录方式",
-    "register": "立即注册"
+    "register": "注册"
   }
 }

src/i18n/pages/login/zh-tw.json

@@ -10,6 +10,6 @@
     "reLogin": "重新登錄",
     "invalidSession": "無效的會話，或者會話已過期，請重新登錄。",
     "otherLoginWay": "其他登錄方式",
-    "register": "立即註冊"
+    "register": "註冊"
   }
 }

src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar" :data-theme="sideTheme" :class="appStore.device">
+  <div class="navbar" :class="appStore.device">
     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <template v-if="appStore.device == 'desktop'">
       <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />

src/layout/components/Sidebar/index.vue

@@ -2,7 +2,7 @@
   <el-aside :data-theme="sideTheme" class="sidebar" :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 
-    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"

src/store/modules/user.js

@@ -50,20 +50,24 @@ const useUserStore = defineStore('user', {
      */
     oauthLogin(data, param) {
       return new Promise((resolve, reject) => {
-        oauthCallback(data, param).then((res) => {
+        oauthCallback(data, param)
-          const { code, data } = res
+          .then((res) => {
-          if (code == 200) {
+            const { code, data } = res
-            setToken(data.token)
+            if (code == 200) {
-            this.token = data.token
+              setToken(data.token)
-            Cookies.set('username', data.userName, { expires: 30 })
+              this.token = data.token
-            Cookies.set('password', encrypt(data.password), { expires: 30 })
+              Cookies.set('username', data.userName, { expires: 30 })
-            Cookies.set('rememberMe', true, { expires: 30 })
+              Cookies.set('password', encrypt(data.password), { expires: 30 })
-            resolve(res) //then处理
+              Cookies.set('rememberMe', true, { expires: 30 })
-          } else {
+              resolve(res) //then处理
-            console.log('login error ', res)
+            } else {
-            reject(res) //catch处理
+              console.log('login error ', res)
-          }
+              reject(res) //catch处理
-        })
+            }
+          })
+          .catch((err) => {
+            reject(err)
+          })
       })
     },
     // 获取用户信息

src/views/login.vue

@@ -6,35 +6,23 @@
 
       <LangSelect title="多语言设置" class="langSet" />
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="default" auto-complete="off" :placeholder="$t('login.account')">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
           <template #prefix>
-            <svg-icon name="user" class="el-input__icon input-icon" />
+            <svg-icon name="user" class="input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter="handleLogin">
-          v-model="loginForm.password"
-          type="password"
-          size="default"
-          auto-complete="off"
-          :placeholder="$t('login.password')"
-          @keyup.enter="handleLogin">
           <template #prefix>
-            <svg-icon name="password" class="el-input__icon input-icon" />
+            <svg-icon name="password" class="input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaOnOff != 'off'">
-        <el-input
+        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
-          v-model="loginForm.code"
-          size="default"
-          auto-complete="off"
-          :placeholder="$t('login.captcha')"
-          style="width: 63%"
-          @keyup.enter="handleLogin">
           <template #prefix>
-            <svg-icon name="validCode" class="el-input__icon input-icon" />
+            <svg-icon name="validCode" class="input-icon" />
           </template>
         </el-input>
         <div class="login-code">
@@ -44,7 +32,10 @@
 
       <div style="display: flex; justify-content: space-between">
         <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
-        <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
+        <span style="font-size: 12px">
+          <span @click="handleForgetPwd()" class="forget-pwd">忘记密码</span>
+          <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
+        </span>
       </div>
 
       <el-form-item style="width: 100%">
@@ -167,15 +158,24 @@ function onAuth(type) {
       break
   }
 }
+function handleForgetPwd() {
+  proxy.$modal.msg('请联系管理员')
+}
 getCode()
 getCookie()
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/login.scss';
+.forget-pwd {
+  color: #ccc;
+  margin-right: 10px;
+  cursor: pointer;
+}
 .login-icon {
   width: 30px;
-  margin-right: 10px;
+  height: 30px;
+  margin-right: 20px;
   cursor: pointer;
 }
 .other-login {

src/views/register.vue

@@ -152,8 +152,7 @@ getCode()
   justify-content: center;
   align-items: center;
   height: 100%;
-  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
+  background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
-  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
 }
 .title {
   margin: 0px auto 30px auto;
@@ -164,7 +163,7 @@ getCode()
 .register-form {
   border-radius: 6px;
   background: #fff;
-  width: 310px;
+  width: var(--base-login-width);
   padding: 25px 15px 5px 15px;
   .el-input {
     height: 38px;

src/views/socialLogin.vue

@@ -49,7 +49,7 @@ if (callbackQuery.value && callbackQuery.value.state != null) {
       router.push({ path: redirect.value || '/' })
     })
     .catch((error) => {
-      console.error(error)
+      console.error('login-error', error)
       proxy.$modal.msgError(error.msg)
       loading.value = false
     })
@@ -60,6 +60,6 @@ if (callbackQuery.value && callbackQuery.value.state != null) {
 .loading {
   text-align: center;
   color: #ccc;
-	padding: 10px;
+  padding: 10px;
 }
 </style>