💩 分享图生成错误

src/components/devCharacter/duc-detail-olb.vue

@@ -14,15 +14,30 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { onMounted, onUpdated, reactive } from "vue";
+
+import { saveImgLocal } from "../../utils/TGShare";
 
 interface DucDetailOlbProps {
   modelValue: TGApp.Sqlite.Character.RoleConstellation[];
 }
 
 const props = defineProps<DucDetailOlbProps>();
-const constellations = computed(() => {
-  return props.modelValue ?? [];
+let constellations = reactive<TGApp.Sqlite.Character.RoleConstellation[]>([]);
+
+function loadData() {
+  constellations = props.modelValue;
+  constellations.map(
+    async (constellation) => (constellation.icon = await saveImgLocal(constellation.icon)),
+  );
+}
+
+onMounted(() => {
+  loadData();
+});
+
+onUpdated(() => {
+  loadData();
 });
 </script>
 <style>

src/components/devCharacter/duc-detail-olt.vue

@@ -41,7 +41,7 @@ const getTitle = computed(() => {
     }, "");
   }
 });
-const boxData = computed<TItemBoxData>(() => {
+const boxData = computed(() => {
   if (props.mode === "avatar") {
     return {
       bg: `/icon/bg/${props.data.star}-Star.webp`,

src/components/devCharacter/duc-detail-ort.vue

@@ -1,21 +1,37 @@
 <template>
   <div class="duc-dort-box">
     <div :title="talent.name" v-for="talent in talents" :key="talent.pos" class="duc-dort-item">
+      <span>{{ talent.name }}</span>
       <img :src="talent.icon" alt="talent" />
       <span>Lv.{{ talent.level }}</span>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { onMounted, onUpdated, reactive } from "vue";
+
+import { saveImgLocal } from "../../utils/TGShare";
 
 interface DucDetailOrtProps {
   modelValue: TGApp.Sqlite.Character.RoleTalent[];
 }
 
 const props = defineProps<DucDetailOrtProps>();
-const talents = computed(() => {
-  return props.modelValue ?? [];
+let talents = reactive<TGApp.Sqlite.Character.RoleTalent[]>([]);
+
+async function loadData(): Promise<void> {
+  talents = props.modelValue;
+  for (const talent of talents) {
+    talent.icon = await saveImgLocal(talent.icon);
+  }
+}
+
+onMounted(async () => {
+  await loadData();
+});
+
+onUpdated(async () => {
+  await loadData();
 });
 </script>
 <style lang="css" scoped>
@@ -27,6 +43,7 @@ const talents = computed(() => {
 
 .duc-dort-item {
   display: flex;
+  justify-content: flex-end;
   column-gap: 10px;
 }
 
@@ -47,4 +64,9 @@ const talents = computed(() => {
   font-size: 16px;
   text-shadow: 0 0 5px rgba(0 0 0/40%);
 }
+
+.duc-dort-item :nth-last-child(1) {
+  width: 48px;
+  justify-content: flex-start;
+}
 </style>

src/components/devCharacter/duc-detail-overlay.vue

@@ -13,6 +13,17 @@
         <div class="duc-doc-lt">
           <DucDetailOlt :data="props.dataVal" mode="avatar" />
           <DucDetailOlt :data="JSON.parse(props.dataVal.weapon)" mode="weapon" />
+          <!-- todo cors -->
+          <v-btn
+            class="duc-doc-btn"
+            @click="share"
+            variant="outlined"
+            :loading="loading"
+            data-html2canvas-ignore
+          >
+            <v-icon>mdi-share-variant</v-icon>
+            <span>分享</span>
+          </v-btn>
         </div>
         <!-- 右侧天赋 -->
         <div class="duc-doc-rt">
@@ -37,6 +48,8 @@ import DucDetailOlb from "./duc-detail-olb.vue";
 import DucDetailOlt from "./duc-detail-olt.vue";
 import DucDetailOrt from "./duc-detail-ort.vue";
 import TGSqlite from "../../plugins/Sqlite";
+import { generateShareImg } from "../../utils/TGShare";
+import showSnackbar from "../func/snackbar";
 import TOverlay from "../main/t-overlay.vue";
 
 interface DucDetailOverlayProps {
@@ -61,6 +74,8 @@ const visible = computed({
 
 // 渲染数据
 const nameCard = ref<string | false>(false);
+// 加载
+const loading = ref<boolean>(false);
 
 function onOverlayCancel() {
   visible.value = false;
@@ -84,7 +99,14 @@ async function loadData(): Promise<void> {
     const role = await TGSqlite.getAppCharacter(props.dataVal.cid);
     nameCard.value = `/source/nameCard/profile/${role.nameCard}.webp`;
   }
-  // resetData();
+}
+
+async function share(): Promise<void> {
+  const detailBox = <HTMLElement>document.querySelector(".duc-do-container");
+  const fileName = `【角色详情】-${props.dataVal.name}`;
+  loading.value = true;
+  await generateShareImg(fileName, detailBox);
+  loading.value = false;
 }
 </script>
 <style lang="css" scoped>