✨ 完成战绩分享

src/components/userRecord/tur-home-sub.vue

@@ -2,7 +2,7 @@
   <div
     class="tur-hs-box"
     :style="{
-      backgroundImage: 'url(' + data.bg + ')',
+      backgroundImage: 'url(' + getUrl.bg + ')',
       backgroundSize: 'cover',
     }"
   >
@@ -11,7 +11,7 @@
     </div>
     <div class="tur-hs-title">
       <!-- canvas -->
-      <img :src="data.comfortIcon" alt="comfort">
+      <img :src="getUrl.icon" alt="comfort">
       {{ data.comfortName }}
     </div>
     <div class="tur-hs-text-grid">
@@ -35,11 +35,25 @@
   </div>
 </template>
 <script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+// utils
+import { saveImgLocal } from "../../utils/saveImg";
+
 interface TurHomeSubProps {
   data: TGApp.Sqlite.Record.Home;
 }
 
 const props = defineProps<TurHomeSubProps>();
+const getUrl = ref({
+  icon: "",
+  bg: "",
+});
+
+onMounted(async () => {
+  getUrl.value.icon = await saveImgLocal(props.data.comfortIcon);
+  getUrl.value.bg = await saveImgLocal(props.data.bg);
+});
 </script>
 <style lang="css" scoped>
 .tur-hs-box {

src/components/userRecord/tur-world-sub.vue

@@ -2,14 +2,14 @@
   <div
     class="tur-ws-box"
     :style="{
-      backgroundImage: 'url(' + data.bg + ')',
+      backgroundImage: 'url(' + getUrl.bg + ')',
       backgroundPositionX: 'right',
       backgroundSize: 'auto 100%',
       backgroundRepeat: 'no-repeat'
     }"
   >
     <div class="tur-ws-icon">
-      <img :src="iconShow" alt="icon">
+      <img :src="getUrl.icon" alt="icon">
     </div>
     <div class="tur-ws-content">
       <div class="tur-ws-title">
@@ -26,7 +26,7 @@
         <span>级</span>
       </div>
       <div v-if="data.offerings.length>0" class="tur-ws-sub">
-        <img :src="data.offerings[0].icon" alt="offer">
+        <img :src="getUrl.offer" alt="offer">
         <span>{{ data.offerings[0].name }}等级：</span>
         <span>{{ data.offerings[0].level }}</span>
         <span>级</span>
@@ -39,6 +39,8 @@
 import { onMounted, ref } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
+// utils
+import { saveImgLocal } from "../../utils/saveImg";
 
 interface TurWorldSubProps {
   theme: "default" | "dark",
@@ -46,20 +48,34 @@ interface TurWorldSubProps {
 }
 
 const props = defineProps<TurWorldSubProps>();
-const iconShow = ref("");
+const getUrl = ref({
+  bg: "",
+  icon: "",
+  iconLight: "",
+  iconDark: "",
+  offer: "",
+});
 
 onMounted(async () => {
-  props.theme === "dark" ? iconShow.value = props.data.iconLight : iconShow.value = props.data.iconDark;
   await listenOnTheme();
+  getUrl.value.bg = await saveImgLocal(props.data.bg);
+  getUrl.value.iconLight = await saveImgLocal(props.data.iconLight);
+  getUrl.value.iconDark = await saveImgLocal(props.data.iconDark);
+  if (props.data.offerings.length > 0) {
+    getUrl.value.offer = await saveImgLocal(props.data.offerings[0].icon);
+  }
+  props.theme === "dark"
+    ? getUrl.value.icon = getUrl.value.iconLight
+    : getUrl.value.icon = getUrl.value.iconDark;
 });
 
 async function listenOnTheme () {
   await event.listen("readTheme", (e) => {
     const theme = e.payload as string;
     if (theme === "dark") {
-      iconShow.value = props.data.iconLight;
+      getUrl.value.icon = getUrl.value.iconLight;
     } else {
-      iconShow.value = props.data.iconDark;
+      getUrl.value.icon = getUrl.value.iconDark;
     }
   });
 }

src/pages/User/Record.vue

@@ -12,6 +12,12 @@
         </template>
         更新数据
       </v-btn>
+      <v-btn variant="outlined" class="ur-top-btn" @click="shareRecord()">
+        <template #prepend>
+          <v-icon>mdi-share</v-icon>
+        </template>
+        分享
+      </v-btn>
     </div>
     <div class="ur-sub-title">
       <img src="/src/assets/icons/arrow-right.svg" alt="overview">
@@ -48,6 +54,8 @@ 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";
 
 // store
 const userStore = useUserStore();
@@ -98,6 +106,39 @@ function getTitle () {
   const role = JSON.parse(recordData.value.role) as TGApp.Sqlite.Record.Role;
   return `${role.nickname} Lv.${role.level}【${recordData.value.uid}】`;
 }
+
+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);
+}
+
+function getTheme () {
+  let theme = localStorage.getItem("theme");
+  if (theme) {
+    theme = JSON.parse(theme).theme;
+  }
+  return theme || "default";
+}
 </script>
 <style lang="css" scoped>
 .ur-box {
@@ -130,7 +171,7 @@ function getTitle () {
   background: var(--common-bg-2);
   color: var(--common-color-white);
   text-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  margin-left: auto;
+  margin-left: 15px;
 }
 
 .ur-sub-title {