♻️ 封装 share 方法

src/pages/User/Abyss.vue

@@ -69,8 +69,7 @@ import { useUserStore } from "../../store/modules/user";
 // utils
 import TGRequest from "../../web/request/TGRequest";
 import TGSqlite from "../../plugins/Sqlite";
-import html2canvas from "html2canvas";
-import { saveCanvasImg } from "../../utils/saveImg";
+import { generateShareImg } from "../../utils/TGShare";
 
 // store
 const userStore = useUserStore();
@@ -135,40 +134,8 @@ function getAbyssRef (el: HTMLElement): void {
 }
 
 async function shareAbyss (): Promise<void> {
-  const canvas = document.createElement("canvas");
-  // 获取 dom 宽高
-  const width = abyssRef.value.scrollWidth + 50;
-  const height = abyssRef.value.scrollHeight + 50;
-  // 设置 canvas 宽高
-  canvas.width = width * 1.2;
-  canvas.height = height * 1.2;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  // 图片压缩
-  canvas.getContext("2d")!.scale(1.2, 1.2);
-  // 设置 html2canvas 参数
-  const options = {
-    backgroundColor: getTheme() === "dark" ? "#2c2c2c" : "#ece5d8",
-    windowHeight: height,
-    width,
-    height,
-    useCORS: true,
-    canvas,
-    // 因为有放大，所以需要计算偏移量
-    x: -20,
-    y: -25,
-  };
-  const canvasData = await html2canvas(abyssRef.value, options);
   const fileName = `深渊${curAbyss.value.id}-${user.value.gameUid}-${Math.floor(Date.now() / 1000)}.png`;
-  await saveCanvasImg(canvasData, fileName);
-}
-
-function getTheme () {
-  let theme = localStorage.getItem("theme");
-  if (theme) {
-    theme = JSON.parse(theme).theme;
-  }
-  return theme || "default";
+  await generateShareImg(fileName, abyssRef.value);
 }
 </script>
 <style lang="css" scoped>

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 {

src/pages/User/Record.vue

@@ -54,8 +54,7 @@ import { useUserStore } from "../../store/modules/user";
 // utils
 import TGRequest from "../../web/request/TGRequest";
 import TGSqlite from "../../plugins/Sqlite";
-import html2canvas from "html2canvas";
-import { saveCanvasImg } from "../../utils/saveImg";
+import { generateShareImg } from "../../utils/TGShare";
 
 // store
 const userStore = useUserStore();
@@ -74,7 +73,10 @@ onMounted(async () => {
   loadingTitle.value = "正在加载战绩数据";
   loading.value = true;
   await initUserRecordData();
-  loading.value = false;
+  // 保证图片加载完毕
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
 });
 
 async function initUserRecordData () {
@@ -109,27 +111,8 @@ function getTitle () {
 
 async function shareRecord () {
   const recordBox = document.querySelector(".ur-box") as HTMLElement;
-  const canvas = document.createElement("canvas");
-  const width = recordBox.clientWidth + 50;
-  const height = recordBox.offsetHeight + 50;
-  canvas.width = width * 1.2;
-  canvas.height = height * 1.2;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  canvas.getContext("2d")!.scale(1.2, 1.2);
-  const options = {
-    backgroundColor: getTheme() === "dark" ? "#2c2c2c" : "#ece5d8",
-    windowHeight: height,
-    width,
-    height,
-    useCORS: true,
-    canvas,
-    x: -10,
-    y: -10,
-  };
   const fileName = `战绩-${user.value.gameUid}-${Math.floor(Date.now() / 1000)}`;
-  const canvasData = await html2canvas(recordBox, options);
-  await saveCanvasImg(canvasData, fileName);
+  await generateShareImg(fileName, recordBox);
 }
 
 function getTheme () {