Merge pull request #50 from algerkong/feat/download

✨ feat: 弱化下载功能 默认隐藏下载列表按钮 在设置中配置打开

src/main/set.json

@@ -18,5 +18,6 @@
   "fontFamily": "system-ui",
   "fontScope": "global",
   "autoPlay": false,
-  "downloadPath": ""
+  "downloadPath": "",
+  "alwaysShowDownloadButton": false
 }

src/renderer/components/common/DownloadDrawer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="download-drawer-trigger">
     <n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
-      <n-button circle @click="showDrawer = true">
+      <n-button circle @click="store.commit('setShowDownloadDrawer', true)">
         <template #icon>
           <i class="iconfont ri-download-cloud-2-line"></i>
         </template>
@@ -9,7 +9,12 @@
     </n-badge>
   </div>
 
-  <n-drawer v-model:show="showDrawer" :height="'80%'" placement="bottom">
+  <n-drawer
+    v-model:show="showDrawer"
+    :height="'80%'"
+    placement="bottom"
+    @after-leave="handleDrawerClose"
+  >
     <n-drawer-content title="下载管理" closable :native-scrollbar="false">
       <div class="drawer-container">
         <n-tabs type="line" animated class="h-full">
@@ -159,8 +164,8 @@
 import type { ProgressStatus } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
 
-// import { useStore } from 'vuex';
 import { getMusicDetail } from '@/api/music';
 // import { audioService } from '@/services/audioService';
 import { getImgUrl } from '@/utils';
@@ -185,9 +190,14 @@ interface DownloadedItem {
   ar: { name: string }[];
 }
 
-// const store = useStore();
 const message = useMessage();
-const showDrawer = ref(false);
+const store = useStore();
+
+const showDrawer = computed({
+  get: () => store.state.showDownloadDrawer,
+  set: (val) => store.commit('setShowDownloadDrawer', val)
+});
+
 const downloadList = ref<DownloadItem[]>([]);
 const downloadedList = ref<DownloadedItem[]>(
   JSON.parse(localStorage.getItem('downloadedList') || '[]')
@@ -491,6 +501,10 @@ onMounted(() => {
     }
   });
 });
+
+const handleDrawerClose = () => {
+  store.commit('setShowDownloadDrawer', false);
+};
 </script>
 
 <style lang="scss" scoped>

src/renderer/layout/AppLayout.vue

@@ -27,7 +27,14 @@
       <!-- 底部音乐播放 -->
       <play-bar v-show="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
       <!-- 下载管理抽屉 -->
-      <download-drawer v-if="isElectron" />
+      <download-drawer
+        v-if="
+          isElectron &&
+          (store.state.setData?.alwaysShowDownloadButton ||
+            store.state.showDownloadDrawer ||
+            store.state.hasDownloadingTasks)
+        "
+      />
     </div>
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />

src/renderer/store/index.ts

@@ -80,7 +80,7 @@ export interface State {
   user: any;
   playList: SongResult[];
   playListIndex: number;
-  setData: any;
+  setData: typeof defaultSettings;
   lyric: any;
   isMobile: boolean;
   searchValue: string;
@@ -93,6 +93,7 @@ export interface State {
   showArtistDrawer: boolean;
   currentArtistId: number | null;
   systemFonts: { label: string; value: string }[];
+  showDownloadDrawer: boolean;
 }
 
 const state: State = {
@@ -116,7 +117,8 @@ const state: State = {
   showUpdateModal: false,
   showArtistDrawer: false,
   currentArtistId: null,
-  systemFonts: [{ label: '系统默认', value: 'system-ui' }]
+  systemFonts: [{ label: '系统默认', value: 'system-ui' }],
+  showDownloadDrawer: false
 };
 
 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -255,6 +257,9 @@ const mutations = {
         value: font
       }))
     ];
+  },
+  setShowDownloadDrawer(state: State, show: boolean) {
+    state.showDownloadDrawer = show;
   }
 };
 

src/renderer/utils/request.ts

@@ -1,12 +1,9 @@
 import axios, { InternalAxiosRequestConfig } from 'axios';
-import { createDiscreteApi } from 'naive-ui';
 
 import store from '@/store';
 
 import { isElectron } from '.';
 
-const { notification } = createDiscreteApi(['notification']);
-
 let setData: any = null;
 const getSetData = () => {
   if (window.electron) {

src/renderer/views/set/index.vue

@@ -180,6 +180,24 @@
               <n-button size="small" @click="showShortcutModal = true">配置</n-button>
             </div>
 
+            <div v-if="isElectron" class="set-item">
+              <div>
+                <div class="set-item-title">下载管理</div>
+                <div class="set-item-content">
+                  <n-switch v-model:value="setData.alwaysShowDownloadButton" class="mr-2">
+                    <template #checked>显示</template>
+                    <template #unchecked>隐藏</template>
+                  </n-switch>
+                  是否始终显示下载列表按钮
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <n-button size="small" @click="store.commit('setShowDownloadDrawer', true)">
+                  打开下载管理
+                </n-button>
+              </div>
+            </div>
+
             <div class="set-item">
               <div>
                 <div class="set-item-title">下载目录</div>