From 728f7406b60dad57b741bd93d5947e85c83eb67c Mon Sep 17 00:00:00 2001
From: "haoxuan.huang" <haoxuan.huang@shopee.com>
Date: Mon, 3 Nov 2025 14:29:14 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E6=89=B9=E9=87=8F=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json                         |   2 +
 .../editor/post-slider/PostItem.vue           |  74 ++++----
 .../components/editor/post-slider/index.vue   | 158 +++++++++++++++++-
 .../src/components/ui/check-box/CheckBox.vue  |  32 ++++
 pnpm-lock.yaml                                |  14 ++
 5 files changed, 236 insertions(+), 44 deletions(-)
 create mode 100644 apps/web/src/components/ui/check-box/CheckBox.vue

diff --git a/apps/web/package.json b/apps/web/package.json
index 027e99e8b..6c94b5534 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -52,6 +52,7 @@
     "highlight.js": "^11.11.1",
     "html-to-image": "^1.11.13",
     "isomorphic-dompurify": "^2.28.0",
+    "jszip": "^3.10.1",
     "juice": "^11.0.3",
     "lucide-vue-next": "^0.544.0",
     "marked": "^16.3.0",
@@ -85,6 +86,7 @@
     "@types/buffer-from": "^1.1.3",
     "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
+    "@types/jszip": "^3.4.1",
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
diff --git a/apps/web/src/components/editor/post-slider/PostItem.vue b/apps/web/src/components/editor/post-slider/PostItem.vue
index edaedb635..14dc3603e 100644
--- a/apps/web/src/components/editor/post-slider/PostItem.vue
+++ b/apps/web/src/components/editor/post-slider/PostItem.vue
@@ -48,6 +48,12 @@ const props = defineProps<{
   handleDragEnd: () => void
   // 以添加子文章的方式打开对话框
   openAddPostDialog: (parentId: string) => void
+  // 打开多选导出对话框
+  isOpenMultipleMode: boolean
+  // 选中的文章 ID 集合
+  selectedPosts: Set<string>
+  // 切换文章选中状态
+  togglePostSelection: (postId: string) => void
 }>()
 
 const store = useStore()
@@ -84,11 +90,13 @@ function isHasChild(postId: string) {
 </script>
 
 <template>
-  <div v-for="post in props.sortedPosts.filter(p => (props.parentId == null && p.parentId == null) || p.parentId === props.parentId)" :key="post.id">
+  <div
+    v-for="post in props.sortedPosts.filter(p => (props.parentId == null && p.parentId == null) || p.parentId === props.parentId)"
+    :key="post.id"
+  >
     <!-- 根文章外层容器 -->
     <a
-      class="w-full inline-flex cursor-pointer items-center gap-1 rounded p-2 text-sm transition-colors"
-      :class="[
+      class="w-full inline-flex cursor-pointer items-center gap-1 rounded p-2 text-sm transition-colors" :class="[
         // eslint-disable-next-line vue/prefer-separate-static-class
         'hover:text-primary-foreground hover:bg-primary',
         {
@@ -97,39 +105,31 @@ function isHasChild(postId: string) {
           'outline-2 outline-dashed outline-primary  border-gray-200 bg-gray-400/50 dark:border-gray-200 dark:bg-gray-500/50':
             props.dropTargetId === post.id,
         },
-      ]"
-      draggable="true"
-      @dragstart="handleDragStart(post.id, $event)"
-      @dragend="props.handleDragEnd"
-      @drop.prevent="props.handleDrop(post.id)"
-      @dragover.stop.prevent="props.setDropTargetId(post.id)"
-      @dragleave.prevent="props.setDropTargetId(null)"
-      @click="store.currentPostId = post.id"
+      ]" draggable="true" @dragstart="handleDragStart(post.id, $event)" @dragend="props.handleDragEnd"
+      @drop.prevent="props.handleDrop(post.id)" @dragover.stop.prevent="props.setDropTargetId(post.id)"
+      @dragleave.prevent="props.setDropTargetId(null)" @click="store.currentPostId = post.id"
     >
       <!-- 折叠展开图标 -->
       <Button
-        size="xs"
-        variant="ghost"
-        class="h-max p-0.5"
-        :class="isHasChild(post.id) ? 'opacity-100' : 'opacity-0'"
+        size="xs" variant="ghost" class="h-max p-0.5" :class="isHasChild(post.id) ? 'opacity-100' : 'opacity-0'"
         @click.stop="isHasChild(post.id) && togglePostExpanded(post.id)"
       >
-        <ChevronRight
-          class="size-4 transition-transform"
-          :class="{ 'rotate-90': !post.collapsed }"
-        />
+        <ChevronRight class="size-4 transition-transform" :class="{ 'rotate-90': !post.collapsed }" />
       </Button>
+      <CheckBox
+        v-if="props.isOpenMultipleMode" :checked="props.selectedPosts.has(post.id)"
+        @update:checked="props.togglePostSelection(post.id)"
+      >
+        <span class="line-clamp-1">{{ post.title }}</span>
+      </CheckBox>
 
-      <span class="line-clamp-1">{{ post.title }}</span>
+      <!-- 如果没有开启多选模式，直接显示标题 -->
+      <span v-if="!props.isOpenMultipleMode" class="line-clamp-1">{{ post.title }}</span>
 
       <!-- 每条文章操作 -->
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button
-            size="xs"
-            variant="ghost"
-            class="ml-auto h-max p-0.5"
-          >
+          <Button size="xs" variant="ghost" class="ml-auto h-max p-0.5">
             <Ellipsis class="size-4" />
           </Button>
         </DropdownMenuTrigger>
@@ -143,10 +143,7 @@ function isHasChild(postId: string) {
           <DropdownMenuItem @click.stop="props.openHistoryDialog(post.id)">
             <History class="mr-2 size-4" /> 历史记录
           </DropdownMenuItem>
-          <DropdownMenuItem
-            v-if="store.posts.length > 1"
-            @click.stop="props.startDelPost(post.id)"
-          >
+          <DropdownMenuItem v-if="store.posts.length > 1" @click.stop="props.startDelPost(post.id)">
             <Trash2 class="mr-2 size-4" /> 删除
           </DropdownMenuItem>
         </DropdownMenuContent>
@@ -158,18 +155,13 @@ function isHasChild(postId: string) {
       class="space-y-1 ml-4 mt-1 border-l-2 border-gray-300 pl-1 dark:border-gray-700"
     >
       <PostItem
-        :parent-id="post.id"
-        :sorted-posts="props.sortedPosts"
-        :start-rename-post="props.startRenamePost"
-        :open-history-dialog="props.openHistoryDialog"
-        :start-del-post="props.startDelPost"
-        :drag-source-id="props.dragSourceId"
-        :set-drag-source-id="props.setDragSourceId"
-        :drop-target-id="props.dropTargetId"
-        :set-drop-target-id="props.setDropTargetId"
-        :handle-drag-end="props.handleDragEnd"
-        :handle-drop="props.handleDrop"
-        :open-add-post-dialog="props.openAddPostDialog"
+        :parent-id="post.id" :sorted-posts="props.sortedPosts" :start-rename-post="props.startRenamePost"
+        :open-history-dialog="props.openHistoryDialog" :start-del-post="props.startDelPost"
+        :drag-source-id="props.dragSourceId" :set-drag-source-id="props.setDragSourceId"
+        :drop-target-id="props.dropTargetId" :set-drop-target-id="props.setDropTargetId"
+        :handle-drag-end="props.handleDragEnd" :handle-drop="props.handleDrop"
+        :open-add-post-dialog="props.openAddPostDialog" :is-open-multiple-mode="props.isOpenMultipleMode"
+        :selected-posts="props.selectedPosts" :toggle-post-selection="props.togglePostSelection"
       />
     </div>
   </div>
diff --git a/apps/web/src/components/editor/post-slider/index.vue b/apps/web/src/components/editor/post-slider/index.vue
index a43cd3e7d..9d3cbc746 100644
--- a/apps/web/src/components/editor/post-slider/index.vue
+++ b/apps/web/src/components/editor/post-slider/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ArrowUpNarrowWide, ChevronsDownUp, ChevronsUpDown, PlusSquare, X } from 'lucide-vue-next'
+import JSZip from 'jszip'
+import { ArrowUpNarrowWide, ChevronsDownUp, ChevronsUpDown, FolderDown, Layers, PlusSquare, X } from 'lucide-vue-next'
 import { useStore } from '@/stores'
-import { addPrefix } from '@/utils'
+import { addPrefix, sanitizeTitle } from '@/utils'
 
 const store = useStore()
 
@@ -195,6 +196,99 @@ function handleDragEnd() {
   dropTargetId.value = null
   dragover.value = false
 }
+/* ============ 多选模式 ============ */
+const isOpenMultipleMode = ref(false)
+/** 打开多选框 */
+function toggleIsOpenMultipleMode() {
+  isOpenMultipleMode.value = !isOpenMultipleMode.value
+}
+watch(isOpenMultipleMode, (o) => {
+  if (!o) {
+    clearSelection()
+  }
+})
+
+/** 选中的文章 ID 集合 */
+const selectedPosts = ref<Set<string>>(new Set())
+function togglePostSelection(postId: string) {
+  if (selectedPosts.value.has(postId)) {
+    selectedPosts.value.delete(postId)
+  }
+  else {
+    selectedPosts.value.add(postId)
+  }
+}
+
+function selectAllPosts() {
+  if (!isOpenMultipleMode.value) {
+    return
+  }
+  selectedPosts.value.clear()
+  store.posts.forEach((post) => {
+    selectedPosts.value.add(post.id)
+  })
+}
+function clearSelection() {
+  selectedPosts.value.clear()
+}
+/** 批量导出为.md */
+async function handleExportAsMD() {
+  if (selectedPosts.value.size === 0) {
+    toast.error(`请选择要导出的文章`)
+    return
+  }
+
+  try {
+    const zip = new JSZip()
+    let exportedCount = 0
+
+    // 遍历选中的文章ID，添加到ZIP
+    for (const postId of selectedPosts.value) {
+      const post = store.getPostById(postId)
+      if (post && post.content) {
+        // 清理文件名中的非法字符
+        const safeTitle = sanitizeTitle(post.title)
+        // 添加到ZIP，避免文件名冲突
+        zip.file(`${safeTitle}.md`, post.content)
+        exportedCount++
+      }
+    }
+
+    if (exportedCount === 0) {
+      toast.error(`没有可导出的文章内容`)
+      return
+    }
+
+    // 生成ZIP文件
+    const blob = await zip.generateAsync({
+      type: `blob`,
+      compression: `DEFLATE`,
+      compressionOptions: { level: 6 },
+    })
+
+    // 创建下载链接
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement(`a`)
+    a.href = url
+    a.download = `批量导出-${new Date().toLocaleDateString(`zh-CN`).replace(/\//g, `-`)}.zip`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+
+    // 释放内存
+    URL.revokeObjectURL(url)
+
+    toast.success(`成功导出 ${exportedCount} 篇文章`)
+
+    // 导出完成后关闭多选模式并清空选择
+    isOpenMultipleMode.value = false
+    selectedPosts.value.clear()
+  }
+  catch (error) {
+    console.error(`批量导出失败:`, error)
+    toast.error(`批量导出失败: ${error instanceof Error ? error.message : `未知错误`}`)
+  }
+}
 </script>
 
 <template>
@@ -289,7 +383,12 @@ function handleDragEnd() {
               </Tooltip>
             </TooltipProvider>
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent
+            :on-select="(value: string) => {
+              // 阻止默认关闭（返回 false 可阻止关闭）
+              return false
+            }"
+          >
             <DropdownMenuRadioGroup v-model="sortMode">
               <DropdownMenuRadioItem value="A-Z">
                 文件名（A-Z）
@@ -340,6 +439,56 @@ function handleDragEnd() {
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <TooltipProvider :delay-duration="200">
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Button variant="ghost" size="xs" class="h-max p-1">
+                    <Layers class="size-5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  多选模式
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem
+              @select.prevent
+              @click.stop.prevent="toggleIsOpenMultipleMode"
+            >
+              打开/关闭多选模式
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              @select.prevent
+              @click.stop.prevent="selectAllPosts"
+            >
+              全选
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              @select.prevent
+              @click.stop.prevent="clearSelection"
+            >
+              取消全选
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <TooltipProvider v-if="isOpenMultipleMode" :delay-duration="200">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Button variant="ghost" size="xs" class="h-max p-1" @click="handleExportAsMD">
+                <FolderDown class="size-5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              批量导出为.md
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
 
       <!-- 列表 -->
@@ -358,6 +507,9 @@ function handleDragEnd() {
           :handle-drop="handleDrop"
           :handle-drag-end="handleDragEnd"
           :open-add-post-dialog="openAddPostDialog"
+          :is-open-multiple-mode="isOpenMultipleMode"
+          :selected-posts="selectedPosts"
+          :toggle-post-selection="togglePostSelection"
         />
       </div>
     </nav>
diff --git a/apps/web/src/components/ui/check-box/CheckBox.vue b/apps/web/src/components/ui/check-box/CheckBox.vue
new file mode 100644
index 000000000..4ca447b3e
--- /dev/null
+++ b/apps/web/src/components/ui/check-box/CheckBox.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
+
+const props = defineProps<{
+  checked: boolean
+}>()
+
+const emits = defineEmits([`update:checked`])
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5">
+    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
+      <CheckboxRoot
+        :checked="props.checked"
+        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
+        @update:checked="(checked) => emits('update:checked', checked)"
+      >
+        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
+          <Check
+            icon="lucide:check"
+            class="h-3.5 w-3.5 text-black"
+          />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+      <span class="select-none text-white">
+        <slot />
+      </span>
+    </label>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc996fae6..1bd82d752 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       isomorphic-dompurify:
         specifier: ^2.28.0
         version: 2.28.0(postcss@8.5.6)
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
       juice:
         specifier: ^11.0.3
         version: 11.0.3
@@ -238,6 +241,9 @@ importers:
       '@types/crypto-js':
         specifier: ^4.2.2
         version: 4.2.2
+      '@types/jszip':
+        specifier: ^3.4.1
+        version: 3.4.1
       '@types/mdast':
         specifier: ^4.0.4
         version: 4.0.4
@@ -2771,6 +2777,10 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jszip@3.4.1':
+    resolution: {integrity: sha512-TezXjmf3lj+zQ651r6hPqvSScqBLvyPI9FxdXBqpEwBijNGQ2NXpaFW/7joGzveYkKQUil7iiDHLo6LV71Pc0A==}
+    deprecated: This is a stub types definition. jszip provides its own type definitions, so you do not need this installed.
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -11294,6 +11304,10 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/jszip@3.4.1':
+    dependencies:
+      jszip: 3.10.1
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3

From e5e222bf264be68655ffb090c41d813bf3b04e35 Mon Sep 17 00:00:00 2001
From: "haoxuan.huang" <haoxuan.huang@shopee.com>
Date: Tue, 4 Nov 2025 10:06:44 +0800
Subject: [PATCH 2/4] fix: type-check

---
 apps/web/src/components/editor/post-slider/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/editor/post-slider/index.vue b/apps/web/src/components/editor/post-slider/index.vue
index 07318ab1b..f27fbb15f 100644
--- a/apps/web/src/components/editor/post-slider/index.vue
+++ b/apps/web/src/components/editor/post-slider/index.vue
@@ -396,7 +396,7 @@ async function handleExportAsMD() {
             </TooltipProvider>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            :on-select="(value: string) => {
+            :on-select="() => {
               // 阻止默认关闭（返回 false 可阻止关闭）
               return false
             }"

From 803941414908a1e9e89f9b1533e663352a097380 Mon Sep 17 00:00:00 2001
From: "haoxuan.huang" <haoxuan.huang@shopee.com>
Date: Wed, 12 Nov 2025 16:40:28 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E9=80=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/post-slider/PostItem.vue           |  8 +++
 .../components/editor/post-slider/index.vue   | 55 ++++++++++---------
 .../src/components/ui/check-box/CheckBox.vue  |  2 +-
 3 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/editor/post-slider/PostItem.vue b/apps/web/src/components/editor/post-slider/PostItem.vue
index dcfb7c58b..53a818a89 100644
--- a/apps/web/src/components/editor/post-slider/PostItem.vue
+++ b/apps/web/src/components/editor/post-slider/PostItem.vue
@@ -54,6 +54,10 @@ const props = defineProps<{
   selectedPosts: Set<string>
   // 切换文章选中状态
   togglePostSelection: (postId: string) => void
+  // 如果多选模式未开启，则开启它
+  openMultipleModeIfClosed: () => void
+  // 如果没有选中任何文章，则关闭多选模式
+  closeMultipleModeIfNoSelection: () => void
 }>()
 
 const postStore = usePostStore()
@@ -113,6 +117,8 @@ function isHasChild(postId: string) {
       @drop.prevent="props.handleDrop(post.id)"
       @dragover.stop.prevent="props.setDropTargetId(post.id)"
       @dragleave.prevent="props.setDropTargetId(null)"
+      @mouseenter="props.openMultipleModeIfClosed"
+      @mouseleave="props.closeMultipleModeIfNoSelection"
       @click="currentPostId = post.id"
     >
       <!-- 折叠展开图标 -->
@@ -171,6 +177,8 @@ function isHasChild(postId: string) {
         :handle-drag-end="props.handleDragEnd" :handle-drop="props.handleDrop"
         :open-add-post-dialog="props.openAddPostDialog" :is-open-multiple-mode="props.isOpenMultipleMode"
         :selected-posts="props.selectedPosts" :toggle-post-selection="props.togglePostSelection"
+        :open-multiple-mode-if-closed="props.openMultipleModeIfClosed"
+        :close-multiple-mode-if-no-selection="props.closeMultipleModeIfNoSelection"
       />
     </div>
   </div>
diff --git a/apps/web/src/components/editor/post-slider/index.vue b/apps/web/src/components/editor/post-slider/index.vue
index f27fbb15f..f73f01107 100644
--- a/apps/web/src/components/editor/post-slider/index.vue
+++ b/apps/web/src/components/editor/post-slider/index.vue
@@ -210,9 +210,19 @@ function handleDragEnd() {
 }
 /* ============ 多选模式 ============ */
 const isOpenMultipleMode = ref(false)
-/** 打开多选框 */
-function toggleIsOpenMultipleMode() {
-  isOpenMultipleMode.value = !isOpenMultipleMode.value
+/** 选中的文章 ID 集合 */
+const selectedPosts = ref<Set<string>>(new Set())
+/** 开启多选模式（如果未开启） */
+function openMultipleModeIfClosed() {
+  if (!isOpenMultipleMode.value) {
+    isOpenMultipleMode.value = true
+  }
+}
+/** 如果没有选中任何文章，则关闭多选模式 */
+function closeMultipleModeIfNoSelection() {
+  if (selectedPosts.value.size === 0) {
+    isOpenMultipleMode.value = false
+  }
 }
 watch(isOpenMultipleMode, (o) => {
   if (!o) {
@@ -220,8 +230,6 @@ watch(isOpenMultipleMode, (o) => {
   }
 })
 
-/** 选中的文章 ID 集合 */
-const selectedPosts = ref<Set<string>>(new Set())
 function togglePostSelection(postId: string) {
   if (selectedPosts.value.has(postId)) {
     selectedPosts.value.delete(postId)
@@ -243,6 +251,17 @@ function selectAllPosts() {
 function clearSelection() {
   selectedPosts.value.clear()
 }
+function toggleSelectAllPosts() {
+  if (!isOpenMultipleMode.value) {
+    isOpenMultipleMode.value = true
+  }
+  if (selectedPosts.value.size === posts.value.length) {
+    clearSelection()
+  }
+  else {
+    selectAllPosts()
+  }
+}
 /** 批量导出为.md */
 async function handleExportAsMD() {
   if (selectedPosts.value.size === 0) {
@@ -457,36 +476,16 @@ async function handleExportAsMD() {
             <TooltipProvider :delay-duration="200">
               <Tooltip>
                 <TooltipTrigger as-child>
-                  <Button variant="ghost" size="xs" class="h-max p-1">
+                  <Button variant="ghost" size="xs" class="h-max p-1" @click="toggleSelectAllPosts">
                     <Layers class="size-5" />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom">
-                  多选模式
+                  全选/取消全选
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              @select.prevent
-              @click.stop.prevent="toggleIsOpenMultipleMode"
-            >
-              打开/关闭多选模式
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              @select.prevent
-              @click.stop.prevent="selectAllPosts"
-            >
-              全选
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              @select.prevent
-              @click.stop.prevent="clearSelection"
-            >
-              取消全选
-            </DropdownMenuItem>
-          </DropdownMenuContent>
         </DropdownMenu>
 
         <TooltipProvider v-if="isOpenMultipleMode" :delay-duration="200">
@@ -522,6 +521,8 @@ async function handleExportAsMD() {
           :is-open-multiple-mode="isOpenMultipleMode"
           :selected-posts="selectedPosts"
           :toggle-post-selection="togglePostSelection"
+          :open-multiple-mode-if-closed="openMultipleModeIfClosed"
+          :close-multiple-mode-if-no-selection="closeMultipleModeIfNoSelection"
         />
       </div>
     </nav>
diff --git a/apps/web/src/components/ui/check-box/CheckBox.vue b/apps/web/src/components/ui/check-box/CheckBox.vue
index 4ca447b3e..21d07d246 100644
--- a/apps/web/src/components/ui/check-box/CheckBox.vue
+++ b/apps/web/src/components/ui/check-box/CheckBox.vue
@@ -24,7 +24,7 @@ const emits = defineEmits([`update:checked`])
           />
         </CheckboxIndicator>
       </CheckboxRoot>
-      <span class="select-none text-white">
+      <span class="select-none">
         <slot />
       </span>
     </label>

From 7a3eb7fb7160c2e1b1772e7ef3d615e9b89180fe Mon Sep 17 00:00:00 2001
From: "haoxuan.huang" <haoxuan.huang@shopee.com>
Date: Wed, 12 Nov 2025 16:47:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E4=BF=9D=E6=8C=81=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=B9=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/post-slider/index.vue   | 114 +++++++++++++++---
 1 file changed, 98 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/editor/post-slider/index.vue b/apps/web/src/components/editor/post-slider/index.vue
index f73f01107..b9aafe91d 100644
--- a/apps/web/src/components/editor/post-slider/index.vue
+++ b/apps/web/src/components/editor/post-slider/index.vue
@@ -269,39 +269,113 @@ async function handleExportAsMD() {
     return
   }
 
-  try {
+  const exportPromise = async () => {
     const zip = new JSZip()
+    const filePathMap = new Map<string, number>() // 用于处理文件名冲突
     let exportedCount = 0
+    let skippedCount = 0
+
+    // 构建父级路径映射（用于保持文件夹结构）
+    const buildPath = (postId: string, pathMap: Map<string, string>): string => {
+      if (pathMap.has(postId)) {
+        return pathMap.get(postId)!
+      }
+
+      const post = postStore.getPostById(postId)
+      if (!post) {
+        return ``
+      }
+
+      const safeTitle = sanitizeTitle(post.title)
+      if (!post.parentId || !selectedPosts.value.has(post.parentId)) {
+        // 如果没有父级或父级未被选中，直接返回文件名
+        pathMap.set(postId, safeTitle)
+        return safeTitle
+      }
+
+      // 递归构建父级路径
+      const parentPath = buildPath(post.parentId, pathMap)
+      const fullPath = parentPath ? `${parentPath}/${safeTitle}` : safeTitle
+      pathMap.set(postId, fullPath)
+      return fullPath
+    }
+
+    const pathMap = new Map<string, string>()
+
+    // 先处理所有父级文章，确保文件夹结构正确
+    const sortedPostIds = Array.from(selectedPosts.value).sort((a, b) => {
+      const postA = postStore.getPostById(a)
+      const postB = postStore.getPostById(b)
+      // 有父级的排在后面
+      if (postA?.parentId && !postB?.parentId)
+        return 1
+      if (!postA?.parentId && postB?.parentId)
+        return -1
+      return 0
+    })
 
     // 遍历选中的文章ID，添加到ZIP
-    for (const postId of selectedPosts.value) {
+    for (const postId of sortedPostIds) {
       const post = postStore.getPostById(postId)
-      if (post && post.content) {
-        // 清理文件名中的非法字符
-        const safeTitle = sanitizeTitle(post.title)
-        // 添加到ZIP，避免文件名冲突
-        zip.file(`${safeTitle}.md`, post.content)
+      if (!post) {
+        skippedCount++
+        continue
+      }
+
+      if (!post.content || post.content.trim() === ``) {
+        skippedCount++
+        continue
+      }
+
+      // 构建文件路径（保持文件夹结构）
+      const basePath = buildPath(postId, pathMap)
+      let filePath = `${basePath}.md`
+
+      // 处理文件名冲突
+      if (filePathMap.has(filePath)) {
+        const count = filePathMap.get(filePath)! + 1
+        filePathMap.set(filePath, count)
+        const pathParts = basePath.split(`/`)
+        const fileName = pathParts.pop() || basePath
+        const dirPath = pathParts.join(`/`)
+        filePath = dirPath ? `${dirPath}/${fileName} (${count}).md` : `${fileName} (${count}).md`
+      }
+      else {
+        filePathMap.set(filePath, 0)
+      }
+
+      try {
+        zip.file(filePath, post.content)
         exportedCount++
       }
+      catch (error) {
+        console.warn(`添加文件失败: ${filePath}`, error)
+        skippedCount++
+      }
     }
 
     if (exportedCount === 0) {
-      toast.error(`没有可导出的文章内容`)
-      return
+      throw new Error(`没有可导出的文章内容`)
     }
 
-    // 生成ZIP文件
+    // 生成ZIP文件（使用更高效的压缩选项）
     const blob = await zip.generateAsync({
       type: `blob`,
       compression: `DEFLATE`,
       compressionOptions: { level: 6 },
+      streamFiles: true, // 流式处理，提高大文件性能
     })
 
     // 创建下载链接
     const url = URL.createObjectURL(blob)
     const a = document.createElement(`a`)
     a.href = url
-    a.download = `批量导出-${new Date().toLocaleDateString(`zh-CN`).replace(/\//g, `-`)}.zip`
+    const timestamp = new Date().toLocaleDateString(`zh-CN`, {
+      year: `numeric`,
+      month: `2-digit`,
+      day: `2-digit`,
+    }).replace(/\//g, `-`)
+    a.download = `批量导出-${timestamp}.zip`
     document.body.appendChild(a)
     a.click()
     document.body.removeChild(a)
@@ -309,16 +383,24 @@ async function handleExportAsMD() {
     // 释放内存
     URL.revokeObjectURL(url)
 
-    toast.success(`成功导出 ${exportedCount} 篇文章`)
+    // 返回成功消息（包含详细信息）
+    const message = skippedCount > 0
+      ? `成功导出 ${exportedCount} 篇文章，跳过 ${skippedCount} 篇空文章`
+      : `成功导出 ${exportedCount} 篇文章`
 
     // 导出完成后关闭多选模式并清空选择
     isOpenMultipleMode.value = false
     selectedPosts.value.clear()
+
+    return message
   }
-  catch (error) {
-    console.error(`批量导出失败:`, error)
-    toast.error(`批量导出失败: ${error instanceof Error ? error.message : `未知错误`}`)
-  }
+
+  // 使用 toast.promise 显示加载、成功和失败状态
+  toast.promise(exportPromise(), {
+    loading: `正在导出 ${selectedPosts.value.size} 篇文章...`,
+    success: (message: string) => message,
+    error: (error: Error) => `批量导出失败: ${error.message || `未知错误`}`,
+  })
 }
 </script>