refactor: streamline layout, views routing and component composition

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/views/RequestsView.vue

@@ -1,21 +1,6 @@
 <template>
   <section class="travel-page">
-    <div class="travel-kpis">
-      <article v-for="item in kpis" :key="item.label" class="travel-kpi panel" :style="{ '--accent': item.accent }">
-        <span class="kpi-icon"><i :class="item.icon"></i></span>
-        <div>
-          <p>{{ item.label }}</p>
-          <strong>{{ item.value }} <small>单</small></strong>
-          <span :class="item.trend">较上月 {{ item.delta }} <i :class="item.arrow"></i></span>
-        </div>
-      </article>
-    </div>
-
     <article class="travel-list panel">
-      <header class="list-head">
-          <h2>我的差旅报销单</h2>
-        </header>
-
       <nav class="status-tabs" aria-label="差旅报销状态">
         <button
           v-for="tab in tabs"
@@ -67,17 +52,6 @@
             <i class="mdi mdi-chevron-down"></i>
           </button>
         </div>
-
-        <div class="toolbar-actions">
-          <button class="export-btn" type="button">
-            <i class="mdi mdi-upload"></i>
-            <span>导出</span>
-          </button>
-          <button class="create-btn" type="button" @click="emit('createRequest')">
-            <i class="mdi mdi-plus"></i>
-            <span>发起报销</span>
-          </button>
-        </div>
       </div>
 
       <p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意行可查看单据详情</p>
@@ -141,7 +115,14 @@
           <button v-for="p in totalPages" :key="p" class="page-number" :class="{ active: currentPage === p }" type="button" :aria-current="currentPage === p ? 'page' : undefined" @click="currentPage = p">{{ p }}</button>
           <button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++"><i class="mdi mdi-chevron-right"></i></button>
         </div>
-        <button class="page-size" type="button">{{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i></button>
+        <div class="page-size-wrap">
+          <button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
+            {{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i>
+          </button>
+          <div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
+            <button v-for="size in pageSizes" :key="size" type="button" role="option" :aria-selected="pageSize === size" :class="{ active: pageSize === size }" @click="changePageSize(size)">{{ size }} 条/页</button>
+          </div>
+        </div>
       </footer>
     </article>
   </section>
@@ -154,7 +135,7 @@ defineProps({
   filteredRequests: { type: Array, required: true }
 })
 
-const emit = defineEmits(['ask', 'approve', 'reject', 'createRequest'])
+const emit = defineEmits(['ask', 'approve', 'reject'])
 
 const activeTab = ref('全部')
 const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
@@ -178,13 +159,6 @@ function applyDateRange() {
   datePopover.value = false
 }
 
-const kpis = [
-  { label: '全部单据', value: 30, delta: '+8', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#10b981' },
-  { label: '待提交', value: 5, delta: '-1', trend: 'down good', arrow: 'mdi mdi-arrow-down', icon: 'mdi mdi-send', accent: '#f59e0b' },
-  { label: '审批中', value: 8, delta: '+2', trend: 'up bad', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clock-outline', accent: '#3b82f6' },
-  { label: '已完成', value: 17, delta: '+7', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-check', accent: '#10b981' }
-]
-
 const rows = [
   { id: 'BR240715001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-14~07-17 (4天)', applyTime: '2024-07-13', amount: '￥4,280.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
   { id: 'BR240714010', reason: '年度战略合作伙伴会议', city: '北京', period: '07-15~07-16 (2天)', applyTime: '2024-07-12', amount: '￥1,860.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
@@ -219,7 +193,15 @@ const rows = [
 ]
 
 const currentPage = ref(1)
-const pageSize = 10
+const pageSize = ref(10)
+const pageSizes = [10, 20, 50]
+const pageSizeOpen = ref(false)
+
+function changePageSize(size) {
+  pageSize.value = size
+  pageSizeOpen.value = false
+  currentPage.value = 1
+}
 
 const filteredRows = computed(() => {
   if (activeTab.value === '全部') return rows
@@ -227,11 +209,11 @@ const filteredRows = computed(() => {
 })
 
 const totalCount = computed(() => filteredRows.value.length)
-const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize)))
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
 
 const visibleRows = computed(() => {
-  const start = (currentPage.value - 1) * pageSize
-  return filteredRows.value.slice(start, start + pageSize)
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredRows.value.slice(start, start + pageSize.value)
 })
 
 watch(activeTab, () => { currentPage.value = 1 })
@@ -242,90 +224,20 @@ watch(activeTab, () => { currentPage.value = 1 })
   height: 100%;
   min-height: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   gap: 14px;
   animation: fadeUp 220ms var(--ease) both;
   overflow: hidden;
 }
 
-.travel-kpis {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.travel-kpi {
-  min-height: 96px;
-  display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
-  align-items: center;
-  gap: 14px;
-  padding: 16px 20px;
-}
-
-.kpi-icon {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--accent) 14%, white);
-  color: var(--accent);
-  font-size: 22px;
-}
-
-.travel-kpi p {
-  color: #334155;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.travel-kpi strong {
-  display: block;
-  margin-top: 5px;
-  color: #0f172a;
-  font-size: 26px;
-  font-weight: 850;
-  line-height: 1;
-}
-
-.travel-kpi small {
-  color: #0f172a;
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.travel-kpi span:not(.kpi-icon) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 7px;
-  color: #64748b;
-  font-size: 14px;
-}
-
-.travel-kpi .good i {
-  color: #059669;
-}
-
-.travel-kpi .bad i {
-  color: #ef4444;
-}
-
 .travel-list {
   min-height: 0;
   display: grid;
-  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
   padding: 16px 18px;
   overflow: hidden;
 }
 
-.list-head h2 {
-  color: #0f172a;
-  font-size: 19px;
-  font-weight: 850;
-}
-
 .list-search {
   position: relative;
   width: 220px;
@@ -402,8 +314,7 @@ watch(activeTab, () => { currentPage.value = 1 })
   margin-top: 14px;
 }
 
-.filter-set,
-.toolbar-actions {
+.filter-set {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -411,8 +322,6 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .filter-btn,
-.export-btn,
-.create-btn,
 .page-size {
   min-height: 38px;
   display: inline-flex;
@@ -424,11 +333,6 @@ watch(activeTab, () => { currentPage.value = 1 })
   font-size: 14px;
   font-weight: 750;
   white-space: nowrap;
-}
-
-.filter-btn,
-.export-btn,
-.page-size {
   border: 1px solid #d7e0ea;
   background: #fff;
   color: #334155;
@@ -558,23 +462,11 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .filter-btn:hover,
-.export-btn:hover,
 .page-size:hover {
   border-color: rgba(16, 185, 129, .32);
   color: #0f9f78;
 }
 
-.create-btn {
-  border: 0;
-  background: #059669;
-  color: #fff;
-  box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
-}
-
-.create-btn:hover {
-  background: #047857;
-}
-
 .hint {
   display: inline-flex;
   align-items: center;
@@ -589,7 +481,6 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 .table-wrap {
-  min-height: 495px;
   margin-top: 10px;
   overflow-x: auto;
   overflow-y: auto;
@@ -598,6 +489,7 @@ watch(activeTab, () => { currentPage.value = 1 })
 }
 
 table {
+  height: 100%;
   width: 100%;
   min-width: 1140px;
   border-collapse: collapse;
@@ -623,6 +515,9 @@ td {
 }
 
 th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   background: #f7fafc;
   color: #64748b;
   font-size: 13px;
@@ -763,11 +658,50 @@ tbody tr:last-child td {
   box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
 }
 
-@media (max-width: 1200px) {
-  .travel-kpis {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.page-size-wrap {
+  position: relative;
+  justify-self: end;
+}
 
+.page-size-dropdown {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 40;
+  display: grid;
+  border: 1px solid #d7e0ea;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
+  overflow: hidden;
+}
+
+.page-size-dropdown button {
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+  white-space: nowrap;
+  padding: 0 20px;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.page-size-dropdown button:hover {
+  background: #f0fdf4;
+  color: #059669;
+}
+
+.page-size-dropdown button.active {
+  background: #059669;
+  color: #fff;
+}
+
+@media (max-width: 1200px) {
   .list-toolbar,
   .list-foot {
     grid-template-columns: 1fr;
@@ -775,12 +709,7 @@ tbody tr:last-child td {
 }
 
 @media (max-width: 760px) {
-  .travel-kpis {
-    grid-template-columns: 1fr;
-  }
-
-  .travel-list,
-  .travel-kpi {
+  .travel-list {
     padding: 16px;
   }
 
@@ -790,13 +719,10 @@ tbody tr:last-child td {
   }
 
   .filter-btn,
-  .export-btn,
-  .create-btn,
   .page-size {
     width: 100%;
   }
 
-  .toolbar-actions,
   .filter-set {
     width: 100%;
   }