✨ 调整暗黑模式切换

web/src/components/aside-box.vue

@@ -7,24 +7,39 @@
       </Transition>
     </div>
     <MenuList />
+
+    <div class="aside_footer">
+    <div class="theme_switch">
+      <el-switch
+          v-model="isDark"
+          inline-prompt
+          :active-icon="Moon"
+          :inactive-icon="Sunny"
+          class="dark_switch"
+        />
+    </div>
     <div class="collapse" @click="handleCollapse">
       <el-icon v-if="menuCollapse"><Expand /></el-icon>
       <el-icon v-else><Fold /></el-icon>
     </div>
   </div>
+  </div>
 </template>
 
 <script setup>
 import { getCurrentInstance, computed } from 'vue'
-import {
-  Expand,
-  Fold
-} from '@element-plus/icons-vue'
+import { Expand, Fold, Moon, Sunny } from '@element-plus/icons-vue'
 import MenuList from './menuList.vue'
 
 const { proxy: { $store } } = getCurrentInstance()
 
 let menuCollapse = computed(() => $store.menuCollapse)
+const isDark = computed({
+  get: () => $store.isDark,
+  set: (isDark) => {
+    $store.setTheme(isDark)
+  }
+})
 
 const handleCollapse = () => {
   $store.setMenuCollapse(!menuCollapse.value)
@@ -57,14 +72,25 @@ const handleCollapse = () => {
       font-weight: 600;
     }
   }
-  .collapse {
+  .aside_footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     margin-top: auto;
-    margin-left: auto;
-    margin-bottom: 10px;
-    margin-right: 10px;
-    cursor: pointer;
-    &:hover {
-      color: #1890ff;
+    .theme_switch {
+      margin-top: auto;
+      margin-left: auto;
+      margin-bottom: 10px;
+      margin-right: 10px;
+    }
+    .collapse {
+      margin-left: auto;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      cursor: pointer;
+      &:hover {
+        color: #1890ff;
+      }
     }
   }
   .logout_wrap {

web/src/components/top-bar.vue

@@ -7,13 +7,6 @@
         </el-icon>
       </div>
       <h2>{{ title }}</h2>
-      <el-switch
-        v-model="isDark"
-        inline-prompt
-        :active-icon="Moon"
-        :inactive-icon="Sunny"
-        class="dark_switch"
-      />
       <el-button
         type="info"
         class="about_btn"
@@ -117,7 +110,7 @@
 <script setup>
 import { ref, getCurrentInstance, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
-import { User, Sunny, Moon, Fold, Document } from '@element-plus/icons-vue'
+import { User, Fold, Document } from '@element-plus/icons-vue'
 import packageJson from '../../package.json'
 import MenuList from './menuList.vue'
 
@@ -136,13 +129,6 @@ const user = computed(() => $store.user)
 const title = computed(() => $store.title)
 const isPlusActive = computed(() => $store.isPlusActive)
 
-const isDark = computed({
-  get: () => $store.isDark,
-  set: (isDark) => {
-    $store.setTheme(isDark)
-  }
-})
-
 const handleCollapse = () => {
   menuCollapse.value = !menuCollapse.value
 }
@@ -277,10 +263,6 @@ onBeforeUnmount(() => {
       margin-right: auto;
     }
 
-    .dark_switch {
-      margin-right: 15px;
-    }
-
     .about_btn {
       margin-right: 15px;
       font-size: 14px;

web/src/store/index.js

@@ -186,7 +186,7 @@ const useStore = defineStore('global', {
         })
         transition.ready.then(() => {
           const centerX = 0
-          const centerY = 0
+          const centerY = window.innerHeight
           const radius = Math.hypot(
             Math.max(centerX, window.innerWidth - centerX),
             Math.max(centerY, window.innerHeight - centerY)