✨ 添加部分链接

.github/workflows/build.yml

@@ -59,6 +59,7 @@ jobs:
           releaseBody: |
             > [!TIP]
             > Windows 平台用户建议通过微软应用商店下载，macOS 平台仅在此发布，Linux 平台暂不支持。
+            > 如有使用问题可加入 [反馈QQ群](https://h5.qun.qq.com/s/3cgX0hJ4GA)
 
             <a href="https://apps.microsoft.com/store/detail/9NLBNNNBNSJN?launch=true&cid=BTMuli&mode=mini">
               <img src="https://get.microsoft.com/images/zh-cn%20dark.svg" alt="download"/>

src/components/app/t-appBadge.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="tab-box">
+    <img class="tab-icon" src="/icon.webp" alt="App" />
+    <div class="tab-info click" title="点击前往 Github Release" @click="toRelease()">
+      TeyvatGuide Beta
+    </div>
+    <div class="tab-info">v{{ versionApp }}.{{ buildTime === "" ? "Dev" : buildTime }}</div>
+    <div class="tab-links">
+      <div class="tab-link" @click="toGroup()" title="点击加入反馈群">
+        <img src="/platforms/other/qq.webp" alt="qq" />
+      </div>
+      <div class="tab-link" @click="toGithub()" title="点击查看仓库">
+        <img src="/platforms/other/github.webp" alt="github" />
+      </div>
+      <div class="tab-link" @click="toStore()" title="点击查看商店页面">
+        <img src="/platforms/other/microsoft-store.webp" alt="store" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { app } from "@tauri-apps/api";
+import { computed, onMounted, ref } from "vue";
+
+import { useAppStore } from "../../store/modules/app";
+
+const appStore = useAppStore();
+const versionApp = ref<string>();
+const buildTime = computed(() => appStore.buildTime);
+
+onMounted(async () => {
+  versionApp.value = await app.getVersion();
+});
+
+function toRelease() {
+  window.open("https://github.com/BTMuli/TeyvatGuide/releases/latest");
+}
+
+function toGroup() {
+  window.open("https://h5.qun.qq.com/s/3cgX0hJ4GA");
+}
+
+function toGithub() {
+  window.open("https://github.com/BTMuli/TeyvatGuide");
+}
+
+function toStore() {
+  window.open("https://www.microsoft.com/store/productId/9NLBNNNBNSJN");
+}
+</script>
+<style lang="css" scoped>
+.tab-box {
+  position: fixed;
+  top: 16px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background-image: linear-gradient(to bottom, rgb(19 84 122 / 80%), rgb(128 208 199 / 80%));
+  box-shadow: 0 0 10px var(--common-shadow-2);
+}
+
+.tab-icon {
+  width: 200px;
+  aspect-ratio: 1 / 1;
+}
+
+.tab-info {
+  color: var(--tgc-white-1);
+  font-family: var(--font-title);
+  font-size: 14px;
+  text-align: center;
+  text-shadow: 0 0 2px rgb(19 84 122 / 80%);
+}
+
+.tab-info.click {
+  color: var(--tgc-yellow-1);
+  cursor: pointer;
+}
+
+.tab-links {
+  display: flex;
+  backdrop-filter: blur(20px);
+  column-gap: 10px;
+}
+
+.tab-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.tab-link img {
+  width: 32px;
+  height: 32px;
+}
+</style>

src/pages/common/Config.vue

@@ -127,19 +127,7 @@
         :subtitle="appStore.dataPath.userDataDir"
       />
     </v-list>
-    <div class="config-app">
+    <TAppBadge />
-      <img class="config-app-icon" src="/icon.webp" alt="App" />
-      <div
-        class="config-app-info click"
-        title="点击前往 Github Release"
-        @click="toOuter('https://github.com/BTMuli/TeyvatGuide/releases/latest')"
-      >
-        TeyvatGuide Beta
-      </div>
-      <div class="config-app-info">
-        v{{ versionApp }}.{{ buildTime === "" ? "Dev" : buildTime }}
-      </div>
-    </div>
   </div>
 </template>
 
@@ -148,6 +136,7 @@ import { app, fs, invoke, os, process as TauriProcess } from "@tauri-apps/api";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
+import TAppBadge from "../../components/app/t-appBadge.vue";
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
 import ToGameLogin from "../../components/overlay/to-gameLogin.vue";
@@ -176,7 +165,6 @@ const isDevEnv = ref<boolean>(import.meta.env.MODE === "development");
 // About App
 const versionApp = ref<string>("");
 const versionTauri = ref<string>("");
-const buildTime = computed(() => appStore.buildTime);
 
 // About OS
 const osPlatform = ref<string>("");
@@ -671,36 +659,4 @@ function submitHome(): void {
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
-
-.config-app {
-  position: fixed;
-  top: 16px;
-  right: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border-radius: 10px;
-  background-image: linear-gradient(to bottom, rgb(19 84 122 / 80%), rgb(128 208 199 / 80%));
-  box-shadow: 0 0 10px var(--common-shadow-2);
-}
-
-.config-app-icon {
-  width: 200px;
-  aspect-ratio: 1 / 1;
-}
-
-.config-app-info {
-  color: var(--tgc-white-1);
-  font-family: var(--font-title);
-  font-size: 14px;
-  text-align: center;
-  text-shadow: 0 0 2px rgb(19 84 122 / 80%);
-}
-
-.config-app-info.click {
-  color: var(--tgc-yellow-1);
-  cursor: pointer;
-}
 </style>