fix Bug or esLink formatting

src/layout/components/Header/ProjectSetting.vue

@@ -7,24 +7,24 @@
         <div class="drawer-setting-item justify-center dark-switch">
           <n-tooltip placement="bottom">
             <template #trigger>
-              <n-switch v-model:value="designStore.darkTheme"/>
+              <n-switch v-model:value="designStore.darkTheme" />
             </template>
             <span>深色主题</span>
           </n-tooltip>
-
         </div>
 
         <n-divider title-placement="center">系统主题</n-divider>
 
         <div class="drawer-setting-item align-items-top">
-          <span class="theme-item"
-                v-for="(item, index) in appThemeList"
-                :key="index"
-                :style="{'background-color':item}"
-                @click="togTheme(item)"
+          <span
+            class="theme-item"
+            v-for="(item, index) in appThemeList"
+            :key="index"
+            :style="{ 'background-color': item }"
+            @click="togTheme(item)"
           >
             <n-icon size="12" v-if="item === designStore.appTheme">
-              <CheckOutlined/>
+              <CheckOutlined />
             </n-icon>
           </span>
         </div>
@@ -35,46 +35,45 @@
           <div class="drawer-setting-item-style align-items-top">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')"/>
+                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')" />
               </template>
               <span>左侧菜单模式</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'"/>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'" />
           </div>
 
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')"/>
+                <img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')" />
               </template>
               <span>顶部菜单模式</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'"/>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
           </div>
         </div>
 
-
         <n-divider title-placement="center">导航栏风格</n-divider>
 
         <div class="drawer-setting-item align-items-top">
           <div class="drawer-setting-item-style align-items-top">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')"/>
+                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')" />
               </template>
               <span>暗色侧边栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'" />
           </div>
 
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')"/>
+                <img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')" />
               </template>
               <span>白色侧边栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
           </div>
         </div>
 
@@ -82,22 +81,23 @@
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/header-theme-dark.svg" @click="togNavTheme('header-dark')"/>
+                <img
+                  src="~@/assets/images/header-theme-dark.svg"
+                  @click="togNavTheme('header-dark')"
+                />
               </template>
               <span>暗色顶栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'" />
           </div>
         </div>
 
         <n-divider title-placement="center">界面功能</n-divider>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            固定顶栏
-          </div>
+          <div class="drawer-setting-item-title"> 固定顶栏 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.headerSetting.fixed"/>
+            <n-switch v-model:value="settingStore.headerSetting.fixed" />
           </div>
         </div>
 
@@ -111,214 +111,200 @@
         <!--        </div>-->
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            固定多页签
-          </div>
+          <div class="drawer-setting-item-title"> 固定多页签 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.multiTabsSetting.fixed"/>
+            <n-switch v-model:value="settingStore.multiTabsSetting.fixed" />
           </div>
         </div>
 
         <n-divider title-placement="center">界面显示</n-divider>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示重载页面按钮
-          </div>
+          <div class="drawer-setting-item-title"> 显示重载页面按钮 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.headerSetting.isReload"/>
+            <n-switch v-model:value="settingStore.headerSetting.isReload" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示面包屑导航
-          </div>
+          <div class="drawer-setting-item-title"> 显示面包屑导航 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.crumbsSetting.show"/>
+            <n-switch v-model:value="settingStore.crumbsSetting.show" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示面包屑显示图标
-          </div>
+          <div class="drawer-setting-item-title"> 显示面包屑显示图标 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.crumbsSetting.showIcon"/>
+            <n-switch v-model:value="settingStore.crumbsSetting.showIcon" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示多页签
-          </div>
+          <div class="drawer-setting-item-title"> 显示多页签 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.multiTabsSetting.show"/>
+            <n-switch v-model:value="settingStore.multiTabsSetting.show" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示页脚
-          </div>
+          <div class="drawer-setting-item-title"> 显示页脚 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.showFooter"/>
+            <n-switch v-model:value="settingStore.showFooter" />
           </div>
         </div>
 
-
         <div class="drawer-setting-item">
           <n-alert type="warning" :showIcon="false">
             <p>{{ alertText }}</p>
           </n-alert>
         </div>
-
       </div>
     </n-drawer-content>
   </n-drawer>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watch, createVNode, computed, unref } from 'vue'
-import { useProjectSettingStore } from "@/store/modules/projectSetting";
-import { useDesignSettingStore } from "@/store/modules/designSetting";
-import { CheckOutlined } from '@vicons/antd'
-import { darkTheme } from 'naive-ui'
+  import { defineComponent, reactive, toRefs, watch } from 'vue';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import { CheckOutlined } from '@vicons/antd';
+  import { darkTheme } from 'naive-ui';
 
-export default defineComponent({
-  name: 'ProjectSetting',
-  props: {
-    title: {
-      type: String,
-      default: '项目配置'
+  export default defineComponent({
+    name: 'ProjectSetting',
+    components: { CheckOutlined },
+    props: {
+      title: {
+        type: String,
+        default: '项目配置',
+      },
+      width: {
+        type: Number,
+        default: 280,
+      },
     },
-    width: {
-      type: Number,
-      default: 280
-    },
-  },
-  components: { CheckOutlined },
-  setup(props, { emit }) {
-    const settingStore = useProjectSettingStore()
-    const designStore = useDesignSettingStore()
-    const { width, title } = props
-    const state = reactive({
-      width,
-      title,
-      isDrawer: false,
-      placement: "right",
-      alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
-      appThemeList: designStore.appThemeList
-    })
+    setup(props) {
+      const settingStore = useProjectSettingStore();
+      const designStore = useDesignSettingStore();
+      const state = reactive({
+        width: props.width,
+        title: props.title,
+        isDrawer: false,
+        placement: 'right',
+        alertText:
+          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
+        appThemeList: designStore.appThemeList,
+      });
 
-    watch(
+      watch(
         () => designStore.darkTheme,
         (to) => {
-          settingStore.navTheme = to ? 'header-dark' : 'dark'
+          settingStore.navTheme = to ? 'header-dark' : 'dark';
         }
-    )
+      );
 
-    function openDrawer(isDrawer) {
-      state.isDrawer = true
-    }
-
-    function closeDrawer() {
-      state.isDrawer = false
-    }
-
-    function togNavTheme(theme) {
-      settingStore.navTheme = theme
-      if (settingStore.navMode === 'horizontal' && theme === 'light') {
-        designStore.navTheme = 'dark'
+      function openDrawer() {
+        state.isDrawer = true;
       }
-    }
 
-    function togTheme(color) {
-      designStore.appTheme = color
-    }
-
-    function togNavMode(mode) {
-      settingStore.navMode = mode
-      if (mode === 'horizontal') {
-        settingStore.setNavTheme('light')
-      } else {
-        settingStore.setNavTheme('dark')
+      function closeDrawer() {
+        state.isDrawer = false;
       }
-    }
 
-    return {
-      ...toRefs(state),
-      settingStore,
-      designStore,
-      togNavTheme,
-      togNavMode,
-      togTheme,
-      darkTheme,
-      openDrawer,
-      closeDrawer,
-    }
-  }
-})
+      function togNavTheme(theme) {
+        settingStore.navTheme = theme;
+        if (settingStore.navMode === 'horizontal' && theme === 'light') {
+          settingStore.navTheme = 'dark';
+        }
+      }
+
+      function togTheme(color) {
+        designStore.appTheme = color;
+      }
+
+      function togNavMode(mode) {
+        settingStore.navMode = mode;
+        if (mode === 'horizontal') {
+          settingStore.setNavTheme('light');
+        } else {
+          settingStore.setNavTheme('dark');
+        }
+      }
+
+      return {
+        ...toRefs(state),
+        settingStore,
+        designStore,
+        togNavTheme,
+        togNavMode,
+        togTheme,
+        darkTheme,
+        openDrawer,
+        closeDrawer,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.drawer {
-  .n-divider:not(.n-divider--vertical) {
-    margin: 10px 0;
-  }
-
-  &-setting-item {
-    display: flex;
-    align-items: center;
-    padding: 12px 0;
-    flex-wrap: wrap;
-
-    &-style {
-      display: inline-block;
-      position: relative;
-      margin-right: 16px;
-      cursor: pointer;
-      text-align: center;
+  .drawer {
+    .n-divider:not(.n-divider--vertical) {
+      margin: 10px 0;
     }
 
-    &-title {
-      flex: 1 1;
-      font-size: 14px;
+    &-setting-item {
+      display: flex;
+      align-items: center;
+      padding: 12px 0;
+      flex-wrap: wrap;
+
+      &-style {
+        display: inline-block;
+        position: relative;
+        margin-right: 16px;
+        cursor: pointer;
+        text-align: center;
+      }
+
+      &-title {
+        flex: 1 1;
+        font-size: 14px;
+      }
+
+      &-action {
+        flex: 0 0 auto;
+      }
+
+      .theme-item {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        cursor: pointer;
+        border: 1px solid #eee;
+        border-radius: 2px;
+        margin: 0 5px 5px 0;
+        text-align: center;
+
+        .n-icon {
+          color: #fff;
+        }
+      }
     }
 
-    &-action {
-      flex: 0 0 auto;
+    .align-items-top {
+      align-items: flex-start;
+      padding: 2px 0;
     }
 
-    .theme-item {
-      width: 20px;
-      min-width: 20px;
-      height: 20px;
-      cursor: pointer;
-      border: 1px solid #eee;
-      border-radius: 2px;
-      margin: 0 5px 5px 0;
-      text-align: center;
+    .justify-center {
+      justify-content: center;
+    }
 
-      .n-icon {
-        color: #fff
+    .dark-switch .n-switch--active {
+      ::v-deep(.n-switch__rail) {
+        background-color: #000e1c;
       }
     }
   }
-
-  .align-items-top {
-    align-items: flex-start;
-    padding: 2px 0;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .dark-switch .n-switch--active {
-    ::v-deep(.n-switch__rail) {
-      background-color: #000e1c;
-    }
-  }
-}
 </style>