feat(ui): finalize shared shells and loading states

web/src/views/DocumentsCenterView.vue

@@ -140,6 +140,7 @@
             title="单据数据同步中"
             message="正在汇总当前报销、审批待办与归档单据"
             icon="mdi mdi-file-document-multiple-outline"
+            floating
           />
         </div>
 
@@ -246,6 +247,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import EnterpriseSelect from '../components/shared/EnterpriseSelect.vue'
 import TableEmptyState from '../components/shared/TableEmptyState.vue'
 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'
@@ -262,6 +264,7 @@ const DOCUMENT_SCOPE_REIMBURSEMENT = '报销单'
 const DOCUMENT_SCOPE_REVIEW = '审核单'
 const DOCUMENT_SCOPE_ARCHIVE = '归档'
 const scopeTabs = [DOCUMENT_SCOPE_ALL, DOCUMENT_SCOPE_APPLICATION, DOCUMENT_SCOPE_REIMBURSEMENT, DOCUMENT_SCOPE_REVIEW, DOCUMENT_SCOPE_ARCHIVE]
+const DOCUMENT_LOADING_MIN_VISIBLE_MS = 720
 const statusTabs = ['全部', '草稿', '待提交', '审批中', '待补充', '待付款', '已完成']
 const FILTER_CONFIG_BY_SCOPE = {
   [DOCUMENT_SCOPE_ALL]: {
@@ -465,7 +468,11 @@ const visibleRows = computed(() => {
   return filteredRows.value.slice(start, start + pageSize.value)
 })
 
-const showLoading = computed(() => (props.loading || supportingLoading.value) && !visibleRows.value.length)
+const documentLoadingSource = computed(() => (props.loading || supportingLoading.value) && !visibleRows.value.length)
+const visibleDocumentLoading = useMinimumVisibleState(documentLoadingSource, {
+  minVisibleMs: DOCUMENT_LOADING_MIN_VISIBLE_MS
+})
+const showLoading = computed(() => visibleDocumentLoading.value)
 const showError = computed(() => Boolean(props.error) && !visibleRows.value.length)
 const errorMessage = computed(() => props.error || supportingError.value || '单据中心加载失败。')
 const showEmpty = computed(() => !showLoading.value && !showError.value && visibleRows.value.length === 0)