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

This commit is contained in:
目棃
2024-03-20 16:08:55 +08:00
parent 5fb24387ca
commit 27f4e026b0
5 changed files with 350 additions and 89 deletions

View File

@@ -49,6 +49,8 @@ function transColor(color: string): string {
return "#ecb349";
case "cancel":
return "#2C313C";
case "info":
return "#1E9CEF";
default:
return color;
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -11,13 +11,14 @@
label="合集"
/>
<v-btn rounded class="pc-btn" prepend-icon="mdi-refresh" @click="freshUser()"
>获取用户收藏</v-btn
>
>获取用户收藏
</v-btn>
<v-btn rounded class="pc-btn" prepend-icon="mdi-import" @click="freshOther"
>导入其他用户收藏</v-btn
>
>导入其他用户收藏
</v-btn>
<v-btn rounded class="pc-btn" prepend-icon="mdi-pencil" @click="toEdit()"> 编辑收藏 </v-btn>
<!-- todo 编辑收藏 -->
<v-pagination class="pc-page" v-model="page" :length="length" />
<v-pagination class="pc-page" v-model="page" :total-visible="view" :length="length" />
</div>
<div class="pc-posts">
<div v-for="item in getPageItems()" :key="item.post.post_id">
@@ -52,6 +53,10 @@ const selected = ref<TGApp.Sqlite.UserCollection.UFPost[]>([]);
const curSelect = ref<string>("未分类");
const page = ref(1);
const length = computed(() => Math.ceil(selected.value.length / 12));
const view = computed(() => {
if (length.value === 1) return 0;
return length.value > 5 ? 5 : length.value;
});
onBeforeMount(async () => {
if (!(await TGSqlite.checkTableExist("UFPost"))) {
@@ -76,22 +81,31 @@ onMounted(async () => {
return;
}
loadingTitle.value = "获取收藏合集...";
collections.value = await TSUserCollection.getCollectList(db.value);
collections.value = await TSUserCollection.getCollectList();
loadingTitle.value = "获取未分类帖子...";
const postUnCollect = await TSUserCollection.getUnCollectPostList(db.value);
const postUnCollect = await TSUserCollection.getUnCollectPostList();
if (postUnCollect.length > 0) {
selected.value = postUnCollect;
} else {
selected.value = await TSUserCollection.getCollectPostList(
db.value,
collections.value[0].title,
);
selected.value = await TSUserCollection.getCollectPostList(collections.value[0].title);
}
page.value = 1;
loading.value = false;
});
function toEdit() {
showSnackbar({
text: "功能开发中",
color: "info",
});
}
// 根据合集筛选
async function freshPost(select: string | null): Promise<void> {
if (select === null) {
curSelect.value = "未分类";
return;
}
if (!db.value) {
showSnackbar({
text: "数据库未初始化",
@@ -101,12 +115,13 @@ async function freshPost(select: string | null): Promise<void> {
}
loadingTitle.value = `获取合集 ${select}...`;
loading.value = true;
if (select === null || select === "未分类") {
if (select === "未分类") {
curSelect.value = "未分类";
selected.value = await TSUserCollection.getUnCollectPostList(db.value);
selected.value = await TSUserCollection.getUnCollectPostList();
} else {
selected.value = await TSUserCollection.getCollectPostList(db.value, select);
selected.value = await TSUserCollection.getCollectPostList(select);
}
page.value = 1;
loading.value = false;
showSnackbar({
text: `切换合集 ${select},共 ${selected.value.length} 条帖子`,
@@ -221,7 +236,7 @@ async function mergePosts(
for (const post of posts) {
loadingTitle.value = `收藏帖子 [${post.post.post_id}]...`;
loadingSub.value = `[POST]${post.post.subject} [collection]${title}`;
const res = await TSUserCollection.addCollect(db.value, post.post.post_id, post, title, true);
const res = await TSUserCollection.addCollect(post.post.post_id, post, title, true);
if (!res) {
await TGLogger.Error(`[PostCollect] mergePosts [${post.post.post_id}]`);
}

View File

@@ -4,19 +4,18 @@
* @since Beta v0.4.5
*/
import type DataBase from "tauri-plugin-sql-api";
import TGSqlite from "../index";
/**
* @description 获取单个帖子的收藏信息
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} postId 文章 id
* @return {Promise<TGApp.Sqlite.UserCollection.UFMap[]|boolean>} 返回收藏信息
*/
async function getCollectPost(
db: DataBase,
async function getPostCollect(
postId: string,
): Promise<TGApp.Sqlite.UserCollection.UFMap[] | boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT * FROM UFMap WHERE postId = ?";
const res: TGApp.Sqlite.UserCollection.UFMap[] = await db.select(sql, [postId]);
if (res.length > 0) {
@@ -32,10 +31,10 @@ async function getCollectPost(
/**
* @description 获取收藏合集列表
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @return {Promise<TGApp.Sqlite.UserCollection.UFCollection[]>} 返回收藏合集列表
*/
async function getCollectList(db: DataBase): Promise<TGApp.Sqlite.UserCollection.UFCollection[]> {
async function getCollectList(): Promise<TGApp.Sqlite.UserCollection.UFCollection[]> {
const db = await TGSqlite.getDB();
const sql = "SELECT * FROM UFCollection";
return await db.select(sql);
}
@@ -43,14 +42,13 @@ async function getCollectList(db: DataBase): Promise<TGApp.Sqlite.UserCollection
/**
* @description 获取收藏合集中的帖子列表
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} collection 收藏合集标题
* @return {Promise<TGApp.Sqlite.UserCollection.UFPost[]>} 返回收藏合集中的帖子列表
*/
async function getCollectPostList(
db: DataBase,
collection: string,
): Promise<TGApp.Sqlite.UserCollection.UFPost[]> {
const db = await TGSqlite.getDB();
const sql = "SELECT * FROM UFMap WHERE collection = ?";
const res: TGApp.Sqlite.UserCollection.UFMap[] = await db.select(sql, [collection]);
const postList: TGApp.Sqlite.UserCollection.UFPost[] = [];
@@ -65,10 +63,10 @@ async function getCollectPostList(
/**
* @description 获取未分类的收藏帖子列表
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @return {Promise<TGApp.Sqlite.UserCollection.UFPost[]>} 返回未分类的收藏帖子列表
*/
async function getUnCollectPostList(db: DataBase): Promise<TGApp.Sqlite.UserCollection.UFPost[]> {
async function getUnCollectPostList(): Promise<TGApp.Sqlite.UserCollection.UFPost[]> {
const db = await TGSqlite.getDB();
const sql = "SELECT * FROM UFPost WHERE id NOT IN (SELECT postId FROM UFMap)";
return await db.select(sql);
}
@@ -76,13 +74,13 @@ async function getUnCollectPostList(db: DataBase): Promise<TGApp.Sqlite.UserColl
/**
* @description 新建收藏合集
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} title 收藏合集标题
* @param {string} desc 收藏合集描述
* @return {Promise<boolean>} 返回收藏合集 id
*/
async function createCollect(db: DataBase, title: string, desc: string): Promise<boolean> {
async function createCollect(title: string, desc: string): Promise<boolean> {
if (title === "未分类" || title === "") return false;
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFCollection WHERE title = ?";
const res: Array<{ id: number }> = await db.select(sql, [title]);
if (res.length > 0) {
@@ -96,11 +94,11 @@ async function createCollect(db: DataBase, title: string, desc: string): Promise
/**
* @description 删除收藏合集
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} title 收藏合集标题
* @return {Promise<boolean>} 返回是否删除成功
*/
async function deleteCollect(db: DataBase, title: string): Promise<boolean> {
async function deleteCollect(title: string): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFCollection WHERE title = ?";
const res: Array<{ id: number }> = await db.select(sql, [title]);
if (res.length === 0) {
@@ -116,18 +114,13 @@ async function deleteCollect(db: DataBase, title: string): Promise<boolean> {
/**
* @description 更新收藏合集信息,标题/描述
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} title 收藏合集标题
* @param {string} newTitle 新标题
* @param {string} newDesc 新描述
* @return {Promise<boolean>} 返回是否更新成功
*/
async function updateCollect(
db: DataBase,
title: string,
newTitle: string,
newDesc: string,
): Promise<boolean> {
async function updateCollect(title: string, newTitle: string, newDesc: string): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFCollection WHERE title = ?";
const res: Array<{ id: number }> = await db.select(sql, [title]);
if (res.length === 0) {
@@ -143,7 +136,6 @@ async function updateCollect(
/**
* @description 添加收藏
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} postId 文章 id
* @param {TGApp.Plugins.Mys.Post.FullData} post 文章信息
* @param {string} collection 收藏合集标题,可能为 undefined
@@ -151,24 +143,25 @@ async function updateCollect(
* @return {Promise<boolean>} 返回是否添加成功
*/
async function addCollect(
db: DataBase,
postId: string,
post: TGApp.Plugins.Mys.Post.FullData,
collection: string | undefined = undefined,
recursive: boolean = false,
): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFPost WHERE id = ?";
const res: Array<{ id: number }> = await db.select(sql, [postId]);
if (res.length > 0) {
return false;
await updatePostInfo(postId, post);
} else {
const insertSql = "INSERT INTO UFPost (id, title, content, updated) VALUES (?, ?, ?, ?)";
await db.execute(insertSql, [
postId,
post.post.subject,
JSON.stringify(post),
new Date().getTime(),
]);
}
const insertSql = "INSERT INTO UFPost (id, title, content, updated) VALUES (?, ?, ?, ?)";
await db.execute(insertSql, [
postId,
post.post.subject,
JSON.stringify(post),
new Date().getTime(),
]);
if (collection !== undefined) {
const collectionSql = "SELECT * FROM UFCollection WHERE title = ?";
let collectionRes: TGApp.Sqlite.UserCollection.UFCollection[] = await db.select(collectionSql, [
@@ -178,7 +171,7 @@ async function addCollect(
if (!recursive) {
return false;
}
const createCollectionRes = await createCollect(db, collection, collection);
const createCollectionRes = await createCollect(collection, collection);
if (!createCollectionRes) {
return false;
}
@@ -201,16 +194,12 @@ async function addCollect(
/**
* @description 删除合集中的收藏
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} postId 文章 id
* @param {string} collection 收藏合集标题
* @return {Promise<boolean>} 返回是否删除成功
*/
async function deleteCollectPost(
db: DataBase,
postId: string,
collection: string,
): Promise<boolean> {
async function deleteCollectPost(postId: string, collection: string): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFCollection WHERE title = ?";
const res: Array<{ id: number }> = await db.select(sql, [collection]);
if (res.length === 0) {
@@ -224,16 +213,15 @@ async function deleteCollectPost(
/**
* @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 db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFPost WHERE id = ?";
const res: Array<{ id: number }> = await db.select(sql, [postId]);
if (res.length === 0) {
@@ -252,16 +240,12 @@ async function updatePostInfo(
/**
* @description 删除某个帖子的收藏,可选是否强制删除
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} postId 文章 id
* @param {boolean} force 是否强制删除
* @return {Promise<boolean>} 返回是否删除成功
*/
async function deletePostCollect(
db: DataBase,
postId: string,
force: boolean = false,
): Promise<boolean> {
async function deletePostCollect(postId: string, force: boolean = false): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id FROM UFPost WHERE id = ?";
const res: Array<{ id: number }> = await db.select(sql, [postId]);
if (res.length === 0) {
@@ -284,16 +268,12 @@ async function deletePostCollect(
/**
* @description 修改单个帖子的收藏合集
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string} postId 文章 id
* @param {string[]} collections 收藏合集标题
* @return {Promise<boolean>} 返回是否修改成功
*/
async function updatePostCollect(
db: DataBase,
postId: string,
collections: string[],
): Promise<boolean> {
async function updatePostCollect(postId: string, collections: string[]): Promise<boolean> {
const db = await TGSqlite.getDB();
const sql = "SELECT id,title FROM UFPost WHERE id = ?";
const res: Array<{ id: number; title: string }> = await db.select(sql, [postId]);
if (res.length === 0) {
@@ -327,18 +307,17 @@ async function updatePostCollect(
/**
* @description 批量修改帖子的收藏合集
* @since Beta v0.4.5
* @param {DataBase} db 数据库
* @param {string[]} postIds 文章 id
* @param {string} collection 收藏合集标题
* @param {string} oldCollection 旧的收藏合集标题
* @return {Promise<boolean>} 返回是否修改成功
*/
async function updatePostsCollect(
db: DataBase,
postIds: string[],
collection: string,
oldCollection: string | undefined,
): Promise<boolean> {
const db = await TGSqlite.getDB();
const collectionSql = "SELECT * FROM UFCollection WHERE title = ?";
const collectionRes: TGApp.Sqlite.UserCollection.UFCollection[] = await db.select(collectionSql, [
collection,
@@ -392,7 +371,7 @@ async function updatePostsCollect(
}
const TSUserCollection = {
getCollectPost,
getPostCollect,
getCollectList,
getCollectPostList,
getUnCollectPostList,