From ab2323f421981a746e2f788ce91b5b10c2dad60c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Wed, 4 Dec 2024 17:01:43 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=A2=9E=E5=8A=A0=E6=8D=90?=
 =?UTF-8?q?=E8=B5=A0=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconifyIcon/src/offlineIcon.ts |  7 ++++-
 src/layout/compoenets/LeftMenu.vue            | 30 ++++++++++++++-----
 src/styles/layout.scss                        | 13 ++++++--
 src/views/about/index.vue                     | 24 +++++++++++++++
 4 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/components/IconifyIcon/src/offlineIcon.ts b/src/components/IconifyIcon/src/offlineIcon.ts
index 323aeea..d656bc5 100644
--- a/src/components/IconifyIcon/src/offlineIcon.ts
+++ b/src/components/IconifyIcon/src/offlineIcon.ts
@@ -31,6 +31,9 @@ import switchAccessOutlineRounded from "@iconify-icons/material-symbols/switch-a
 import switchAccessRounded from "@iconify-icons/material-symbols/switch-access-rounded";
 import chargerRounded from "@iconify-icons/material-symbols/charger-rounded";
 import fileOpenRounded from "@iconify-icons/material-symbols/file-open-rounded";
+import attachMoneyRounded from "@iconify-icons/material-symbols/attach-money-rounded";
+import volunteerActivismSharp from "@iconify-icons/material-symbols/volunteer-activism-sharp";
+import description from "@iconify-icons/material-symbols/description";
 
 addIcon("cloud", Cloud);
 addIcon("rocket-launch-rounded", RocketLaunchRounded);
@@ -62,5 +65,7 @@ addIcon("deviceReset", deviceReset);
 addIcon("switchAccessOutlineRounded", switchAccessOutlineRounded);
 addIcon("switchAccessRounded", switchAccessRounded);
 addIcon("file-open-rounded", fileOpenRounded);
-
+addIcon("attach-money-rounded", attachMoneyRounded);
+addIcon("volunteer-activism-sharp", volunteerActivismSharp);
+addIcon("description", description);
 
diff --git a/src/layout/compoenets/LeftMenu.vue b/src/layout/compoenets/LeftMenu.vue
index 448e096..3b3a5c8 100644
--- a/src/layout/compoenets/LeftMenu.vue
+++ b/src/layout/compoenets/LeftMenu.vue
@@ -118,14 +118,28 @@ onMounted(() => {
         ></IconifyIconOffline>
       </li>
     </ul>
-    <div
-      class="version mb-2 animate__animated"
-      @click="handleOpenGitHubReleases"
-      :data-step="guideSteps.Version?.step"
-      :data-intro="guideSteps.Version?.intro"
-      data-position="top"
-    >
-      {{ pkg.version }}
+    <div class="menu-footer mb-2">
+<!--      <div-->
+<!--        class="menu animate__animated"-->
+<!--        @click="handleOpenGitHubReleases"-->
+<!--        :data-step="guideSteps.Version?.step"-->
+<!--        :data-intro="guideSteps.Version?.intro"-->
+<!--        data-position="top"-->
+<!--      >-->
+<!--        <IconifyIconOffline-->
+<!--          class="animate__animated"-->
+<!--          icon="attach-money-rounded"-->
+<!--        ></IconifyIconOffline>-->
+<!--      </div>-->
+      <div
+        class="version animate__animated"
+        @click="handleOpenGitHubReleases"
+        :data-step="guideSteps.Version?.step"
+        :data-intro="guideSteps.Version?.intro"
+        data-position="top"
+      >
+        {{ pkg.version }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 1d11793..0d50b68 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -54,11 +54,18 @@ $danger-color: #F56C6C;
   display: flex; /* 设置为 flexbox */
   flex-direction: column; /* 纵向排列子元素 */
 
+  .menu-footer {
+    margin-top: auto;
+
+  }
+
   .version {
     height: 40px;
+    width: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     color: $primary-color;
-    text-align: center;
-    margin-top: auto;
     font-weight: bold;
     font-size: 14px;
     cursor: pointer;
@@ -68,7 +75,7 @@ $danger-color: #F56C6C;
     animation: heartBeat 1s;
   }
 
-  .menu-container {
+  .menu-container, .menu-footer {
 
     .menu {
       display: flex;
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 5944e06..6a244ab 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -44,6 +44,22 @@ const handleOpenGitHub = () => {
   ipcRenderer.send("common.openUrl", "https://github.com/luckjiawei/frpc-desktop")
 }
 
+/**
+ * 打开捐赠界面
+ */
+const handleOpenDonate = () => {
+  ipcRenderer.send("common.openUrl", "https://jwinks.com/donate")
+}
+
+
+/**
+ * 打开文档
+ */
+const handleOpenDoc = () => {
+  ipcRenderer.send("common.openUrl", "https://jwinks.com/p/frp")
+}
+
+
 /**
  * 获取最后一个版本
  */
@@ -124,6 +140,14 @@ defineComponent({
           </p>
         </div>
         <div class="mt-[12px]">
+          <el-button plain type="success" @click="handleOpenDoc">
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="description"/>
+            使用教程
+          </el-button>
+          <el-button plain type="success" @click="handleOpenDonate">
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="volunteer-activism-sharp"/>
+            捐赠名单
+          </el-button>
           <el-button plain type="primary" @click="handleOpenGitHub">
             <Icon class="cursor-pointer mr-2" icon="logos:github-icon"/>
             仓库地址