💩 脑测样式&逻辑代码

src/components/func/confirm.vue

@@ -85,6 +85,9 @@ async function displayBox(
   data.text = params.text ?? "";
   data.mode = params.mode ?? "confirm";
   data.otcancel = params.otcancel ?? true;
+  if (params.mode === "input" && params.input) {
+    inputVal.value = params.input;
+  }
   show.value = true;
   // 等待确认框关闭，返回关闭后的confirmVal
   return await new Promise<string | boolean | undefined>((resolve) => {

src/components/main/t-postcard.vue

@@ -42,21 +42,30 @@
       <img :src="card.forum.icon" :alt="card.forum.name" />
       <span>{{ card.forum.name }}</span>
     </div>
+    <!-- todo 需要测试 -->
+    <div v-if="props.selectMode" class="tpc-select">
+      <v-checkbox-btn v-model="selectedList" :value="props.modelValue.post.post_id" />
+    </div>
   </v-card>
 </template>
 <script lang="ts" setup>
-import { onBeforeMount, ref } from "vue";
+import { computed, onBeforeMount, ref } from "vue";
 
 import { createPost } from "../../utils/TGWindow";
 import TpAvatar from "../post/tp-avatar.vue";
 
 interface TPostCardProps {
   modelValue: TGApp.Plugins.Mys.Post.FullData;
+  selectMode?: boolean;
+  selected?: string[];
 }
 
-const props = defineProps<TPostCardProps>();
+const props = withDefaults(defineProps<TPostCardProps>(), {
+  selectMode: false,
+});
 const isAct = ref<boolean>(false);
 const card = ref<TGApp.Plugins.Mys.News.RenderCard>();
+const selectedList = computed(() => props.selected);
 
 onBeforeMount(() => {
   card.value = getPostCard(props.modelValue);
@@ -224,6 +233,15 @@ function getPostCard(item: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.N
   color: var(--tgc-white-1);
 }
 
+.tpc-select {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .tpc-forum img {
   width: 20px;
   height: 20px;

src/pages/common/PostCollect.vue

@@ -15,6 +15,7 @@
         </template>
       </v-select>
       <v-btn
+        :disabled="selectedMode"
         size="small"
         class="pc-btn"
         icon="mdi-refresh"
@@ -22,14 +23,25 @@
         @click="freshUser()"
       />
       <v-btn
+        :disabled="selectedMode"
         size="small"
         class="pc-btn"
         icon="mdi-import"
         @click="freshOther"
         title="导入其他用户收藏"
       />
-      <v-btn size="small" class="pc-btn" icon="mdi-pencil" @click="toEdit()" title="编辑收藏" />
+      <v-btn size="small" class="pc-btn" icon="mdi-pencil" @click="toSelect()" title="编辑收藏" />
       <v-btn
+        :disabled="selectedMode"
+        size="small"
+        v-if="curSelect !== '未分类'"
+        class="pc-btn"
+        icon="mdi-info"
+        @click="toEdit()"
+        title="编辑分类"
+      />
+      <v-btn
+        :disabled="selectedMode"
         size="small"
         v-if="curSelect !== '未分类'"
         class="pc-btn"
@@ -41,14 +53,13 @@
     </div>
     <div class="pc-posts">
       <div v-for="item in getPageItems()" :key="item.post.post_id">
-        <TPostCard :model-value="item" />
+        <TPostCard :model-value="item" :selected="selectedPost" :select-mode="selectedMode" />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import Database from "tauri-plugin-sql-api";
 import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
 
 import showConfirm from "../../components/func/confirm";
@@ -65,7 +76,6 @@ const loading = ref(false);
 const loadingTitle = ref("加载中...");
 const loadingSub = ref("");
 const userStore = storeToRefs(useUserStore());
-const db = ref<Database | undefined>(undefined);
 
 const collections = ref<TGApp.Sqlite.UserCollection.UFCollection[]>([]);
 const selected = ref<TGApp.Sqlite.UserCollection.UFPost[]>([]);
@@ -77,6 +87,9 @@ const view = computed(() => {
   return length.value > 5 ? 5 : length.value;
 });
 
+const selectedMode = ref<boolean>(false);
+const selectedPost = ref<Array<string>>([]);
+
 onBeforeMount(async () => {
   if (!(await TGSqlite.checkTableExist("UFPost"))) {
     await TGSqlite.update();
@@ -87,36 +100,98 @@ onBeforeMount(async () => {
   }
 });
 
-onMounted(async () => {
+onMounted(async () => await load());
+
+async function load(): Promise<void> {
   loadingTitle.value = "获取收藏帖子...";
   loading.value = true;
-  db.value = await TGSqlite.getDB();
-  if (!db.value) {
-    showSnackbar({
-      text: "数据库未初始化",
-      color: "error",
-    });
-    loading.value = false;
-    return;
-  }
   loadingTitle.value = "获取收藏合集...";
   collections.value = await TSUserCollection.getCollectList();
   loadingTitle.value = "获取未分类帖子...";
   const postUnCollect = await TSUserCollection.getUnCollectPostList();
   if (postUnCollect.length > 0) {
     selected.value = postUnCollect;
+    curSelect.value = "未分类";
   } else {
     selected.value = await TSUserCollection.getCollectPostList(collections.value[0].title);
+    curSelect.value = collections.value[0].title;
   }
   page.value = 1;
   loading.value = false;
-});
+}
 
-function toEdit() {
+function toSelect() {
-  showSnackbar({
+  if (!selectedMode.value) {
-    text: "功能开发中",
+    selectedMode.value = true;
-    color: "info",
+  } else {
+    // todo
+    console.log(selectedPost.value);
+  }
+}
+
+async function toEdit(): Promise<void> {
+  const collect = collections.value.find((c) => c.title === curSelect.value);
+  if (collect === undefined) {
+    showSnackbar({
+      text: "未找到合集信息！",
+      color: "error",
+    });
+    return;
+  }
+  let cTc = await showConfirm({
+    title: "修改分类标题",
+    mode: "input",
+    text: "请输入分类标题",
+    input: collect.title,
   });
+  if (typeof cTc !== "string") cTc = collect.title;
+  if (cTc === "未分类") {
+    showSnackbar({
+      text: "该名称为保留名称，不可用于作为分类名！",
+      color: "error",
+    });
+    return;
+  }
+  if (cTc !== collect.title && collections.value.find((c) => c.title === cTc)) {
+    showSnackbar({
+      text: "分类名称重复！",
+      color: "error",
+    });
+    return;
+  }
+  let cTd = await showConfirm({
+    title: "修改分类描述",
+    mode: "input",
+    text: "请输入分类描述",
+    input: collect.desc,
+  });
+  if (typeof cTd !== "string") cTd = collect.desc;
+  const cc = await showConfirm({
+    title: "确定修改？",
+    text: `[${cTc}] ${cTd}`,
+  });
+  if (!cc) {
+    showSnackbar({
+      text: "取消修改分类信息",
+      color: "cancel",
+    });
+    return;
+  }
+  loadingTitle.value = "正在修改分类信息...";
+  loading.value = true;
+  const check = await TSUserCollection.updateCollect(collect.title, cTc, cTd);
+  loading.value = false;
+  if (!check) {
+    showSnackbar({
+      text: "修改分类信息失败!",
+      color: "error",
+    });
+    return;
+  }
+  showSnackbar({
+    text: "成功修改分类信息！",
+  });
+  await load();
 }
 
 async function deleteCollect(): Promise<void> {
@@ -137,7 +212,7 @@ async function deleteCollect(): Promise<void> {
       text: "删除成功",
       color: "success",
     });
-    window.location.reload();
+    await load();
   } else {
     showSnackbar({
       text: "删除失败",
@@ -152,13 +227,6 @@ async function freshPost(select: string | null): Promise<void> {
     curSelect.value = "未分类";
     return;
   }
-  if (!db.value) {
-    showSnackbar({
-      text: "数据库未初始化",
-      color: "error",
-    });
-    return;
-  }
   loadingTitle.value = `获取合集 ${select}...`;
   loading.value = true;
   if (select === "未分类") {
@@ -277,7 +345,6 @@ async function mergePosts(
   posts: TGApp.Plugins.Mys.Post.FullData[],
   collect: string,
 ): Promise<void> {
-  if (!db.value) return;
   const title = `用户收藏-${collect}`;
   for (const post of posts) {
     loadingTitle.value = `收藏帖子 [${post.post.post_id}]...`;

src/types/Component/Confirm.d.ts

@@ -37,13 +37,15 @@ declare namespace TGApp.Component.Confirm {
   /**
    * @description Confirm 参数 - input mode
    * @interface ParamsInput
-   * @since Beta v0.3.3
+   * @since Beta v0.4.5
    * @extends ParamsBase
    * @property {"input"} mode
+   * @property {string} input 可选的配置默认输入值
    * @return ParamsInput
    */
   interface ParamsInput extends ParamsBase {
     mode: "input";
+    input?: string;
   }
 
   /**