✨ 增加捐赠等

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);
 

src/layout/compoenets/LeftMenu.vue

@@ -118,14 +118,28 @@ onMounted(() => {
         ></IconifyIconOffline>
       </li>
     </ul>
-    <div
+    <div class="menu-footer mb-2">
-      class="version mb-2 animate__animated"
+<!--      <div-->
-      @click="handleOpenGitHubReleases"
+<!--        class="menu animate__animated"-->
-      :data-step="guideSteps.Version?.step"
+<!--        @click="handleOpenGitHubReleases"-->
-      :data-intro="guideSteps.Version?.intro"
+<!--        :data-step="guideSteps.Version?.step"-->
-      data-position="top"
+<!--        :data-intro="guideSteps.Version?.intro"-->
-    >
+<!--        data-position="top"-->
-      {{ pkg.version }}
+<!--      >-->
+<!--        <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>

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;

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"/>
             仓库地址