From d7f1bf7d49a8383c939086c343bc56db3a8c0026 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Wed, 15 Jan 2025 07:39:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=A7=E7=BB=AD=E5=AE=8C=E6=88=90...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/icons/create.vue        |   3 +
 components/user/postEditor.vue     |  29 +++--
 pages/user/main/post/edit-[id].vue | 146 ++++++++++++++++-----
 pages/user/main/post/index.vue     | 197 ++++++++++++++++++-----------
 server/api/posts/getPostList.ts    |   2 +-
 server/api/posts/uploadPost.ts     |   6 +-
 style/el-miao-style.scss           |   3 +
 tsconfig.json                      |   6 +-
 8 files changed, 270 insertions(+), 122 deletions(-)
 create mode 100644 components/icons/create.vue
 create mode 100644 style/el-miao-style.scss

diff --git a/components/icons/create.vue b/components/icons/create.vue
new file mode 100644
index 0000000..9ed0f31
--- /dev/null
+++ b/components/icons/create.vue
@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M384 224v184a40 40 0 0 1-40 40H104a40 40 0 0 1-40-40V168a40 40 0 0 1 40-40h167.48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M459.94 53.25a16.06 16.06 0 0 0-23.22-.56L424.35 65a8 8 0 0 0 0 11.31l11.34 11.32a8 8 0 0 0 11.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38z" fill="currentColor"></path><path d="M399.34 90L218.82 270.2a9 9 0 0 0-2.31 3.93L208.16 299a3.91 3.91 0 0 0 4.86 4.86l24.85-8.35a9 9 0 0 0 3.93-2.31L422 112.66a9 9 0 0 0 0-12.66l-9.95-10a9 9 0 0 0-12.71 0z" fill="currentColor"></path></svg>
+</template>
\ No newline at end of file
diff --git a/components/user/postEditor.vue b/components/user/postEditor.vue
index 830fc57..8253423 100644
--- a/components/user/postEditor.vue
+++ b/components/user/postEditor.vue
@@ -1,20 +1,29 @@
 <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 />
+        <!-- editor以后再写 -->
+        <el-row :gutter="10">
+            <el-col :span="8">
+                <el-input v-model:model-value="title" placeholder="title">
+                    <template #prepend>标题</template>
+                </el-input>
+            </el-col>
+            <el-col :span="16">
+                <el-input-tag v-model:model-value="tags" placeholder="添加标签" />
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col>
+                <el-input v-model:model-value="summary" placeholder="summary" >
+                    <template #prepend>摘要</template>
+                </el-input>
+            </el-col>
+        </el-row>
+        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" />
     </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')
diff --git a/pages/user/main/post/edit-[id].vue b/pages/user/main/post/edit-[id].vue
index 88e2a26..53c0bf7 100644
--- a/pages/user/main/post/edit-[id].vue
+++ b/pages/user/main/post/edit-[id].vue
@@ -1,11 +1,17 @@
+<!-- 若route.params.id为new则为新建而非修改 -->
 <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 class="post-editor-wrapper">
+        <editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content" />
+        <el-row>
+            <el-col :span="24">
+                <div class="flex-end">
+                    <el-text v-if="message" :type="message.type">{{ message.message }}</el-text>
+                    <el-button @click="handleSubmit" style="margin-left: 10px;">
+                        upload
+                    </el-button>
+                </div>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -20,42 +26,114 @@ type resType = {
 } & postItem
 
 
-const { post: { getPost, updatePost } } = useFetch()
+const { post: { getPost, updatePost, uploadPost } } = useFetch()
 
 const route = useRoute()
 
 const id = ref<number>(-1)
-const title = ref<string>('title')
-const summary = ref<string>('summary')
+const title = ref<string>('')
+const summary = ref<string>('')
 const tags = ref<string[]>([])
-const content = ref<string>('content')
+const content = ref<string>('')
 
-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')
+const message = ref<{ type: "" | "success" | "warning" | "info" | "primary" | "danger", message: string }>()
+
+const handleSubmit = () => {
+    if (id.value === -1) {
+        handleUpload()
+    } else {
+        handleUpdate()
+    }
 }
 
-onBeforeMount(async () => {
+const handleUpload = async () => {
+    try {
+        const response = await uploadPost({
+            title: title.value,
+            summary: summary.value,
+            tags: tags.value,
+            url: '',
+            content: content.value,
+            type: 'markdown',
+            date: Date.now()
+        })
+        if (response.code !== 200) {
+            throw ('response')
+        }
+        // @ts-ignore
+        id.value = response.id
+        console.log(id.value)
+        message.value = {
+            type: 'success',
+            message: '上传成功'
+        }
+        const store = useDefaultStore()
+        store.deleteCache('posts')
+    } catch (error) {
+        console.error(error)
+        message.value = {
+            type: 'danger',
+            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
+const handleUpdate = async () => {
+    try {
+        const response = await updatePost({
+            id: id.value,
+            title: title.value,
+            summary: summary.value,
+            tags: tags.value,
+            url: '',
+            content: content.value,
+            type: 'markdown',
+            date: Date.now()
+        })
+        if (response.code !== 200) {
+            throw ('response')
+        }
+        message.value = {
+            type: 'success',
+            message: '上传成功'
+        }
+        const store = useDefaultStore()
+        store.deleteCache('posts')
+    } catch (error) {
+        console.error(error)
+        message.value = {
+            type: 'danger',
+            message: '上传出错'
+        }
+    }
+}
+
+onMounted(async () => {
+    console.log('route', route.params.id, route.params.id === 'new')
+    if (route.params.id !== 'new') {
+        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>
\ No newline at end of file
+<style scoped>
+.post-editor-wrapper {
+    /* box-sizing: border-box; */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
\ No newline at end of file
diff --git a/pages/user/main/post/index.vue b/pages/user/main/post/index.vue
index 52d61e6..7cbc54c 100644
--- a/pages/user/main/post/index.vue
+++ b/pages/user/main/post/index.vue
@@ -4,55 +4,68 @@
             文章列表
         </div>
         <div class="post-index-list">
-            <div class="post-index-list-item">
-                上传文章
-            </div>
-            <div v-for="post in postList" :key="post.id" class="post-item post-index-list-item">
-                <div class="post-item-header">
-                    <div class="post-item-header-title">
-                        {{ post.title }}
+            <el-card class="post-index-list-create" @click="handleNewPost">
+                <create class="post-index-list-create-icon"></create>
+                <div class="post-index-list-create-text">新建文章</div>
+            </el-card>
+            <el-card class="post-index-list-card" v-for="post in postList" :key="post.id">
+                <template #header>
+                    <div class="post-index-list-card-header">
+                        <el-text line-clamp="2">{{ post.title }}</el-text>
+                        <el-button @click="handleClickEditBtn(post.id)">
+                            编辑
+                        </el-button>
                     </div>
-                    <!-- <div class="post-item-header-date">
-                        {{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
-                    </div> -->
-                </div>
-                <div class="post-item-content">
-                    <span>
-                        {{ post.summary }}
-                    </span>
-                </div>
-                <div class="post-item-footer">
-                    <div class="post-item-footer-info">
-                        <div class="post-item-footer-info-date">
-                            {{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
-                        </div>
-                        <div class="post-item-footer-info-tags">
-                            <span v-for="tag in post.tags" :key="tag">{{ tag }}</span>
-                        </div>
+                </template>
+                <div class="post-index-list-card-content">
+                    <div class="post-index-list-card-content-summary">
+                        <el-text line-clamp="2">
+                            {{ post.summary }}
+                        </el-text>
                     </div>
-                    <el-button class="post-item-footer-btn" @click="handleClickEditBtn(post.id)">
-                        编辑
-                    </el-button>
+                    <el-text line-clamp="1">
+                        <el-tag size="small" class="post-index-list-card-content-tag" v-for="tag in post.tags"
+                            :key="tag" style="user-select: none;">
+                            {{ tag }}
+                        </el-tag>
+                    </el-text>
                 </div>
-            </div>
+                <template #footer>
+                    <div class="post-index-list-card-footer">
+                        {{ formatDate(post.date, 'yyyy-MM-dd HH:mm:ss') }}
+                    </div>
+                </template>
+            </el-card>
+
+            <el-card v-if="isLoading" v-for="_ in 6">
+                <el-skeleton :rows="5" />
+            </el-card>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import type { postItem } from '~/types/post';
+import create from '~/components/icons/create.vue';
 import getPostList from '~/utils/getPost';
 
 const router = useRouter()
 
+const isLoading = ref(true);
+
 const postList = ref<postItem[]>([]);
 
 const handleClickEditBtn = (id: number) => {
     router.push(`/user/main/post/edit-${id}`)
 }
 
+const handleNewPost = () => {
+    router.push('/user/main/post/edit-new')
+}
+
 onMounted(async () => {
     postList.value = await getPostList();
+    isLoading.value = false;
 })
 </script>
 
@@ -85,65 +98,99 @@ onMounted(async () => {
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: 1rem;
 
-        &-item {
-            // height: 100px;
-            border-radius: 5px;
-            border: 1px solid #ccc;
+        &-create {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            &-text {
+                letter-spacing: 2px;
+                transform: translateX(-2px);
+                user-select: none;
+            }
         }
 
-        .post-item {
-            box-sizing: border-box;
-            overflow: hidden;
-            padding-bottom: 5px;
-
-            // padding: 10px;
+        &-card {
             &-header {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                &-title {
-                    width: 100%;
-                    box-sizing: border-box;
-                    text-align: center;
-                    letter-spacing: 4px;
-                    text-decoration: none;
-                    font-size: large;
-                    background-color: #15aa87;
-                    color: #fff;
-                    padding: 3px 0 5px;
-                    // font-family: PT Serif, Serif;
-                }
-            }
-
-            &-content {
-                max-height: 45px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                text-indent: 2em;
-                color: #363636;
-            }
-
-            &-footer {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-top: 5px;
+            }
 
-                &-info {
-                    padding: 0 5px;
-
-                    &>div {
-                        font-size: 10px;
-                    }
+            &-content {
+                &-tags {
+                    display: flex;
+                    height: 25px;
+                    max-width: calc(100% - 0px);
+                    user-select: none;
                 }
 
-                &-btn {
-                    height: 25px;
-                    margin-right: 10px;
+                &-tag:not(:first-child) {
+                    margin: 0 5px;
                 }
             }
+
+            &-footer {
+                font-size: smaller;
+                color: #686868;
+            }
         }
+
+        // .post-item {
+        //     box-sizing: border-box;
+        //     overflow: hidden;
+        //     padding-bottom: 5px;
+
+        //     // padding: 10px;
+        //     &-header {
+        //         display: flex;
+        //         flex-direction: column;
+        //         justify-content: space-between;
+
+        //         &-title {
+        //             width: 100%;
+        //             box-sizing: border-box;
+        //             text-align: center;
+        //             letter-spacing: 4px;
+        //             text-decoration: none;
+        //             font-size: large;
+        //             background-color: #15aa87;
+        //             color: #fff;
+        //             padding: 3px 0 5px;
+        //             // font-family: PT Serif, Serif;
+        //         }
+        //     }
+
+        //     &-content {
+        //         max-height: 45px;
+        //         overflow: hidden;
+        //         text-overflow: ellipsis;
+        //         text-indent: 2em;
+        //         color: #363636;
+        //     }
+
+        //     &-footer {
+        //         display: flex;
+        //         justify-content: space-between;
+        //         align-items: center;
+        //         margin-top: 5px;
+
+        //         &-info {
+        //             padding: 0 5px;
+
+        //             &>div {
+        //                 font-size: 10px;
+        //             }
+        //         }
+
+        //         &-btn {
+        //             height: 25px;
+        //             margin-right: 10px;
+        //         }
+        //     }
+        // }
     }
 }
 </style>
\ No newline at end of file
diff --git a/server/api/posts/getPostList.ts b/server/api/posts/getPostList.ts
index b22c79d..e302fae 100644
--- a/server/api/posts/getPostList.ts
+++ b/server/api/posts/getPostList.ts
@@ -30,6 +30,6 @@ export default defineEventHandler(async (event) => {
 
     return {
         code: 200,
-        data: posts
+        data: posts.reverse()
     };
 });
\ No newline at end of file
diff --git a/server/api/posts/uploadPost.ts b/server/api/posts/uploadPost.ts
index 05077f5..47f8ea3 100644
--- a/server/api/posts/uploadPost.ts
+++ b/server/api/posts/uploadPost.ts
@@ -42,6 +42,7 @@ export default defineEventHandler(async (event) => {
     const tags = tagsArray.slice(0, 15).concat(new Array(15 - tagsArray.length).fill(null));
 
     try {
+        let id = -1
         db.transaction(() => {
             // 插入tags表
             const tagResult = insertTagsStmt.run(...tags);
@@ -51,13 +52,16 @@ export default defineEventHandler(async (event) => {
             const postResult = insertPostStmt.run(title, summary, type, url, date, tagId);
             const postId = postResult.lastInsertRowid;
 
+            id = postId as number;
+
             // 插入postContent表
             insertContentStmt.run(postId, content);
         })();
 
         return {
             code: 200,
-            msg: '插入成功'
+            msg: '插入成功',
+            id
         };
     } catch (error) {
         console.error('插入数据时出错:', error);
diff --git a/style/el-miao-style.scss b/style/el-miao-style.scss
new file mode 100644
index 0000000..1edd833
--- /dev/null
+++ b/style/el-miao-style.scss
@@ -0,0 +1,3 @@
+.miao-button {
+    
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 2704d9a..f62873c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,8 +8,12 @@
     "server/**/*",
     "style/**/*",
     "utils/**/*",
-    ".nuxt/*.d.ts",
     "types/**/*",
     "plugins/**/*",
+    ".nuxt/imports.d.ts",
+    ".nuxt/nuxt.d.ts",
+  ],
+  "exclude": [
+    ".nuxt/components.d.ts",
   ]
 }