WCS主题UI与登陆页面以及标题修改

2025-07-14 14:35:43 +08:00
parent a41c994534
commit 3d78a5bd30
21 changed files with 460 additions and 228 deletions
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -9,13 +9,13 @@
      <template v-if="device!=='mobile'">
        <search id="header-search" class="right-menu-item" />

-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <!-- <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>
+        </el-tooltip> -->

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

@@ -55,8 +55,8 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+// import RuoYiGit from '@/components/RuoYi/Git'
+// import RuoYiDoc from '@/components/RuoYi/Doc'

 export default {
  emits: ['setLayout'],
@@ -67,8 +67,8 @@ export default {
    Screenfull,
    SizeSelect,
    Search,
-    RuoYiGit,
-    RuoYiDoc
+    // RuoYiGit,
+    // RuoYiDoc
  },
  computed: {
    ...mapGetters([
@@ -111,11 +111,13 @@ export default {
 </script>

 <style lang="scss" scoped>
+// 导航栏高度，可以通过公式 44+8n 进行调整
 .navbar {
-  height: 50px;
+  height: 44px;
  overflow: hidden;
  position: relative;
-  background: #fff;
+  background: var(--navbar-background, #fff);
+  color: var(--navbar-color, #5a5e66);
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
@@ -148,7 +150,7 @@ export default {
  .right-menu {
    float: right;
    height: 100%;
-    line-height: 50px;
+    line-height: 44px;

    &:focus {
      outline: none;
@@ -159,7 +161,7 @@ export default {
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
-      color: #5a5e66;
+      color: inherit;
      vertical-align: text-bottom;

      &.hover-effect {
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/ruoyi-ui/src/layout/components/Settings/index.vue
@@ -27,6 +27,16 @@
                </i>
              </div>
            </div>
+            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-new')">
+              <img src="@/assets/images/new.svg" alt="new">
+              <div v-if="sideTheme === 'theme-new'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+                <i aria-label="图标: check" class="anticon anticon-check">
+                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
+                    <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
+                  </svg>
+                </i>
+              </div>
+            </div>
          </div>

          <div class="drawer-item">
@@ -195,70 +205,70 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .setting-drawer-content {
-    .setting-drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
-      font-weight: bold;
-    }
+.setting-drawer-content {
+  .setting-drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: bold;
+  }

-    .setting-drawer-block-checbox {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      margin-top: 10px;
-      margin-bottom: 20px;
+  .setting-drawer-block-checbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 20px;

-      .setting-drawer-block-checbox-item {
-        position: relative;
-        margin-right: 16px;
-        border-radius: 2px;
-        cursor: pointer;
+    .setting-drawer-block-checbox-item {
+      position: relative;
+      margin-right: 16px;
+      border-radius: 2px;
+      cursor: pointer;

-        img {
-          width: 48px;
-          height: 48px;
-        }
+      img {
+        width: 48px;
+        height: 48px;
+      }

-        .setting-drawer-block-checbox-selectIcon {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
-          padding-top: 15px;
-          padding-left: 24px;
-          color: #1890ff;
-          font-weight: 700;
-          font-size: 14px;
-        }
+      .setting-drawer-block-checbox-selectIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: 15px;
+        padding-left: 24px;
+        color: #1890ff;
+        font-weight: 700;
+        font-size: 14px;
      }
    }
  }
+}

-  .drawer-container {
-    padding: 20px;
+.drawer-container {
+  padding: 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
    font-size: 14px;
-    line-height: 1.5;
-    word-wrap: break-word;
-
-    .drawer-title {
-      margin-bottom: 12px;
-      color: rgba(0, 0, 0, .85);
-      font-size: 14px;
-      line-height: 22px;
-    }
-
-    .drawer-item {
-      color: rgba(0, 0, 0, .65);
-      font-size: 14px;
-      padding: 12px 0;
-    }
-
-    .drawer-switch {
-      float: right
-    }
+    line-height: 22px;
  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
 </style>
--- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.logoTitleBackground : (sideTheme === 'theme-new' ? variables.logoNewTitleBackground : variables.logoLightTitleBackground) }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
+        <img v-if="logo" />
+        <h1 v-else class="sidebar-title"  :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
+        <img v-if="logo" />
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
      </router-link>
    </transition>
  </div>
@@ -55,9 +57,9 @@ export default {
 .sidebar-logo-container {
  position: relative;
  width: 100%;
-  height: 50px;
+  height: 44px;
  line-height: 50px;
-  background: #2b2f3a;
+
  text-align: center;
  overflow: hidden;

@@ -78,7 +80,7 @@ export default {
      color: #fff;
      font-weight: 600;
      line-height: 50px;
-      font-size: 14px;
+      font-size: 17px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -1,26 +1,26 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
-        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical"
-            >
-                <sidebar-item
-                    v-for="(route, index) in sidebarRouters"
-                    :key="route.path  + index"
-                    :item="route"
-                    :base-path="route.path"
-                />
-            </el-menu>
-        </el-scrollbar>
-    </div>
+  <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground) }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground)"
+        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : (settings.sideTheme === 'theme-new' ? variables.menuNewColor : variables.menuLightColor)"
+        :unique-opened="true"
+        :active-text-color="settings.sideTheme === 'theme-dark' ? variables.menuColorActive : (settings.sideTheme === 'theme-new' ? variables.menuNewColorActive : variables.menuLightColorActive)"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="(route, index) in sidebarRouters"
+          :key="route.path  + index"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>

 <script>
@@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem"
 import variables from "@/assets/styles/variables.scss"

 export default {
-    components: { SidebarItem, Logo },
-    computed: {
-        ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
-        activeMenu() {
-            const route = this.$route
-            const { meta, path } = route
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu
-            }
-            return path
-        },
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo
-        },
-        variables() {
-            return variables
-        },
-        isCollapse() {
-            return !this.sidebar.opened
-        }
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapState(["settings"]),
+    ...mapGetters(["sidebarRouters", "sidebar"]),
+    activeMenu() {
+      const route = this.$route
+      const { meta, path } = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
    }
+  }
 }
 </script>
--- a/ruoyi-ui/src/layout/components/TagsView/index.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/index.vue
@@ -31,6 +31,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import variables from '@/assets/styles/variables.scss'

 export default {
  components: { ScrollPane },
@@ -52,6 +53,9 @@ export default {
    },
    theme() {
      return this.$store.state.settings.theme
+    },
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
    }
  },
  watch: {
@@ -77,10 +81,12 @@ export default {
    },
    activeStyle(tag) {
      if (!this.isActive(tag)) return {}
-      return {
-        "background-color": this.theme,
-        "border-color": this.theme
+      const style = {
+        "background-color": this.sideTheme === 'theme-dark' ? '#515466' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewBackground : variables.tagsViewLightBackground),
+        "color": this.sideTheme === 'theme-dark' ? '#ffffff' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewColor : variables.tagsViewLightColor),
+        "border-color": "#ccc"
      }
+      return style
    },
    isAffix(tag) {
      return tag.meta && tag.meta.affix
@@ -235,9 +241,9 @@ export default {

 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 32px;
  width: 100%;
-  background: #fff;
+  background: var(--tags-view-background, #fff);
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  .tags-view-wrapper {
@@ -245,11 +251,11 @@ export default {
      display: inline-block;
      position: relative;
      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
+      height: 24px;
+      line-height: 24px;
      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      color: var(--tags-view-text-color, #495060);
+      background: var(--tags-view-item-background, #fff);
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
@@ -261,12 +267,10 @@ export default {
        margin-right: 15px;
      }
      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        border-color: #d8dce5;
        &::before {
          content: '';
-          background: #fff;
+          background: currentColor;
          display: inline-block;
          width: 8px;
          height: 8px;