feat 搭建架构骨架

src/views/finance/cpns/FinanceOverview.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { StatusTag } from '@/components'
+import type { FinanceStats } from '@/types/business/finance'
+import { formatMoney } from '@/utils/format'
+
+interface Props {
+  stats: FinanceStats | null
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  periodChange: [period: string]
+  export: []
+}>()
+</script>
+
+<template>
+  <div class="finance-overview card">
+    <div class="finance-overview__main">
+      <p class="finance-overview__label text-secondary">
+        累计消费总额
+      </p>
+      <p class="finance-overview__amount">
+        ¥{{ formatMoney(stats?.totalExpense ?? 0) }}
+      </p>
+      <div class="finance-overview__meta">
+        <div class="finance-overview__periods">
+          <button
+            class="finance-overview__period"
+            @click="emit('periodChange', 'quarter')"
+          >
+            本季度
+          </button>
+          <button
+            class="finance-overview__period"
+            @click="emit('periodChange', 'year')"
+          >
+            本年
+          </button>
+        </div>
+        <span class="finance-overview__month text-secondary">{{ stats?.month }}</span>
+        <StatusTag
+          v-if="(stats?.pendingCount ?? 0) > 0"
+          :label="`待支付 ${stats?.pendingCount ?? 0}`"
+          variant="warning"
+        />
+      </div>
+    </div>
+
+    <div class="finance-overview__actions">
+      <RouterLink to="/finance/invoices" class="finance-overview__action">
+        发票申请
+      </RouterLink>
+      <RouterLink to="/finance/bills" class="finance-overview__action">
+        账单明细
+      </RouterLink>
+      <button class="finance-overview__action" @click="emit('export')">
+        报表导出
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.finance-overview {
+  .flex(row, space-between, center);
+  padding: @spacing-lg;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__main {
+    .flex(column, flex-start);
+    gap: @spacing-sm;
+  }
+
+  &__label {
+    font-size: @font-size-base;
+  }
+
+  &__amount {
+    font-size: 36px;
+    font-weight: 600;
+    color: @heading-color;
+    line-height: 1.2;
+  }
+
+  &__meta {
+    .flex(row, flex-start, center);
+    gap: @spacing-base;
+    font-size: @font-size-base;
+  }
+
+  &__periods {
+    .flex(row, flex-start);
+    gap: @spacing-sm;
+  }
+
+  &__period {
+    height: 28px;
+    padding: 0 @spacing-sm;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-sm;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+  }
+
+  &__month {
+    font-size: @font-size-sm;
+  }
+
+  &__actions {
+    .flex(row, flex-start);
+    gap: @spacing-base;
+  }
+
+  &__action {
+    font-size: @font-size-base;
+    color: @primary-color;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: @primary-hover;
+    }
+  }
+}
+</style>