yss-project/src/app/pages/admin/finance/finance.html

<div class="finance-page">
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">财务管理</h2>
      <p class="page-description">统计收支、查看项目流水并导出数据</p>
    </div>
    <div class="header-actions">
      <button class="btn primary" (click)="exportReport()">导出报表</button>
    </div>
  </div>

  <div class="stats-cards">
    <div class="stat-card income">
      <div class="stat-label">本月收入</div>
      <div class="stat-value">{{ formatAmount(income()) }}</div>
    </div>
    <div class="stat-card expense">
      <div class="stat-label">本月支出</div>
      <div class="stat-value">{{ formatAmount(expense()) }}</div>
    </div>
    <div class="stat-card profit">
      <div class="stat-label">本月利润</div>
      <div class="stat-value">{{ formatAmount(profit()) }}</div>
    </div>
  </div>

  <div class="toolbar">
    <div class="search"><input placeholder="搜索项目/客户" (input)="keyword.set($any($event.target).value)" [value]="keyword()"/></div>
    <div class="filters">
      <select (change)="type.set($any($event.target).value)">
        <option value="all">全部类型</option>
        <option value="income">收入</option>
        <option value="expense">支出</option>
      </select>
      <select (change)="status.set($any($event.target).value)">
        <option value="all">全部状态</option>
        <option value="done">已入账</option>
        <option value="pending">待入账</option>
      </select>
      <button class="btn" (click)="resetFilters()">重置</button>
    </div>
  </div>

  <div class="table-card">
    <div class="table header">
      <div>日期</div>
      <div>类型</div>
      <div>项目</div>
      <div>客户</div>
      <div>金额</div>
      <div>状态</div>
    </div>
    <div class="table row" *ngFor="let i of filtered">
      <div>{{ i.date }}</div>
      <div>
        <span class="chip" [class.green]="i.type==='income'" [class.red]="i.type==='expense'">{{ i.type==='income' ? '收入' : '支出' }}</span>
      </div>
      <div>{{ i.project }}</div>
      <div>{{ i.customer }}</div>
      <div>{{ formatAmount(i.amount) }}</div>
      <div>
        <span class="dot" [class.green]="i.status==='done'" [class.orange]="i.status==='pending'"></span>
        {{ i.status==='done' ? '已入账' : '待入账' }}
      </div>
    </div>
    <div class="empty" *ngIf="filtered.length===0">暂无数据</div>
  </div>
</div>