项目头做

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -1,14 +1,14 @@
 #app {
 
   .main-container {
-    height:calc(100% - 60px);
+    height: calc(100% - 60px);
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
@@ -24,8 +24,8 @@
     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);
+    -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 {
@@ -92,7 +92,7 @@
       color: $base-menu-color-active !important;
     }
 
-    & .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
 
@@ -101,7 +101,7 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
 
@@ -136,7 +136,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      &>.el-sub-menu__title {
+      & > .el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -148,15 +148,16 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        &>.el-sub-menu__title {
-          &>span {
+        & > .el-sub-menu__title {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
           }
-          &>i {
+
+          & > i {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -203,13 +204,13 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-sub-menu>.el-sub-menu__title,
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $sub-menuHover
@@ -218,7 +219,7 @@
   }
 
   // the scroll bar appears when the sub-menu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 

ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,16 +1,21 @@
 <template>
-  <!-- <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <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>
-      </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>
-      </router-link>
-    </transition>
-  </div> -->
+<!--  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }"-->
+<!--       :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">-->
+<!--    <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>-->
+<!--      </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>-->
+<!--      </router-link>-->
+<!--    </transition>-->
+<!--  </div>-->
 </template>
 
 <script setup>

ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -1,36 +1,39 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+    <template
+        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+          <template #title><span class="menu-title"
+                                 :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+          </template>
         </el-menu-item>
       </app-link>
     </template>
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
       <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta && item.meta.icon" />
+        <svg-icon :icon-class="item.meta && item.meta.icon"/>
         <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
       </template>
 
       <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
+          v-for="(child, index) in item.children"
+          :key="child.path + index"
+          :is-nest="true"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
       />
     </el-sub-menu>
   </div>
 </template>
 
 <script setup>
-import { isExternal } from '@/utils/validate'
+import {isExternal} from '@/utils/validate'
 import AppLink from './Link'
-import { getNormalPath } from '@/utils/ruoyi'
+import {getNormalPath} from '@/utils/ruoyi'
 
 const props = defineProps({
   // route object
@@ -71,7 +74,7 @@ function hasOneShowingChild(children = [], parent) {
 
   // Show parent if there are no child router to display
   if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
     return true
   }
 
@@ -87,12 +90,12 @@ function resolvePath(routePath, routeQuery) {
   }
   if (routeQuery) {
     let query = JSON.parse(routeQuery);
-    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
+    return {path: getNormalPath(props.basePath + '/' + routePath), query: query}
   }
   return getNormalPath(props.basePath + '/' + routePath)
 }
 
-function hasTitle(title){
+function hasTitle(title) {
   if (title.length > 5) {
     return title;
   } else {

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -1,25 +1,37 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-        :unique-opened="true"
-        :active-text-color="theme"
-        :collapse-transition="false"
-        mode="horizontal"
-      >
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
-      </el-menu>
-    </el-scrollbar>
+  <div :class="{ 'has-logo': showLogo }"
+       :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <logo v-if="showLogo" :collapse="isCollapse"/>
+    <el-row class="headBar">
+      <el-col :span="8">
+        <div class="line-left-img">
+          <img src="@/assets/images/top.png" alt=""/>
+        </div>
+        <div class="line-left-name">
+          <span>上海水务海洋数字孪生模型平台</span>
+        </div>
+      </el-col>
+      <el-col :span="16">
+        <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+          <el-menu
+              :default-active="activeMenu"
+              :collapse="isCollapse"
+              :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+              :unique-opened="true"
+              :active-text-color="theme"
+              :collapse-transition="false"
+              mode="horizontal"
+          >
+            <sidebar-item
+                v-for="(route, index) in sidebarRouters"
+                :key="route.path + index"
+                :item="route"
+                :base-path="route.path"
+            />
+          </el-menu>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -36,14 +48,14 @@ const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 
-const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
 const isCollapse = computed(() => !appStore.sidebar.opened);
 
 const activeMenu = computed(() => {
-  const { meta, path } = route;
+  const {meta, path} = route;
   // if set path, the sidebar will highlight the path you set
   if (meta.activeMenu) {
     return meta.activeMenu;
@@ -52,4 +64,39 @@ const activeMenu = computed(() => {
 })
 
 </script>
+<style>
+.headBar {
+  height: 60px;
+  line-height: 60px;
+  background-image: url('../../../assets/images/title-background.png') !important;
+
+  .line-left-img {
+    float: left;
+
+    img {
+      width: 60px;
+      height: 60px;
+      margin-left: 10px;
+    }
+  }
+
+  .line-left-name {
+    float: left;
+
+    span {
+      font-size: 35px;
+      font-weight: bold;
+      color: #f5f6f8;
+      height: 60px;
+      line-height: 60px;
+      letter-spacing: 3px;
+    }
+  }
+}
+
+.el-menu {
+  background-color: transparent !important; /* 使用 !important 确保优先级 */
+  font-size: 20px !important;
+}
+</style>
 

ruoyi-ui/src/layout/index.vue

@@ -1,33 +1,33 @@
 <template>
   <div
-    :class="classObj"
-    class="app-wrapper"
-    :style="{ '--current-color': theme }"
+      :class="classObj"
+      class="app-wrapper"
+      :style="{ '--current-color': theme }"
   >
     <div
-      v-if="device === 'mobile' && sidebar.opened"
-      class="drawer-bg"
-      @click="handleClickOutside"
+        v-if="device === 'mobile' && sidebar.opened"
+        class="drawer-bg"
+        @click="handleClickOutside"
     />
-    <sidebar v-if="!sidebar.hide" class="topbar-container" />
+    <sidebar v-if="!sidebar.hide" class="topbar-container"/>
     <div
-      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
-      class="main-container"
+        :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+        class="main-container"
     >
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
+        <navbar @setLayout="setLayout"/>
+        <tags-view v-if="needTagsView"/>
       </div>
-      <app-main />
-      <settings ref="settingRef" />
+      <app-main/>
+      <settings ref="settingRef"/>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useWindowSize } from "@vueuse/core";
+import {useWindowSize} from "@vueuse/core";
 import Sidebar from "./components/Sidebar/index.vue";
-import { AppMain, Navbar, Settings, TagsView } from "./components";
+import {AppMain, Navbar, Settings, TagsView} from "./components";
 import defaultSettings from "@/settings";
 
 import useAppStore from "@/store/modules/app";
@@ -48,32 +48,33 @@ const classObj = computed(() => ({
   mobile: device.value === "mobile",
 }));
 
-const { width, height } = useWindowSize();
+const {width, height} = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watch(
-  () => device.value,
-  () => {
-    if (device.value === "mobile" && sidebar.value.opened) {
-      useAppStore().closeSideBar({ withoutAnimation: false });
+    () => device.value,
+    () => {
+      if (device.value === "mobile" && sidebar.value.opened) {
+        useAppStore().closeSideBar({withoutAnimation: false});
+      }
     }
-  }
 );
 
 watchEffect(() => {
   if (width.value - 1 < WIDTH) {
     useAppStore().toggleDevice("mobile");
-    useAppStore().closeSideBar({ withoutAnimation: true });
+    useAppStore().closeSideBar({withoutAnimation: true});
   } else {
     useAppStore().toggleDevice("desktop");
   }
 });
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false });
+  useAppStore().closeSideBar({withoutAnimation: false});
 }
 
 const settingRef = ref(null);
+
 function setLayout() {
   settingRef.value.openSetting();
 }