feat 搭建架构骨架

src/views/finance/index.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { RouterLink } from 'vue-router'
+import { ElMessage } from 'element-plus'
+// 页面容器：只做组件组合与事件中转，数据只经 store
+import { useFinanceStore } from '@/stores/modules/finance'
+import FinanceChart from './cpns/FinanceChart.vue'
+import FinanceOverview from './cpns/FinanceOverview.vue'
+
+const financeStore = useFinanceStore()
+const { stats } = storeToRefs(financeStore)
+
+function onPeriodChange(period: string): void {
+  void financeStore.fetchStats(period)
+}
+
+async function onExport(): Promise<void> {
+  await financeStore.export()
+  ElMessage.success('报表导出成功（演示）')
+}
+
+onMounted(() => {
+  void financeStore.fetchStats()
+})
+</script>
+
+<template>
+  <div class="finance">
+    <header class="finance__head">
+      <h1 class="finance__title">
+        财务中心
+      </h1>
+      <p class="finance__slogan text-secondary">
+        账单支付、发票申请与报表导出一站式管理。
+      </p>
+    </header>
+
+    <FinanceOverview
+      :stats="stats"
+      @period-change="onPeriodChange"
+      @export="onExport"
+    />
+
+    <FinanceChart :distribution="stats?.distribution ?? []" />
+
+    <div class="finance__entries">
+      <RouterLink to="/finance/invoices" class="finance__entry">
+        <span class="finance__entry-icon">🧾</span>
+        <span class="finance__entry-name">发票申请</span>
+      </RouterLink>
+      <RouterLink to="/finance/bills" class="finance__entry">
+        <span class="finance__entry-icon">📋</span>
+        <span class="finance__entry-name">账单明细</span>
+      </RouterLink>
+      <button class="finance__entry" @click="onExport">
+        <span class="finance__entry-icon">📊</span>
+        <span class="finance__entry-name">报表导出</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.finance {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  padding-top: @spacing-xl;
+  padding-bottom: @spacing-xxl;
+
+  &__title {
+    font-size: @font-size-xxl;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__slogan {
+    margin-top: @spacing-xs;
+    font-size: @font-size-base;
+  }
+
+  &__entries {
+    .flex(row, flex-start);
+    gap: @spacing-base;
+  }
+
+  &__entry {
+    .flex(row, center, center);
+    gap: @spacing-sm;
+    width: 200px;
+    height: 72px;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-lg;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+  }
+
+  &__entry-icon {
+    font-size: @font-size-xl;
+  }
+}
+</style>