121 lines
3.2 KiB
Vue
121 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { RouterLink } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { PageHead } from '@/components'
|
||
// 页面容器：只做组件组合与事件中转，数据只经 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)
|
||
|
||
const ENTRIES = [
|
||
{ label: '账单明细', to: '/finance/bills' },
|
||
{ label: '待支付', to: '/finance/bills' },
|
||
{ label: '发票申请', to: '/finance/invoices' },
|
||
{ label: '报表导出', to: '' },
|
||
] as const
|
||
|
||
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">
|
||
<PageHead
|
||
title="财务中心"
|
||
slogan="账单、支付、发票统一财务管理中心"
|
||
/>
|
||
|
||
<div class="container">
|
||
<div class="finance__top">
|
||
<FinanceOverview
|
||
:stats="stats"
|
||
@period-change="onPeriodChange"
|
||
@export="onExport"
|
||
/>
|
||
|
||
<div class="finance__entries">
|
||
<template v-for="entry in ENTRIES" :key="entry.label">
|
||
<RouterLink
|
||
v-if="entry.to"
|
||
:to="entry.to"
|
||
class="finance__entry"
|
||
>
|
||
{{ entry.label }}
|
||
</RouterLink>
|
||
<button
|
||
v-else
|
||
class="finance__entry"
|
||
@click="onExport"
|
||
>
|
||
{{ entry.label }}
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<FinanceChart :distribution="stats?.distribution ?? []" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
// 财务中心概览（设计 6cd4aa76，1920 画布 1:1）
|
||
// 页头区 (70,162) 1780×17 副标语 13/400 #6B7280（标题 22/700 由全站页头统一渲染）
|
||
// 概览行 y195 h135：左渐变卡 1093.84 宽、右白卡 672.16 宽（间距 14）
|
||
// 图表卡 (70,344) 1780×378，白底 + #F0F1F3 描边
|
||
.finance {
|
||
width: 100%;
|
||
|
||
// 顶部行：左渐变卡 + 右快捷卡，间距 14
|
||
&__top {
|
||
.flex(row, flex-start, stretch);
|
||
gap: 14px;
|
||
margin-top: -56px; // 页头白条通栏高 179，卡片按设计压在 y195
|
||
}
|
||
|
||
// 右侧快捷入口白卡 672.16×135
|
||
&__entries {
|
||
.flex(row, space-between, center);
|
||
flex: 0 0 672px;
|
||
height: 135px;
|
||
padding: 0 34px;
|
||
border: 1px solid @finance-card-line;
|
||
border-radius: @radius-base; // 设计无圆角？——卡面 8 以内，与全站一致
|
||
background: @white;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&__entry {
|
||
.flex(row, center, center);
|
||
height: 100%;
|
||
border: none;
|
||
background: transparent;
|
||
color: @finance-entry-text;
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
border: none;
|
||
color: @primary-strong;
|
||
}
|
||
}
|
||
}
|
||
</style>
|