优化

2026-08-19 16:45:51 +08:00
parent d1de19dc82
commit 65cd9ecefa
79 changed files with 3397 additions and 38 deletions
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Plus } from '@lucide/vue'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
+import ContractPendingNotice from '../components/ContractPendingNotice.vue'
+import type { MonthlyExchangeRate } from '../types'
+
+const rows = ref<MonthlyExchangeRate[]>([])
+const page = ref(1)
+const pageSize = ref(20)
+const filters = ref<QueryModel>({ month: '' })
+const fields: QueryField[] = [
+  { key: 'month', type: 'date', label: '查询月份', placeholder: '请选择月份', width: 200, props: { type: 'month', 'value-format': 'YYYY-MM' } },
+]
+const columns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 100, fixed: 'left', slotName: 'actions' },
+  { key: 'month', prop: 'month', label: '汇率月份', minWidth: 120 },
+  { key: 'usdToCnyAverage', prop: 'usdToCnyAverage', label: '平均汇率', minWidth: 120 },
+  { key: 'conversion', label: '换算说明', minWidth: 190, slotName: 'conversion' },
+  { key: 'recordStatus', label: '状态', minWidth: 110 },
+  { key: 'updatedBy', prop: 'updatedBy', label: '更新人', minWidth: 120 },
+  { key: 'updatedAt', prop: 'updatedAt', label: '更新时间', minWidth: 150 },
+  { key: 'remark', prop: 'remark', label: '备注', minWidth: 200 },
+]
+const summaries = [
+  { label: '最新维护汇率', value: '—' },
+  { label: '汇率月份', value: '—' },
+  { label: '最后更新人', value: '—' },
+  { label: '最后更新时间', value: '—' },
+]
+</script>
+
+<template>
+  <AdminPage>
+    <ListPageLayout aria-label="汇率管理">
+      <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" aria-label="汇率月份筛选" ariaLabel="汇率月份筛选" preference-key="overseas-exchange-rates-query" @search="page = 1" /></template>
+      <template #metrics>
+        <section class="rate-summary" aria-label="汇率摘要">
+          <article v-for="item in summaries" :key="item.label" class="surface-panel rate-summary__item"><span>{{ item.label }}</span><strong>{{ item.value }}</strong></article>
+        </section>
+      </template>
+      <template #state><ContractPendingNotice domain="汇率管理" /></template>
+      <section class="surface-panel table-panel">
+        <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="0" preference-key="overseas-exchange-rates-table" row-key="month" empty-text="月度汇率查询契约待接入">
+          <template #toolbar-start><div><h2>美元兑人民币月平均汇率</h2><p>统一口径：1 USD = X CNY</p></div></template>
+          <template #toolbar-actions><el-tooltip content="海外区域写接口待接入"><span><el-button type="primary" disabled><Plus :size="16" />更新月度汇率</el-button></span></el-tooltip></template>
+          <template #actions><span class="muted-value">—</span></template>
+          <template #conversion>—</template>
+          <template #pagination-left>共 0 条月度汇率</template>
+        </DataTable>
+      </section>
+    </ListPageLayout>
+  </AdminPage>
+</template>
+
+<style scoped>
+.rate-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.rate-summary__item { position: relative; min-width: 0; padding: 16px 18px; overflow: hidden; }
+.rate-summary__item::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cc-primary); content: ''; }
+.rate-summary__item span { display: block; color: var(--cc-muted); font-size: 12px; }
+.rate-summary__item strong { display: block; margin-top: 8px; color: var(--cc-text); font-size: 22px; }
+.table-panel { min-width: 0; overflow: hidden; }
+.muted-value { color: var(--cc-muted); }
+@media (max-width: 720px) { .rate-summary { grid-template-columns: minmax(0, 1fr); } }
+</style>