add 修改主页面

view/dist/assets/downloadTest-23bdae01.js

@@ -0,0 +1 @@
+import{a as h}from"./axios-4a70c6fc.js";import{_ as E,r as d,a as n,o as w,c as L,w as a,b as e,d as r,e as i,f as b,g as U,F as N,E as x,t as F,p as M,h as R}from"./index-105f30a6.js";const j=c=>(M("data-v-ef30d7a3"),c=c(),R(),c),z=j(()=>r("div",{class:"card-header"},[r("span",null,"Video Download Test")],-1)),Q={style:{display:"flex",width:"100%"}},A={style:{display:"flex"}},G={style:{display:"flex"}},H={style:{width:"100%",height:"100%","overflow-y":"auto"}},J={__name:"downloadTest",setup(c){const p=d(!1),l=d({name:"https://v.qq.com/x/cover/mzc002007vp35qj.html",start:1,save:localStorage.getItem("save")}),m=d([]),_=d();function V(){h.get("/getQqList",{params:{url:l.value.name}}).then(t=>{m.value=t.data})}function k(){_.value.clearSelection();for(let t=l.value.start-1;t<m.value.length;t++)console.log(t),_.value.toggleRowSelection(m.value[t],void 0)}const v=d([]);async function C(){let t=_.value.getSelectionRows();if(t.length===0){x({showClose:!0,message:"请选择要下载的剧集",type:"error"});return}if(!l.value.save){x({showClose:!0,message:"请填写下载位置",type:"error"});return}p.value=!0,localStorage.setItem("save",l.value.save);for(let o of t)await h.get("/startDown",{params:{...o,save:l.value.save+"/"+o.title.split(" ")[0]}});x({showClose:!0,message:"添加完成",type:"success"})}const S=new EventSource("/msg");S.onmessage=t=>{v.value.length>200&&v.value.splice(200),v.value.unshift(t.data)};function I(){p.value=!0}function T(){h.get("/test",{params:{url:l.value.name}}).then(t=>{console.log(t.data)})}return(t,o)=>{const f=n("el-input"),u=n("el-button"),g=n("el-form-item"),y=n("el-table-column"),q=n("el-table"),B=n("el-dialog"),D=n("el-card");return w(),L(D,{class:"box-card"},{header:a(()=>[z]),default:a(()=>[e(g,{label:"视频地址"},{default:a(()=>[r("div",Q,[e(f,{style:{width:"100%"},modelValue:l.value.name,"onUpdate:modelValue":o[0]||(o[0]=s=>l.value.name=s)},null,8,["modelValue"]),e(u,{style:{"flex-shrink":"0",margin:"0 10px"},onClick:V,type:"primary"},{default:a(()=>[i("获取")]),_:1})])]),_:1}),e(g,{label:"第几集开始"},{default:a(()=>[r("div",A,[e(f,{modelValue:l.value.start,"onUpdate:modelValue":o[1]||(o[1]=s=>l.value.start=s)},null,8,["modelValue"]),e(u,{style:{"flex-shrink":"0",margin:"0 10px"},onClick:k,type:"primary"},{default:a(()=>[i("设置")]),_:1}),e(u,{style:{"flex-shrink":"0",margin:"0 10px"},onClick:T,type:"primary"},{default:a(()=>[i("测试按钮")]),_:1})])]),_:1}),e(g,{label:"下载保存地址"},{default:a(()=>[r("div",G,[e(f,{modelValue:l.value.save,"onUpdate:modelValue":o[2]||(o[2]=s=>l.value.save=s)},null,8,["modelValue"]),e(u,{style:{"flex-shrink":"0",margin:"0 10px"},onClick:C,type:"primary"},{default:a(()=>[i("下载")]),_:1}),e(u,{style:{"flex-shrink":"0",margin:"0 10px"},onClick:I,type:"primary"},{default:a(()=>[i("查看进度")]),_:1})])]),_:1}),e(q,{ref_key:"table",ref:_,data:m.value,style:{width:"100%"}},{default:a(()=>[e(y,{type:"selection",width:"55"}),e(y,{label:"title",prop:"title"}),e(y,{label:"url",prop:"url"})]),_:1},8,["data"]),e(B,{fullscreen:!0,modelValue:p.value,"onUpdate:modelValue":o[3]||(o[3]=s=>p.value=s),title:"Tips",width:"30%"},{default:a(()=>[r("div",H,[(w(!0),b(N,null,U(v.value,s=>(w(),b("div",null,F(s),1))),256))])]),_:1},8,["modelValue"])]),_:1})}}},P=E(J,[["__scopeId","data-v-ef30d7a3"]]);export{P as default};

view/dist/assets/downloadTest-714da9f2.css

@@ -0,0 +1 @@
+.card-header[data-v-ef30d7a3]{display:flex;justify-content:space-between;align-items:center}.text[data-v-ef30d7a3]{font-size:14px}.item[data-v-ef30d7a3]{margin-bottom:18px}.box-card[data-v-ef30d7a3]{width:480px}

view/dist/assets/getMediaInfoTest-365a76ee.js

@@ -0,0 +1 @@
+import{a as i}from"./axios-4a70c6fc.js";import{_ as f,r as m,a as o,o as v,c as x,w as s,d as _,b as l,e as I,i as h,p as g,h as M}from"./index-105f30a6.js";const T=e=>(g("data-v-215ae4a3"),e=e(),M(),e),V={class:"card-header"},b=T(()=>_("span",null,"MediaInfo Test",-1)),B={__name:"getMediaInfoTest",setup(e){const a=m("");function c(){i.get("/getMediaInfo",{params:{filePath:a.value}}).then(n=>{h.alert(n.data.data)})}return(n,t)=>{const p=o("el-button"),r=o("el-input"),u=o("el-card");return v(),x(u,{class:"box-card"},{header:s(()=>[_("div",V,[b,l(p,{onClick:t[0]||(t[0]=d=>c()),class:"button",text:""},{default:s(()=>[I("Test")]),_:1})])]),default:s(()=>[l(r,{modelValue:a.value,"onUpdate:modelValue":t[1]||(t[1]=d=>a.value=d),placeholder:"视频文件绝对路径"},null,8,["modelValue"])]),_:1})}}},C=f(B,[["__scopeId","data-v-215ae4a3"]]);export{C as default};

view/dist/assets/getMediaInfoTest-d9b8302c.css

@@ -0,0 +1 @@
+.card-header[data-v-215ae4a3]{display:flex;justify-content:space-between;align-items:center}.text[data-v-215ae4a3]{font-size:14px}.item[data-v-215ae4a3]{margin-bottom:18px}.box-card[data-v-215ae4a3]{width:480px}

view/dist/assets/index-a074ac47.js

@@ -0,0 +1 @@
+import{a as t,o as r,c as v,w as n,b as e,u,j as w,e as l,k as b,v as g,l as k,m as y,r as p,f as x,F as B,d as h,_ as I}from"./index-105f30a6.js";const C={__name:"leftMenu",setup(f){return(d,m)=>{const _=t("el-icon"),o=t("el-menu-item"),a=t("el-menu-item-group"),s=t("el-sub-menu"),c=t("el-menu"),i=t("el-scrollbar");return r(),v(i,null,{default:n(()=>[e(c,{router:!0},{default:n(()=>[e(s,{index:"1"},{title:n(()=>[e(_,null,{default:n(()=>[e(u(w))]),_:1}),l("功能测试")]),default:n(()=>[e(a,null,{title:n(()=>[l("测试模块")]),default:n(()=>[e(o,{index:"/medaInfoTest"},{default:n(()=>[e(_,null,{default:n(()=>[e(u(b))]),_:1}),l("MediaInfo")]),_:1}),e(o,{index:"1"},{default:n(()=>[e(_,null,{default:n(()=>[e(u(g))]),_:1}),l("图像截取")]),_:1}),e(o,{index:"/downloadTest",to:""},{default:n(()=>[e(_,null,{default:n(()=>[e(u(k))]),_:1}),l("视频下载")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}}},M=h("h3",{style:{width:"180px"}},"WEB-DL发布工具",-1),N=h("div",{class:"h-6"},null,-1),T=y({__name:"headerMenu",setup(f){const d=p("1");p("1");const m=(_,o)=>{console.log(_,o)};return(_,o)=>{const a=t("el-menu-item"),s=t("el-sub-menu"),c=t("el-avatar"),i=t("el-menu");return r(),x(B,null,[e(i,{"default-active":d.value,class:"el-menu-demo",mode:"horizontal",onSelect:m},{default:n(()=>[M,e(a,{index:"1"},{default:n(()=>[l("首页")]),_:1}),e(s,{index:"2"},{title:n(()=>[l("设置")]),default:n(()=>[e(a,{index:"2-1"},{default:n(()=>[l("item one")]),_:1})]),_:1}),e(c,{style:{position:"absolute",right:"0"},size:50,src:"https://www.konfan.cn/img/favicon.png"})]),_:1},8,["default-active"]),N],64)}}});const V={class:"common-layout"},$={__name:"index",setup(f){return(d,m)=>{const _=t("el-header"),o=t("el-aside"),a=t("router-view"),s=t("el-main"),c=t("el-container");return r(),x("div",V,[e(c,null,{default:n(()=>[e(_,null,{default:n(()=>[e(T)]),_:1}),e(c,null,{default:n(()=>[e(o,{width:"200px"},{default:n(()=>[e(C)]),_:1}),e(s,null,{default:n(()=>[e(a)]),_:1})]),_:1})]),_:1})])}}},E=I($,[["__scopeId","data-v-10e397ef"]]);export{E as default};

view/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
-    <script type="module" crossorigin src="./assets/index-1b16ee59.js"></script>
-    <link rel="stylesheet" href="./assets/index-6ef103ac.css">
+    <script type="module" crossorigin src="./assets/index-105f30a6.js"></script>
+    <link rel="stylesheet" href="./assets/index-44d7f76c.css">
   </head>
   <body>
     <div id="app"></div>

view/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.4.0",
     "element-plus": "^2.3.6",
     "sass": "^1.63.3",

view/pnpm-lock.yaml

@@ -1,6 +1,13 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
+  '@element-plus/icons-vue':
+    specifier: ^2.1.0
+    version: 2.1.0(vue@3.2.47)
   axios:
     specifier: ^1.4.0
     version: 1.4.0

view/src/main.js

@@ -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')

view/src/menu/headerMenu.vue

@@ -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>

view/src/menu/leftMenu.vue

@@ -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>

view/src/page/index.vue

@@ -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>
 

view/src/page/test/downloadTest.vue

@@ -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>

view/src/page/test/getMediaInfoTest.vue

@@ -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>

view/src/router/index.js

@@ -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(),