修改完成待测试

pages/family/articles.vue

@@ -18,12 +18,32 @@
         </picker>
       </view>
       <view v-if="listState === 'list'" class="article-list-items">
+        <BatchManagementBar
+          v-if="deletableArticles.length"
+          resource-name="谱文"
+          :active="articleBatch.selectionMode.value"
+          :selected-count="articleBatch.selectedCount.value"
+          :all-selected="articleBatch.allSelected.value"
+          :busy="articleBatch.deleting.value"
+          @start="articleBatch.enterSelectionMode"
+          @finish="articleBatch.exitSelectionMode"
+          @toggle-all="articleBatch.toggleAll"
+          @delete="articleBatch.requestDelete"
+        />
+        <text v-if="articleBatch.notice.value" class="article-batch-notice" role="status">{{ articleBatch.notice.value }}</text>
+        <text v-if="articleBatch.error.value" class="article-batch-error" role="alert">{{ articleBatch.error.value }}</text>
         <view
           v-for="item in filteredArticles"
           :key="item.id"
           class="article-card"
-          @click="openArticle(item)"
+          @click="handleArticleClick(item)"
         >
+          <BatchSelectionMark
+            v-if="articleBatch.selectionMode.value && item.canDelete"
+            :selected="articleBatch.isSelected(item)"
+            :label="`谱文：${item.title}`"
+            @toggle="articleBatch.toggleSelection(item)"
+          />
           <image
             v-if="item.coverFile?.accessUrl"
             class="article-card__cover"
@@ -56,6 +76,18 @@
         />
       </view>
     </view>
+    <AppDialog
+      :visible="articleBatch.confirmationVisible.value"
+      :close-on-mask="false"
+      eyebrow="批量删除"
+      title="将选中的谱文移入回收站？"
+      :message="articleBatch.confirmationMessage.value"
+      :confirm-text="articleBatch.deleting.value ? '正在删除' : '移入回收站'"
+      cancel-text="继续选择"
+      show-cancel
+      @confirm="articleBatch.confirmDelete"
+      @cancel="articleBatch.cancelDelete"
+    />
   </view>
 </template>
 
@@ -63,6 +95,9 @@
 import { computed, ref } from "vue";
 import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
+import BatchManagementBar from "@/components/BatchManagementBar.vue";
+import BatchSelectionMark from "@/components/BatchSelectionMark.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
 import {
@@ -71,6 +106,7 @@ import {
 } from "@/services/api/request-controller.js";
 import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
 import { familyArticleApi } from "@/services/api/family-article-service.js";
+import { useBatchDeletion } from "@/composables/use-batch-deletion.js";
 import { goBack, openPage } from "@/utils/navigation/gateway.js";
 
 const genealogyId = ref("");
@@ -82,6 +118,7 @@ const articleCategoryError = ref("");
 const selectedCategoryId = ref("");
 const articleListRequestController = createRequestController();
 const articleCategoryRequestController = createRequestController();
+const articleDeleteRequestController = createRequestController();
 let pageActive = true;
 let skipInitialShowRefresh = true;
 const categoryOptions = computed(() => [
@@ -98,6 +135,20 @@ const filteredArticles = computed(() =>
     ? articles.value.filter((item) => item.categoryId === selectedCategoryId.value)
     : articles.value,
 );
+const articleBatch = useBatchDeletion({
+  items: articles,
+  visibleItems: filteredArticles,
+  deleteOne: (article) =>
+    familyArticleApi.deleteArticle(genealogyId.value, article.id, {
+      requestController: articleDeleteRequestController,
+    }),
+  resourceName: "谱文",
+  isActive: () => pageActive,
+  onEmpty: () => {
+    listState.value = "empty";
+  },
+});
+const deletableArticles = articleBatch.deletableItems;
 const stateCopy = computed(() =>
   hasValidContext.value
     ? listState.value === "empty"
@@ -140,6 +191,7 @@ onUnload(() => {
   pageActive = false;
   articleListRequestController.abort();
   articleCategoryRequestController.abort();
+  articleDeleteRequestController.abort();
 });
 const loadArticleCategories = async () => {
   articleCategoryError.value = "";
@@ -169,6 +221,7 @@ const loadArticles = async () => {
     ]);
     if (!pageActive) return;
     articles.value = rows;
+    articleBatch.exitSelectionMode();
     if (categoryRows) categories.value = categoryRows;
     if (!categoryOptions.value.some((item) => item.id === selectedCategoryId.value)) {
       selectedCategoryId.value = "";
@@ -181,6 +234,7 @@ const loadArticles = async () => {
 };
 const selectCategory = (event) => {
   selectedCategoryId.value = categoryOptions.value[Number(event.detail.value)]?.id || "";
+  articleBatch.exitSelectionMode();
 };
 const createArticle = () =>
   hasValidContext.value
@@ -188,6 +242,13 @@ const createArticle = () =>
     : Promise.resolve(false);
 const openArticle = (item) =>
   openPage("F05", { genealogyId: genealogyId.value, articleId: item.id }, "F04");
+const handleArticleClick = (item) => {
+  if (articleBatch.selectionMode.value && item?.canDelete) {
+    articleBatch.toggleSelection(item);
+    return;
+  }
+  openArticle(item);
+};
 const handleStateAction = () => {
   if (!hasValidContext.value) return goBack();
   if (listState.value === "error") return loadArticles();
@@ -214,6 +275,15 @@ const handleStateAction = () => {
 .article-list-items {
   margin-top: 24rpx;
 }
+.article-batch-notice,
+.article-batch-error {
+  display: block;
+  margin-bottom: 16rpx;
+  font-size: clamp(13px, 21rpx, 16px);
+  line-height: 1.55;
+}
+.article-batch-notice { color: #426538; }
+.article-batch-error { color: $brand-red; }
 .article-category-error {
   margin-top: 20rpx;
   padding: 18rpx 22rpx;