[*] 添加了软件下载界面，修改了 a 标签的样式

LoCyan-Team · Sep 18, 2024 · 7bddd1b · 7bddd1b
1 parent 47c8704
commit 7bddd1b
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "locyanfrp",
   "private": true,
-  "version": "2.1",
+  "version": "2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,33 +19,33 @@
     "json": "^11.0.0",
     "marked": "^11.2.0",
     "nodejs-websocket": "^1.7.2",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "qs": "^6.13.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.12",
     "unplugin-auto-import": "^0.17.8",
     "unplugin-vue-components": "^0.26.0",
     "v-clipboard": "^3.0.0-next.1",
-    "vue": "^3.5.2",
+    "vue": "^3.5.6",
     "vue-axios": "^3.5.2",
     "vue-cookies": "^1.8.4",
     "vue-native-websocket": "^2.0.15",
     "vue-route": "^1.5.1",
-    "vue-router": "^4.4.3",
+    "vue-router": "^4.4.5",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
-    "@types/qs": "^6.9.15",
+    "@types/qs": "^6.9.16",
     "@vicons/fa": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "git-revision-vite-plugin": "^0.0.11",
     "naive-ui": "2.38.2",
     "prettier": "^3.3.3",
     "vfonts": "^0.1.0",
-    "vite": "^5.4.3",
-    "vite-plugin-vue-devtools": "^7.4.4"
+    "vite": "^5.4.6",
+    "vite-plugin-vue-devtools": "^7.4.5"
   }
-}
+}
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: #1db966;
+  transition: 0.3s;
+}
+a:hover {
+  color: #63e2b7;
+}
+
+ul {
+  margin-left: 1rem;
+}
diff --git a/src/twemoji-amazing.css → src/assets/twemoji-amazing.css b/src/twemoji-amazing.css → src/assets/twemoji-amazing.css
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/MainSideBar.vue b/src/components/MainSideBar.vue
@@ -100,18 +100,18 @@ const menuOptions = [
     key: 'control-proxy',
     icon: renderIcon(PaperPlane),
     children: [
-      {
-        path: '/proxies/add',
-        label: '添加隧道',
-        key: 'AddProxies',
-        icon: renderIcon(Add)
-      },
       {
         path: '/proxies',
         label: '隧道列表',
         key: 'Proxies',
         icon: renderIcon(List)
       },
+      {
+        path: '/proxies/add',
+        label: '添加隧道',
+        key: 'AddProxies',
+        icon: renderIcon(Add)
+      },
       {
         path: '/proxies/config',
         label: '配置文件',
@@ -171,16 +171,9 @@ const menuOptions = [
       //   icon: renderIcon(CloudDownloadOutline),
       // },
       {
-        label: () =>
-          h(
-            'a',
-            {
-              href: 'https://nyalcf.1l1.icu',
-              target: '_blank'
-            },
-            '软件下载'
-          ),
-        key: 'software_download_backup',
+        path: '/other/software',
+        label: '软件下载',
+        key: 'SoftwareDownload',
         icon: renderIcon(CloudDownloadOutline)
       },
       {

diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
-import './style.css'
-import './twemoji-amazing.css'
+import '@/assets/style.css'
+import '@/assets/twemoji-amazing.css'
 import App from './App.vue'
 import message from '@components/Message.vue'
 import loadingbar from '@components/LoadingBar.vue'

diff --git a/src/router/index.js b/src/router/index.js
@@ -158,6 +158,16 @@ const routes = [
         },
         component: () => import('@views/IcpCheckView.vue')
       },
+      {
+        path: '/other/software',
+        name: 'Software',
+        meta: {
+          title: '软件下载',
+          keepAlive: true,
+          needLogin: true
+        },
+        component: () => import('@views/other/SoftwareView.vue')
+      },
       {
         path: '/:pathMatch(.*)*',
         name: 'NotFound',

diff --git a/src/style.css b/src/style.css
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
@@ -44,11 +44,9 @@
     </n-grid-item>-->
     <n-grid-item span="0:3 600:1">
       <n-card title="个人信息" size="medium">
-        <span
-          >您好，尊敬的 <a id="username">{{ username }}</a></span
-        >
+        <span>您好，尊敬的 {{ username }}</span>
         <br />
-        <a>您的邮箱为：{{ email }}</a>
+        <span>您的邮箱为：{{ email }}</span>
         <br />
         访问密钥：
         <br />
@@ -105,21 +103,21 @@
             <template #suffix> 条</template>
           </n-statistic>
           <n-statistic label="速度限制" tabular-nums>
-            <a>{{ outbound }}<br />{{ inbound }}</a>
+            <span>{{ outbound }}<br />{{ inbound }}</span>
           </n-statistic>
         </n-space>
         <!-- API: https://api-v2.locyanfrp.cn/api/v2/users/reset/traffic -->
         <!-- 需要传入Params: username -->
-        <a>流量太多, 用不完?</a
-        ><n-button @click="resetTraffic" style="margin-left: 20px; margin-top: 10px"
-          >重置流量</n-button
-        >
+        <span>流量太多, 用不完?</span>
+        <n-button @click="resetTraffic" style="margin-left: 20px; margin-top: 10px">
+          重置流量
+        </n-button>
       </n-card>
       <br />
       <n-alert title="关于高级功能" type="info">
         若需要 Frp 的高级功能, 你可以配置隧道后前往此处下载纯净版 Frp ：
-        <a href="https://github.com/LoCyan-Team/LoCyanFrpPureApp/releases" target="_blank"
-          >点击前往</a
+        <a href="https://github.com/LoCyan-Team/LoCyanFrpPureApp/releases" target="_blank">
+          点击前往 </a
         >，<br />
         下载适合自己系统架构的软件，随后即可自行配置。<br />
         注意：萌新使用此方法导致不会用的后果自行承担！<br />
@@ -140,8 +138,8 @@
         发卡网等有违中国法律的站点或服务。一经发现，
         我们有不在事先通知用户的情况下删除隧道、封停账户、将信息上报公安的权力，
         请不要试图挑战我们的底线；<br />
-        6. 我们允许建设图床、网盘等服务，但其必须建设在美国千兆服务器上，
-        违规的隧道将会被强制迁移，这是为了保障大部分用户的体验，谢谢配合！
+        6. 我们允许建设图床、网盘等服务，但其必须建设在允许大流量业务的节点上，
+        违规的隧道将会被封禁，这是为了保障大部分用户的体验，谢谢配合！
         若您违规使用，可能需要支付相应的流量费用！<br />
       </n-alert>
     </n-grid-item>
@@ -178,7 +176,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 // import clipboard from '@/utils/clipboard'
-import { get } from '@/utils/request'
 import { AngleRight, Key } from '@vicons/fa'
 import userData from '@/utils/stores/userData/store'
 import { marked } from 'marked'
@@ -253,10 +250,10 @@ onMounted(async () => {
     boardcast_html.value =
       marked(res.data.broadcast) +
       '<style>\n' +
-      '[href^="https"], [href^="http"]{\n' +
-      '  color: #63E2B7;\n' +
-      '}\n' +
-      '\n' +
+      // '[href^="https"], [href^="http"]{\n' +
+      // '  color: #63E2B7;\n' +
+      // '}\n' +
+      // '\n' +
       'p {\n' +
       '  padding: 2px;\n' +
       '}\n' +

diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
@@ -5,7 +5,7 @@ import userData from '@/utils/stores/userData/store'
 
 <template>
   <div class="flex-center outbox">
-    <h2>404 :&lpar;</h2>
+    <n-h2>404 :&lpar;</n-h2>
     <p>我们没有找到你请求的页面，似乎你来到了没有任何东西的地方..?</p>
     <n-button
       style="margin-top: 10px"

diff --git a/src/views/SoftwareDownloadView.vue b/src/views/SoftwareDownloadView.vue
diff --git a/src/views/other/SoftwareView.vue b/src/views/other/SoftwareView.vue
@@ -0,0 +1,60 @@
+<template>
+  <n-h1 prefix="bar" style="margin-top: 30px">
+    <i class="twa twa-flashlight"></i>
+    <n-text type="primary"> 软件下载</n-text>
+  </n-h1>
+  <n-alert title="说明" type="info">
+    若您并不知道 Frpc 到底是干什么用的，请不要直接下载它。
+  </n-alert>
+  <n-space vertical>
+    <n-grid cols="1" item-responsive>
+      <n-grid-item class="item" span="1">
+        <n-card title="Nya LoCyanFrp! 乐青映射启动器" size="medium">
+          <h3>系统及架构支持</h3>
+          <p>
+            <span>Windows (至少需要 Windows 10), Linux, macOS</span>
+            <br />
+            <span>架构支持</span>
+          </p>
+          <ul>
+            <li>GUI: x86_84</li>
+            <li>CLI: x86_84, arm64 (macOS)</li>
+          </ul>
+          <h3>下载</h3>
+          <p>
+            <a href="https://nyalcf.1l1.icu" target="_blank"> Nya LoCyanFrp! 官方网站 </a>
+            <br />
+            <a
+              href="https://mirrors.locyan.cn/github-release/Muska-Ami/NyaLCF/LatestRelease/"
+              target="_blank"
+            >
+              LoCyan Mirrors 镜像站
+            </a>
+            <br />
+            <a href="https://github.com/Muska-Ami/NyaLCF/releases" target="_blank"> GitHub </a>
+          </p>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item class="item" span="1">
+        <n-card title="纯净版客户端 (Frpc)" size="medium">
+          <a
+            href="https://mirrors.locyan.cn/github-release/LoCyan-Team/LoCyanFrpPureApp/LatestRelease/"
+            target="_blank"
+          >
+            LoCyan Mirrors 镜像站
+          </a>
+          <br />
+          <a href="https://github.com/LoCyan-Team/LoCyanFrpPureApp/releases" target="_blank">
+            GitHub
+          </a>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </n-space>
+</template>
+
+<style>
+.item {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/proxies/ProxiesView.vue b/src/views/proxies/ProxiesView.vue
@@ -122,7 +122,7 @@
         <n-button
           secondary
           type="primary"
-          v-clipboard="quickStartCommand"
+          v-clipboard="() => quickStartCommand"
           v-clipboard:success="() => sendSuccessMessage('复制成功')"
           v-clipboard:error="() => sendErrorMessage('复制失败')"
         >