From 78dce18d9c29a2e53c4ca2de2a784fe685eb6c38 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 17 Jan 2025 01:31:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue                            |  5 +-
 components/user/postEditor.vue     | 12 +++--
 hooks/pinia/useUserStore.ts        |  1 -
 pages/user/main/post/edit-[id].vue | 76 ++++++++++++++++++++++++++++--
 server/api/posts/deletePost.ts     | 61 ++++++++++++++++++++++++
 style/default.scss                 |  4 ++
 6 files changed, 147 insertions(+), 12 deletions(-)
 create mode 100644 server/api/posts/deletePost.ts

diff --git a/app.vue b/app.vue
index 808650c..2d4d510 100644
--- a/app.vue
+++ b/app.vue
@@ -12,6 +12,7 @@
 <script lang="ts" setup>
 import miaoHeader from './components/miaoHeader.vue';
 import miaoContentWrapper from './components/miaoContentWrapper.vue';
+import "/style/default.scss";
 
 // @ts-ignore
 useHead({
@@ -32,9 +33,9 @@ useHead({
 }
 </style>
 
-<style lang="scss">
+<!-- <style lang="scss">
 @use '/style/default.scss';
-</style>
+</style> -->
 
 <style>
 .page-enter-active,
diff --git a/components/user/postEditor.vue b/components/user/postEditor.vue
index 6fadde4..232124f 100644
--- a/components/user/postEditor.vue
+++ b/components/user/postEditor.vue
@@ -3,27 +3,31 @@
         <!-- editor以后再写 -->
         <el-row :gutter="10">
             <el-col :span="12">
-                <el-input v-model:model-value="title" placeholder="title">
+                <el-input v-model:model-value="title" placeholder="title" :disabled="disabled">
                     <template #prepend>标题</template>
                 </el-input>
             </el-col>
             <el-col :span="12">
-                <el-input-tag v-model:model-value="tags" placeholder="添加标签" />
+                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled"/>
             </el-col>
         </el-row>
         <el-row>
             <el-col>
-                <el-input v-model:model-value="summary" placeholder="summary" >
+                <el-input v-model:model-value="summary" placeholder="summary" :disabled="disabled">
                     <template #prepend>摘要</template>
                 </el-input>
             </el-col>
         </el-row>
-        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" />
+        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" :disabled="disabled"/>
     </div>
 </template>
 
 <script setup lang="ts">
 
+const props = defineProps<{
+    disabled?: boolean
+}>()
+
 const title = defineModel<string>('title')
 const summary = defineModel<string>('summary')
 const tags = defineModel<string[]>('tags')
diff --git a/hooks/pinia/useUserStore.ts b/hooks/pinia/useUserStore.ts
index e5237a0..5153e0d 100644
--- a/hooks/pinia/useUserStore.ts
+++ b/hooks/pinia/useUserStore.ts
@@ -20,7 +20,6 @@ export const useUserStore = defineStore("user", () => {
     };
 
     const token = computed(() => {
-        console.log('token')
         if (_token.value) {
             return _token.value;
         }
diff --git a/pages/user/main/post/edit-[id].vue b/pages/user/main/post/edit-[id].vue
index c632e70..566d628 100644
--- a/pages/user/main/post/edit-[id].vue
+++ b/pages/user/main/post/edit-[id].vue
@@ -7,12 +7,16 @@
                 返回
             </div>
         </div>
-        <editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content" />
+        <editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content"
+            :disabled="disableEdit" />
         <el-row>
             <el-col :span="24">
                 <div class="flex-end">
-                    <el-text v-if="message" :type="message.type" style="user-select: none;">{{ message.message }}</el-text>
-                    <el-button @click="handleSubmit" style="margin-left: 10px;">
+                    <el-text v-if="message" :type="message.type" style="user-select: none;">{{ message.message
+                        }}</el-text>
+                    <el-button @click="handleClickDelete" style="margin-left: 10px;" v-if="!isNewPost">
+                        delete
+                    </el-button><el-button @click="handleSubmit" style="margin-left: 10px;">
                         upload
                     </el-button>
                 </div>
@@ -27,6 +31,7 @@ import useDefaultStore from '~/hooks/pinia/useDefaultStore';
 import useFetch from '~/hooks/useMiaoFetch';
 import type { postItem } from '~/types/post';
 import chevronDown from "~/components/icons/chevronDown.vue";
+// import type { Action } from 'element-plus/es/components/index.mjs';
 
 type resType = {
     data: string
@@ -38,12 +43,17 @@ const { post: { getPost, updatePost, uploadPost } } = useFetch()
 const route = useRoute()
 const router = useRouter()
 
+const isNewPost = ref(route.params.id === 'new')
+
 const id = ref<number>(-1)
 const title = ref<string>('')
 const summary = ref<string>('')
 const tags = ref<string[]>([])
 const content = ref<string>('')
 
+// 等待加载完成才允许编辑
+const disableEdit = ref(true)
+
 const message = ref<{ type: "" | "success" | "warning" | "info" | "primary" | "danger", message: string }>()
 
 const handleSubmit = () => {
@@ -54,6 +64,50 @@ const handleSubmit = () => {
     }
 }
 
+const handleClickDelete = async () => {
+    try {
+        await ElMessageBox.confirm(
+            '是否确定删除本篇文章？',
+            '警告',
+            {
+                confirmButtonText: '删除',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        await ElMessageBox.confirm(
+            '再次确认删除本篇文章',
+            '警告',
+            {
+                confirmButtonText: '删除',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        try {
+            const response = await $fetch('/api/posts/deletePost', {
+                method: 'POST',
+                body: {
+                    id: id.value
+                }
+            })
+            ElMessage({
+                type: 'success',
+                message: '删除文章完成',
+            })
+            const store = useDefaultStore()
+            store.deleteCache('posts')
+            router.back()
+        } catch {
+            ElMessage({
+                type: 'error',
+                message: '删除失败',
+            })
+        }
+    } catch {
+    }
+}
+
 const handleUpload = async () => {
     try {
         message.value = {
@@ -81,6 +135,7 @@ const handleUpload = async () => {
         }
         const store = useDefaultStore()
         store.deleteCache('posts')
+        isNewPost.value = false
     } catch (error) {
         console.error(error)
         message.value = {
@@ -129,16 +184,27 @@ const handleBack = () => {
 }
 
 onMounted(async () => {
-    console.log('route', route.params.id, route.params.id === 'new')
     if (route.params.id !== 'new') {
+        message.value = {
+            type: 'info',
+            message: '初始化中'
+        }
         id.value = parseInt(route.params.id as string)
         const res = await getPost(id.value) as any as resType
-        console.log(res)
         id.value = res.id
         title.value = res.title
         summary.value = res.summary
         tags.value = []
         content.value = res.data
+        disableEdit.value = false
+
+
+        message.value = {
+            type: 'info',
+            message: ''
+        }
+    } else {
+        disableEdit.value = false
     }
 })
 </script>
diff --git a/server/api/posts/deletePost.ts b/server/api/posts/deletePost.ts
new file mode 100644
index 0000000..9234050
--- /dev/null
+++ b/server/api/posts/deletePost.ts
@@ -0,0 +1,61 @@
+// miaoBlog/server/api/posts/deletePost.ts
+import DB from 'better-sqlite3';
+import cacheResult from '~/server/utils/cacheRes';
+
+function prepareDB() {
+    const db = new DB('./userData/db/posts.db');
+
+    const deletePostStmt = db.prepare('DELETE FROM posts WHERE id = ?');
+    const deleteContentStmt = db.prepare('DELETE FROM postContent WHERE id = ?');
+    const getTagIdStmt = db.prepare('SELECT tag_id FROM posts WHERE id = ?');
+    const deleteTagsStmt = db.prepare('DELETE FROM tags WHERE id = ?');
+
+    return { db, deletePostStmt, deleteContentStmt, getTagIdStmt, deleteTagsStmt };
+}
+
+export default defineEventHandler(async (event) => {
+    const { db, deletePostStmt, deleteContentStmt, getTagIdStmt, deleteTagsStmt } = cacheResult(prepareDB)();
+
+    const body = await readBody(event);
+    const { id } = body;
+
+    // 检查是否提供了有效的id
+    if (!id || isNaN(Number(id))) {
+        db.close();
+        return {
+            code: 400,
+            msg: '无效的id'
+        };
+    }
+
+    try {
+        // 开启事务
+        db.transaction(() => {
+            // 先从posts表中删除文章记录
+            deletePostStmt.run(Number(id));
+
+            // 再从postContent表中删除文章内容记录
+            deleteContentStmt.run(Number(id));
+
+            // 查找该文章对应的tag_id
+            const tagRow: any = getTagIdStmt.get(Number(id));
+            if (tagRow && tagRow.tag_id) {
+                // 如果存在tag_id，从tags表中删除对应的标签记录
+                deleteTagsStmt.run(tagRow.tag_id);
+            }
+        })();
+
+        db.close();
+        return {
+            code: 200,
+            msg: '删除成功'
+        };
+    } catch (error) {
+        console.error('删除数据时出错:', error);
+        db.close();
+        return {
+            code: 500,
+            msg: '服务器内部错误'
+        };
+    }
+});
\ No newline at end of file
diff --git a/style/default.scss b/style/default.scss
index 55a35cd..7bfb1e6 100644
--- a/style/default.scss
+++ b/style/default.scss
@@ -15,4 +15,8 @@ body {
 
 :focus-visible {
     outline: #15aa8761 auto 1px;
+}
+
+.el-message {
+    z-index: 70582140 !important;
 }
\ No newline at end of file