[+][*] 添加隧道下线功能，迁移到 v-clipboard

package.json

@@ -14,7 +14,6 @@
     "@vicons/ionicons5": "^0.12.0",
     "@vicons/material": "^0.12.0",
     "axios": "^1.7.7",
-    "clipboard": "^2.0.11",
     "highlight.js": "^11.10.0",
     "js-cookie": "^3.0.5",
     "json": "^11.0.0",
@@ -25,6 +24,7 @@
     "tailwindcss": "^3.4.10",
     "unplugin-auto-import": "^0.17.8",
     "unplugin-vue-components": "^0.26.0",
+    "v-clipboard": "^3.0.0-next.1",
     "vue": "^3.5.2",
     "vue-axios": "^3.5.2",
     "vue-cookies": "^1.8.4",

src/api/base.ts

@@ -9,7 +9,7 @@ const base = {
       res.data?.msg ??
       '未指定或请求失败'
     const data = (useDataPath ? res.data?.data : res.data) ?? {}
-    const statusApi = (useDataPath ? res.data?.status : res.status)
+    const statusApi = useDataPath ? res.data?.status : res.status
     return {
       status: res.status as number,
       message: message,

src/api/v2/proxies/down.ts

@@ -3,7 +3,7 @@ import base from '@/api/base'
 import { get } from '@/utils/request'
 
 const down = async (username: string, proxy_id: string) => {
-  const rs = get(`${base.api_v2_url}/proxies/getlist`, {
+  const rs = get(`${base.api_v2_url}/proxies/down`, {
     username: username,
     proxy_id: proxy_id
   })

src/api/v2/proxies/index.ts

@@ -1,11 +1,13 @@
 import add from './add'
 import deleteX from './delete'
+import down from './down'
 import getlist from './getlist'
 import update from './update'
 
 export default {
   add: add,
   update: update,
   getlist: getlist,
-  delete: deleteX
+  delete: deleteX,
+  down: down
 }

src/main.js

@@ -10,6 +10,7 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import store from '@/utils/stores/store'
 import { printTitle } from '@/utils/title'
+import Clipboard from 'v-clipboard'
 
 const app = createApp(App)
 app.use(store)
@@ -26,6 +27,7 @@ const meta = document.createElement('meta')
 meta.name = 'naive-ui-style'
 document.head.appendChild(meta)
 
+app.use(Clipboard)
 app.use(VueAxios, axios)
 app.component('message', message)
 app.component('loadingbar', loadingbar)

src/views/Config.vue

@@ -7,8 +7,16 @@
     <n-grid-item span="1">
       <n-card title="节点">
         <n-select v-model:value="node" :options="ServerList" @update:value="updateValue" />
-        <n-button strong secondary type="info" style="margin-top: 30px" @click="copy(code, $event)"
-          >复制
+        <n-button
+          strong
+          secondary
+          type="info"
+          style="margin-top: 30px"
+          v-clipboard="() => code"
+          v-clipboard:success="() => sendSuccessMessage('复制成功')"
+          v-clipboard:error="() => sendErrorMessage('复制失败')"
+        >
+          复制
         </n-button>
         <n-code
           :code="code"
@@ -55,7 +63,7 @@ set_real_ip_from 127.0.0.1;"
 import { ref } from 'vue'
 import store from '@/utils/stores/store'
 import { sendSuccessMessage, sendErrorMessage } from '@/utils/message'
-import clipboard from '@/utils/clipboard'
+// import clipboard from '@/utils/clipboard'
 import api from '@/api'
 import logger from '@/utils/logger'
 
@@ -103,10 +111,6 @@ onMounted(async () => {
   })
 })
 
-function copy(data, event) {
-  clipboard(data, event)
-}
-
 async function updateValue(value) {
   let rs
   try {

src/views/Dashboard.vue

@@ -53,22 +53,31 @@
         访问密钥：
         <br />
         <div>
-          <div v-if="notShowFrpToken">
-            <n-tag type="info" @click="changeShowFrptoken($event)">
+          <div v-if="notShowFrpToken" style="display: inline">
+            <n-tag type="info" @click="changeShowFrptoken" style="padding: 16px">
               <template #icon>
                 <n-icon :component="Key" />
               </template>
               点击显示
             </n-tag>
           </div>
-          <template v-else>
-            <n-tag type="info">
+          <template v-else style="display: inline">
+            <n-tag type="info" style="padding: 16px">
               <template #icon>
                 <n-icon :component="AngleRight" />
               </template>
-              {{ frptoken }}
+              {{ frpToken }}
             </n-tag>
           </template>
+          <n-button
+            style="margin-left: 10px; transform: translateY(-5px)"
+            type="info"
+            v-clipboard="() => frpToken"
+            v-clipboard:success="() => sendSuccessMessage('复制成功')"
+            v-clipboard:error="() => sendErrorMessage('复制失败')"
+          >
+            复制
+          </n-button>
         </div>
         请妥善保管访问密钥，一旦该密钥泄露，他人可通过此密钥访问账户部分信息！
         <br />
@@ -168,14 +177,14 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import clipboard from '@/utils/clipboard'
+// import clipboard from '@/utils/clipboard'
 import { get } from '@/utils/request'
 import { AngleRight, Key } from '@vicons/fa'
 import store from '@/utils/stores/store'
 import { marked } from 'marked'
 import { useDialog, useMessage } from 'naive-ui'
 import { startLoadingBar } from '@/utils/loadingbar'
-import { sendErrorMessage } from '@/utils/message'
+import { sendSuccessMessage, sendErrorMessage } from '@/utils/message'
 import api from '@/api'
 import logger from '@/utils/logger'
 
@@ -184,7 +193,7 @@ const username = store.getters.get_username
 const email = store.getters.get_email
 const inbound = ref(store.getters.get_in_bound + 'Mbps 下行')
 const outbound = ref(store.getters.get_out_bound + 'Mbps 上行')
-const frptoken = ref(store.getters.get_frp_token)
+const frpToken = ref(store.getters.get_frp_token)
 const notice = ref('')
 const proxiesRef = ref(null)
 const notShowFrpToken = ref(true)
@@ -199,6 +208,11 @@ function showAds() {
 
 // 通知 or AD
 onMounted(async () => {
+  const time = new Date()
+  const year = time.getFullYear()
+  const month = time.getMonth()
+  const day = time.getDate()
+  const current = `${year}-${month}-${day}`
   // console.log('Rquest ads')
   let res
   try {
@@ -220,7 +234,8 @@ onMounted(async () => {
       '  padding: 2px;' +
       '}' +
       '</style>'
-    showAds()
+    if (localStorage.getItem('dashboard_last_show_ads_date') != current) showAds()
+    localStorage.setItem('dashboard_last_show_ads_date', current)
   }
 })
 
@@ -251,9 +266,8 @@ onMounted(async () => {
   }
 })
 
-async function changeShowFrptoken(event) {
+async function changeShowFrptoken() {
   notShowFrpToken.value = !notShowFrpToken.value
-  clipboard(frptoken.value, event)
   setTimeout(() => {
     notShowFrpToken.value = !notShowFrpToken.value
   }, 3000)
@@ -333,6 +347,6 @@ setInterval(() => {
   traffic.value = Number(localStorage.getItem('traffic')) / 1024 + 'GB'
   inbound.value = store.getters.get_in_bound + 'Mbps 下行'
   outbound.value = store.getters.get_out_bound + 'Mbps 上行'
-  frptoken.value = store.getters.get_frp_token
+  frpToken.value = store.getters.get_frp_token
 }, 10000)
 </script>