修改顶栏和侧栏的布局和样式

smsb-plus-ui/src/assets/styles/sidebar.scss

@@ -23,8 +23,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    /* -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); */
+    /* box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); */
 
     // reset element-ui css
     .horizontal-collapse-transition {

smsb-plus-ui/src/layout/components/Navbar.vue

@@ -1,28 +1,32 @@
 <template>
   <div class="navbar">
-    <!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
-      @toggle-click="toggleSideBar" /> -->
-    <top-nav id="topmenu-container" class="topmenu-container" />
-
-    <div class="right-menu flex align-center">
-      <template v-if="appStore.device !== 'mobile'">
-        <el-select v-if="userId === 1 && tenantEnabled" v-model="companyName" class="min-w-244px" clearable filterable
-          reserve-keyword :placeholder="$t('navbar.selectTenant')" @change="dynamicTenantEvent"
-          @clear="dynamicClearEvent">
-          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId">
-          </el-option>
-          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
-        </el-select>
-
-        <!-- <header-search id="header-search" class="right-menu-item" /> -->
-        <search-menu ref="searchMenuRef" />
-        <!-- <el-tooltip content="搜索" effect="dark" placement="bottom">
+    <div class="navbar-left">
+      <img class="navbar-logo-img" src="@/assets/logo/logo.png" alt="logo" height="30px" width="30px" />
+      <span class="navbar-title">浪潮屏幕安播云平台</span>
+    </div>
+    <div class="navbar-center">
+      <top-nav id="topmenu-container" class="topmenu-container" />
+    </div>
+    <div class="navbar-right">
+      <div class="right-menu flex align-center">
+        <template v-if="appStore.device !== 'mobile'">
+          <el-select v-if="userId === 1 && tenantEnabled" v-model="companyName" class="min-w-244px" clearable filterable
+            reserve-keyword :placeholder="$t('navbar.selectTenant')" @change="dynamicTenantEvent"
+            @clear="dynamicClearEvent">
+            <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId">
+            </el-option>
+            <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
+          </el-select>
+
+          <!-- <header-search id="header-search" class="right-menu-item" /> -->
+          <search-menu ref="searchMenuRef" />
+          <!-- <el-tooltip content="搜索" effect="dark" placement="bottom">
           <div class="right-menu-item hover-effect" @click="openSearchMenu">
             <svg-icon class-name="search-icon" icon-class="search" />
           </div>
         </el-tooltip> -->
-        <!-- 消息 -->
-        <!-- <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
+          <!-- 消息 -->
+          <!-- <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
           <div>
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
               <template #reference>
@@ -36,7 +40,7 @@
             </el-popover>
           </div>
         </el-tooltip> -->
-        <!--        <el-tooltip content="Github" effect="dark" placement="bottom">
+          <!--        <el-tooltip content="Github" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
@@ -44,38 +48,39 @@
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip>-->
 
-        <!-- <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
+          <!-- <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-        <!--        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
+          <!--        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
           <lang-select id="lang-select" class="right-menu-item hover-effect" />
         </el-tooltip>-->
 
-        <!--        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
+          <!--        <el-tooltip :content="$t('navbar.layoutSize')" 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" trigger="click" @command="handleCommand">
-          <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
-            <el-icon><caret-bottom /></el-icon>
-          </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <router-link v-if="!dynamic" to="/user/profile">
-                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
-              </router-link>
-              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
-                <span>{{ $t('navbar.layoutSetting') }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item divided command="logout">
-                <span>{{ $t('navbar.logout') }}</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+        </template>
+        <div class="avatar-container">
+          <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
+            <div class="avatar-wrapper">
+              <img :src="userStore.avatar" class="user-avatar" />
+              <el-icon><caret-bottom /></el-icon>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <router-link v-if="!dynamic" to="/user/profile">
+                  <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
+                </router-link>
+                <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
+                  <span>{{ $t('navbar.layoutSetting') }}</span>
+                </el-dropdown-item>
+                <el-dropdown-item divided command="logout">
+                  <span>{{ $t('navbar.logout') }}</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
       </div>
     </div>
   </div>
@@ -290,4 +295,94 @@ watch(
     }
   }
 }
+
+.navbar {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  width: 100%;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.navbar-logo-img {
+  margin-right: 10px;
+}
+
+.navbar-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  letter-spacing: 2px;
+}
+
+.navbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+  margin-left: -35px;
+  /* 适当左移，可根据实际调整 */
+}
+
+.topmenu-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  max-width: 900px;
+  flex: 1;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: flex-end;
+}
+
+
+
+.navbar-logo-title {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 20px;
+}
+
+.navbar-logo-img {
+  display: block;
+  margin-right: 10px;
+}
+
+.navbar-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  letter-spacing: 2px;
+}
+
+.navbar-main {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.topmenu-container {
+  flex: 1;
+  min-width: 0;
+}
 </style>