From 2ba43e56bcfc82104d131946d9604ed619dc9350 Mon Sep 17 00:00:00 2001
From: zhengqingya <960869719@qq.com>
Date: Fri, 10 Feb 2023 17:14:41 +0800
Subject: [PATCH] update theme

---
 .../src/components/base/BaseCellItem.vue      |  2 +-
 .../src/components/base/BaseNoData.vue        |  2 +-
 .../src/layout/components/Navbar.vue          |  8 ++----
 .../src/layout/components/Sidebar/Logo.vue    |  4 +--
 .../src/layout/components/Sidebar/index.vue   |  7 ++++-
 smallboot-web/src/main.ts                     |  3 ++-
 smallboot-web/src/styles/app-theme.scss       | 16 ++++++++---
 smallboot-web/src/styles/index.scss           |  4 +--
 smallboot-web/src/styles/sidebar.scss         |  3 +++
 .../src/styles/variables.module.scss          | 27 ++++++++++++-------
 smallboot-web/src/views/login/index.vue       |  4 +--
 .../views/system/personal-center/index.vue    |  2 +-
 12 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/smallboot-web/src/components/base/BaseCellItem.vue b/smallboot-web/src/components/base/BaseCellItem.vue
index c98c10f..8498520 100644
--- a/smallboot-web/src/components/base/BaseCellItem.vue
+++ b/smallboot-web/src/components/base/BaseCellItem.vue
@@ -62,7 +62,7 @@ export default {
     }
 
     div.val {
-      color: #fff;
+      // color: #fff;
     }
 
     & {
diff --git a/smallboot-web/src/components/base/BaseNoData.vue b/smallboot-web/src/components/base/BaseNoData.vue
index c2a058c..9bccfeb 100644
--- a/smallboot-web/src/components/base/BaseNoData.vue
+++ b/smallboot-web/src/components/base/BaseNoData.vue
@@ -13,7 +13,7 @@
 
   &.no-data-dark {
     background: $dark_main_color;
-    color: #fff;
+    // color: #fff;
   }
 }
 </style>
diff --git a/smallboot-web/src/layout/components/Navbar.vue b/smallboot-web/src/layout/components/Navbar.vue
index 54c138f..8740d0b 100644
--- a/smallboot-web/src/layout/components/Navbar.vue
+++ b/smallboot-web/src/layout/components/Navbar.vue
@@ -7,8 +7,7 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div>
-          <el-avatar src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" />
-          <!-- <el-avatar /> -->
+          <el-avatar :src="avatarUrl" />
           <div class="user-info">
             <span>{{ nickname }}</span>
             <CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
@@ -22,13 +21,10 @@
             </router-link>
             <!-- <router-link to="/system/personal-center">
               <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
+            </router-link> -->
             <a target="_blank" href="https://gitee.com/zhengqingya">
               <el-dropdown-item>Gitee</el-dropdown-item>
             </a>
-            <router-link to="/other/anonymity">
-              <el-dropdown-item>提建议</el-dropdown-item>
-            </router-link> -->
             <el-dropdown-item divided @click="logout"> 退出 </el-dropdown-item>
           </el-dropdown-menu>
         </template>
diff --git a/smallboot-web/src/layout/components/Sidebar/Logo.vue b/smallboot-web/src/layout/components/Sidebar/Logo.vue
index 184c410..e2d7c62 100644
--- a/smallboot-web/src/layout/components/Sidebar/Logo.vue
+++ b/smallboot-web/src/layout/components/Sidebar/Logo.vue
@@ -48,7 +48,7 @@ const logo = ref('https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef525
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #00284c;
+  background: $dark_main_color;
   text-align: center;
   overflow: hidden;
 
@@ -65,7 +65,7 @@ const logo = ref('https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef525
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
+      // color: #fff;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
diff --git a/smallboot-web/src/layout/components/Sidebar/index.vue b/smallboot-web/src/layout/components/Sidebar/index.vue
index 5021243..f12303a 100644
--- a/smallboot-web/src/layout/components/Sidebar/index.vue
+++ b/smallboot-web/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'has-logo': true }">
+  <div>
     <logo :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
@@ -42,3 +42,8 @@ const activeMenu = computed(() => {
   return path
 })
 </script>
+<style lang="scss" scoped>
+.container {
+  background-c: #000;
+}
+</style>
diff --git a/smallboot-web/src/main.ts b/smallboot-web/src/main.ts
index ce1b043..19d9241 100644
--- a/smallboot-web/src/main.ts
+++ b/smallboot-web/src/main.ts
@@ -11,11 +11,12 @@ app.use(router)
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 // 注册所有图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
-app.use(ElementPlus)
+app.use(ElementPlus, { locale: zhCn })
 
 // 自定义样式
 import '@/styles/index.scss'
diff --git a/smallboot-web/src/styles/app-theme.scss b/smallboot-web/src/styles/app-theme.scss
index c56cb85..732cf58 100644
--- a/smallboot-web/src/styles/app-theme.scss
+++ b/smallboot-web/src/styles/app-theme.scss
@@ -1,4 +1,12 @@
-$dark_main_color: #021b32;
-$dark_table_th_bgcolor: #00284c;
-$dark_table_td_color: #7189c8;
-$dark_table_border_color: #1d2f5e;
+// 暗黑色主题
+// $dark_main_color: #021b32;
+// $dark_table_th_bgcolor: #00284c;
+// $dark_table_td_color: #7189c8;
+// $dark_table_border_color: #1d2f5e;
+
+
+// 默认浅色主题
+$dark_main_color: #fff;
+$dark_table_th_bgcolor: #fcfcfc;
+$dark_table_td_color: #000; // 左标题颜色
+$dark_table_border_color: #eee2ec; // 边框颜色
diff --git a/smallboot-web/src/styles/index.scss b/smallboot-web/src/styles/index.scss
index 080a7c2..134287b 100644
--- a/smallboot-web/src/styles/index.scss
+++ b/smallboot-web/src/styles/index.scss
@@ -1,6 +1,6 @@
 @import './variables.module';
 @import './mixin.scss';
-@import './element-plus-theme';
+// @import './element-plus-theme';
 @import './sidebar.scss';
 @import './app-theme';
 
@@ -12,7 +12,7 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  background-color: #021b32;
+  background-color: $dark_main_color;
 }
 
 label {
diff --git a/smallboot-web/src/styles/sidebar.scss b/smallboot-web/src/styles/sidebar.scss
index ba214ff..1fc52fc 100644
--- a/smallboot-web/src/styles/sidebar.scss
+++ b/smallboot-web/src/styles/sidebar.scss
@@ -18,6 +18,9 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    // 周边阴影
+    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
diff --git a/smallboot-web/src/styles/variables.module.scss b/smallboot-web/src/styles/variables.module.scss
index 4e078da..5aa5619 100644
--- a/smallboot-web/src/styles/variables.module.scss
+++ b/smallboot-web/src/styles/variables.module.scss
@@ -1,16 +1,25 @@
-// sidebar
-$menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5;
+// // sidebar
+// $menuText: #bfcbd9;
+// $menuActiveText: #409eff;
+// $subMenuActiveText: #f4f4f5;
+// // 菜单栏背景色
+// $menuBg: #021b32;
+// $menuHover: #263445;
+// $subMenuBg: #00284c;
+// $subMenuHover: $subMenuBg;
 
+// sidebar
+$menuText: rgba(0, 0, 0, 0.7);
+$menuActiveText: #409EFF;
+$subMenuActiveText: rgba(0, 0, 0, 0.7); // 父
 // 菜单栏背景色
-$menuBg: #021b32;
-$menuHover: #263445;
+$menuBg: $dark_main_color;
+$menuHover: #e7f9f9;  // 父
+$subMenuBg: $dark_main_color; // 父
+$subMenuHover: #e7f9f9;
 
-$subMenuBg: #00284c;
-$subMenuHover: $subMenuBg;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 200px;
 
 :export {
   menuText: $menuText;
diff --git a/smallboot-web/src/views/login/index.vue b/smallboot-web/src/views/login/index.vue
index 7bf6eea..a587575 100644
--- a/smallboot-web/src/views/login/index.vue
+++ b/smallboot-web/src/views/login/index.vue
@@ -212,7 +212,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-$bg: $dark_main_color;
+$bg: #021b32;
 $light_gray: #fff;
 $cursor: #fff;
 
@@ -294,7 +294,7 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg: $dark_main_color;
+$bg: #021b32;
 $dark_gray: #889aa4;
 $light_gray: #eee;
 
diff --git a/smallboot-web/src/views/system/personal-center/index.vue b/smallboot-web/src/views/system/personal-center/index.vue
index 888a40e..e8c8a94 100644
--- a/smallboot-web/src/views/system/personal-center/index.vue
+++ b/smallboot-web/src/views/system/personal-center/index.vue
@@ -95,7 +95,7 @@ export default {
         { key: 2, display_name: '女' },
       ],
       tableOauthDataListQuery: { userId: useStore().user.userId },
-      // oauthUrl: process.env.VUE_APP_BASE_API + '/system/web/api/oauth/',
+      oauthUrl: import.meta.env.VITE_APP_SERVICE_API + '/system/web/api/oauth/',
       // oauthType: this.$route.query.oauthType,
       // openId: this.$route.query.openId,
     }