前端框架主题颜色修改

src/assets/styles/index.scss

@@ -13,12 +13,7 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family:
-    Helvetica Neue,
-    Helvetica,
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
-    Arial,
+    "思源黑体",
     sans-serif;
 }
 
@@ -132,7 +127,12 @@ aside {
 
 //main-container全局样式
 .app-container {
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+  margin: 24px;
   padding: 20px;
+  background: #FAFAFB;
+  min-height: calc(100vh - 150px);
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -85,7 +85,7 @@
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 0, 0, 0.1) !important;
       }
     }
 
@@ -98,7 +98,7 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(0, 0, 0, 0.1) !important;
       }
     }
 

src/assets/styles/variables.module.scss

@@ -11,8 +11,8 @@ $panGreen: #30b08f;
 // 默认主题变量
 $menuText: #bfcbd9;
 $menuActiveText: #409eff;
-$menuBg: #304156;
-$menuHover: #263445;
+$menuBg: #123881;
+$menuHover: #1B51B4;
 
 // 浅色主题theme-light
 $menuLightBg: #ffffff;
@@ -26,10 +26,10 @@ $sideBarWidth: 200px;
 
 // 菜单暗色变量
 $base-menu-color: #bfcbd9;
-$base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
-$base-sub-menu-background: #1f2d3d;
-$base-sub-menu-hover: #001528;
+$base-menu-color-active: #FFFFFF; //选中菜单标题背景色
+$base-menu-background: #143468;
+$base-sub-menu-background: #ffffff; //选中展开的子菜单背景色
+$base-sub-menu-hover: #f4f4f5; //鼠标悬停处子菜单背景色
 
 // 组件变量
 $--color-primary: #409eff;
@@ -73,7 +73,7 @@ $--color-info: #909399;
   --menu-hover: #{$menuHover};
 
   --navbar-bg: #ffffff;
-  --navbar-text: #303133;
+  --navbar-text: #f1f1f1;
 
   /* splitpanes default-theme 变量 */
   --splitpanes-default-bg: #ffffff;

src/languageSwitch/cn.json

+{
+  "title": "Chery back office management framework"
+}

src/languageSwitch/en.json

+{
+  "title": "奇瑞后台管理框架"
+
+}

src/layout/components/AppMain.vue

@@ -44,6 +44,7 @@ function addIframe() {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: #F3F4F7;
 }
 
 .fixed-header + .app-main {

src/layout/components/Navbar.vue

@@ -18,33 +18,33 @@
     />
 
     <div class="right-menu">
-      <template v-if="appStore.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="主题模式" effect="dark" placement="bottom">
-          <div
-            class="right-menu-item hover-effect theme-switch-wrapper"
-            @click="toggleTheme"
-          >
-            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
-            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
-          </div>
-        </el-tooltip>
-
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-      </template>
+<!--      <template v-if="appStore.device !== 'mobile'">-->
+<!--        <header-search id="header-search" class="right-menu-item" />-->
+
+<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
+
+<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
+<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
+
+<!--        <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
+
+<!--        <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
+<!--          <div-->
+<!--            class="right-menu-item hover-effect theme-switch-wrapper"-->
+<!--            @click="toggleTheme"-->
+<!--          >-->
+<!--            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
+<!--            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
+<!--          </div>-->
+<!--        </el-tooltip>-->
+
+<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
+<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
+<!--      </template>-->
       <div class="avatar-container">
         <el-dropdown
           class="right-menu-item hover-effect"
@@ -52,8 +52,9 @@
           @command="handleCommand"
         >
           <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
-            <el-icon><caret-bottom /></el-icon>
+            <div> <img :src="userStore.avatar" class="user-avatar" /> </div>
+            <div> <span class="name-avatar"> {{userStore.name}}</span> </div>
+            <div> <el-icon><caret-bottom /></el-icon> </div>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
@@ -138,10 +139,11 @@ function toggleTheme() {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 60px;
   overflow: hidden;
   position: relative;
   background: var(--navbar-bg);
+  background-color: #123881;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
@@ -214,16 +216,18 @@ function toggleTheme() {
 
     .avatar-container {
       margin-right: 40px;
-
       .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
+        margin-top: 18px;
+        display: flex;
         .user-avatar {
+          margin-right: 5px;
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50px;
+        }
+        .name-avatar{
+          font-size: 14px;
         }
 
         i {
@@ -234,6 +238,7 @@ function toggleTheme() {
           font-size: 12px;
         }
       }
+      avatar-wrapper-name
     }
   }
 }

src/layout/components/Sidebar/Logo.vue

@@ -66,11 +66,12 @@ const getLogoTextColor = computed(() => {
 }
 
 .sidebar-logo-container {
+  background-color: #123881;
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 60px;
   line-height: 50px;
-  background: v-bind(getLogoBackground);
+  //background: v-bind(getLogoBackground);
   text-align: center;
   overflow: hidden;
 

src/layout/components/TagsView/index.vue

@@ -276,13 +276,13 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 45px;
   width: 100%;
   background: var(--tags-bg, #fff);
   border-bottom: 1px solid var(--tags-item-border, #d8dce5);
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.12),
-    0 0 3px 0 rgba(0, 0, 0, 0.04);
+  //box-shadow:
+  //  0 1px 3px 0 rgba(0, 0, 0, 0.12),
+  //  0 0 3px 0 rgba(0, 0, 0, 0.04);
 
   .tags-view-wrapper {
     .tags-view-item {