From 77faf9a41e85a12a0fa80a0a825007de99b42b9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E6=B2=AB=E8=8A=B1=E7=81=ABzzz=F0=9F=8C=99?=
 <xmcn@1l1.icu>
Date: Sat, 14 Sep 2024 02:28:26 +0800
Subject: [PATCH] =?UTF-8?q?[+][*]=20=E6=B7=BB=E5=8A=A0=E9=9A=A7=E9=81=93?=
 =?UTF-8?q?=E4=B8=8B=E7=BA=BF=E5=8A=9F=E8=83=BD=EF=BC=8C=E8=BF=81=E7=A7=BB?=
 =?UTF-8?q?=E5=88=B0=20v-clipboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  2 +-
 public/netlify.toml         |  4 --
 src/api/base.ts             |  2 +-
 src/api/v2/proxies/down.ts  |  2 +-
 src/api/v2/proxies/index.ts |  4 +-
 src/main.js                 |  2 +
 src/utils/clipboard.js      | 27 -------------
 src/views/Config.vue        | 18 +++++----
 src/views/Dashboard.vue     | 38 ++++++++++++------
 src/views/Proxies.vue       | 79 +++++++++++++++++++++++++++----------
 10 files changed, 103 insertions(+), 75 deletions(-)
 delete mode 100644 public/netlify.toml
 delete mode 100644 src/utils/clipboard.js

diff --git a/package.json b/package.json
index 7a63199..9dad604 100644
--- a/package.json
+++ b/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",
diff --git a/public/netlify.toml b/public/netlify.toml
deleted file mode 100644
index ff1c050..0000000
--- a/public/netlify.toml
+++ /dev/null
@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
\ No newline at end of file
diff --git a/src/api/base.ts b/src/api/base.ts
index 16997a0..852b13a 100644
--- a/src/api/base.ts
+++ b/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,
diff --git a/src/api/v2/proxies/down.ts b/src/api/v2/proxies/down.ts
index e359f29..1e5119c 100644
--- a/src/api/v2/proxies/down.ts
+++ b/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
   })
diff --git a/src/api/v2/proxies/index.ts b/src/api/v2/proxies/index.ts
index f8c1f3a..39b1986 100644
--- a/src/api/v2/proxies/index.ts
+++ b/src/api/v2/proxies/index.ts
@@ -1,5 +1,6 @@
 import add from './add'
 import deleteX from './delete'
+import down from './down'
 import getlist from './getlist'
 import update from './update'
 
@@ -7,5 +8,6 @@ export default {
   add: add,
   update: update,
   getlist: getlist,
-  delete: deleteX
+  delete: deleteX,
+  down: down
 }
diff --git a/src/main.js b/src/main.js
index d68d81a..00783df 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
deleted file mode 100644
index d798abf..0000000
--- a/src/utils/clipboard.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Clipboard from 'clipboard'
-import { sendErrorMessage, sendSuccessMessage } from './message'
-import logger from '@/utils/logger'
-
-function clipboardSuccess(msg) {
-  sendSuccessMessage(msg || '复制成功')
-}
-
-function clipboardError(msg) {
-  sendErrorMessage(msg || '嗯...发生了点小错误')
-}
-
-export default function handleClipboard(text, event, msg) {
-  logger.info(`Writing clipboard [${event.target}]: ${text}`)
-  const clipboard = new Clipboard(event.target, {
-    text: () => text
-  })
-  clipboard.on('success', () => {
-    clipboardSuccess(msg)
-    clipboard.destroy()
-  })
-  clipboard.on('error', () => {
-    clipboardError(msg)
-    clipboard.destroy()
-  })
-  clipboard.onClick(event)
-}
diff --git a/src/views/Config.vue b/src/views/Config.vue
index 203d131..a08d02e 100644
--- a/src/views/Config.vue
+++ b/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 {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 6bf213f..3cfdac1 100644
--- a/src/views/Dashboard.vue
+++ b/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>
diff --git a/src/views/Proxies.vue b/src/views/Proxies.vue
index ec73096..3214bcb 100644
--- a/src/views/Proxies.vue
+++ b/src/views/Proxies.vue
@@ -110,11 +110,20 @@
     简易启动命令：
     <n-tooltip placement="bottom" trigger="click">
       <template #trigger>
-        <n-button @click="buildQuickstartCommand"> 点击显示/隐藏 </n-button>
+        <n-button> 点击显示/隐藏 </n-button>
       </template>
       <p>
-        {{ quickstartCommand }}
-        <n-button type="tertiary" @click="copy(quickstartCommand, $event)"> 复制 </n-button>
+        <span style="margin-right: 15px">
+          {{ getQuickStartText() }}
+        </span>
+        <n-button
+          type="primary"
+          v-clipboard="() => getQuickStartText()"
+          v-clipboard:success="() => sendSuccessMessage('复制成功')"
+          v-clipboard:error="() => sendErrorMessage('复制失败')"
+        >
+          复制
+        </n-button>
       </p>
     </n-tooltip>
     <!-- <template #footer>
@@ -135,17 +144,20 @@
         <n-space style="display: block">
           <n-card style="min-height: 350px">
             <div style="overflow-y: auto; height: 75px" class="node-title">
-              <h2 style="font-weight: 400">{{ item.proxy_name }}</h2>
-              <n-tag :bordered="false" type="success">ID: {{ item.id }}</n-tag>
+              <h2 style="font-weight: 400">
+                {{ item.proxy_name }}
+                <n-tag :bordered="false" type="success" style="transform: translateY(-2px)">
+                  ID: {{ item.id }}
+                </n-tag>
+              </h2>
             </div>
-            <br />
             <n-tag :bordered="false" type="success">
-              {{ item.proxy_type }}
+              {{ item.proxy_type.toUpperCase() }}
             </n-tag>
             <n-tag :bordered="false" type="info" v-if="serverList[item.node]">
               {{ serverList[item.node].name || '未知节点' }}
             </n-tag>
-            <n-tag :bordered="false" type="error" v-else> 未知节点</n-tag>
+            <n-tag :bordered="false" type="error" v-else> 未知节点 </n-tag>
             <template #footer>
               <div v-if="serverList[item.node]">
                 连接地址： <br />
@@ -158,7 +170,7 @@
             </template>
             <template #action>
               <n-space>
-                <p style="margin-top: 9px">操作：</p>
+                <!-- <p style="margin-top: 9px">操作：</p> -->
                 <!-- index: 在点击编辑按钮时，将当前隧道对应的数组索引传递到变量中以便调用 -->
                 <n-button
                   style="margin: 1px"
@@ -218,6 +230,9 @@
                   @click="launchProxyThroughApplication(item.id)"
                   >一键启动
                 </n-button>
+                <n-button style="margin: 1px" strong type="error" @click="forceDownProxy(item.id)"
+                  >强制下线
+                </n-button>
               </n-space>
             </template>
           </n-card>
@@ -228,14 +243,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDialog } from 'naive-ui'
-import clipboard from '@/utils/clipboard'
+// import clipboard from '@/utils/clipboard'
 import store from '@/utils/stores/store'
 import { sendErrorMessage, sendSuccessMessage } from '@/utils/message'
 import { sendErrorDialog, sendSuccessDialog, sendWarningDialog } from '@/utils/dialog'
 import downloadSoftPage from '../components/InstallCsApp.vue'
 import api from '@/api'
+import logger from '@/utils/logger'
+// import logger from '@/utils/logger'
 
 const show = ref(true)
 const showEditModal = ref(false)
@@ -244,7 +261,6 @@ const selectProxyID = ref(0)
 const indexOfProxies = ref(0)
 const dialog = useDialog()
 const linkAddr = ref('')
-const quickstartCommand = ref('')
 const editServerList = ref([])
 const bodyStyle = {
   width: '600px'
@@ -256,6 +272,10 @@ const segmented = {
 const editCheck = ref(true)
 const showDownloadPage = ref(false)
 
+function getQuickStartText() {
+  return `./frpc -u ${store.getters.get_frp_token} -p ${selectProxyID.value}`
+}
+
 // 隧道类型翻译
 function transtype(type) {
   let pt
@@ -291,7 +311,7 @@ function makeLinkAddr(id) {
   }
 }
 
-function launchProxyThroughApplication(id) {
+async function launchProxyThroughApplication(id) {
   dialog.success({
     title: '通知',
     content:
@@ -311,6 +331,31 @@ function launchProxyThroughApplication(id) {
   })
 }
 
+async function forceDownProxy(proxyId) {
+  dialog.warning({
+    title: '警告',
+    content: '确认要强制下线隧道吗？这将会使该隧道下线',
+    positiveText: '确认',
+    negativeText: '还是算了吧~',
+    onPositiveClick: async () => {
+      let rs
+      try {
+        rs = await api.v2.proxies.down(store.getters.get_username, proxyId)
+      } catch (e) {
+        logger.error(e)
+        sendErrorMessage(`请求强制下线隧道失败: ${e}`)
+      }
+      if (!rs) return
+      if (rs.status === 200) {
+        sendSuccessMessage('隧道已下线')
+      }
+    },
+    onMaskClick: () => {
+      sendSuccessMessage('你取消了操作！')
+    }
+  })
+}
+
 async function editProxy(proxyid) {
   if (editCheck.value === false) {
     sendWarningDialog('参数检查未通过，请检查信息格式是否正确！')
@@ -548,14 +593,6 @@ function deleteProxy(id) {
     }
   })
 }
-
-function buildQuickstartCommand() {
-  quickstartCommand.value = `./frpc -u ${store.getters.get_frp_token} -p ${selectProxyID.value}`
-}
-
-function copy(data, event) {
-  clipboard(data, event)
-}
 </script>
 
 <style scoped>