🌈 style: 优化代码格式化

src/renderer/views/favorite/index.vue

@@ -54,7 +54,7 @@ const scrollbarRef = ref();
 // 无限滚动相关
 const pageSize = 16;
 const currentPage = ref(1);
-  
+
 const props = defineProps({
   isComponent: {
     type: Boolean,

src/renderer/views/history/index.vue

@@ -34,10 +34,10 @@ import { onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 
 import { getMusicDetail } from '@/api/music';
+import SongItem from '@/components/common/SongItem.vue';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import type { SongResult } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
-import SongItem from '@/components/common/SongItem.vue';
 
 defineOptions({
   name: 'History'

src/renderer/views/list/index.vue

@@ -18,7 +18,12 @@
       </n-scrollbar>
     </div>
     <!-- 歌单列表 -->
-    <n-scrollbar class="recommend" style="height: calc(100% - 55px)" :size="100" @scroll="handleScroll">
+    <n-scrollbar
+      class="recommend"
+      style="height: calc(100% - 55px)"
+      :size="100"
+      @scroll="handleScroll"
+    >
       <div v-loading="loading" class="recommend-list">
         <div
           v-for="(item, index) in recommendList"

src/renderer/views/search/index.vue

@@ -49,7 +49,7 @@
                 :class="setAnimationClass('animate__bounceInRight')"
                 :style="setAnimationDelay(index, 50)"
               >
-                <SearchItem :item="item" />
+                <search-item :item="item" />
               </div>
             </template>
           </template>
@@ -67,10 +67,10 @@ import { useStore } from 'vuex';
 
 import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
+import SearchItem from '@/components/common/SearchItem.vue';
 import SongItem from '@/components/common/SongItem.vue';
 import type { IHotSearch } from '@/type/search';
 import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
-import SearchItem from '@/components/common/SearchItem.vue';
 
 defineOptions({
   name: 'Search'

src/renderer/views/set/index.vue

@@ -22,12 +22,10 @@
         </div>
         <n-switch v-model:value="setData.isProxy" />
       </div> -->
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">音乐API端口</div>
-          <div class="set-item-content">
-            修改后需要重启应用
-          </div>
+          <div class="set-item-content">修改后需要重启应用</div>
         </div>
         <n-input-number v-model:value="setData.musicApiPort" />
       </div>
@@ -55,7 +53,7 @@
           </div>
         </div>
       </div>
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">下载目录</div>
           <div class="set-item-content">
@@ -101,15 +99,17 @@
         @click="openAuthor"
       >
         <div>
-         <Coffee>
-          <div>
-            <div class="set-item-title">作者</div>
-            <div class="set-item-content">algerkong 点个star🌟呗</div>
-          </div>
-         </Coffee>
+          <coffee>
+            <div>
+              <div class="set-item-title">作者</div>
+              <div class="set-item-content">algerkong 点个star🌟呗</div>
+            </div>
+          </coffee>
         </div>
         <div>
-          <n-button size="small" type="primary" @click="openAuthor"><i class="ri-github-line"></i>前往github</n-button>
+          <n-button size="small" type="primary" @click="openAuthor"
+            ><i class="ri-github-line"></i>前往github</n-button
+          >
         </div>
       </div>
       <div class="set-item">
@@ -133,7 +133,7 @@
           style="width: 160px"
         />
       </div>
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">关闭行为</div>
           <div class="set-item-content">
@@ -151,14 +151,14 @@
         />
       </div>
 
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">重启</div>
           <div class="set-item-content">重启应用</div>
         </div>
         <n-button type="primary" @click="restartApp">重启</n-button>
       </div>
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">代理设置</div>
           <div class="set-item-content">无法访问音乐时可以开启代理</div>
@@ -171,10 +171,13 @@
           <n-button size="small" @click="showProxyModal = true">配置</n-button>
         </div>
       </div>
-      <div class="set-item" v-if="isElectron">
+      <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">realIP</div>
-          <div class="set-item-content">由于限制,此项目在国外使用会受到限制可使用realIP参数,传进国内IP解决,如:116.25.146.177 即可解决</div>
+          <div class="set-item-content">
+            由于限制,此项目在国外使用会受到限制可使用realIP参数,传进国内IP解决,如:116.25.146.177
+            即可解决
+          </div>
         </div>
         <div class="flex items-center gap-2">
           <n-switch v-model:value="setData.enableRealIP">
@@ -185,23 +188,22 @@
             v-if="setData.enableRealIP"
             v-model:value="setData.realIP"
             placeholder="realIP"
-            @blur="validateAndSaveRealIP"
             style="width: 200px"
+            @blur="validateAndSaveRealIP"
           />
         </div>
       </div>
-    
     </div>
-    <PlayBottom/>
+    <play-bottom />
     <n-modal
       v-model:show="showProxyModal"
       preset="dialog"
       title="代理设置"
       positive-text="确认"
       negative-text="取消"
+      :show-icon="false"
       @positive-click="handleProxyConfirm"
       @negative-click="showProxyModal = false"
-      :show-icon="false"
     >
       <n-form
         ref="formRef"
@@ -225,7 +227,12 @@
           <n-input v-model:value="proxyForm.host" placeholder="请输入代理地址" />
         </n-form-item>
         <n-form-item label="代理端口" path="port">
-          <n-input-number v-model:value="proxyForm.port" placeholder="请输入代理端口" :min="1" :max="65535" />
+          <n-input-number
+            v-model:value="proxyForm.port"
+            placeholder="请输入代理端口"
+            :min="1"
+            :max="65535"
+          />
         </n-form-item>
       </n-form>
     </n-modal>
@@ -233,16 +240,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
-import { useStore } from 'vuex';
-import { useMessage } from 'naive-ui';
 import type { FormRules } from 'naive-ui';
-import { isElectron } from '@/utils';
-import { checkUpdate, UpdateResult } from '@/utils/update';
-import { selectDirectory, openDirectory } from '@/utils/fileOperation';
-import config from '../../../../package.json';
-import PlayBottom from '@/components/common/PlayBottom.vue';
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+
 import Coffee from '@/components/Coffee.vue';
+import PlayBottom from '@/components/common/PlayBottom.vue';
+import { isElectron } from '@/utils';
+import { openDirectory, selectDirectory } from '@/utils/fileOperation';
+import { checkUpdate, UpdateResult } from '@/utils/update';
+
+import config from '../../../../package.json';
 
 const store = useStore();
 const checking = ref(false);
@@ -277,9 +286,13 @@ const setData = computed(() => {
   return data;
 });
 
-watch(() => setData.value, (newVal) => {
-  store.commit('setSetData', newVal)
-}, { deep: true });
+watch(
+  () => setData.value,
+  (newVal) => {
+    store.commit('setSetData', newVal);
+  },
+  { deep: true }
+);
 
 const isDarkTheme = computed({
   get: () => store.state.theme === 'dark',
@@ -317,7 +330,7 @@ const checkForUpdates = async (isClick = false) => {
 };
 
 const openReleasePage = () => {
-  store.commit('setShowUpdateModal', true)
+  store.commit('setShowUpdateModal', true);
 };
 
 const selectDownloadPath = async () => {
@@ -355,7 +368,8 @@ const proxyRules: FormRules = {
     validator: (_rule, value) => {
       if (!value) return false;
       // 简单的IP或域名验证
-      const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+      const ipRegex =
+        /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
       return ipRegex.test(value);
     }
   },
@@ -385,15 +399,19 @@ onMounted(() => {
 });
 
 // 监听代理配置变化
-watch(() => setData.value.proxyConfig, (newVal) => {
-  if (newVal) {
-    proxyForm.value = {
-      protocol: newVal.protocol || 'http',
-      host: newVal.host || '127.0.0.1',
-      port: newVal.port || 7890
-    };
-  }
-}, { immediate: true, deep: true });
+watch(
+  () => setData.value.proxyConfig,
+  (newVal) => {
+    if (newVal) {
+      proxyForm.value = {
+        protocol: newVal.protocol || 'http',
+        host: newVal.host || '127.0.0.1',
+        port: newVal.port || 7890
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
 
 const handleProxyConfirm = async () => {
   try {
@@ -436,15 +454,18 @@ const validateAndSaveRealIP = () => {
 };
 
 // 监听enableRealIP变化，当关闭时清空realIP
-watch(() => setData.value.enableRealIP, (newVal) => {
-  if (!newVal) {
-    store.commit('setSetData', {
-      ...setData.value,
-      realIP: '',
-      enableRealIP: false
-    });
+watch(
+  () => setData.value.enableRealIP,
+  (newVal) => {
+    if (!newVal) {
+      store.commit('setSetData', {
+        ...setData.value,
+        realIP: '',
+        enableRealIP: false
+      });
+    }
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>

src/renderer/views/user/index.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch, onBeforeUnmount } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
@@ -125,7 +125,7 @@ onBeforeUnmount(() => {
 
 const loadPage = async () => {
   if (!mounted.value || !user.value) return;
-  
+
   try {
     infoLoading.value = true;
 
@@ -154,15 +154,19 @@ const loadPage = async () => {
 };
 
 // 监听用户状态变化
-watch(() => store.state.user, (newUser) => {
-  if (!mounted.value) return;
-  
-  if (!newUser) {
-    router.push('/login');
-  } else {
-    loadPage();
-  }
-}, { immediate: true });
+watch(
+  () => store.state.user,
+  (newUser) => {
+    if (!mounted.value) return;
+
+    if (!newUser) {
+      router.push('/login');
+    } else {
+      loadPage();
+    }
+  },
+  { immediate: true }
+);
 
 // 展示歌单
 const showPlaylist = async (id: number, name: string) => {