1. 前端页面优化, 增强统计功能, 支持生成二维码

2. 添加统计接口

web-front/src/App.vue

@@ -4,18 +4,29 @@
       <el-card class="box-card">
         <div class="demo-basic--circle">
           <div class="block" style="text-align: center;">
-            <el-avatar :size="150" :src="avatar"></el-avatar>
+            <img :height="150" src="../public/images/lanzou111.png" alt="lz"></img>
           </div>
         </div>
-        <h3 style="text-align: center;">NFD网盘直链解析0.1.8_bate(API演示)</h3>
+        <h3 style="text-align: center;">NFD网盘直链解析0.1.8_bate2(API演示)</h3>
         <div class="typo">
-          <p><strong>项目GitHub </strong><a href="https://github.com/qaiu/netdisk-fast-download" target="_blank"
-                                            rel="nofollow"><u>netdisk-fast-download</u></a></p>
+          <p style="text-align: center;">
+            <span>
+              <el-link href="https://github.com/qaiu/netdisk-fast-download" target="_blank" rel="nofollow">
+              <u>GitHub</u></el-link>
+            </span>
+            <span style="margin-left: 30px">
+              <el-link href="https://blog.qaiu.top/archives/netdisk-fast-download-bao-ta-an-zhuang-jiao-cheng" target="_blank"
+                rel="nofollow"><u>宝塔部署安装教程</u>
+              </el-link>
+            </span>
+            <span style="margin-left: 30px">
+              <el-link href="https://blog.qaiu.top" target="_blank"
+                     rel="nofollow"><u>QAIU博客</u>
+              </el-link>
+            </span></p>
           <p><strong>目前支持 </strong>蓝奏云/蓝奏云优享/小飞机盘/123云盘/奶牛快传/移动云云空间/亿方云/文叔叔/QQ邮箱文件中转站</p>
-          <p>已加入缓存机制, 如果遇到解析出的下载链接失效的情况请及时到项目GitHub反馈</p>
-          <p>
-            <el-button><strong @click="getInfo">刷新API调用统计</strong></el-button>
-          </p>
+          <p>已加入缓存机制, 如果遇到解析出的下载链接失效的情况请及时到<a href="https://github.com/qaiu/netdisk-fast-download/issues">
+            <u><strong>项目GitHub反馈</strong></u></a></p>
           <p>节点1: 回源请求数:{{ node1Info.parserTotal }}, 缓存请求数:{{ node1Info.cacheTotal }}, 总数:{{ node1Info.total }}</p>
 <!--          <p>节点2: 成功:{{ node2Info.success }},失败:{{ node2Info.fail }},总数:{{ node2Info.total }}</p>-->
         </div>
@@ -24,17 +35,24 @@
           <div class="grid-content">
             <el-input placeholder="请粘贴分享链接" v-model="link" id="url" lass="input-with-select">
               <strong slot="prepend">分享链接</strong>
-              <el-button slot="append" @click="onSubmit">解析</el-button>
             </el-input>
-            <el-input placeholder="请输入密码" v-model="password" id="url" lass="input-with-select"></el-input>
+            <el-input placeholder="请输入密码" v-model="password" id="url" lass="input-with-select">
+                <strong slot="prepend">分享密码</strong>
+            </el-input>
             <el-input v-show="respData.data" placeholder="解析地址" :value="getLink2" id="url" lass="input-with-select">
               <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: 20px" @click="generateQRCode">生成二维码</el-button>
+              <el-button style="margin-left: 20px" @click="getTj">链接信息统计</el-button>
+            </p>
           </div>
-          <div v-show="respData.code" style="margin-top: 10px">
+          <div v-if="respData.code" style="margin-top: 10px">
             <strong>解析结果: </strong>
             <json-viewer
               :value="respData"
@@ -45,6 +63,44 @@
             />
             <a :href="downUrl" v-show="downUrl">点击下载</a>
           </div>
+          <el-row v-if="mdText" style="text-align: center">
+            <el-col span="22">
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 4, maxRows: 8}"
+                placeholder="请输入内容"
+                v-model="mdText">
+              </el-input>
+            </el-col>
+            <el-col span="2">
+              <el-button v-clipboard:copy="mdText"
+                         v-clipboard:success="onCopy"
+                         v-clipboard:error="onError">复制
+              </el-button>
+            </el-col>
+          </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>
+            <div style="text-align: center"> 扫码下载 </div>
+          </div>
+          <div v-if="tjData.shareLinkInfo">
+            <el-descriptions class="margin-top" title="分享详情" :column="1" border>
+              <template slot="extra">
+                <el-button type="primary" size="small">操作</el-button>
+              </template>
+              <el-descriptions-item label="网盘名称">{{ tjData.shareLinkInfo.panName }}</el-descriptions-item>
+              <el-descriptions-item label="网盘标识">{{ tjData.shareLinkInfo.type }}</el-descriptions-item>
+              <el-descriptions-item label="分享Key">{{ tjData.shareLinkInfo.shareKey }}</el-descriptions-item>
+              <el-descriptions-item label="分享链接"> <el-link  target="_blank" :href="tjData.shareLinkInfo.shareUrl">{{ tjData.shareLinkInfo.shareUrl }}</el-link></el-descriptions-item>
+              <el-descriptions-item label="jsonApi链接"> <el-link  target="_blank" :href="tjData.apiLink">{{ tjData.apiLink }}</el-link></el-descriptions-item>
+              <el-descriptions-item label="302下载链接"> <el-link  target="_blank" :href="tjData.downLink">{{ tjData.downLink }}</el-link></el-descriptions-item>
+              <el-descriptions-item label="解析次数">{{ tjData.parserTotal }}</el-descriptions-item>
+              <el-descriptions-item label="缓存命中次数">{{ tjData.cacheHitTotal }}</el-descriptions-item>
+              <el-descriptions-item label="总请求次数">{{ tjData.sumTotal }}</el-descriptions-item>
+            </el-descriptions>
+          </div>
+
         </div>
       </el-card>
     </el-row>
@@ -53,6 +109,7 @@
 
 <script>
 import axios from 'axios'
+import QRCode from 'qrcode'
 /*
 蓝奏云 (lz)
  登录, 上传, 下载, 分享
@@ -79,13 +136,18 @@ export default {
   name: 'App',
   data() {
     return {
+      baseAPI: `${location.protocol}//${location.hostname}:6400`,
+      current: {}, // 当前分享
+      showQrc: false,
+      codeUrl: '',
+      mdText: '',
       link: "",
       password: "",
       isLoading: false,
       downUrl: null,
-      avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=736226400&spec=640",
       select: "lz",
       respData: {},
+      tjData: {},
       panList: [
         {
           name: "蓝奏云",
@@ -117,28 +179,36 @@ export default {
           value: 'ye'
         },
       ],
-      getLink: '',
+      getLink: null,
       getLink2: '',
+      getLinkInfo:  null,
       node1Info: {},
       node2Info: {},
     }
   },
   methods: {
-    onSubmit() {
+    check() {
+      this.mdText = ''
+      this.showQrc = false
+      this.respData = {}
+      this.tjData = {}
       if (!this.link.startsWith("https://")) {
         this.$message.error("请输入有效链接!")
-        return
+        throw new Error('请输入有效链接')
       }
+    },
+    onSubmit() {
+      this.check()
       this.isLoading = true
       this.downUrl = ''
       this.respData = {}
-      this.getLink2 = `${location.protocol}//${location.host}/parser?url=${this.link}`
+      this.getLink2 = `${this.baseAPI}/parser?url=${this.link}`
       // this.getLink = `${location.protocol}//${location.host}/api/json/parser?url=${this.link}`
-      this.getLink = `${location.protocol}//${location.host}/json/parser`
+      //   this.getLink = `${location.protocol}//${location.host}/json/parser`
       if (this.password) {
-        this.getLink += `&pwd=${this.password}`
+        this.getLink2 += `&pwd=${this.password}`
       }
-      axios.get(this.getLink, {params: {url: this.link}}).then(
+      axios.get(this.getLink, {params: {url: this.link, pwd: this.password}}).then(
         response => {
           this.isLoading = false
           this.respData = response.data
@@ -179,9 +249,73 @@ export default {
       //       this.node2Info = response.data.data
       //     }
       //   })
+    },
+    genMd() {
+      this.check()
+      axios.get(this.getLinkInfo, {params: {url: this.link, pwd: this.password}}).then(
+        response => {
+          this.isLoading = false
+          if (response.data.code === 200) {
+            this.$message({
+              message: response.data.msg,
+              type: 'success'
+            })
+            this.mdText = this.buildMd('快速下载地址',response.data.data.downLink)
+          } else {
+            this.$message.error(response.data.msg)
+          }
+        });
+    },
+    buildMd(title, url) {
+      return `[${title}](${url})`
+    },
+    generateQRCode() {
+      this.check()
+      const options = { // 设置二维码的参数，例如大小、边距等
+        width: 150,
+        height: 150,
+        margin: 2,
+        colorDark : "#8e0fb7",
+        colorLight : "#fff2ad",
+      };
+      axios.get(this.getLinkInfo, {params: {url: this.link, pwd: this.password}}).then(
+        response => {
+          this.isLoading = false
+          if (response.data.code === 200) {
+            this.$message({
+              message: response.data.msg,
+              type: 'success'
+            })
+            this.codeUrl = response.data.data.downLink
+            QRCode.toCanvas(this.$refs.qrcodeCanvas, this.codeUrl, options, error => {
+              if (error) console.error(error);
+            });
+            this.showQrc = true
+          } else {
+            this.$message.error(response.data.msg)
+          }
+        });
+    },
+    getTj() {
+      this.check()
+      axios.get(this.getLinkInfo, {params: {url: this.link, pwd: this.password}}).then(
+        response => {
+          this.isLoading = false
+          if (response.data.code === 200) {
+            this.$message({
+              message: response.data.msg,
+              type: 'success'
+            })
+            this.tjData = response.data.data
+          } else {
+            this.$message.error(response.data.msg)
+          }
+        });
     }
   },
   mounted() {
+    this.getLinkInfo = `${this.baseAPI}/v2/linkInfo`
+    this.getLink = `${this.baseAPI}/json/parser`
     this.getInfo()
   }
 }
@@ -255,8 +389,7 @@ body:before {
 }
 
 .typo a {
-  color: #2c3e50;
-  text-decoration: none;
+  color: #0077ff;
 }
 
 hr {