mirror of
https://github.com/qaiu/netdisk-fast-download.git
synced 2025-12-16 04:13:03 +00:00
升级vue3
This commit is contained in:
QAIU
1
web-front/.gitignore
vendored
1
web-front/.gitignore
vendored
@@ -23,3 +23,4 @@ pnpm-debug.log*
|
||||
*.sw?
|
||||
/nfd-front.zip
|
||||
/nfd-front
|
||||
/package-lock.json
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nfd-web",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.9",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -8,25 +8,27 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.7.4",
|
||||
"clipboard": "^2.0.11",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"element-plus": "^2.8.7",
|
||||
"qrcode": "^1.5.4",
|
||||
"vue": "^2.7.16",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-json-viewer": "^2.2.22"
|
||||
"vue": "^3.5.12",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue3-json-viewer": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"compression-webpack-plugin": "^6.1.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"@babel/core": "^7.26.0",
|
||||
"@babel/eslint-parser": "^7.25.9",
|
||||
"@vue/cli-plugin-babel": "~5.0.8",
|
||||
"@vue/cli-plugin-eslint": "~5.0.8",
|
||||
"@vue/cli-service": "~5.0.8",
|
||||
"compression-webpack-plugin": "^11.1.0",
|
||||
"eslint": "^9.14.0",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"filemanager-webpack-plugin": "8.0.0",
|
||||
"vue-template-compiler": "^2.7.16"
|
||||
"typescript": "^5.6.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
@@ -40,29 +40,34 @@
|
||||
active-text="自动识别剪切板"
|
||||
></el-switch>
|
||||
|
||||
<!-- 手动触发按钮 -->
|
||||
<el-button style="margin-left: 20px;margin-bottom: 20px" @click="() => getPaste(1)">读取剪切板</el-button>
|
||||
<el-input placeholder="请粘贴分享链接" v-model="link" id="url">
|
||||
<template #prepend>分享链接</template>
|
||||
<template #append v-if="!autoReadClipboard">
|
||||
<el-button @click="() => getPaste(1)">读取剪切板</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入密码" v-model="password" id="url">
|
||||
<template #prepend>分享密码</template>
|
||||
</el-input>
|
||||
<el-input v-show="getLink2" placeholder="解析地址" :value="getLink2" id="url">
|
||||
<template #prepend>智能直链</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" circle
|
||||
v-clipboard:copy="getLink2"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError">复制
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-input placeholder="请粘贴分享链接" v-model="link" id="url" lass="input-with-select">
|
||||
<strong slot="prepend">分享链接</strong>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入密码" v-model="password" id="url" lass="input-with-select">
|
||||
<strong slot="prepend">分享密码</strong>
|
||||
</el-input>
|
||||
<el-input v-show="getLink2" placeholder="解析地址" :value="getLink2" id="url" lass="input-with-select">
|
||||
<strong slot="prepend">智能直链</strong>
|
||||
<el-button slot="append" v-clipboard:copy="getLink2"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError">点我复制
|
||||
</el-button>
|
||||
</el-input>
|
||||
<p style="text-align: center">
|
||||
<el-button style="" @click="onSubmit">解析测试</el-button>
|
||||
<el-button style="margin-left: 20px" @click="genMd">生成Markdown链接</el-button>
|
||||
<el-button style="margin-left: 40px;margin-bottom: 10px" @click="onSubmit">解析测试</el-button>
|
||||
<el-button style="margin-left: 20px;margin-bottom: 10px" @click="genMd">生成Markdown链接</el-button>
|
||||
<el-button style="margin-left: 20px" @click="generateQRCode">生成二维码</el-button>
|
||||
<el-button style="margin-left: 20px" @click="getTj">链接信息统计</el-button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="respData.code" style="margin-top: 10px">
|
||||
<strong>解析结果: </strong>
|
||||
<json-viewer
|
||||
@@ -74,22 +79,17 @@
|
||||
/>
|
||||
<a :href="downUrl" v-show="downUrl">点击下载</a>
|
||||
</div>
|
||||
<el-row v-if="mdText" style="text-align: center">
|
||||
<el-col span="22">
|
||||
<div v-if="mdText" style="text-align: center">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8}"
|
||||
placeholder="请输入内容"
|
||||
:autosize="{ minRows: 1, maxRows: 8}"
|
||||
v-model="mdText">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col span="2">
|
||||
<el-button v-clipboard:copy="mdText"
|
||||
<el-button style="width: 100%" v-clipboard:copy="mdText"
|
||||
v-clipboard:success="onCopy"
|
||||
v-clipboard:error="onError">复制
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="text-align: center" v-show="showQrc">
|
||||
<div style="text-align: center"><el-link target="_blank" :href="codeUrl">{{ codeUrl }}</el-link></div>
|
||||
<canvas ref="qrcodeCanvas"></canvas>
|
||||
@@ -121,6 +121,7 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import QRCode from 'qrcode'
|
||||
import '@element-plus/icons-vue'
|
||||
|
||||
import parserUrl from './parserUrl1'
|
||||
|
||||
@@ -329,6 +330,11 @@ export default {
|
||||
mounted() {
|
||||
this.getLinkInfo = `${this.baseAPI}/v2/linkInfo`
|
||||
this.getLink = `${this.baseAPI}/json/parser`
|
||||
let item = window.localStorage.getItem("autoReadClipboard");
|
||||
if (item) {
|
||||
this.autoReadClipboard = (item === 'true');
|
||||
}
|
||||
|
||||
this.getInfo()
|
||||
|
||||
// 页面首次加载时，根据开关状态判断是否读取剪切板
|
||||
@@ -345,6 +351,11 @@ export default {
|
||||
|
||||
// this.getPaste()
|
||||
},
|
||||
watch: {
|
||||
autoReadClipboard(val) {
|
||||
window.localStorage.setItem("autoReadClipboard", val)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -385,11 +396,6 @@ body:before {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.box-card {
|
||||
margin-top: 4em !important;
|
||||
margin-bottom: 4em !important;
|
||||
|
||||
17
web-front/src/directive/index.js
Normal file
17
web-front/src/directive/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
//index.ts
|
||||
import { ObjectDirective, App, Plugin } from "vue";
|
||||
|
||||
// 自定义指令 可以引用多个
|
||||
import vClipboard from "./vClipboard";
|
||||
|
||||
// 构建指令集
|
||||
const directives = [vClipboard];
|
||||
|
||||
export default {
|
||||
install: (app) => {
|
||||
// 安装指令集
|
||||
directives.forEach((item) => {
|
||||
app.directive(item.name, item.options);
|
||||
});
|
||||
},
|
||||
};
|
||||
71
web-front/src/directive/vClipboard.js
Normal file
71
web-front/src/directive/vClipboard.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// vClipboard.ts
|
||||
// vue-clipboard3 提供的 composition api
|
||||
import useClipboard from "vue-clipboard3";
|
||||
const { toClipboard } = useClipboard();
|
||||
export default {
|
||||
name: "clipboard",
|
||||
options: {
|
||||
// 挂载
|
||||
mounted(el, binding) {
|
||||
// binding.arg 为动态指令参数
|
||||
// 由于 指令是支持响应式的 因此我们指令需要有一个“全局”对象，这里我们为了不借助其他对象浪费资源，就直接使用el自身了
|
||||
// 将copy的值 成功回调 失败回调 及 click事件都绑定到el上 这样在更新和卸载时方便操作
|
||||
switch (binding.arg) {
|
||||
case "copy":
|
||||
// copy值
|
||||
el.clipValue = binding.value;
|
||||
// click事件
|
||||
el.clipCopy = function () {
|
||||
toClipboard(el.clipValue)
|
||||
.then(result => {
|
||||
el.clipSuccess && el.clipSuccess(result);
|
||||
})
|
||||
.catch(err => {
|
||||
el.clipError && el.clipError(err);
|
||||
});
|
||||
};
|
||||
// 绑定click事件
|
||||
el.addEventListener("click", el.clipCopy);
|
||||
break;
|
||||
case "success":
|
||||
// 成功回调
|
||||
el.clipSuccess = binding.value;
|
||||
break;
|
||||
case "error":
|
||||
// 失败回调
|
||||
el.clipError = binding.value;
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 相应修改 这里比较简单 重置相应的值即可
|
||||
updated(el, binding) {
|
||||
switch (binding.arg) {
|
||||
case "copy":
|
||||
el.clipValue = binding.value;
|
||||
break;
|
||||
case "success":
|
||||
el.clipSuccess = binding.value;
|
||||
break;
|
||||
case "error":
|
||||
el.clipError = binding.value;
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 卸载 删除click事件 删除对应的自定义属性
|
||||
unmounted(el, binding) {
|
||||
switch (binding.arg) {
|
||||
case "copy":
|
||||
el.removeEventListener("click", el.clipCopy);
|
||||
delete el.clipValue;
|
||||
delete el.clipCopy;
|
||||
break;
|
||||
case "success":
|
||||
delete el.clipSuccess;
|
||||
break;
|
||||
case "error":
|
||||
delete el.clipError;
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,19 +1,28 @@
|
||||
import Vue from 'vue'
|
||||
import * as Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
import JsonViewer from 'vue-json-viewer'
|
||||
import VueClipboard from 'vue-clipboard3'
|
||||
import DirectiveExtensions from './directive'
|
||||
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
|
||||
window.$vueApp = Vue.createApp(App)
|
||||
|
||||
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
window.$vueApp.component(key, component)
|
||||
}
|
||||
|
||||
// Import JsonViewer as a Vue.js plugin
|
||||
Vue.use(JsonViewer)
|
||||
window.$vueApp.use(JsonViewer)
|
||||
window.$vueApp.use(DirectiveExtensions)
|
||||
|
||||
// or
|
||||
// components: {JsonViewer}
|
||||
|
||||
Vue.use(VueClipboard)
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
window.$vueApp.use(VueClipboard)
|
||||
window.$vueApp.use(ElementPlus)
|
||||
window.$vueApp.mount('#app')
|
||||
|
||||
2012
web-front/yarn.lock
2012
web-front/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user