add 修改主页面
This commit is contained in:
@@ -4,5 +4,10 @@ import App from './App.vue'
|
||||
import { router } from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
createApp(App).use(router).use(ElementPlus).mount('#app')
|
||||
|
||||
28
view/src/menu/headerMenu.vue
Normal file
28
view/src/menu/headerMenu.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<h3 style="width: 180px">WEB-DL发布工具</h3>
|
||||
<el-menu-item index="1">首页</el-menu-item>
|
||||
<el-sub-menu index="2">
|
||||
<template #title>设置</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-avatar style="position: absolute;right:0" :size="50" src="https://www.konfan.cn/img/favicon.png" />
|
||||
</el-menu>
|
||||
<div class="h-6" />
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeIndex = ref('1')
|
||||
const activeIndex2 = ref('1')
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
</script>
|
||||
31
view/src/menu/leftMenu.vue
Normal file
31
view/src/menu/leftMenu.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
|
||||
import {Check, Download, Edit, View} from "@element-plus/icons-vue";
|
||||
import {router} from "../router/index.js";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<el-scrollbar>
|
||||
<el-menu :router="true">
|
||||
<el-sub-menu index="1">
|
||||
<template #title><el-icon><Check /></el-icon>功能测试</template>
|
||||
<el-menu-item-group>
|
||||
<template #title>测试模块</template>
|
||||
<el-menu-item index="/medaInfoTest"><el-icon><Edit /></el-icon>MediaInfo</el-menu-item>
|
||||
<el-menu-item index="1"><el-icon><View /></el-icon>图像截取</el-menu-item>
|
||||
<el-menu-item index="/downloadTest" to><el-icon><Download /></el-icon>视频下载</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,140 +1,26 @@
|
||||
<template>
|
||||
<div class="url">
|
||||
<el-form-item label="视频地址">
|
||||
<div style="display: flex;width: 100%;">
|
||||
<el-input style="width: 100%;" v-model="form.name"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="getList" type="primary">获取</el-button>
|
||||
</div>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="第几集开始">
|
||||
<div style="display: flex;">
|
||||
<el-input v-model="form.start"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="setList" type="primary">设置</el-button>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="test" type="primary">测试按钮</el-button>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="下载保存地址">
|
||||
<div style="display: flex;">
|
||||
<el-input v-model="form.save"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="showMsg" type="primary">查看进度</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-table ref="table" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="title" prop="title">
|
||||
</el-table-column>
|
||||
<el-table-column label="url" prop="url"/>
|
||||
</el-table>
|
||||
<el-dialog :fullscreen="true" v-model="dialogVisible" title="Tips" width="30%">
|
||||
<div style="width: 100%;height: 100%;overflow-y: auto;">
|
||||
<div v-for="i in msg">{{ i }}</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
<header-menu/>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<left-menu/>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import {ElLoading, ElMessage} from 'element-plus'
|
||||
import axios from 'axios';
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const form = ref({
|
||||
name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
|
||||
start: 1,
|
||||
save: localStorage.getItem("save")
|
||||
})
|
||||
const tableData = ref([])
|
||||
const table = ref()
|
||||
|
||||
function getList() {
|
||||
// let load = ElLoading.service()
|
||||
// window.getlist(form.value.name).then((res) => {
|
||||
// console.log(res)
|
||||
// tableData.value = res
|
||||
// load.close()
|
||||
// })
|
||||
axios.get("/getQqList", {
|
||||
params: {url: form.value.name}
|
||||
}).then((r) => {
|
||||
tableData.value = r.data
|
||||
})
|
||||
}
|
||||
|
||||
function setList() {
|
||||
table.value.clearSelection()
|
||||
for (let i = form.value.start - 1; i < tableData.value.length; i++) {
|
||||
console.log(i)
|
||||
table.value.toggleRowSelection(tableData.value[i], undefined)
|
||||
}
|
||||
}
|
||||
|
||||
const msg = ref([])
|
||||
|
||||
async function dow() {
|
||||
let list = table.value.getSelectionRows()
|
||||
if (list.length === 0) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '请选择要下载的剧集',
|
||||
type: 'error',
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
if (!form.value.save) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '请填写下载位置',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
dialogVisible.value = true
|
||||
|
||||
localStorage.setItem("save", form.value.save)
|
||||
for (let i of list) {
|
||||
await axios.get("/startDown", {
|
||||
params: {
|
||||
...i,
|
||||
save: form.value.save + "/" + i.title.split(" ")[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
// dialogVisible.value = false
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '添加完成',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
|
||||
const source = new EventSource(`/msg`);
|
||||
source.onmessage = event => {
|
||||
// 挂到载体上面
|
||||
if (msg.value.length > 200) {
|
||||
msg.value.splice(200)
|
||||
}
|
||||
msg.value.unshift(event.data)
|
||||
}
|
||||
|
||||
function showMsg() {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function test() {
|
||||
axios.get("/test", {
|
||||
params: {url: form.value.name}
|
||||
}).then((r) => {
|
||||
console.log(r.data);
|
||||
})
|
||||
}
|
||||
import LeftMenu from "../menu/leftMenu.vue";
|
||||
import HeaderMenu from "../menu/headerMenu.vue";
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
170
view/src/page/test/downloadTest.vue
Normal file
170
view/src/page/test/downloadTest.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Video Download Test</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form-item label="视频地址">
|
||||
<div style="display: flex;width: 100%;">
|
||||
<el-input style="width: 100%;" v-model="form.name"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="getList" type="primary">获取</el-button>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="第几集开始">
|
||||
<div style="display: flex;">
|
||||
<el-input v-model="form.start"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="setList" type="primary">设置</el-button>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="test" type="primary">测试按钮</el-button>
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="下载保存地址">
|
||||
<div style="display: flex;">
|
||||
<el-input v-model="form.save"/>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
|
||||
<el-button style="flex-shrink: 0;margin: 0 10px;" @click="showMsg" type="primary">查看进度</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
</el-form-item>
|
||||
<el-table ref="table" :data="tableData" style="width: 100%">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="title" prop="title">
|
||||
</el-table-column>
|
||||
<el-table-column label="url" prop="url"/>
|
||||
</el-table>
|
||||
<el-dialog :fullscreen="true" v-model="dialogVisible" title="Tips" width="30%">
|
||||
<div style="width: 100%;height: 100%;overflow-y: auto;">
|
||||
<div v-for="i in msg">{{ i }}</div>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import {ElLoading, ElMessage} from 'element-plus'
|
||||
import axios from 'axios';
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const form = ref({
|
||||
name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
|
||||
start: 1,
|
||||
save: localStorage.getItem("save")
|
||||
})
|
||||
const tableData = ref([])
|
||||
const table = ref()
|
||||
|
||||
function getList() {
|
||||
// let load = ElLoading.service()
|
||||
// window.getlist(form.value.name).then((res) => {
|
||||
// console.log(res)
|
||||
// tableData.value = res
|
||||
// load.close()
|
||||
// })
|
||||
axios.get("/getQqList", {
|
||||
params: {url: form.value.name}
|
||||
}).then((r) => {
|
||||
tableData.value = r.data
|
||||
})
|
||||
}
|
||||
|
||||
function setList() {
|
||||
table.value.clearSelection()
|
||||
for (let i = form.value.start - 1; i < tableData.value.length; i++) {
|
||||
console.log(i)
|
||||
table.value.toggleRowSelection(tableData.value[i], undefined)
|
||||
}
|
||||
}
|
||||
|
||||
const msg = ref([])
|
||||
|
||||
async function dow() {
|
||||
let list = table.value.getSelectionRows()
|
||||
if (list.length === 0) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '请选择要下载的剧集',
|
||||
type: 'error',
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
if (!form.value.save) {
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '请填写下载位置',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
dialogVisible.value = true
|
||||
|
||||
localStorage.setItem("save", form.value.save)
|
||||
for (let i of list) {
|
||||
await axios.get("/startDown", {
|
||||
params: {
|
||||
...i,
|
||||
save: form.value.save + "/" + i.title.split(" ")[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
// dialogVisible.value = false
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
message: '添加完成',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
|
||||
const source = new EventSource(`/msg`);
|
||||
source.onmessage = event => {
|
||||
// 挂到载体上面
|
||||
if (msg.value.length > 200) {
|
||||
msg.value.splice(200)
|
||||
}
|
||||
msg.value.unshift(event.data)
|
||||
}
|
||||
|
||||
function showMsg() {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function test() {
|
||||
axios.get("/test", {
|
||||
params: {url: form.value.name}
|
||||
}).then((r) => {
|
||||
console.log(r.data);
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.url {
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
51
view/src/page/test/getMediaInfoTest.vue
Normal file
51
view/src/page/test/getMediaInfoTest.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
import axios from 'axios';
|
||||
const input = ref('')
|
||||
|
||||
function test(){
|
||||
|
||||
axios.get("/getMediaInfo", {
|
||||
params: {filePath: input.value}
|
||||
}).then((r) => {
|
||||
ElMessageBox.alert(r.data.data)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>MediaInfo Test</span>
|
||||
<el-button @click="test()" class="button" text>Test</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-input v-model="input" placeholder="视频文件绝对路径" />
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,26 @@
|
||||
import { createRouter,createWebHashHistory } from "vue-router";
|
||||
import {createRouter, createWebHashHistory} from "vue-router";
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
children: [
|
||||
{
|
||||
path: "downloadTest",
|
||||
name: "downloadTest",
|
||||
component: () => import("../page/test/downloadTest.vue")
|
||||
},
|
||||
{
|
||||
path: "medaInfoTest",
|
||||
name: "medaInfoTest",
|
||||
component: () => import("../page/test/getMediaInfoTest.vue")
|
||||
}
|
||||
],
|
||||
component: () => import("../page/index.vue"),
|
||||
|
||||
const routes = [{
|
||||
path:"/",
|
||||
component:()=> import("../page/index.vue")
|
||||
}]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
|
||||
Reference in New Issue
Block a user