refactor(web): update view scripts

- AuditView.js: update audit view logic
- EmployeeManagementView.js: update employee management logic
- RequestsView.js: update requests view logic
- TravelRequestDetailView.js: update travel detail view logic

web/src/views/scripts/RequestsView.js

@@ -1,5 +1,6 @@
 import { computed, ref, watch } from 'vue'
 
+import TableEmptyState from '../../components/shared/TableEmptyState.vue'
 import { normalizeRequestForUi } from '../../utils/requestViewModel.js'
 
 function extractRowDate(value) {
@@ -9,6 +10,9 @@ function extractRowDate(value) {
 
 export default {
   name: 'RequestsView',
+  components: {
+    TableEmptyState
+  },
   props: {
     filteredRequests: { type: Array, required: true },
     hasData: { type: Boolean, default: false },
@@ -108,20 +112,67 @@ export default {
     })
     const showTable = computed(() => !props.loading && !props.error && visibleRows.value.length > 0)
     const showEmpty = computed(() => !props.loading && !props.error && visibleRows.value.length === 0)
+    const hasListFilters = computed(() => {
+      return Boolean(
+        activeTab.value !== '全部'
+        || listKeyword.value.trim()
+        || appliedStart.value
+        || appliedEnd.value
+      )
+    })
     const emptyState = computed(() => {
       if (!props.hasData) {
         return {
-          title: '暂无真实报销单据',
-          desc: '数据库里还没有可见的个人报销数据。保存草稿或提交报销后，会显示在这里。'
+          eyebrow: '个人报销',
+          title: '还没有任何报销单据',
+          desc: '首张草稿或已提交的报销单会自动出现在这里，后续可以继续补充、提交和跟踪进度。',
+          icon: 'mdi mdi-receipt-text-plus-outline',
+          actionLabel: '发起报销',
+          actionIcon: 'mdi mdi-plus-circle-outline',
+          tone: 'emerald',
+          artLabel: 'CLAIM',
+          tips: ['保存草稿后会自动回到这里', '支持草稿、待提交、审批中和已完成全流程管理']
         }
       }
 
       return {
-        title: '没有匹配结果',
-        desc: '当前筛选条件下没有可展示的报销单据。'
+        eyebrow: hasListFilters.value ? '筛选结果为空' : '状态列表为空',
+        title: hasListFilters.value ? '当前条件下没有匹配单据' : `“${activeTab.value}”里暂时没有单据`,
+        desc: hasListFilters.value
+          ? '可以清空关键词、时间段或状态筛选后再看看。'
+          : '当前状态下还没有可展示的报销记录，可以先发起一笔报销或切换到其他状态。',
+        icon: hasListFilters.value ? 'mdi mdi-magnify-scan' : 'mdi mdi-clipboard-text-clock-outline',
+        actionLabel: hasListFilters.value ? '清空筛选' : '',
+        actionIcon: hasListFilters.value ? 'mdi mdi-filter-remove-outline' : '',
+        tone: hasListFilters.value ? 'sky' : 'slate',
+        artLabel: hasListFilters.value ? 'FILTER' : 'QUEUE',
+        tips: hasListFilters.value
+          ? ['关键词、时间段和状态会叠加生效', '可尝试搜索单号、事由或报销类型']
+          : ['已完成单据会保留在列表中便于追踪', '草稿、审批中和待补充会按真实状态实时归类']
       }
     })
 
+    function resetFilters() {
+      activeTab.value = '全部'
+      listKeyword.value = ''
+      datePopover.value = false
+      rangeStart.value = ''
+      rangeEnd.value = ''
+      appliedStart.value = ''
+      appliedEnd.value = ''
+      pageSizeOpen.value = false
+      currentPage.value = 1
+    }
+
+    function handleEmptyAction() {
+      if (!props.hasData) {
+        emit('create-request')
+        return
+      }
+
+      resetFilters()
+    }
+
     watch([activeTab, rows, listKeyword, appliedStart, appliedEnd], () => {
       currentPage.value = 1
     })
@@ -151,7 +202,9 @@ export default {
       visibleRows,
       showTable,
       showEmpty,
-      emptyState
+      emptyState,
+      resetFilters,
+      handleEmptyAction
     }
   }
 }