✨ 帖子卡片支持分享

src/components/main/t-postcard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card :rounded="true" v-if="card">
+  <v-card :rounded="true" v-if="card" :id="`post-card-${card.postId}`" class="tpc-card">
     <div class="tpc-cover">
       <img :src="card.cover" alt="cover" @click="createPost(card)" />
       <div v-if="isAct" class="tpc-act">
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="tpc-content">
-      <div class="tpc-title" :title="card.title">{{ card.title }}</div>
+      <div class="tpc-title" :title="card.title" @click="shareCard">{{ card.title }}</div>
       <TpAvatar v-if="card.user" :data="card.user" position="left" />
       <div class="tpc-data" v-if="card.data">
         <div class="tpc-info-item" :title="`浏览数：${card.data.view}`">
@@ -51,12 +51,14 @@
       class="tpc-select"
       v-model="selectedList"
       :value="props.modelValue.post.post_id"
+      data-html2canvas-ignore
     />
   </v-card>
 </template>
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref } from "vue";
 
+import { generateShareImg } from "../../utils/TGShare.js";
 import { createPost } from "../../utils/TGWindow.js";
 import TpAvatar from "../post/tp-avatar.vue";
 
@@ -208,8 +210,20 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
   }
   return commonCard;
 }
+
+async function shareCard(): Promise<void> {
+  if (!card.value) return;
+  const dom = <HTMLDivElement>document.querySelector(`#post-card-${card.value.postId}`);
+  const fileName = `PostCard_${card.value.postId}`;
+  await generateShareImg(fileName, dom, 2);
+}
 </script>
 <style lang="css" scoped>
+.tpc-card {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 2px 2px 5px var(--common-shadow-2);
+}
+
 .tpc-cover {
   position: relative;
   display: flex;
@@ -223,7 +237,6 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
 
 .tpc-cover img {
   min-width: 100%;
-  height: 100%;
   object-fit: cover;
   object-position: center;
   transition: all 0.3s linear;
@@ -241,6 +254,7 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
 .tpc-title {
   overflow: hidden;
   width: 100%;
+  cursor: pointer;
   font-family: var(--font-title);
   font-size: 18px;
   text-overflow: ellipsis;

src/plugins/Sqlite/index.ts

@@ -19,18 +19,21 @@ class Sqlite {
   private readonly dbPath: string = "sqlite:TeyvatGuide.db";
   /**
    * @description 数据库包含的表
-   * @since Alpha v0.2.3
+   * @since Beta v0.6.0
    * @private
    */
   private readonly tables: string[] = [
     "Achievements",
-    "AppCharacters",
     "AppData",
+    "GachaRecords",
     "GameAccount",
     "SpiralAbyss",
+    "UFCollection",
+    "UFMap",
+    "UFPost",
+    "UserAccount",
     "UserCharacters",
     "UserRecord",
-    "GachaRecords",
   ];
 
   /**

src/plugins/Sqlite/utils/transUserRecord.ts

@@ -4,6 +4,8 @@
  * @since Beta v0.6.0
  */
 
+import { getZhElement } from "../../../utils/toolFunc.js";
+
 /**
  * @description 将通过 api 获取到的用户战绩数据转换为渲染用的数据
  * @since Beta v0.6.0
@@ -48,19 +50,10 @@ function transRole(data: TGApp.Game.Record.Role): TGApp.Sqlite.Record.Role {
  * @returns {TGApp.Sqlite.Record.Avatar} 转换后的角色列表
  */
 function transAvatar(data: TGApp.Game.Record.Avatar): TGApp.Sqlite.Record.Avatar {
-  const elementMap: Record<string, string> = {
-    Anemo: "风",
-    Geo: "岩",
-    Electro: "雷",
-    Hydro: "水",
-    Pyro: "火",
-    Cryo: "冰",
-    Dendro: "草",
-  };
   return {
     id: data.id,
     name: data.name,
-    element: elementMap[data.element],
+    element: getZhElement(data.element),
     fetter: data.fetter,
     level: data.level,
     star: data.rarity === 105 ? 5 : data.rarity,

src/utils/TGShare.ts

@@ -124,11 +124,7 @@ export async function generateShareImg(
   const sizeStr = bytesToSize(size);
   await TGLogger.Info(`[generateShareImg][${fileName}] 图像大小为 ${sizeStr}`);
   if (size > 80000000) {
-    showSnackbar({
-      text: `图像大小为 ${sizeStr}，过大，无法保存`,
-      color: "warn",
-      timeout: 3000,
-    });
+    showSnackbar({ text: `图像大小为 ${sizeStr}，过大，无法保存`, color: "warn", timeout: 3000 });
     return;
   }
   if (size > 20000000) {
@@ -141,16 +137,11 @@ export async function generateShareImg(
       await saveCanvasImg(buffer, fileName);
       return;
     }
-    showSnackbar({
-      color: "warn",
-      text: "将尝试保存到剪贴板",
-    });
+    showSnackbar({ color: "warn", text: "将尝试保存到剪贴板" });
   }
   try {
     await copyToClipboard(buffer);
-    showSnackbar({
-      text: `已将 ${fileName} 复制到剪贴板，大小为 ${sizeStr}`,
-    });
+    showSnackbar({ text: `已将 ${fileName} 复制到剪贴板，大小为 ${sizeStr}` });
     await TGLogger.Info(`[generateShareImg][${fileName}] 已将图像复制到剪贴板`);
   } catch (e) {
     await TGLogger.Error(`[generateShareImg][${fileName}] 复制到剪贴板失败 ${e}`);

src/utils/minifySql.ts

@@ -1,18 +0,0 @@
-/**
- * @file utils minifySql.ts
- * @description 减少 sql 语句体积的工具函数
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.5
- */
-
-/**
- * @description 减少 sql 语句体积的工具函数
- * @function minifySql
- * @param {string} sql - sql 语句
- * @return {string} minifiedSql - 减少体积后的 sql 语句
- */
-function minifySql(sql: string): string {
-  return sql.replace(/\n/g, " ").replace(/\s+/g, " ").trim();
-}
-
-export default minifySql;