⚡️ 已收藏帖子打开时自动更新数据

src/components/post/tb-collect.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- todo 编辑收藏合集的 overlay -->
-  <div class="collect-box" data-html2canvas-ignore>
+  <div class="tbc-box" data-html2canvas-ignore>
-    <div class="collect-btn" @click="switchCollect()" :title="isCollected ? '取消收藏' : '收藏'">
+    <div class="tbc-btn" @click="switchCollect()" :title="isCollected ? '取消收藏' : '收藏'">
       <v-icon :color="isCollected ? 'yellow' : 'white'">
         {{ isCollected ? "mdi-star" : "mdi-star-outline" }}
       </v-icon>
@@ -10,10 +10,11 @@
 </template>
 <script lang="ts" setup>
 import DataBase from "tauri-plugin-sql-api";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref, watch } from "vue";
 
 import TGSqlite from "../../plugins/Sqlite";
 import TSUserCollection from "../../plugins/Sqlite/modules/userCollect";
+import TGLogger from "../../utils/TGLogger";
 import showConfirm from "../func/confirm";
 import showSnackbar from "../func/snackbar";
 
@@ -21,12 +22,12 @@ const isCollected = ref(false);
 const collect = ref<Array<TGApp.Sqlite.UserCollection.UFMap>>([]);
 const db = ref<DataBase | undefined>(undefined);
 
-interface TSetCollectProps {
+interface TbCollectProps {
   modelValue: number;
   data: TGApp.Plugins.Mys.Post.FullData | undefined;
 }
 
-const props = defineProps<TSetCollectProps>();
+const props = defineProps<TbCollectProps>();
 
 onBeforeMount(async () => {
   db.value = await TGSqlite.getDB();
@@ -39,6 +40,28 @@ onBeforeMount(async () => {
   collect.value = check;
 });
 
+watch(
+  () => props.data,
+  async (val) => {
+    if (val === undefined) return;
+    if (isCollected.value === false) return;
+    if (db.value === undefined) return;
+    const res = await TSUserCollection.updatePostInfo(db.value, props.modelValue.toString(), val);
+    if (!res) {
+      showSnackbar({
+        text: "更新帖子信息失败，数据库中不存在帖子信息！",
+        color: "error",
+      });
+      return;
+    }
+    showSnackbar({
+      text: "已更新帖子信息",
+      color: "success",
+    });
+    await TGLogger.Info(`[TbCollect] 更新帖子信息：${props.modelValue.toString()}`);
+  },
+);
+
 async function switchCollect(): Promise<void> {
   if (db.value === undefined) {
     showSnackbar({
@@ -81,7 +104,7 @@ async function switchCollect(): Promise<void> {
 }
 </script>
 <style lang="css" scoped>
-.collect-box {
+.tbc-box {
   position: absolute;
   top: 80px;
   right: 20px;
@@ -90,11 +113,11 @@ async function switchCollect(): Promise<void> {
   cursor: pointer;
 }
 
-.collect-box:hover {
+.tbc-box:hover {
   opacity: 0.8;
 }
 
-.collect-btn {
+.tbc-btn {
   display: flex;
   width: 24px;
   height: 24px;

src/plugins/Sqlite/modules/userCollect.ts

@@ -221,6 +221,34 @@ async function deleteCollectPost(
   return true;
 }
 
+/**
+ * @description 更新帖子信息
+ * @since Beta v0.4.5
+ * @param {DataBase} db 数据库
+ * @param {string} postId 文章 id
+ * @param {TGApp.Plugins.Mys.Post.FullData} post 文章信息
+ * @return {Promise<boolean>} 返回是否更新成功
+ */
+async function updatePostInfo(
+  db: DataBase,
+  postId: string,
+  post: TGApp.Plugins.Mys.Post.FullData,
+): Promise<boolean> {
+  const sql = "SELECT id FROM UFPost WHERE id = ?";
+  const res: Array<{ id: number }> = await db.select(sql, [postId]);
+  if (res.length === 0) {
+    return false;
+  }
+  const updateSql = "UPDATE UFPost SET title = ?, content = ?, updated = ? WHERE id = ?";
+  await db.execute(updateSql, [
+    post.post.subject,
+    JSON.stringify(post),
+    new Date().getTime(),
+    postId,
+  ]);
+  return true;
+}
+
 /**
  * @description 删除某个帖子的收藏，可选是否强制删除
  * @since Beta v0.4.5
@@ -261,7 +289,7 @@ async function deletePostCollect(
  * @param {string[]} collections 收藏合集标题
  * @return {Promise<boolean>} 返回是否修改成功
  */
-async function updateCollectPost(
+async function updatePostCollect(
   db: DataBase,
   postId: string,
   collections: string[],
@@ -305,7 +333,7 @@ async function updateCollectPost(
  * @param {string} oldCollection 旧的收藏合集标题
  * @return {Promise<boolean>} 返回是否修改成功
  */
-async function updateCollectPosts(
+async function updatePostsCollect(
   db: DataBase,
   postIds: string[],
   collection: string,
@@ -372,10 +400,11 @@ const TSUserCollection = {
   deleteCollect,
   updateCollect,
   addCollect,
+  updatePostInfo,
   deleteCollectPost,
   deletePostCollect,
-  updateCollectPost,
+  updatePostCollect,
-  updateCollectPosts,
+  updatePostsCollect,
 };
 
 export default TSUserCollection;

src/plugins/Sqlite/sql/insertData.ts

@@ -269,28 +269,3 @@ export function insertRoleData(uid: string, data: TGApp.Game.Character.ListItem[
   });
   return sql.join("");
 }
-
-/**
- * @description 插入帖子收藏数据
- * @since Beta v0.4.5
- * @param {TGApp.Plugins.Mys.Post.FullData} data 帖子数据
- * @param {Array<string>} collect 合集
- * @param {string} uid 用户 UID
- * @returns {string} sql
- */
-export function insertPostCollectData(
-  data: TGApp.Plugins.Mys.Post.FullData,
-  collect: string[],
-  uid?: string,
-): string {
-  return `
-      INSERT INTO UserCollection (postId, title, content, collect, uid, updated)
-      VALUES (${data.post.post_id}, '${data.post.subject}', '${JSON.stringify(data)}',
-              '${JSON.stringify(collect)}', '${uid}', datetime('now', 'localtime'))
-      ON CONFLICT DO UPDATE
-          SET title   = '${data.post.subject}',
-              content = '${JSON.stringify(data)}',
-              collect = '${JSON.stringify(collect)}',
-              updated = datetime('now', 'localtime');
-  `;
-}

src/views/t-post.vue

@@ -1,6 +1,6 @@
 <template>
   <TSwitchTheme />
-  <TSetCollect :model-value="postId" :data="postData" />
+  <TbCollect :model-value="postId" :data="postData" />
   <TShareBtn
     v-show="!loadingEmpty"
     v-model="postRef"
@@ -86,15 +86,14 @@ import { appWindow } from "@tauri-apps/api/window";
 import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
-import TSetCollect from "../components/app/t-setCollect.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
+import TbCollect from "../components/post/tb-collect.vue";
 import TpAvatar from "../components/post/tp-avatar.vue";
 import TpParser from "../components/post/tp-parser.vue";
 import TpoCollection from "../components/post/tpo-collection.vue";
 import Mys from "../plugins/Mys";
-import TGSqlite from "../plugins/Sqlite";
 import { useAppStore } from "../store/modules/app";
 import TGClient from "../utils/TGClient";
 import TGLogger from "../utils/TGLogger";