去掉RightPanel改为导航栏设置按钮，TagsView样式修改

src/components/Notify/index.vue

@@ -56,9 +56,7 @@ const handleHistory = () => {
       <template #reference>
         <el-badge :value="badgeValue" :max="badgeMax" :hidden="badgeValue === 0">
           <el-tooltip effect="dark" content="消息通知" placement="bottom">
-            <el-icon :size="20">
-              <Bell />
-            </el-icon>
+            <el-button :icon="Bell" circle />
           </el-tooltip>
         </el-badge>
       </template>

src/components/Screenfull/index.vue

@@ -76,7 +76,9 @@ const handleContentFullClick = () => {
   <div>
     <!-- 全屏 -->
     <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
-      <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
+      <el-button circle>
+        <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
+      </el-button>
     </el-tooltip>
     <!-- 内容区 -->
     <el-dropdown v-else :disabled="isFullscreen">

src/components/SearchMenu/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from "vue"
 import SearchModal from "./SearchModal.vue"
+import { Search } from "@element-plus/icons-vue"
 
 /** 控制 modal 显隐 */
 const modalVisible = ref<boolean>(false)
@@ -13,7 +14,7 @@ const handleOpen = () => {
 <template>
   <div>
     <el-tooltip effect="dark" content="搜索菜单" placement="bottom">
-      <SvgIcon name="search" @click="handleOpen" />
+      <el-button :icon="Search" @click="handleOpen" circle />
     </el-tooltip>
     <SearchModal v-model="modalVisible" />
   </div>

src/layouts/components/Settings/index.vue → src/components/Settings/index.vue

@@ -1,11 +1,36 @@
+<template>
+  <div>
+    <el-tooltip effect="dark" content="设置" placement="bottom">
+      <el-button :icon="Setting" circle @click="show = true" />
+    </el-tooltip>
+
+    <el-drawer v-model="show" size="300px" :with-header="false">
+      <div class="setting-container">
+        <h4>布局配置</h4>
+        <SelectLayoutMode />
+        <el-divider />
+        <h4>功能配置</h4>
+        <div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
+          <span class="setting-name">{{ settingName }}</span>
+          <el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
+        </div>
+        <el-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
 <script lang="ts" setup>
+import { ref } from "vue"
 import { watchEffect } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
 import { resetConfigLayout } from "@/utils"
+import { Setting, Refresh } from "@element-plus/icons-vue"
 import SelectLayoutMode from "./SelectLayoutMode.vue"
-import { Refresh } from "@element-plus/icons-vue"
+
+const show = ref(false)
 
 const { isLeft } = useLayoutMode()
 const settingsStore = useSettingsStore()
@@ -48,25 +73,11 @@ watchEffect(() => {
 })
 </script>
 
-<template>
-  <div class="setting-container">
-    <h4>布局配置</h4>
-    <SelectLayoutMode />
-    <el-divider />
-    <h4>功能配置</h4>
-    <div class="setting-item" v-for="(settingValue, settingName, index) in switchSettings" :key="index">
-      <span class="setting-name">{{ settingName }}</span>
-      <el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
-    </div>
-    <el-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</el-button>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 @import "@/styles/mixins.scss";
 
 .setting-container {
-  padding: 20px;
+  // padding: 20px;
   .setting-item {
     font-size: 14px;
     color: var(--el-text-color-regular);

src/components/ThemeSwitch/index.vue

@@ -25,9 +25,7 @@ const handleChangeTheme = ({ clientX, clientY }: MouseEvent, themeName: ThemeNam
   <el-dropdown trigger="click">
     <div>
       <el-tooltip effect="dark" content="主题模式" placement="bottom">
-        <el-icon :size="20">
-          <MagicStick />
-        </el-icon>
+        <el-button :icon="MagicStick" circle="" />
       </el-tooltip>
     </div>
     <template #dropdown>

src/layouts/components/NavigationBar/index.vue

@@ -12,6 +12,7 @@ import Notify from "@/components/Notify/index.vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import Screenfull from "@/components/Screenfull/index.vue"
 import SearchMenu from "@/components/SearchMenu/index.vue"
+import Settings from "@/components/Settings/index.vue"
 import { useDevice } from "@/hooks/useDevice"
 import { useLayoutMode } from "@/hooks/useLayoutMode"
 
@@ -21,7 +22,7 @@ const router = useRouter()
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
-const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
+const { showSettings, showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
 
 /** 切换侧边栏 */
 const toggleSidebar = () => {
@@ -46,6 +47,7 @@ const logout = () => {
     <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
     <Sidebar v-if="isTop && !isMobile" class="sidebar" />
     <div class="right-menu">
+      <Settings v-if="showSettings" class="right-menu-item" />
       <SearchMenu v-if="showSearchMenu" class="right-menu-item" />
       <Screenfull v-if="showScreenfull" class="right-menu-item" />
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />

src/layouts/components/TagsView/index.vue

@@ -217,12 +217,11 @@ onMounted(() => {
         margin-right: 5px;
       }
       &.active {
-        background-color: var(--v3-tagsview-tag-active-bg-color);
-        color: var(--v3-tagsview-tag-active-text-color);
+        color: var(--v3-tagsview-tag-active-bg-color);
         border-color: var(--v3-tagsview-tag-active-border-color);
       }
       .el-icon {
-        margin: 0 2px;
+        margin-bottom: 1.5px;
         vertical-align: middle;
         border-radius: 50%;
         &:hover {

src/layouts/components/index.ts

@@ -1,7 +1,5 @@
 export { default as AppMain } from "./AppMain.vue"
 export { default as NavigationBar } from "./NavigationBar/index.vue"
-export { default as Settings } from "./Settings/index.vue"
 export { default as Sidebar } from "./Sidebar/index.vue"
 export { default as TagsView } from "./TagsView/index.vue"
-export { default as RightPanel } from "./RightPanel/index.vue"
 export { default as Logo } from "./Logo/index.vue"

src/layouts/index.vue

@@ -9,7 +9,7 @@ import { useLayoutMode } from "@/hooks/useLayoutMode"
 import LeftMode from "./LeftMode.vue"
 import TopMode from "./TopMode.vue"
 import LeftTopMode from "./LeftTopMode.vue"
-import { Settings, RightPanel } from "./components"
+// import { Settings, RightPanel } from "./components"
 import { getCssVariableValue, setCssVariableValue } from "@/utils"
 
 /** Layout 布局响应式 */
@@ -19,7 +19,7 @@ const { setWatermark, clearWatermark } = useWatermark()
 const { isMobile } = useDevice()
 const { isLeft, isTop, isLeftTop } = useLayoutMode()
 const settingsStore = useSettingsStore()
-const { showSettings, showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
+const { showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
 
 const classes = computed(() => {
   return {
@@ -53,9 +53,9 @@ watchEffect(() => {
     <!-- 混合模式 -->
     <LeftTopMode v-else-if="isLeftTop" />
     <!-- 右侧设置面板 -->
-    <RightPanel v-if="showSettings">
+    <!-- <RightPanel v-if="showSettings">
       <Settings />
-    </RightPanel>
+    </RightPanel> -->
   </div>
 </template>
 

src/styles/index.scss

@@ -17,7 +17,7 @@
 
 // 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
 .app-container {
-  padding: 20px;
+  padding: 8px;
 }
 
 html {

src/styles/variables.css

@@ -28,7 +28,6 @@
   /** TagsView 组件 */
   --v3-tagsview-height: 34px;
   --v3-tagsview-text-color: var(--el-text-color-regular);
-  --v3-tagsview-tag-active-text-color: #ffffff;
   --v3-tagsview-tag-bg-color: var(--el-bg-color);
   --v3-tagsview-tag-active-bg-color: var(--el-color-primary);
   --v3-tagsview-tag-border-radius: 2px;

src/styles/vxe-table.scss

@@ -5,7 +5,7 @@
   &--form-wrapper {
     .vxe-form {
       padding: 10px 20px !important;
-      margin-bottom: 20px !important;
+      margin-bottom: 5px !important;
     }
   }
 

src/views/table/element-plus/index.vue

@@ -207,7 +207,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
 
 <style lang="scss" scoped>
 .search-wrapper {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   :deep(.el-card__body) {
     padding-bottom: 2px;
   }