升级vue3

web-front/.gitignore

@@ -23,3 +23,4 @@ pnpm-debug.log*
 *.sw?
 /nfd-front.zip
 /nfd-front
+/package-lock.json

web-front/package.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": "^3.5.12",
-    "vue-clipboard2": "^0.3.3",
+    "vue-clipboard3": "^2.0.0",
-    "vue-json-viewer": "^2.2.22"
+    "vue3-json-viewer": "^2.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@babel/core": "^7.26.0",
-    "@babel/eslint-parser": "^7.12.16",
+    "@babel/eslint-parser": "^7.25.9",
-    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-service": "~5.0.8",
-    "compression-webpack-plugin": "^6.1.1",
+    "compression-webpack-plugin": "^11.1.0",
-    "eslint": "^7.32.0",
+    "eslint": "^9.14.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "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,

web-front/src/App.vue

@@ -40,29 +40,34 @@
               active-text="自动识别剪切板"
             ></el-switch>
 
-            <!-- 手动触发按钮 -->
+            <el-input placeholder="请粘贴分享链接" v-model="link" id="url">
-            <el-button style="margin-left: 20px;margin-bottom: 20px" @click="() => getPaste(1)">读取剪切板</el-button>
+              <template #prepend>分享链接</template>
-
+              <template #append v-if="!autoReadClipboard">
-            <el-input placeholder="请粘贴分享链接" v-model="link" id="url" lass="input-with-select">
+                <el-button @click="() => getPaste(1)">读取剪切板</el-button>
-              <strong slot="prepend">分享链接</strong>
+              </template>
             </el-input>
-            <el-input placeholder="请输入密码" v-model="password" id="url" lass="input-with-select">
+            <el-input placeholder="请输入密码" v-model="password" id="url">
-                <strong slot="prepend">分享密码</strong>
+                <template #prepend>分享密码</template>
             </el-input>
-            <el-input v-show="getLink2" placeholder="解析地址" :value="getLink2" id="url" lass="input-with-select">
+            <el-input v-show="getLink2" placeholder="解析地址" :value="getLink2" id="url">
-              <strong slot="prepend">智能直链</strong>
+              <template #prepend>智能直链</template>
-              <el-button slot="append" v-clipboard:copy="getLink2"
+              <template #append>
+                  <el-button :icon="Search" circle
+                             v-clipboard:copy="getLink2"
                              v-clipboard:success="onCopy"
-                         v-clipboard:error="onError">点我复制
+                             v-clipboard:error="onError">复制
                   </el-button>
+              </template>
             </el-input>
+
             <p style="text-align: center">
-              <el-button style="" @click="onSubmit">解析测试</el-button>
+              <el-button style="margin-left: 40px;margin-bottom: 10px" @click="onSubmit">解析测试</el-button>
-              <el-button style="margin-left: 20px" @click="genMd">生成Markdown链接</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">
+          <div v-if="mdText" style="text-align: center">
-            <el-col span="22">
               <el-input
                 type="textarea"
-                :autosize="{ minRows: 4, maxRows: 8}"
+                :autosize="{ minRows: 1, maxRows: 8}"
-                placeholder="请输入内容"
                 v-model="mdText">
               </el-input>
-            </el-col>
+              <el-button style="width: 100%" v-clipboard:copy="mdText"
-            <el-col span="2">
-              <el-button v-clipboard:copy="mdText"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">复制
               </el-button>
-            </el-col>
+          </div>
-          </el-row>
           <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;

web-front/src/directive/index.js

@@ -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);
+        });
+    },
+};

web-front/src/directive/vClipboard.js

@@ -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;
+            }
+        },
+    },
+};

web-front/src/main.js

@@ -1,19 +1,28 @@
-import Vue from 'vue'
+import * as Vue from 'vue'
 import App from './App.vue'
-import ElementUI from 'element-ui'
+import VueClipboard from 'vue-clipboard3'
-import 'element-ui/lib/theme-chalk/index.css'
+import DirectiveExtensions from './directive'
-import VueClipboard from 'vue-clipboard2'
+
-import JsonViewer from 'vue-json-viewer'
+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)
+window.$vueApp.use(VueClipboard)
-Vue.config.productionTip = false
+window.$vueApp.use(ElementPlus)
-Vue.use(ElementUI)
+window.$vueApp.mount('#app')
-new Vue({
-  render: h => h(App),
-}).$mount('#app')