[*]修复简易启动命令展示，优化样式，添加版本号信息

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8"/>
     <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>LoCyan Frp New Experience</title>
+    <title>LoCyanFrp 2.0 Dashboard</title>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-KWN2LXQ8RV"></script>
     <script>
         window.dataLayer = window.dataLayer || [];

package.json

@@ -1,7 +1,7 @@
 {
   "name": "locyanfrp",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -39,6 +39,7 @@
     "@vitejs/plugin-vue": "^3.2.0",
     "autoprefixer": "^10.4.17",
     "cssnano": "^5.1.15",
+    "git-revision-vite-plugin": "^0.0.11",
     "naive-ui": "^2.37.3",
     "prettier": "^2.8.8",
     "vfonts": "^0.0.3",

src/components/MainNav.vue

@@ -58,22 +58,30 @@
               </n-alert>
               <br />
               <br />
-              <a style="text-align: center">内网穿透联盟[CFU]识别码: <b>JRXHB5D4</b></a>
+              <a style="text-align: center">
+                <a target="_blank" href="https://内网穿透.中国/">
+                  <n-button text>
+                    内网穿透联盟[CFU]
+                  </n-button>
+                </a>
+                识别码: 
+                <b>JRXHB5D4</b>
+              </a>
               <br />
               <a style="text-align: center">Daiyangcheng 策划 / 运营 | DXCFTDE, Zhiyuan 协助</a>
               <br />
               <a style="text-align: center">特别鸣谢: 夏沫花火zzz🌙, 天宇网络, LiteCat</a>
               <br />
               <a style="text-align: center"
-                >LoCyanTeam 所有 | 本项目
-                <a target="_blank" href="https://github.com/LoCyan-Team/LoCyanFrpPanel" style="transform: translateY(8px);">
-                  <n-button text>
+                >LoCyanTeam 所有 | 
+                <a target="_blank" href="https://github.com/LoCyan-Team/LoCyanFrpPanel">
+                  <n-button text style="transform: translateY(4.5px)">
                     <template #icon>
                       <n-icon>
                         <git-alt />
                       </n-icon>
                     </template>
-                    开源
+                    {{ gitHash }}
                   </n-button>
                 </a>
               </a>
@@ -108,6 +116,8 @@ import UserInfo, { ChangeUserInfoShow } from './UserInfo.vue'
 import { get } from '../utils/request.js'
 import { GitAlt } from '@vicons/fa'
 
+const gitHash = GIT_COMMITHASH;
+
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)
 const avatar = ref('')

src/components/MainSideBar.vue

@@ -61,7 +61,7 @@ const menuOptions = [
   {
     path: '/dashboard',
     label: '仪表盘',
-    key: 'DashBoard',
+    key: 'Dashboard',
     icon: renderIcon(CompassSharp)
   },
   {

src/router/index.js

@@ -21,12 +21,12 @@ const routes = [
       },
       {
         path: '/dashboard',
-        name: 'DashBoard',
+        name: 'Dashboard',
         meta: {
           keepAlive: true,
           title: '仪表盘'
         },
-        component: () => import('../views/DashBoard.vue')
+        component: () => import('../views/Dashboard.vue')
       },
       {
         path: '/sign',
@@ -190,21 +190,21 @@ router.beforeEach((to, from, next) => {
   StartLoadingBar()
   if (to.name === 'Login') {
     if (store.getters.get_token) {
-      next({ name: 'DashBoard' })
+      next({ name: 'Dashboard' })
     }
     next()
     return
   }
   if (to.name === 'Register') {
     if (store.getters.get_token) {
-      next({ name: 'DashBoard' })
+      next({ name: 'Dashboard' })
     }
     next()
     return
   }
   if (to.name === 'ResetPassword') {
     if (store.getters.get_token) {
-      next({ name: 'DashBoard' })
+      next({ name: 'Dashboard' })
     }
     next()
     return

src/utils/stores/store.js

@@ -57,7 +57,7 @@ const store = new vuex.Store({
     set_user_info(state, userdata) {
       state.username = userdata.username
       state.email = userdata.email
-      state.frptoken = userdata.frp_token
+      state.frptoken = userdata.frp_token ?? userdata.token
       state.inbound = userdata.inbound
       state.outbound = userdata.outbound
       state.avatar = userdata.avatar

src/views/DashBoard.vue → src/views/Dashboard.vue

@@ -3,16 +3,8 @@
     <i class="twa twa-compass"></i>
     <n-text type="primary"> 仪表盘</n-text>
   </n-h1>
-  <n-modal
-    v-model:show="showads"
-    class="custom-card"
-    preset="card"
-    style="width: 600px"
-    title="通知"
-    size="huge"
-    :bordered="false"
-    :segmented="{ content: 'soft', footer: 'soft' }"
-  >
+  <n-modal v-model:show="showads" class="custom-card" preset="card" style="width: 600px" title="通知" size="huge"
+    :bordered="false" :segmented="{ content: 'soft', footer: 'soft' }">
     <n-p v-html="ads_content"></n-p>
   </n-modal>
   <template v-if="notice.contents">
@@ -43,28 +35,31 @@
     </n-grid-item> -->
     <n-grid-item span="0:3 600:1">
       <n-card title="个人信息" size="medium">
-        <a
-          >您好，尊敬的 <a id="username">{{ username }}</a></a
-        >
+        <a>您好，尊敬的 <a id="username">{{ username }}</a></a>
         <br />
         <a>您的邮箱为：{{ email }}</a>
         <br />
-        <div v-if="DontShowFrptoken">
-          <n-tag type="info" @click="changeShowFrptoken($event)">
-            <template #icon>
-              <n-icon :component="Key" />
-            </template>
-            查看访问密钥
-          </n-tag>
+        访问密钥：
+        <br />
+        <div>
+          <div v-if="DontShowFrptoken">
+            <n-tag type="info" @click="changeShowFrptoken($event)">
+              <template #icon>
+                <n-icon :component="Key" />
+              </template>
+              点击显示
+            </n-tag>
+          </div>
+          <template v-else>
+            <n-tag type="info">
+              <template #icon>
+                <n-icon :component="AngleRight" />
+              </template>
+              {{ frptoken }}
+            </n-tag>
+          </template>
         </div>
-        <template v-else>
-          <n-tag type="info">
-            <template #icon>
-              <n-icon :component="AngleRight" />
-            </template>
-            访问密钥: {{ frptoken }}
-          </n-tag>
-        </template>
+        请妥善保管访问密钥，一旦该密钥泄露，他人可通过此密钥访问账户部分信息！
         <br />
       </n-card>
       <br />
@@ -86,9 +81,7 @@
       <br />
       <n-alert title="关于高级功能" type="info">
         若需要 Frp 的高级功能, 你可以配置隧道后前往此处下载纯净版 Frp ：
-        <a href="https://github.com/LoCyan-Team/LoCyanFrpPureApp/releases" target="_blank"
-          >点击前往</a
-        >，<br />
+        <a href="https://github.com/LoCyan-Team/LoCyanFrpPureApp/releases" target="_blank">点击前往</a>，<br />
         下载适合自己系统架构的软件，随后即可自行配置。<br />
         注意：萌新使用此方法导致不会用的后果自行承担！<br />
       </n-alert>
@@ -123,19 +116,13 @@
       <n-card title="使用方法">
         <n-space vertical>
           <n-steps vertical :current="8">
-            <n-step
-              title="创建隧道"
-              description="点击隧道操作中的创建隧道，填写自己隧道的相应信息"
-            />
+            <n-step title="创建隧道" description="点击隧道操作中的创建隧道，填写自己隧道的相应信息" />
             <n-step title="软件下载" description="点击软件下载,下载最新版本" />
             <n-step title="启动客户端" description="启动客户端，登录自己的账号" />
             <n-step title="安装Frpc" description="前往 设置->FRPC->安装Frpc" />
             <n-step title="前往隧道列表" description="返回首页，点击左上角导航按钮，前往隧道列表" />
             <n-step title="启动隧道" description="找到要启动的隧道，点击启动即可" />
-            <n-step
-              title="启动成功"
-              description="点击左上角导航按钮，前往控制台，即可查看日志"
-            />
+            <n-step title="启动成功" description="点击左上角导航按钮，前往控制台，即可查看日志" />
             <n-step title="开始使用" description="好了，开始享受吧" />
           </n-steps>
         </n-space>
@@ -147,7 +134,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import clipboard from '..//utils/clipboard'
+import clipboard from '../utils/clipboard'
 import { get } from '../utils/request.js'
 import { AngleRight, Key } from '@vicons/fa'
 import store from '../utils/stores/store.js'
@@ -158,7 +145,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 = store.getters.get_frp_token
+const frptoken = ref(store.getters.get_frp_token)
 const notice = ref('')
 const ProxiesRef = ref(null)
 const DontShowFrptoken = ref(true)
@@ -184,7 +171,7 @@ notice_res.then((res) => {
 
 async function changeShowFrptoken(event) {
   DontShowFrptoken.value = !DontShowFrptoken.value
-  clipboard(frptoken, event)
+  clipboard(frptoken.value, event)
   setTimeout(() => {
     DontShowFrptoken.value = !DontShowFrptoken.value
   }, 3000)
@@ -259,5 +246,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
 }, 10000)
 </script>

src/views/Proxies.vue

@@ -106,7 +106,17 @@
     <p>本地端口：{{ Proxies[indexOfProxies].local_port }}</p>
     <p>远程端口：{{ Proxies[indexOfProxies].remote_port }}</p>
     <p>绑定域名：{{ Proxies[indexOfProxies].domain || '该隧道没有绑定域名' }}</p>
-    <p>简易启动命令：./frpc.exe -u {{ store.getters.get_frp_token }} -p {{ SelectProxyID }}</p>
+    <!-- 2024-06-03 13:01 Muska_Ami: 加一个隐藏防止意外泄露token -->
+    简易启动命令：
+    <n-tooltip placement="bottom" trigger="click">
+      <template #trigger>
+        <n-button> 点击显示/隐藏 </n-button>
+      </template>
+      <p>
+        ./frpc.exe -u {{ store.getters.get_frp_token }} -p {{ SelectProxyID }}
+        <!-- <n-button type="tertiary" @click="($event) => clipboard("./frpc.exe -u " + store.getters.get_frp_token.value + " -p " + SelectProxyID, event)"> 复制 </n-button> -->
+      </p>
+    </n-tooltip>
     <!-- <template #footer>
             </template> -->
   </n-modal>
@@ -216,6 +226,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useDialog } from 'naive-ui'
+// import clipboard from '../utils/clipboard'
 import store from '../utils/stores/store.js'
 import { get, post } from '../utils/request.js'
 import { sendErrorMessage, sendSuccessMessage } from '../utils/message'

vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import GitRevisionVitePlugin from 'git-revision-vite-plugin';
 import cssnanoPlugin from "cssnano";
 import autoprefixer from "autoprefixer";
 import AutoImport from 'unplugin-auto-import/vite'
@@ -9,6 +10,9 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 export default defineConfig({
     plugins: [
         vue(),
+        GitRevisionVitePlugin({
+            commitHashCommand: 'rev-parse --short HEAD'
+        }),
         AutoImport({
             imports: [
                 'vue',