refactor(projects): 代码优化

soybeanjs · May 10, 2022 · a1c7e10 · a1c7e10 · vercel · May 10, 2022
1 parent 50d7ccd
commit a1c7e10
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 28 deletions.
diff --git a/src/layouts/common/GlobalContent/index.vue b/src/layouts/common/GlobalContent/index.vue
@@ -4,19 +4,17 @@
     class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
   >
     <router-view v-slot="{ Component, route }">
-      <div class="h-full">
-        <transition
-          :name="theme.pageAnimateMode"
-          mode="out-in"
-          :appear="true"
-          @before-leave="handleBeforeLeave"
-          @after-enter="handleAfterEnter"
-        >
-          <keep-alive :include="routeStore.cacheRoutes">
-            <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
-          </keep-alive>
-        </transition>
-      </div>
+      <transition
+        :name="theme.pageAnimateMode"
+        mode="out-in"
+        :appear="true"
+        @before-leave="handleBeforeLeave"
+        @after-enter="handleAfterEnter"
+      >
+        <keep-alive :include="routeStore.cacheRoutes">
+          <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
+        </keep-alive>
+      </transition>
     </router-view>
   </div>
 </template>

diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -1,17 +1,15 @@
 <template>
-  <n-divider title-placement="center">主题</n-divider>
+  <n-divider title-placement="center">主题模式</n-divider>
   <n-space vertical size="large">
     <setting-menu label="深色主题">
-      <div class="flex-center">
-        <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
-          <template #checked>
-            <icon-mdi-white-balance-sunny class="text-14px text-primary" />
-          </template>
-          <template #unchecked>
-            <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
-          </template>
-        </n-switch>
-      </div>
+      <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
+        <template #checked>
+          <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+        </template>
+        <template #unchecked>
+          <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+        </template>
+      </n-switch>
     </setting-menu>
     <setting-menu label="跟随系统">
       <n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">

diff --git a/src/settings/theme.json b/src/settings/theme.json
@@ -1,6 +1,6 @@
 {
-	"followSystemTheme": true,
 	"darkMode": false,
+	"followSystemTheme": true,
 	"layout": {
 		"minWidth": 900,
 		"mode": "vertical",

diff --git a/src/settings/theme.ts b/src/settings/theme.ts
@@ -29,8 +29,8 @@ const themeColorList = [
 ];
 
 const defaultThemeSetting: Theme.Setting = {
-  followSystemTheme: true,
   darkMode: false,
+  followSystemTheme: true,
   layout: {
     minWidth: 900,
     mode: 'vertical',

diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
@@ -98,10 +98,10 @@ declare namespace Service {
 declare namespace Theme {
   /** 主题配置 */
   interface Setting {
-    /** 是否自动跟随系统主题 */
-    followSystemTheme: boolean;
     /** 暗黑模式 */
     darkMode: boolean;
+    /** 是否自动跟随系统主题 */
+    followSystemTheme: boolean;
     /** 布局样式 */
     layout: Layout;
     /** 主题颜色 */