perf: 代码优化 layout/Settings

src/layout/components/Settings/index.vue

@@ -1,66 +1,58 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 
 const settingsStore = useSettingsStore()
+
+/** 使用 storeToRefs 将提取的属性保持其响应性 */
+const {
+  showTagsView,
+  showSidebarLogo,
+  fixedHeader,
+  showNotify,
+  showThemeSwitch,
+  showScreenfull,
+  showGreyMode,
+  showColorWeakness
+} = storeToRefs(settingsStore)
+
+/** 定义 switch 设置项 */
+const switchSettings = {
+  显示标签栏: showTagsView,
+  "显示侧边栏 Logo": showSidebarLogo,
+  "固定 Header": fixedHeader,
+  显示消息通知: showNotify,
+  显示切换主题按钮: showThemeSwitch,
+  显示全屏按钮: showScreenfull,
+  显示灰色模式: showGreyMode,
+  显示色弱模式: showColorWeakness
+}
 </script>
 
 <template>
-  <div class="drawer-container">
-    <div>
-      <h3 class="drawer-title">系统布局配置</h3>
-      <div class="drawer-item">
-        <span>显示标签栏</span>
-        <el-switch v-model="settingsStore.showTagsView" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示侧边栏 Logo</span>
-        <el-switch v-model="settingsStore.showSidebarLogo" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>固定 Header</span>
-        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示消息通知</span>
-        <el-switch v-model="settingsStore.showNotify" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示切换主题按钮</span>
-        <el-switch v-model="settingsStore.showThemeSwitch" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示全屏按钮</span>
-        <el-switch v-model="settingsStore.showScreenfull" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示灰色模式</span>
-        <el-switch v-model="settingsStore.showGreyMode" class="drawer-switch" />
-      </div>
-      <div class="drawer-item">
-        <span>显示色弱模式</span>
-        <el-switch v-model="settingsStore.showColorWeakness" class="drawer-switch" />
-      </div>
+  <div class="setting-container">
+    <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" />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-  .drawer-title {
-    margin-bottom: 12px;
+@import "@/styles/mixins.scss";
+
+.setting-container {
+  padding: 20px;
+  .setting-item {
     font-size: 14px;
-    line-height: 22px;
-  }
-  .drawer-item {
-    font-size: 14px;
-    padding: 12px 0;
-  }
-  .drawer-switch {
-    float: right;
+    padding: 6px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .setting-name {
+      @include ellipsis;
+    }
   }
 }
 </style>

src/styles/mixins.scss

@@ -1,3 +1,4 @@
+/** 清除浮动 */
 @mixin clearfix {
   &:after {
     content: "";
@@ -6,6 +7,7 @@
   }
 }
 
+/** 美化原生滚动条 */
 @mixin scrollbar {
   // 整个滚动条
   &::-webkit-scrollbar {
@@ -23,7 +25,18 @@
   &::-webkit-scrollbar-thumb:active {
     background-color: #90939999;
   }
+  // 当同时有垂直滚动条和水平滚动条时交汇的部分
   &::-webkit-scrollbar-corner {
     background-color: transparent;
   }
 }
+
+/** 文本溢出时显示省略号 */
+@mixin ellipsis {
+  // 隐藏溢出的文本
+  overflow: hidden;
+  // 防止文本换行
+  white-space: nowrap;
+  // 文本内容溢出容器时，文本末尾显示省略号
+  text-overflow: ellipsis;
+}