refactor(Settings): ♻️ 项目配置按钮移入navbar

src/layout/components/NavBar/components/NavbarRight.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <div v-if="device !== 'mobile'" class="flex-center">
+    <template v-if="device !== 'mobile'">
       <!--全屏 -->
       <div class="navbar-item" @click="toggle">
         <svg-icon
@@ -12,23 +12,18 @@
       <el-tooltip content="布局大小" effect="dark" placement="bottom">
         <size-select class="navbar-item" size="12px" />
       </el-tooltip>
-
+      <!-- 语言选择 -->
       <lang-select class="navbar-item" size="12px" />
-    </div>
+    </template>
 
     <!-- 用户头像 -->
-    <el-dropdown trigger="click">
+    <el-dropdown class="navbar-item" trigger="click">
-      <div class="flex-center ml-1">
+      <div class="flex-center h100% p10px">
         <img
           :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
-          width="40px"
+          class="rounded-full mr-10px w24px w24px"
-          height="40px"
-          class="rounded-md cursor-pointer"
         />
-
+        <span>{{ userStore.user.username }}</span>
-        <el-icon class="cursor-pointer">
-          <CaretBottom />
-        </el-icon>
       </div>
       <template #dropdown>
         <el-dropdown-menu>
@@ -47,14 +42,32 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
+
+    <!-- 设置 -->
+    <template v-if="defaultSettings.showSettings">
+      <el-icon
+        class="navbar-item"
+        size="12px"
+        @click="settingStore.settingsVisible = true"
+      >
+        <Setting />
+      </el-icon>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
-import { useAppStore, useTagsViewStore, useUserStore } from "@/store";
+import {
+  useAppStore,
+  useTagsViewStore,
+  useUserStore,
+  useSettingsStore,
+} from "@/store";
+import defaultSettings from "@/settings";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
 const userStore = useUserStore();
+const settingStore = useSettingsStore();
 
 const route = useRoute();
 const router = useRouter();
@@ -88,7 +101,7 @@ function logout() {
 <style lang="scss" scoped>
 .navbar-item {
   display: inline-block;
-  width: 30px;
+  min-width: 40px;
   height: $navbar-height;
   line-height: $navbar-height;
   color: var(--el-text-color);

src/layout/components/Settings/index.vue

@@ -1,12 +1,4 @@
 <template>
-  <div
-    :class="['settings-button', { show: settingsVisible }]"
-    @click="settingsVisible = !settingsVisible"
-  >
-    <i-ep-close v-show="settingsVisible" />
-    <i-ep-setting v-show="!settingsVisible" />
-  </div>
-
   <el-drawer v-model="settingsVisible" size="300" title="项目配置">
     <el-divider>主题设置</el-divider>
 
@@ -70,7 +62,14 @@ const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 
-const settingsVisible = ref(false);
+const settingsVisible = computed({
+  get() {
+    return settingsStore.settingsVisible;
+  },
+  set() {
+    settingsStore.settingsVisible = false;
+  },
+});
 
 /**
  * 切换主题颜色
@@ -157,26 +156,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.settings-button {
-  position: fixed;
-  top: 250px;
-  right: 0;
-  z-index: 2001;
-  width: 40px;
-  height: 40px;
-  color: var(--el-color-white);
-  cursor: pointer;
-  background-color: var(--el-color-primary);
-  border-radius: 6px 0 0 6px;
-
-  @apply flex-center;
-
-  &.show {
-    right: 300px;
-    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-  }
-}
-
 .settings-option {
   @apply py-1 flex-x-between;
 }

src/store/modules/settings.ts

@@ -3,6 +3,8 @@ import defaultSettings from "@/settings";
 type SettingsValue = boolean | string;
 
 export const useSettingsStore = defineStore("setting", () => {
+  // 是否显示设置
+  const settingsVisible = ref(false);
   // 是否显示标签视图
   const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
   // 是否显示侧边栏logo
@@ -73,6 +75,7 @@ export const useSettingsStore = defineStore("setting", () => {
   }
 
   return {
+    settingsVisible,
     tagsView,
     fixedHeader,
     sidebarLogo,