feat: 添加下载历史页面

ddd702 · Jun 26, 2023 · bb2f29e · bb2f29e
1 parent ff20ff1
commit bb2f29e
Show file tree

Hide file tree

Showing 14 changed files with 144 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -1,25 +1,25 @@
-# Music-Downloader
+# Music Downloader
 ###### 此项目仅供个人学习研究，严禁用于商业用途，侵删
 🎵 一个可播放及下载高品质音乐的多平台软体，使用electron，音乐来源: 酷我、酷狗、网易云和咪咕（API 是从公开的网络中获得）
 
  ![图片](https://cdn.zcxnb.cn/upzone/1/20230620/160foy1nwc.png?imageMogr2/interlace/1/thumbnail/500x/quality/80)
 
-### 下载
+#### 下载
 
 [下载地址](https://bbs.qtcat.cn/d/10-musicdownloader-%E4%B8%80%E4%B8%AA%E5%8F%AF%E6%92%AD%E6%94%BE%E5%8F%8A%E4%B8%8B%E8%BD%BD%E9%AB%98%E5%93%81%E8%B4%A8%E9%9F%B3%E4%B9%90%E7%9A%84%E5%A4%9A%E5%B9%B3%E5%8F%B0%E8%BD%AF%E4%BD%93windowsmaclinux)
 
-## github
+#### github
 
 [https://github.com/ddd702/music-downloader](https://github.com/ddd702/music-downloader)
 
-## issue
+#### issue
 
 [https://github.com/ddd702/music-downloader/issues](https://github.com/ddd702/music-downloader/issues)
-## 推荐的IDE设置
+#### 推荐的IDE设置
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-## 生成应用图标
+#### 生成应用图标
 
 
     npm i electron-icon-maker  -g
@@ -28,3 +28,7 @@
 
     cd public && electron-icon-maker --input=appicon.png --output=./
 
+
+#### 页面内图标参考
+
+[xicons](https://xicons.org)
diff --git a/electron/service/index.js b/electron/service/index.js
@@ -31,7 +31,7 @@ module.exports={
     })
     ipcMain.on('download:song', (event,args={url:'',name:'',size:100}) => {
       const {url,name,size} = args
-      const filename=name.replaceAll( /\\|\//ig,'\~');
+      const filename=name.split('?')[0].replaceAll( /\\|\//ig,'\~');
       console.warn('filename',filename);
       // console.warn('app.getPath downloads',app.getPath('downloads'),args)
       const webContents = event.sender;
@@ -41,10 +41,10 @@ module.exports={
         const filePath = path.join(getDownLoadPath(), `${filename}`);
         item.setSavePath(filePath);
         item.on('updated', (event, state) => {
-          webContents.send('download:process',{state,done:false,percent:Math.floor((item.getReceivedBytes()/size)*100),filename, received:item.getReceivedBytes()})
+          webContents.send('download:process',{state,done:false,percent:Math.floor((item.getReceivedBytes()/size)*100),filename, received:item.getReceivedBytes(),size})
           if (state === 'interrupted') {
             // console.log('Download is interrupted but can be resumed')
-            webContents.send('download:process',{state,done:true,msg:'下载中断,请重试',filename, percent:0, received:0})
+            webContents.send('download:process',{state,done:true,msg:'下载中断,请重试',filename,size, percent:0, received:0})
           } else if (state === 'progressing') {
             if (item.isPaused()) {
               console.log('Download is paused')
@@ -54,7 +54,7 @@ module.exports={
           }
         })
         item.once('done', (event, state) => {
-          webContents.send('download:process',{state,done:true,filename, percent:100, received:0})
+          webContents.send('download:process',{state,done:true,filename, percent:100,size, received:0})
           if (state === 'completed') {
             console.log('Download successfully')
           } else {

diff --git a/electron/utils.js b/electron/utils.js
@@ -8,7 +8,7 @@ const joinSingersName = (singers) => {
   return singersNames.join(',')
 }
 const getFileType = (url)=>{
-  const ext = url.split('.').pop()
+  const ext = url.split('.').pop().split('?')[0]
   return ext.toLowerCase()
 }
 const getKgSongReq = (url) =>{

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>音乐下载器</title>
+    <title>Music Downloader</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "music-downloader",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "一个可播放及下载音乐的工具",
   "main": "electron/main.js",
   "author": "ddd",
@@ -39,6 +39,7 @@
   "dependencies": {
     "@kangc/v-md-editor": "^2.3.15",
     "@vueuse/core": "^10.1.2",
+    "dayjs": "^1.11.8",
     "electron-store": "^8.1.0",
     "highlight.js": "^11.8.0",
     "pinia": "^2.0.36",

diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,7 @@ import { ref, computed, h } from 'vue';
 
 import { RouterLink, RouterView } from 'vue-router';
 import { darkTheme, NIcon } from 'naive-ui';
-import { InformationCircle, Settings, ListCircle, Star } from '@vicons/ionicons5';
+import { InformationCircle, Settings, ListCircle, TimeSharp } from '@vicons/ionicons5';
 import TopBar from '@/components/TopBar.vue';
 import { useSysStore } from '@/stores/sys';
 import { usePlayerStore } from '@/stores/player';
@@ -54,6 +54,20 @@ const menuOptions = [
     key: 'SettingView',
     icon: renderIcon(Settings)
   },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'HistoryView'
+          }
+        },
+        '历史'
+      ),
+    key: 'HistoryView',
+    icon: renderIcon(TimeSharp)
+  },
   {
     label: () =>
       h(

diff --git a/src/components/ResItem.vue b/src/components/ResItem.vue
@@ -79,7 +79,7 @@ const onDownloadLrc = () => {
   align-items: center;
   margin: 10px 0;
   padding: 5px 0;
-  border-bottom: 1px solid #efefef;
+  border-bottom: 1px dotted #aaa;
 }
 .song-name {
   word-break: break-all;

diff --git a/src/router/index.js b/src/router/index.js
@@ -22,12 +22,12 @@ const router = createRouter({
       component: () => import('../views/AboutView.vue')
     },
     {
-      path: '/star',
-      name: 'StarView',
+      path: '/history',
+      name: 'HistoryView',
       meta: {
         cache: false
       },
-      component: () => import('../views/StarView.vue')
+      component: () => import('../views/HistoryView.vue')
     },
     {
       path: '/setting',

diff --git a/src/stores/sys.js b/src/stores/sys.js
@@ -7,11 +7,17 @@ export const useSysStore = defineStore('sys', () => {
   const version = pkgJson.version;
   const isDarkMode = ref(initDarkMode);
   let initStarList = {};
+  let initHistoryList = [];
   try {
     initStarList = JSON.parse(localStorage.getItem('starList') || '{}');
   } catch (e) {
     console.error('initStarList Error parsing');
   }
+  try {
+    initHistoryList = JSON.parse(localStorage.getItem('historyList') || '[]');
+  } catch (e) {
+    console.error('initHistoryList Error parsing');
+  }
   const starList = ref(initStarList);
   const starListArray = computed(() => {
     const output = [];
@@ -20,6 +26,7 @@ export const useSysStore = defineStore('sys', () => {
     });
     return output.reverse();
   });
+  const historyList = ref(initHistoryList);
   const downloadPath = ref('');
   const defaultOrigin = ref(localStorage.getItem('defaultOrigin') || 'migu');
   const originList = [
@@ -54,7 +61,24 @@ export const useSysStore = defineStore('sys', () => {
     starList.value = JSON.parse(JSON.stringify(initStarList));
     localStorage.setItem('starList', JSON.stringify(starList.value));
   }
-  updateStar();
+  //updateStar();
+  function updateHistory(value) {
+    if (value) {
+      value.timeStamp = Date.now();
+      value.plat = defaultOrigin.value;
+      value.folder = downloadPath.value;
+      initHistoryList = [value].concat(initHistoryList);
+      if (initHistoryList.length > 1000) {
+        //最多保存1000个数据，多了就删掉
+        initHistoryList.splice(1000);
+      }
+      historyList.value = JSON.parse(JSON.stringify(initHistoryList));
+    } else {
+      initHistoryList = [];
+      historyList.value = [];
+    }
+    localStorage.setItem('historyList', JSON.stringify(historyList.value));
+  }
   function setDarkMode(value) {
     isDarkMode.value = value;
   }
@@ -82,8 +106,10 @@ export const useSysStore = defineStore('sys', () => {
     updateStar,
     getDownloadPath,
     setDownloadPath,
+    updateHistory,
+    historyList,
     starList,
-    starListArray,
+    starListArray, //序列化后的列表
     setDefaultOrigin,
     version,
     originList,

diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="main-page">
+    <n-button type="error" round @click="() => sysStore.updateHistory()">清空</n-button>
+    <p>共有数据{{ sysStore.historyList.length }}条(最多保存1000条)</p>
+    <n-data-table size="small" :columns="columns" :data="sysStore.historyList" :pagination="false" :bordered="false" />
+  </div>
+</template>
+<script setup>
+import { useSysStore } from '../stores/sys';
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+import dayjs from 'dayjs';
+
+const sysStore = useSysStore();
+const columns = [
+  {
+    title: 'NO',
+    key: 'no',
+    render(row, index) {
+      return h(
+        'span',
+        {},
+        {
+          default: () => index + 1
+        }
+      );
+    }
+  },
+  {
+    title: '时间',
+    key: 'time',
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: 'warning'
+        },
+        {
+          default: () => dayjs(row.timeStamp).format('YYYY-MM-DD HH:mm:ss')
+        }
+      );
+    }
+  },
+  {
+    title: '来源',
+    key: 'plat'
+  },
+  {
+    title: 'Name',
+    key: 'filename'
+  },
+  {
+    title: '保存路径',
+    key: 'folder'
+  },
+  {
+    title: '下载状态',
+    key: 'state',
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: row.state === 'completed' ? 'success' : 'error'
+        },
+        {
+          default: () => (row.state === 'completed' ? '成功' : '失败')
+        }
+      );
+    }
+  }
+];
+</script>
+<style></style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -77,7 +77,7 @@ window.App.onDownloadProcess((event, res) => {
     setTimeout(() => {
       downloadIng.value = false;
     }, 1000);
-
+    sysStore.updateHistory(res);
     if (res.state === 'completed') {
       $message.success(`${res.filename}:下载成功!`);
     } else {

diff --git a/src/views/SettingView.vue b/src/views/SettingView.vue
@@ -65,6 +65,5 @@ const clipboard = async (text) => {
   align-items: center;
   margin: 1em 0;
   padding-bottom: 10px;
-  border-bottom: 1px solid #e8e8e8;
 }
 </style>
diff --git a/src/views/StarView.vue b/src/views/StarView.vue
diff --git a/yarn.lock b/yarn.lock
@@ -1510,11 +1510,6 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-crypto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmmirror.com/crypto/-/crypto-1.0.1.tgz#2af1b7cad8175d24c8a1b0778255794a21803037"
-  integrity sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==
-
 css-render@^0.15.10:
   version "0.15.12"
   resolved "https://registry.npmmirror.com/css-render/-/css-render-0.15.12.tgz#76be94066897bd3231a9b9412971ffc258ada66e"
@@ -2065,6 +2060,11 @@ date-fns@^2.28.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+dayjs@^1.11.8:
+  version "1.11.8"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.8.tgz#4282f139c8c19dd6d0c7bd571e30c2d0ba7698ea"
+  integrity sha512-LcgxzFoWMEPO7ggRv1Y2N31hUf2R0Vj7fuy/m+Bg1K8rr+KAs1AEy4y9jd5DXe8pbHgX+srkHNS7TH6Q6ZhYeQ==
+
 debounce-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/debounce-fn/-/debounce-fn-4.0.0.tgz#ed76d206d8a50e60de0dd66d494d82835ffe61c7"