Bladeren bron

优化页面主题 logo 系统名称等

yawuga 5 dagen geleden
bovenliggende
commit
7b5cfd5fd2

+ 5 - 2
.env.development

@@ -1,5 +1,8 @@
-# 页面标题
-VITE_APP_TITLE = 若依管理系统
+# 完整系统名称(用于登录页、浏览器标题等宽区域)
+VITE_APP_TITLE=迎宾巡逻机器人运维管理系统
+
+# 短系统名称(用于左侧菜单顶部 Logo 区域)
+VITE_APP_SIDEBAR_TITLE=机器人运维管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

+ 5 - 2
.env.production

@@ -1,5 +1,8 @@
-# 页面标题
-VITE_APP_TITLE = 若依管理系统
+# 完整系统名称(用于登录页、浏览器标题等宽区域)
+VITE_APP_TITLE=迎宾巡逻机器人运维管理系统
+
+# 短系统名称(用于左侧菜单顶部 Logo 区域)
+VITE_APP_SIDEBAR_TITLE=机器人运维管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'

+ 5 - 2
.env.staging

@@ -1,5 +1,8 @@
-# 页面标题
-VITE_APP_TITLE = 若依管理系统
+# 完整系统名称(用于登录页、浏览器标题等宽区域)
+VITE_APP_TITLE=迎宾巡逻机器人运维管理系统
+
+# 短系统名称(用于左侧菜单顶部 Logo 区域)
+VITE_APP_SIDEBAR_TITLE=机器人运维管理系统
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'

BIN
public/favicon.ico


BIN
src/assets/images/login-background.jpg


BIN
src/assets/logo/logo.png


+ 1 - 1
src/components/Breadcrumb/index.vue

@@ -34,7 +34,7 @@ function getBreadcrumb() {
   }
   // 判断是否为首页
   if (!isDashboard(matched[0])) {
-    matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
+    matched = [{ path: "/index", meta: { title: "运行总览" } }].concat(matched)
   }
   levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 }

+ 0 - 10
src/layout/components/Navbar.vue

@@ -12,14 +12,6 @@
       <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">
@@ -74,8 +66,6 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useLockStore from '@/store/modules/lock'

+ 51 - 29
src/layout/components/Sidebar/Logo.vue

@@ -3,17 +3,19 @@
     <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">{{ title }}</h1>
+        <span v-else class="sidebar-title">{{ title }}</span>
       </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">{{ title }}</h1>
+        <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>
   </div>
 </template>
 
 <script setup>
+import { computed, ref } from 'vue'
+import { useDark } from '@vueuse/core'
 import logo from '@/assets/logo/logo.png'
 import useSettingsStore from '@/store/modules/settings'
 import variables from '@/assets/styles/variables.module.scss'
@@ -25,24 +27,18 @@ defineProps({
   }
 })
 
-const title = import.meta.env.VITE_APP_TITLE
 const settingsStore = useSettingsStore()
 const sideTheme = computed(() => settingsStore.sideTheme)
+const isDark = useDark()
 
-// 获取Logo背景色
-const getLogoBackground = computed(() => {
-  if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
-  }
-  if (settingsStore.navType == 3) {
-    return variables.menuLightBg
-  }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
-})
+const title = ref(
+  import.meta.env.VITE_APP_SIDEBAR_TITLE ||
+  import.meta.env.VITE_APP_TITLE ||
+  '机器人运维管理系统'
+)
 
-// 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
-  if (settingsStore.isDark) {
+  if (isDark.value) {
     return 'var(--sidebar-logo-text)'
   }
   if (settingsStore.navType == 3) {
@@ -50,6 +46,16 @@ const getLogoTextColor = computed(() => {
   }
   return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
 })
+
+const getLogoBackground = computed(() => {
+  if (isDark.value) {
+    return 'var(--sidebar-bg)'
+  }
+  if (settingsStore.navType == 3) {
+    return variables.menuLightBg
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+})
 </script>
 
 <style lang="scss" scoped>
@@ -64,8 +70,8 @@ const getLogoTextColor = computed(() => {
 
 .sidebar-logo-container {
   position: relative;
-  height: 50px;
-  line-height: 50px;
+  height: 56px;
+  line-height: 56px;
   background: v-bind(getLogoBackground);
   text-align: center;
   overflow: hidden;
@@ -73,29 +79,45 @@ const getLogoTextColor = computed(() => {
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 16px;
+    box-sizing: border-box;
+    line-height: 1;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
+      display: block;
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      object-fit: contain;
+      transform: translateY(15px);
     }
 
     & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: v-bind(getLogoTextColor);
+      display: block;
+      margin: 0 0 0 10px;
+      padding: 0;
+      color: #ffffff !important;
       font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
+      font-size: 15px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
+      line-height: 28px;
+      transform: translate(15px, -10px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
   &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
+    .sidebar-logo-link {
+      justify-content: center;
+      padding: 0;
+    }
+    .sidebar-title {
+      display: none;
     }
   }
 }

+ 1 - 1
src/router/index.js

@@ -66,7 +66,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '运行总览', icon: 'dashboard', affix: true }
       }
     ]
   },

+ 2 - 2
src/settings.js

@@ -2,7 +2,7 @@ export default {
   /**
    * 网页标题
    */
-  title: import.meta.env.VITE_APP_TITLE,
+  title: import.meta.env.VITE_APP_TITLE || '迎宾巡逻机器人运维管理系统',
 
   /**
    * 侧边栏主题 深色主题theme-dark,浅色主题theme-light
@@ -62,6 +62,6 @@ export default {
   /**
    * 底部版权文本内容
    */
-  footerContent: 'Copyright © 2018-2026 RuoYi. All Rights Reserved.'
+  footerContent: 'Copyright © 2026 ' + (import.meta.env.VITE_APP_TITLE || '迎宾巡逻机器人运维管理系统')
 }
 

+ 1 - 1
src/views/login.vue

@@ -71,7 +71,7 @@ import { encrypt, decrypt } from "@/utils/jsencrypt"
 import useUserStore from '@/store/modules/user'
 import defaultSettings from '@/settings'
 
-const title = import.meta.env.VITE_APP_TITLE
+const title = import.meta.env.VITE_APP_TITLE || '迎宾巡逻机器人运维管理系统'
 const footerContent = defaultSettings.footerContent
 const userStore = useUserStore()
 const route = useRoute()