fix(documents): refine unread badges and mark all read

web/src/views/DocumentsCenterView.vue

@@ -9,9 +9,11 @@
           :class="{ active: activeScopeTab === tab.value }"
           @click="activeScopeTab = tab.value"
         >
-          <span>{{ tab.label }}</span>
-          <span v-if="tab.badgeCount > 0" class="scope-tab-badge" aria-label="新增单据数">
-            {{ tab.badgeCount > 99 ? '99+' : tab.badgeCount }}
+          <span class="scope-tab-label">
+            {{ tab.label }}
+            <span v-if="tab.badgeCount > 0" class="scope-tab-badge" aria-label="新增单据数">
+              {{ tab.badgeCount > 99 ? '99+' : tab.badgeCount }}
+            </span>
           </span>
         </button>
       </nav>
@@ -122,7 +124,16 @@
           </div>
         </div>
 
-        <div v-if="[DOCUMENT_SCOPE_APPLICATION, DOCUMENT_SCOPE_REIMBURSEMENT].includes(activeScopeTab)" class="document-actions">
+        <div v-if="showToolbarActions" class="document-actions">
+          <button
+            v-if="totalNewDocumentCount > 0"
+            class="mark-read-btn"
+            type="button"
+            @click="markAllDocumentsRead"
+          >
+            <i class="mdi mdi-check-all"></i>
+            <span>一键已读</span>
+          </button>
           <button v-if="activeScopeTab === DOCUMENT_SCOPE_APPLICATION" class="create-request-btn" type="button" @click="emit('create-application')">
             <i class="mdi mdi-file-plus-outline"></i>
             <span>发起申请</span>
@@ -238,7 +249,7 @@ import TableLoadingState from '../components/shared/TableLoadingState.vue'
 import { useMinimumVisibleState } from '../composables/useMinimumVisibleState.js'
 import { mapExpenseClaimToRequest } from '../composables/useRequests.js'
 import { fetchApprovalExpenseClaims, fetchArchivedExpenseClaims } from '../services/reimbursements.js'
-import { countNewDocuments, isNewDocument, markDocumentViewed, readDocumentScope, readViewedDocumentKeys, writeDocumentScope } from '../utils/documentCenterNewState.js'
+import { countNewDocuments, isNewDocument, markDocumentViewed, markDocumentsViewed, readDocumentScope, readViewedDocumentKeys, writeDocumentScope } from '../utils/documentCenterNewState.js'
 import { extractDateText, formatDocumentListTime, resolveDocumentSortTime, resolveDocumentStayTimeDisplay } from '../utils/documentCenterTime.js'
 import { excludeArchivedDocumentRows, filterApplicationScopeNewRows, isArchivedDocumentRow, prepareApplicationScopeRows } from '../utils/documentCenterRows.js'
 import { normalizeRequestForUi } from '../utils/requestViewModel.js'
@@ -468,6 +479,17 @@ const scopeTabItems = computed(() =>
     badgeCount: scopeNewCountMap.value[tab] || 0
   }))
 )
+const allReadableDocumentRows = computed(() => [
+  ...nonArchivedRows.value,
+  ...filterApplicationScopeNewRows(applicationScopeRows.value),
+  ...ownedRows.value.filter((row) => row.documentTypeCode === DOCUMENT_TYPE_REIMBURSEMENT),
+  ...approvalRows.value
+])
+const totalNewDocumentCount = computed(() => countNewDocuments(allReadableDocumentRows.value, viewedDocumentKeys.value))
+const showCreateDocumentActions = computed(() =>
+  [DOCUMENT_SCOPE_APPLICATION, DOCUMENT_SCOPE_REIMBURSEMENT].includes(activeScopeTab.value)
+)
+const showToolbarActions = computed(() => showCreateDocumentActions.value || totalNewDocumentCount.value > 0)
 
 const activeScopeRows = computed(() => {
   if (activeScopeTab.value === DOCUMENT_SCOPE_ALL) return nonArchivedRows.value
@@ -831,6 +853,14 @@ function openDocument(row) {
   emit('open-document', row.rawRequest || row)
 }
 
+function markAllDocumentsRead() {
+  if (!totalNewDocumentCount.value) {
+    return
+  }
+
+  viewedDocumentKeys.value = markDocumentsViewed(allReadableDocumentRows.value, viewedDocumentKeys.value)
+}
+
 async function loadSupportingRows() {
   supportingLoading.value = true
   supportingError.value = ''