🐛 修复分享图生成错误

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

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUpdated, reactive } from "vue";
+import { onMounted, onUpdated, ref } from "vue";
 
 import { saveImgLocal } from "../../utils/TGShare";
 
@@ -23,21 +23,23 @@ interface DucDetailOlbProps {
 }
 
 const props = defineProps<DucDetailOlbProps>();
-let constellations = reactive<TGApp.Sqlite.Character.RoleConstellation[]>([]);
+const constellations = ref<TGApp.Sqlite.Character.RoleConstellation[]>([]);
 
-function loadData() {
-  constellations = props.modelValue;
-  constellations.map(
-    async (constellation) => (constellation.icon = await saveImgLocal(constellation.icon)),
-  );
+async function loadData() {
+  const tempConstellations = props.modelValue;
+  for (const constellation of tempConstellations) {
+    if (constellation.icon.startsWith("blob:")) return;
+    constellation.icon = await saveImgLocal(constellation.icon);
+  }
+  constellations.value = tempConstellations;
 }
 
-onMounted(() => {
-  loadData();
+onMounted(async () => {
+  await loadData();
 });
 
-onUpdated(() => {
-  loadData();
+onUpdated(async () => {
+  await loadData();
 });
 </script>
 <style>

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

@@ -30,7 +30,6 @@ const getTitle = computed(() => {
   if (props.mode === "avatar") {
     return `${props.data.name}`;
   } else {
-    // 按照长度折行，一行最多显示 10 个字
     const descriptionList = props.data.description.split("");
     return descriptionList.reduce((prev: string, cur: string, index: number) => {
       if (index % 10 === 0) {
@@ -41,7 +40,7 @@ const getTitle = computed(() => {
     }, "");
   }
 });
-const boxData = computed(() => {
+const boxData = computed<TItemBoxData>(() => {
   if (props.mode === "avatar") {
     return {
       bg: `/icon/bg/${props.data.star}-Star.webp`,
@@ -51,6 +50,7 @@ const boxData = computed(() => {
       display: "inner",
       innerHeight: 0,
       innerText: "",
+      clickable: false,
       lt: `/icon/element/${props.data.element}.webp`,
       ltSize: "30px",
     };
@@ -63,6 +63,7 @@ const boxData = computed(() => {
       display: "inner",
       innerHeight: 0,
       innerText: "",
+      clickable: false,
       lt: `/icon/weapon/${props.data.type}.webp`,
       ltSize: "30px",
     };

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

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUpdated, reactive } from "vue";
+import { onMounted, onUpdated, ref } from "vue";
 
 import { saveImgLocal } from "../../utils/TGShare";
 
@@ -17,13 +17,15 @@ interface DucDetailOrtProps {
 }
 
 const props = defineProps<DucDetailOrtProps>();
-let talents = reactive<TGApp.Sqlite.Character.RoleTalent[]>([]);
+const talents = ref<TGApp.Sqlite.Character.RoleTalent[]>([]);
 
 async function loadData(): Promise<void> {
-  talents = props.modelValue;
-  for (const talent of talents) {
+  const tempTalent = props.modelValue;
+  for (const talent of tempTalent) {
+    if (talent.icon.startsWith("blob:")) return;
     talent.icon = await saveImgLocal(talent.icon);
   }
+  talents.value = tempTalent;
 }
 
 onMounted(async () => {
@@ -60,6 +62,7 @@ onUpdated(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--tgc-white-1);
   font-family: var(--font-title);
   font-size: 16px;
   text-shadow: 0 0 5px rgba(0 0 0/40%);

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

@@ -13,7 +13,6 @@
         <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"
@@ -49,7 +48,6 @@ 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 {
@@ -72,10 +70,10 @@ const visible = computed({
   },
 });
 
+// share
+const loading = ref<boolean>(false);
 // 渲染数据
 const nameCard = ref<string | false>(false);
-// 加载
-const loading = ref<boolean>(false);
 
 function onOverlayCancel() {
   visible.value = false;
@@ -181,6 +179,10 @@ async function share(): Promise<void> {
   row-gap: 10px;
 }
 
+.duc-doc-btn {
+  color: var(--tgc-white-1);
+}
+
 .duc-doc-rt {
   position: absolute;
   top: 10px;