Skip to content

Commit 0a0aa82

Browse files
HIM049HIM049
authored
Merge pull request #1 from HIM049/v3.2.0
重构了前端操作逻辑
2 parents 1e858aa + a885813 commit 0a0aa82

19 files changed

+559
-464
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ frontend/dist
44
frontend/package-lock.json
55
config.json
66
Download/*
7-
Cache/*
7+
Cache/*
8+
package-lock.json

‎frontend/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<title>BiliAudioDownloader 3.0</title>
88
<!-- <link rel="stylesheet" href="./style/reset.min.css"> -->
99
<link rel="stylesheet" href="./style/public.css">
10-
<link rel="stylesheet" href="./style/shared-style.css">
10+
<!-- <link rel="stylesheet" href="./style/shared-style.css">
1111
<link rel="stylesheet" href="./style/app.css">
12-
<link rel="stylesheet" href="./style/switch.css">
12+
<link rel="stylesheet" href="./style/switch.css"> -->
1313
</head>
1414
<body class="appBody">
1515
<div id="app" class="app"></div>

‎frontend/src/App.vue

+5-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
1-
<script setup>
2-
import navBar from './components/navbar.vue'
3-
import mainPage from './components/main_page.vue'
4-
import settingPage from './components/setting_page.vue'
5-
import { ref } from 'vue'
6-
7-
8-
const isSetting = ref(false)
9-
10-
function switchPages() {
11-
isSetting.value = isSetting.value ? false : true
12-
}
13-
</script>
14-
151
<template>
16-
17-
<navBar @page-switch="switchPages"/>
18-
<section id="app-function">
19-
<keep-alive>
20-
<component :is="isSetting ? settingPage : mainPage"></component>
21-
</keep-alive>
22-
</section>
23-
2+
<MainPage />
243
</template>
4+
5+
<script setup>
6+
import MainPage from './components/main_page.vue'
7+
</script>

‎frontend/src/components/edit_videolist_page.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<el-main style="display: flex; justify-content: center;">
3+
<el-button type="primary" size="large" @click="makeUpEditor" >使用系统编辑器打开 <el-icon><Link /></el-icon></el-button>
4+
</el-main>
5+
</template>
6+
7+
<script setup>
8+
import { MakeUpEditor } from '../../wailsjs/go/main/App'
9+
10+
// 启动文本编辑器（临时解决方案）
11+
function makeUpEditor() {
12+
MakeUpEditor()
13+
}
14+
</script>
15+

‎frontend/src/components/final_page.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<el-main>
3+
<el-result icon="success" title="下载完成" sub-title="您可以退出程序或再次下载"/>
4+
</el-main>
5+
</template>

‎frontend/src/components/home_page.vue

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<el-main>
3+
<div id="icon-banner">
4+
<img src="./image/icon-non-bg.png" style="width: 350px;" v-show="!props.buttonStatus.showStep">
5+
</div>
6+
<!-- 收藏夹信息输入 -->
7+
<div id="fav-input" class="fav-input">
8+
<el-input v-model="inputFavID" size="large" placeholder="请输入 收藏夹 ID / 收藏夹 URL" class="input-with-select"
9+
@input="queryFavListInformation" clearable>
10+
11+
<template #prepend>
12+
<el-button @click="queryFavListInformation" ><el-icon><Search /></el-icon></el-button>
13+
</template>
14+
</el-input>
15+
</div>
16+
<transition name="el-fade-in-linear">
17+
<favInf :resp="resp" v-show="props.buttonStatus.showStep" />
18+
</transition>
19+
</el-main>
20+
</template>
21+
22+
<script setup>
23+
import { reactive, computed, ref } from 'vue'
24+
import { SearchFavListInformation } from '../../wailsjs/go/main/App'
25+
import favInf from './modules/fav_information.vue'
26+
// const emit = defineEmits(['allowNext, disableNext'])
27+
28+
const props = defineProps(['buttonStatus', 'parms'])
29+
const emit = defineEmits(['update:buttonStatus', 'update:parms'])
30+
31+
const inputFavID = ref("")
32+
33+
const buttonStatus = computed({
34+
get() {
35+
return props.buttonStatus
36+
},
37+
set(buttonStatus) {
38+
emit('update:buttonStatus', buttonStatus)
39+
}
40+
})
41+
42+
const parms = computed({
43+
get() {
44+
return props.parms
45+
},
46+
set(parms) {
47+
emit('update:parms', parms)
48+
}
49+
})
50+
51+
// 查询函数返回值
52+
const resp = reactive({
53+
title: "",
54+
cover: "",
55+
count: 0,
56+
up_name: "",
57+
up_avatar: "",
58+
})
59+
60+
// const status = reactive({
61+
// showInfCard: false,
62+
// })
63+
64+
function extractURL(url) {
65+
// 尝试创建 URL 对象
66+
try {
67+
var parsedUrl = new URL(url);
68+
} catch (error) {
69+
// 不是 URL ，直接返回
70+
console.log(error);
71+
return url
72+
}
73+
// 获取参数部分
74+
var searchParams = new URLSearchParams(parsedUrl.search);
75+
// 提取特定参数
76+
var fid = searchParams.get("fid");
77+
return fid
78+
}
79+
80+
// 查询收藏夹信息
81+
function queryFavListInformation() {
82+
// TODO: 输入校验
83+
// parms.favListID = parms.favListID.replace(/\D/g, '');
84+
// if (parms.favListID.length > 18) {
85+
// parms.favListID = parms.favListID.slice(0, 100);
86+
// }
87+
props.parms.favListID = extractURL(inputFavID.value)
88+
SearchFavListInformation(props.parms.favListID).then(result => {
89+
// 判断信息有效性
90+
// console.log(result);
91+
if (result.message == "0") {
92+
resp.title = result.Data.Info.title;
93+
resp.cover = result.Data.Info.cover;
94+
resp.count = result.Data.Info.media_count;
95+
resp.up_name = result.Data.Info.Upper.name;
96+
resp.up_avatar = result.Data.Info.Upper.face;
97+
props.parms.count = result.Data.Info.media_count;
98+
99+
100+
// 开放创建列表按钮
101+
props.buttonStatus.allowNext = true;
102+
} else {
103+
// 无效的收藏夹
104+
resp.title = "无效的收藏夹";
105+
ElMessage.warning("无效的收藏夹");
106+
// 关闭创建列表按钮
107+
props.buttonStatus.allowNext = false;
108+
}
109+
// 展示收藏夹信息
110+
// status.showInfCard = true;
111+
props.buttonStatus.showStep = true;
112+
})
113+
}
114+
</script>
115+
116+
<style>
117+
#icon-banner {
118+
width: 350px;
119+
margin: 0 auto;
120+
}
121+
122+
div#fav-input {
123+
width: 500px;
124+
margin: 0 auto;
125+
}
126+
</style>

‎frontend/src/components/image/icon-non-bg.png

23 KB
Loading

0 commit comments

Comments
 (0)