refactor: ♻️ 设置项 class 类名修改、完善方法注释

src/layout/components/Settings/index.vue

@@ -17,7 +17,7 @@
 
     <el-divider>{{ $t("settings.interface") }}</el-divider>
 
-    <div class="settings-option">
+    <div class="setting-item">
       <span class="text-xs">{{ $t("settings.themeColor") }}</span>
       <ThemeColorPicker
         v-model="settingsStore.themeColor"
@@ -25,22 +25,22 @@
       />
     </div>
 
-    <div class="settings-option">
+    <div class="setting-item">
       <span class="text-xs">{{ $t("settings.tagsView") }}</span>
       <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="settings-option">
+    <div class="setting-item">
       <span class="text-xs">{{ $t("settings.fixedHeader") }}</span>
       <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="settings-option">
+    <div class="setting-item">
       <span class="text-xs">{{ $t("settings.sidebarLogo") }}</span>
       <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
-    <div class="settings-option">
+    <div class="setting-item">
       <span class="text-xs">{{ $t("settings.watermark") }}</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
@@ -73,25 +73,19 @@ const settingsVisible = computed({
   },
 });
 
-/**
- * 切换主题颜色
- */
+/** 切换主题颜色 */
 function changeThemeColor(color: string) {
   settingsStore.changeThemeColor(color);
 }
 
-/**
- * 切换主题
- */
+/** 切换主题 */
 const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
 const changeTheme = (val: any) => {
   isDark.value = val;
   settingsStore.changeTheme(isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
 };
 
-/**
- * 切换布局
- */
+/** 切换布局 */
 function changeLayout(layout: string) {
   settingsStore.changeLayout(layout);
   if (layout === LayoutEnum.MIX) {
@@ -99,6 +93,7 @@ function changeLayout(layout: string) {
   }
 }
 
+/** 重新激活顶部菜单 */
 function againActiveTop(newVal: string) {
   const parent = findOutermostParent(permissionStore.routes, newVal);
   if (appStore.activeTopMenu !== parent.path) {
@@ -106,6 +101,7 @@ function againActiveTop(newVal: string) {
   }
 }
 
+/** 递归查找最外层父节点 */
 function findOutermostParent(tree: any[], findName: string) {
   let parentMap: any = {};
 
@@ -136,7 +132,7 @@ function findOutermostParent(tree: any[], findName: string) {
 </script>
 
 <style lang="scss" scoped>
-.settings-option {
+.setting-item {
   @apply py-1 flex-x-between;
 }
 </style>