补充编辑form

vblog/web/README.md

@@ -568,3 +568,25 @@ const deleteBlog = async (id) => {
   删除
 </a-button>
 ```
+
+## 文章删除提醒
+
+```vue
+<a-popconfirm
+  :okLoading="delteLoadding === record.id"
+  @ok="deleteBlog(record.id)"
+  type="warning"
+  :content="`是否需要删除【${record.title}】？`"
+>
+                  <a-button :loading="delteLoadding === record.id" status="danger">
+                    <template #icon>
+                      <icon-delete />
+                    </template>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+```
+
+## 文章的创建
+
+选择一个mardown的编辑器

vblog/web/src/router/index.js

@@ -45,6 +45,14 @@ const router = createRouter({
                 lable: '文章列表',
               },
             },
+            {
+              path: 'edit',
+              name: 'backend_blog_edit',
+              component: () => import('../views/backend/blog/EditPage.vue'),
+              meta: {
+                lable: '文章编辑',
+              },
+            },
             {
               path: 'tag_list',
               name: 'backend_tag_list',

vblog/web/src/views/backend/blog/EditPage.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <!-- 页头 -->
+    <div class="page-header">
+      <a-page-header @back="$router.go(-1)" :title="isEdit ? '编辑文章' : '创建文章'">
+        <template #extra>
+          <a-button type="primary">
+            <template #icon>
+              <icon-save />
+            </template>
+            保存
+          </a-button>
+        </template>
+      </a-page-header>
+    </div>
+    <!-- form表单 -->
+    <a-form :model="form" layout="vertical">
+      <a-form-item field="title" label="标题">
+        <a-input v-model="form.title" placeholder="请填写文章的标题" />
+      </a-form-item>
+      <a-form-item field="category" label="分类">
+        <a-select v-model="form.category" placeholder="请选择文章分类" @change="() => queryData()">
+          <a-option>软件开发</a-option>
+          <a-option>系统运维</a-option>
+          <a-option>软件测试</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="summary" label="概要">
+        <a-textarea v-model="form.summary" :auto-size="{ minRows: 4, maxRows: 4 }" placeholder="请填写文章的概要信息"
+          allow-clear />
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script setup>
+
+import { reactive } from 'vue';
+import { useRoute } from 'vue-router';
+
+// 查询当前页面的路由信息
+const route = useRoute()
+const isEdit = route.query.id ? true : false
+
+const form = reactive({
+  title: '',
+  summary: '',
+  content: '',
+  category: '',
+  tags: {}
+})
+</script>
+
+<style lang="css" scoped></style>

vblog/web/src/views/backend/blog/ListPage.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- 页头 -->
     <div class="page-header">
-      <a-page-header title="文章管理">
+      <a-page-header @back="$router.go(-1)" title="文章管理">
       </a-page-header>
     </div>
     <!-- table 选项 -->
@@ -16,7 +16,7 @@
     </div>
     <div style="display: flex; margin-top: 12px;">
       <div>
-        <a-button type="primary">
+        <a-button @click="$router.push({ name: 'backend_blog_edit' })" type="primary">
           <template #icon>
             <icon-plus />
           </template>
@@ -43,7 +43,7 @@
           <a-table-column align="center" title="操作">
             <template #cell="{ record }">
               <a-space>
-                <a-button type="primary" @click="$modal.info({ title: 'Name', content: record.id })">
+                <a-button type="primary" @click="$router.push({ name: 'backend_blog_edit', query: { id: record.id } })">
                   <template #icon>
                     <icon-edit />
                   </template>