🌱 单帖的收藏编辑，支持分类创建/删除

2026-03-25 05:29:45 +08:00 · 2024-03-20 16:08:55 +08:00
parent 5fb24387ca
commit 27f4e026b0
5 changed files with 350 additions and 89 deletions
--- a/src/components/func/snackbar.vue
+++ b/src/components/func/snackbar.vue
@@ -49,6 +49,8 @@ function transColor(color: string): string {
      return "#ecb349";
    case "cancel":
      return "#2C313C";
+    case "info":
+      return "#1E9CEF";
    default:
      return color;
  }
--- a/src/components/overlay/to-postCollect.vue
+++ b/src/components/overlay/to-postCollect.vue
@@ -0,0 +1,250 @@
+<!-- 编辑收藏帖子的合集 -->
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="topc-container">
+      <div class="topc-post-info">
+        {{ props.post?.post.subject }}
+      </div>
+      <div v-if="postCollect.length > 0" class="topc-cur-collect">
+        当前所属分类：{{ postCollect.map((i) => i.collection).join(",") }}
+      </div>
+      <div v-else class="topc-cur-collect">当前所属分类：未分类</div>
+      <div class="tpoc-collect-list">
+        <v-list-item v-for="item in collectList" :key="item.id">
+          <template #prepend>
+            <v-list-item-action start>
+              <v-checkbox-btn v-model="selectList" :value="item.title" />
+            </v-list-item-action>
+          </template>
+          <template #title>{{ item.title }}</template>
+          <template #subtitle>{{ item.desc }}</template>
+          <template #append>
+            <v-list-item-action end>
+              <v-btn size="small" class="topc-btn" @click="deleteCollect(item)" icon="mdi-delete" />
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+      </div>
+      <div class="topc-bottom">
+        <v-btn class="topc-btn" rounded @click="newCollect">新建分类</v-btn>
+        <v-btn class="topc-btn" rounded @click="onCancel">取消</v-btn>
+        <v-btn :loading="submit" class="topc-btn" rounded @click="onSubmit">确定</v-btn>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import TSUserCollection from "../../plugins/Sqlite/modules/userCollect";
+import showConfirm from "../func/confirm";
+import showSnackbar from "../func/snackbar";
+import TOverlay from "../main/t-overlay.vue";
+
+interface ToPostCollectProps {
+  modelValue: boolean;
+  post: TGApp.Plugins.Mys.Post.FullData | undefined;
+}
+
+interface ToPostCollectEmits {
+  (e: "update:modelValue", value: boolean): void;
+
+  (e: "submit"): void;
+}
+
+const props = defineProps<ToPostCollectProps>();
+const emits = defineEmits<ToPostCollectEmits>();
+const collectList = ref<TGApp.Sqlite.UserCollection.UFCollection[]>([]);
+const postCollect = ref<TGApp.Sqlite.UserCollection.UFMap[]>([]);
+const selectList = ref<string[]>([]);
+const submit = ref(false);
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val) {
+      await freshData();
+    }
+  },
+);
+
+async function freshData(): Promise<void> {
+  collectList.value = await TSUserCollection.getCollectList();
+  if (!props.post) return;
+  const collectRes = await TSUserCollection.getPostCollect(props.post.post.post_id.toString());
+  if (Array.isArray(collectRes)) {
+    postCollect.value = collectRes;
+    selectList.value = postCollect.value.map((i) => i.collection);
+  } else if (collectRes) {
+    postCollect.value = [];
+    selectList.value = [];
+  }
+}
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+async function deleteCollect(item: TGApp.Sqlite.UserCollection.UFCollection): Promise<void> {
+  const res = await showConfirm({
+    title: "确定删除分类?",
+    text: "该分类若有帖子，则会变为未分类",
+  });
+  if (!res) {
+    showSnackbar({
+      text: "取消删除",
+      color: "cancel",
+    });
+    return;
+  }
+  const resD = await TSUserCollection.deleteCollect(item.title);
+  if (resD) {
+    showSnackbar({
+      text: "删除成功",
+      color: "success",
+    });
+    await freshData();
+  } else {
+    showSnackbar({
+      text: "删除失败",
+      color: "error",
+    });
+  }
+}
+
+async function newCollect(): Promise<void> {
+  let title, desc;
+  const titleC = await showConfirm({
+    mode: "input",
+    title: "新建分类",
+    text: "请输入分类名称",
+  });
+  if (titleC === undefined || titleC === false) return;
+  if (titleC === "未分类") {
+    showSnackbar({
+      text: "分类名不可为未分类",
+      color: "error",
+    });
+    return;
+  }
+  if (collectList.value.find((i) => i.title === titleC)) {
+    showSnackbar({
+      text: "分类已存在",
+      color: "error",
+    });
+    return;
+  }
+  title = titleC;
+  const descC = await showConfirm({
+    mode: "input",
+    title: "新建分类",
+    text: "请输入分类描述",
+  });
+  if (descC === false) return;
+  if (descC === undefined) desc = title;
+  else desc = descC;
+  const res = await TSUserCollection.createCollect(title, desc);
+  if (res) {
+    showSnackbar({
+      text: "新建成功",
+      color: "success",
+    });
+    await freshData();
+  } else {
+    showSnackbar({
+      text: "新建失败",
+      color: "error",
+    });
+  }
+}
+
+async function onSubmit(): Promise<void> {
+  if (!props.post) {
+    showSnackbar({
+      text: "未找到帖子信息",
+      color: "error",
+    });
+    return;
+  }
+  submit.value = true;
+  const res = await TSUserCollection.updatePostCollect(
+    props.post.post.post_id.toString(),
+    selectList.value,
+  );
+  await freshData();
+  emits("submit");
+  submit.value = false;
+  if (res) {
+    showSnackbar({
+      text: "更新成功",
+      color: "success",
+    });
+  } else {
+    showSnackbar({
+      text: "更新失败",
+      color: "error",
+    });
+  }
+}
+
+function onCancel() {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.topc-container {
+  display: flex;
+  width: 400px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--app-page-bg);
+  row-gap: 10px;
+}
+
+.topc-post-info {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.topc-cur-collect {
+  color: var(--common-text-title);
+  font-size: 16px;
+  word-break: break-all;
+}
+
+.tpoc-collect-list {
+  display: flex;
+  width: 100%;
+  max-height: 300px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.topc-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  margin-left: auto;
+  column-gap: 10px;
+}
+
+.topc-btn {
+  background: var(--btn-bg-1);
+  color: var(--btn-text-1);
+  font-family: var(--font-title);
+}
+
+.dark .topc-btn {
+  border: 1px solid var(--common-shadow-2);
+}
+</style>
--- a/src/components/post/tb-collect.vue
+++ b/src/components/post/tb-collect.vue
@@ -1,26 +1,28 @@
 <template>
-  <!-- todo 编辑收藏合集的 overlay -->
  <div class="tbc-box" data-html2canvas-ignore>
    <div class="tbc-btn" @click="switchCollect()" :title="isCollected ? '取消收藏' : '收藏'">
      <v-icon :color="isCollected ? 'yellow' : 'white'">
        {{ isCollected ? "mdi-star" : "mdi-star-outline" }}
      </v-icon>
    </div>
+    <div class="tbc-edit" title="编辑收藏" v-if="isCollected" @click="editCollect()">
+      <v-icon size="small">mdi-pencil</v-icon>
+    </div>
  </div>
+  <ToPostCollect v-model="showEdit" :post="props.data" @submit="refresh()" />
 </template>
 <script lang="ts" setup>
-import DataBase from "tauri-plugin-sql-api";
 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";
+import ToPostCollect from "../overlay/to-postCollect.vue";

 const isCollected = ref(false);
 const collect = ref<Array<TGApp.Sqlite.UserCollection.UFMap>>([]);
-const db = ref<DataBase | undefined>(undefined);
+const showEdit = ref(false);

 interface TbCollectProps {
  modelValue: number;
@@ -29,24 +31,32 @@ interface TbCollectProps {

 const props = defineProps<TbCollectProps>();

-onBeforeMount(async () => {
-  db.value = await TGSqlite.getDB();
-  const check = await TSUserCollection.getCollectPost(db.value, props.modelValue.toString());
+onBeforeMount(async () => await refresh());
+
+async function refresh(): Promise<void> {
+  const check = await TSUserCollection.getPostCollect(props.modelValue.toString());
  if (typeof check === "boolean") {
    isCollected.value = check;
+    collect.value = [];
    return;
  }
  isCollected.value = true;
  collect.value = check;
-});
+}
+
+function editCollect(): void {
+  if (showEdit.value) {
+    showEdit.value = false;
+  }
+  showEdit.value = true;
+}

 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);
+    const res = await TSUserCollection.updatePostInfo(props.modelValue.toString(), val);
    if (!res) {
      showSnackbar({
        text: "更新帖子信息失败，数据库中不存在帖子信息！",
@@ -63,13 +73,6 @@ watch(
 );

 async function switchCollect(): Promise<void> {
-  if (db.value === undefined) {
-    showSnackbar({
-      text: "未获取到数据库",
-      color: "error",
-    });
-    return;
-  }
  if (isCollected.value === false) {
    if (props.data === undefined) {
      showSnackbar({
@@ -78,7 +81,7 @@ async function switchCollect(): Promise<void> {
      });
      return;
    }
-    await TSUserCollection.addCollect(db.value, props.modelValue.toString(), props.data);
+    await TSUserCollection.addCollect(props.modelValue.toString(), props.data);
    isCollected.value = true;
    showSnackbar({
      text: "收藏成功",
@@ -95,7 +98,7 @@ async function switchCollect(): Promise<void> {
      return;
    }
  }
-  await TSUserCollection.deletePostCollect(db.value, props.modelValue.toString(), true);
+  await TSUserCollection.deletePostCollect(props.modelValue.toString(), true);
  isCollected.value = false;
  showSnackbar({
    text: "取消收藏成功",
@@ -126,4 +129,16 @@ async function switchCollect(): Promise<void> {
  padding-right: 2px;
  margin: 5px;
 }
+
+.tbc-edit {
+  position: absolute;
+  right: -10px;
+  bottom: -10px;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>