♻️ 封装 share 方法

src/pages/User/Characters.vue

@@ -1,15 +1,26 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <div class="uc-top">
-    <div class="uc-top-title">
-      我的角色
+  <div class="uc-box">
+    <div class="uc-top">
+      <div class="uc-top-title">
+        {{ user.nickname }} UID：{{ user.gameUid }}
+      </div>
+      <v-btn variant="outlined" class="uc-top-btn" @click="refresh()">
+        <template #prepend>
+          <v-icon>mdi-refresh</v-icon>
+        </template>
+        更新数据
+      </v-btn>
+      <v-btn variant="outlined" class="uc-top-btn" @click="shareRoles()">
+        <template #prepend>
+          <v-icon>mdi-share</v-icon>
+        </template>
+        分享
+      </v-btn>
+    </div>
+    <div class="uc-grid">
+      <TUserAvatar v-for="avatar in roleList" :model-value="avatar" />
     </div>
-    <v-btn variant="outlined" @click="refresh">
-      更新数据
-    </v-btn>
-  </div>
-  <div class="uc-grid">
-    <TUserAvatar v-for="avatar in roleList" :model-value="avatar" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -22,10 +33,9 @@ import { fs } from "@tauri-apps/api";
 // store
 import { useAppStore } from "../../store/modules/app";
 import { useUserStore } from "../../store/modules/user";
-// request
-import TGRequest from "../../web/request/TGRequest";
 // utils
-import TGSqlite from "../../plugins/Sqlite";
+import TGRequest from "../../web/request/TGRequest";
+import { generateShareImg } from "../../utils/TGShare";
 
 // store
 const appStore = useAppStore();
@@ -37,21 +47,18 @@ const loadingTitle = ref("");
 
 // data
 const roleList = ref([] as TGApp.Game.Character.ListItem[]);
-const characterCookie = ref({} as TGApp.BBS.Constant.CookieGroup4);
+const characterCookie = computed(() => userStore.getCookieGroup4());
 const user = computed(() => userStore.getCurAccount());
 const filePath = computed(() => `${appStore.dataPath.userDataDir}/roleList.json`);
 
 onMounted(async () => {
   loadingTitle.value = "正在获取角色数据";
   loading.value = true;
-  const curUser = await TGSqlite.getCurAccount();
-  if (curUser) {
-    user.value = curUser;
-  }
-  characterCookie.value = userStore.getCookieGroup4();
-  const fileGet = await fs.readTextFile(filePath.value);
-  if (fileGet) {
+  try {
+    const fileGet = await fs.readTextFile(filePath.value);
     roleList.value = JSON.parse(fileGet);
+  } catch (error) {
+    console.log(error);
   }
   loading.value = false;
 });
@@ -71,23 +78,43 @@ async function refresh () {
   }
   loading.value = false;
 }
+
+async function shareRoles () {
+  const rolesBox = document.querySelector(".uc-box") as HTMLElement;
+  const fileName = `角色列表-${user.value.gameUid}-${Math.floor(Date.now())}.png`;
+  await generateShareImg(fileName, rolesBox);
+}
 </script>
 <style lang="css" scoped>
+.uc-box {
+  width: 100%;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 0 10px var(--common-bg-4);
+}
+
 .uc-top {
-  background: rgb(0 0 0 / 20%);
   width: 100%;
   height: 50px;
   border-radius: 5px;
   padding: 10px;
   display: flex;
   align-items: center;
-  font-family: Genshin, sans-serif;
-  font-size: 20px;
-  color: #faf7e8;
 }
 
 .uc-top-title {
+  font-family: var(--font-title);
+  font-size: 20px;
   margin-right: 10px;
+  color: var(--common-text);
+}
+
+.uc-top-btn {
+  font-family: var(--font-text);
+  border-radius: 5px;
+  background: var(--common-bg-2);
+  color: var(--common-color-white);
+  margin-left: 15px;
 }
 
 .uc-grid {