feat: 继续完成文章编辑器中

components/user/postEditor.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="post-editor">
+        editor以后再写
+        <el-input v-model:model-value="id" placeholder="id" />
+        <el-input v-model:model-value="title" placeholder="title" />
+        <el-input v-model:model-value="summary" placeholder="summary" />
+        <el-input-tag v-model:model-value="tags" placeholder="tags" />
+        <el-input type="textarea" v-model:model-value="content" placeholder="content" autosize />
+    </div>
+</template>
+
+<script setup lang="ts">
+import useMiaoFetch from '~/hooks/useMiaoFetch';
+
+// const { post: { updatePost } } = useMiaoFetch()
+
+const id = defineModel<number>('id')
+const title = defineModel<string>('title')
+const summary = defineModel<string>('summary')
+const tags = defineModel<string[]>('tags')
+const content = defineModel<string>('content')
+
+</script>
+
+<style scoped>
+.post-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+</style>

hooks/useMiaoFetch.ts

@@ -37,8 +37,11 @@ export default function useFetch() {
                     'Authorization': `Bearer ${userStore.token}`
                 }
             }),
-            getPost: (id: number) => $fetch(`/api/posts/getPost?id=${id}`, {
+            getPost: (id: number) => $fetch(`/api/posts/getPostContent`, {
-                method: 'GET',
+                method: 'post',
+                body: {
+                    id
+                },
                 headers: {
                     'Authorization': `Bearer ${userStore.token}`
                 }

pages/user/main.vue

@@ -2,8 +2,8 @@
     <div :class="['user-main', showSidebar ? '' : 'hide-sidebar']">
         <div class="user-sidebar">
             <!-- <el-button @click="handleHideSidebar">hide</el-button> -->
-            <div class="sidebar-item" @click="handleHideSidebar">
+            <div class="sidebar-item" @click="handleHideSidebar" style="justify-content: center;">
-                <div class="sidebar-item-icon">
+                <div class="sidebar-item-icon" style="transform: translateX(3px);">
                     <component class="sidebar-item-icon-noFill" :is="chevronDown"
                         :style="{ transform: showSidebar ? '' : 'rotate(-90deg)' }"></component>
                 </div>

pages/user/main/post/edit-[id].vue

@@ -1,15 +1,61 @@
 <template>
     <div>
         edit: id-{{ route.params.id }}
+        <editor v-model:id="id" v-model:title="title" v-model:summary="summary" v-model:tags="tags"
+            v-model:content="content"></editor>
+        <el-button @click = handleUpdate>
+            upload
+        </el-button>
     </div>
 </template>
 
 <script setup lang="ts">
+import editor from '~/components/user/postEditor.vue';
+import useDefaultStore from '~/hooks/pinia/useDefaultStore';
+import useFetch from '~/hooks/useMiaoFetch';
+import type { postItem } from '~/types/post';
+
+type resType = {
+    data: string
+} & postItem
+
+
+const { post: { getPost, updatePost } } = useFetch()
 
 const route = useRoute()
 
+const id = ref<number>(-1)
+const title = ref<string>('title')
+const summary = ref<string>('summary')
+const tags = ref<string[]>([])
+const content = ref<string>('content')
+
+const handleUpdate = () => {
+    updatePost({
+        id: id.value,
+        title: title.value,
+        summary: summary.value,
+        tags: tags.value,
+        url: '',
+        content: content.value,
+        type: 'markdown',
+        date: Date.now()
+    })
+    const store = useDefaultStore()
+    store.deleteCache('posts')
+}
+
+onBeforeMount(async () => {
+
+    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
+})
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

server/api/posts/getPostContent.ts

@@ -1,6 +1,7 @@
 // @ts-ignore
 import testData from "~/public/testData/test.md"
 import DB from 'better-sqlite3';
+import { postItem } from "~/types/post";
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)
@@ -13,7 +14,7 @@ export default defineEventHandler(async (event) => {
   }
 
   const db = new DB('./userData/db/posts.db');
-  const post: any = db.prepare('SELECT * FROM posts WHERE id = ?').get(Number(id));
+  const post = db.prepare('SELECT * FROM posts WHERE id = ?').get(Number(id)) as postItem;
   const content: any = db.prepare('SELECT content FROM postContent WHERE id = ?').get(Number(id));
   db.close();
 
@@ -34,6 +35,6 @@ export default defineEventHandler(async (event) => {
   return {
     code: 200,
     data: content.content,
-    title: post.title
+    ...post
   };
 })