fix: post delete not works

Author: imzlh

package.json

@@ -33,7 +33,7 @@
     "vue-tsc": "^2.2.0"
   },
   "config": {
-    "base": "/data/",
+    "base": "http://192.168.1.1/.www/blog/data/",
     "post_dir": "post/",
     "page_dir": "page/",
     "static_dir": "static/",

src/admin/driver.ts

@@ -18,6 +18,16 @@ export class RemoteFile{
         return res;
     }
 
+    static async __delete(f: string){
+        this.__check_enabled();
+        const url = `${CONFIG.davroot}${CONFIG.davbase ?? config.base}${f}`;
+        const res = await fetch(url, {
+            method: 'DELETE'
+        });
+        if(!res.ok) throw new Error(`Failed to delete ${url}: ${res.statusText}`);
+        return res;
+    }
+
     static async __put(f: string, data: XMLHttpRequestBodyInit){
         this.__check_enabled();
         const url = `${CONFIG.davroot}${CONFIG.davbase ?? config.base}${f}`;
@@ -96,4 +106,17 @@ ${contents}
     // repack
     const str = await exportIndex();
     await RemoteFile.__put(config.index, str);
+}
+
+export async function delete_post(post: Post) {
+    post.del();
+    const rpath = config.post_dir + post.info.name + '.md';
+    const ctx = await RemoteFile.__get(rpath).then(r => r.text());
+    await RemoteFile.__delete(rpath);
+
+    // repack
+    const str = await exportIndex();
+    await RemoteFile.__put(config.index, str);
+
+    console.warn('Post deleted:', post.info, '\ndeleted content:\n', ctx);
 }

src/admin/postlist.vue

@@ -2,31 +2,33 @@
     <div class="post-list-container" tabindex="1" @blur="activePost = null">
         <!-- 筛选控件 -->
         <div class="filter-controls">
-            <div class="filter-row" style="width: 20%;">
-                <Autofill
-                    v-model="searchQuery"
-                    :options="posts.map(p => p.title)"
-                    placeholder="搜索文章标题..."
-                    @select="searchQuery = $event as string"
-                />
-            </div>
-            
-            <div class="filter-row">
-                <Autofill 
-                    v-model="selectedCategory"
-                    :options="['所有分类', ...allCategories]"
-                    placeholder="选择分类"
-                    @select="selectedCategory = $event == '所有分类' ? null : $event as string"
-                />
-            </div>
-            
-            <div class="filter-row">
-                <Autofill 
-                    v-model="tagQuery"
-                    :options="allTags"
-                    placeholder="选择标签"
-                    @select="selectedTags.includes($event as string) || selectedTags.push($event as string); tagQuery = ''"
-                />
+            <div class="filter-col">
+                <div class="filter-row" style="width: 20%;">
+                    <Autofill
+                        v-model="searchQuery"
+                        :options="posts.map(p => p.title)"
+                        placeholder="搜索文章标题..."
+                        @select="searchQuery = $event as string"
+                    />
+                </div>
+                
+                <div class="filter-row">
+                    <Autofill 
+                        v-model="selectedCategory"
+                        :options="['所有分类', ...allCategories]"
+                        placeholder="选择分类"
+                        @select="selectedCategory = $event == '所有分类' ? null : $event as string"
+                    />
+                </div>
+                
+                <div class="filter-row">
+                    <Autofill 
+                        v-model="tagQuery"
+                        :options="allTags"
+                        placeholder="选择标签"
+                        @select="selectedTags.includes($event as string) || selectedTags.push($event as string); tagQuery = ''"
+                    />
+                </div>
             </div>
 
             <div v-if="selectedTags.length" class="selected-tags">
@@ -52,15 +54,15 @@
             <div class="post-header">
                 <h3 class="post-title">{{ post.title }}</h3>
                 <div class="post-meta">
-                    <button class="delete-btn" @click.stop="handleDelete(post.name)">删除</button>
+                    <button class="delete-btn" @click.stop="handleDelete(post.name, $event)">删除</button>
                     <span class="post-date">{{ formatDate(post.created) }}</span>
                     <span v-if="post.category" class="post-category">{{ post.category }}</span>
                 </div>
             </div>
 
             <transition name="slide-fade">
                 <div v-show="activePost === post.name" class="post-details">
-                    <p v-if="post.outline" class="post-outline">{{ post.outline }}</p>
+                    <p v-if="post.outline" class="post-outline">{{ post.outline }} ...</p>
                     <div v-if="post.tags && post.tags.length" class="post-tags">
                         <span v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</span>
                     </div>
@@ -155,9 +157,16 @@
         }
     })
 
-    const handleDelete = (postName: string) => {
+    const handleDelete = (postName: string, ev: Event) => {
         if(confirm('确定要删除这篇文章吗？')) {
             emit('delete', postName)
+
+            // remove element
+            let el = ev.target as HTMLElement;
+            while(!el.classList.contains('post-item')){
+                el = el.parentElement as HTMLElement;
+            }
+            el.remove();
         }
     }
 
@@ -191,6 +200,9 @@
         padding: 1.5rem;
         background-color: #f8f9fa;
         border-radius: 0.8rem;
+    }
+
+    .filter-controls .filter-col {
         display: flex;
         gap: 1.2rem;
     }

src/admin/posts.vue

@@ -3,6 +3,7 @@
     import { Post } from '../utils/post';
     import Postlist from './postlist.vue';
     import { useRouter } from 'vue-router';
+import { delete_post } from './driver';
 
     const $route = useRouter();
     function goto(post: IPost){
@@ -13,12 +14,23 @@
             }
         });
     }
+
+    function delPost(postName: string){
+        const post = Post.get(postName);
+        if(!post) throw new Error('Post not found');
+        delete_post(post).catch(e => {
+            console.error(e);
+            alert('删除失败')
+        });
+    }
 </script>
 
 <template>
     <div class="posts-wrapper">
         <h1>文章列表</h1>
-        <Postlist :posts="Post.get_all().array.map(i => markRaw(i.info))" @navigate="goto" />
+        <Postlist :posts="Post.get_all().array.map(i => markRaw(i.info))" @navigate="goto"
+            @delete="delPost"
+        />
     </div>
 </template>
 

src/utils/post.ts

@@ -268,6 +268,15 @@ export class Post{
             this.$post.modified = Date.now();
         }
     }
+
+    del(){
+        if(!this.$create){
+            const idx = cache.post.findIndex(post => post.name === this.$post.name);
+            if(idx >= 0) cache.post.splice(idx, 1);
+        }
+        this.$create = false;
+        console.log('Post deleted:', this.$post.name);
+    }
 }
 
 // 初始化post