fix(ui): [UI7-2] 统一全局 Design Tokens,移除冗余字体,修复异常色值引用

这个提交包含在:
2026-03-06 09:48:37 +08:00
父节点 62fd2a5398
当前提交 73b51ac068
共修改 39 个文件,包含 253 行新增和 250 行删除
+29 -29
查看文件
@@ -117,8 +117,8 @@ export function DashboardPage() {
<div className="space-y-4">
<PageHeader title="仪表盘" subtitle="你当前没有看板权限,请联系管理员开通。" />
<Card className="space-y-2 p-6 text-sm">
<p className="text-slate-700">当前用户:{me?.name ?? "-"}</p>
<p className="text-slate-500">所需权限:report.dashboard.view</p>
<p className="text-zinc-700">当前用户:{me?.name ?? "-"}</p>
<p className="text-zinc-500">所需权限:report.dashboard.view</p>
</Card>
</div>
);
@@ -166,36 +166,36 @@ export function DashboardPage() {
<Card className="space-y-4 p-6">
<div className="grid gap-3 md:grid-cols-4">
<div className="space-y-1">
<label className="text-xs text-slate-600" htmlFor="dashboard-date-from">
<label className="text-xs text-zinc-600" htmlFor="dashboard-date-from">
开始日期
</label>
<input
id="dashboard-date-from"
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
type="date"
value={dateFrom}
onChange={(event) => setDateFrom(event.target.value)}
/>
</div>
<div className="space-y-1">
<label className="text-xs text-slate-600" htmlFor="dashboard-date-to">
<label className="text-xs text-zinc-600" htmlFor="dashboard-date-to">
结束日期
</label>
<input
id="dashboard-date-to"
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
type="date"
value={dateTo}
onChange={(event) => setDateTo(event.target.value)}
/>
</div>
<div className="space-y-1">
<label className="text-xs text-slate-600" htmlFor="dashboard-department-id">
<label className="text-xs text-zinc-600" htmlFor="dashboard-department-id">
部门
</label>
<select
id="dashboard-department-id"
className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
className="h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
value={departmentId}
onChange={(event) => setDepartmentId(event.target.value)}
>
@@ -230,26 +230,26 @@ export function DashboardPage() {
<div className="grid gap-4 md:grid-cols-4">
<Card className="p-4">
<p className="text-xs text-slate-500">报销单总数</p>
<p className="mt-1 text-2xl font-semibold text-slate-900">
<p className="text-xs text-zinc-500">报销单总数</p>
<p className="mt-1 text-2xl font-semibold text-zinc-900">
{loading ? "..." : overviewQuery.data?.totalCount ?? 0}
</p>
</Card>
<Card className="p-4">
<p className="text-xs text-slate-500">报销总金额</p>
<p className="mt-1 text-2xl font-semibold text-slate-900">
<p className="text-xs text-zinc-500">报销总金额</p>
<p className="mt-1 text-2xl font-semibold text-zinc-900">
{loading ? "..." : toCurrency(overviewQuery.data?.totalAmount)}
</p>
</Card>
<Card className="p-4">
<p className="text-xs text-slate-500">已付款金额</p>
<p className="mt-1 text-2xl font-semibold text-slate-900">
<p className="text-xs text-zinc-500">已付款金额</p>
<p className="mt-1 text-2xl font-semibold text-zinc-900">
{loading ? "..." : toCurrency(overviewQuery.data?.paidAmount)}
</p>
</Card>
<Card className="p-4">
<p className="text-xs text-slate-500">审批中数量</p>
<p className="mt-1 text-2xl font-semibold text-slate-900">
<p className="text-xs text-zinc-500">审批中数量</p>
<p className="mt-1 text-2xl font-semibold text-zinc-900">
{loading ? "..." : overviewQuery.data?.reviewingCount ?? 0}
</p>
</Card>
@@ -257,7 +257,7 @@ export function DashboardPage() {
<div className="grid gap-4 lg:grid-cols-2">
<Card className="space-y-3 p-6">
<h3 className="text-base font-semibold text-slate-900">费用趋势</h3>
<h3 className="text-base font-semibold text-zinc-900">费用趋势</h3>
{trendPoints.length ? (
<div className="space-y-2">
{trendPoints.map((item) => {
@@ -265,13 +265,13 @@ export function DashboardPage() {
const width = `${Math.max(5, Math.round((amount / maxTrendAmount) * 100))}%`;
return (
<div key={item.date} className="space-y-1">
<div className="flex items-center justify-between text-xs text-slate-600">
<div className="flex items-center justify-between text-xs text-zinc-600">
<span>{item.date}</span>
<span>
{toCurrency(item.amount)} / {item.count} 笔
</span>
</div>
<div className="h-2 rounded-full bg-slate-100">
<div className="h-2 rounded-full bg-zinc-100">
<div className="h-2 rounded-full bg-primary" style={{ width }} />
</div>
</div>
@@ -279,12 +279,12 @@ export function DashboardPage() {
})}
</div>
) : (
<p className="text-sm text-slate-500">暂无趋势数据</p>
<p className="text-sm text-zinc-500">暂无趋势数据</p>
)}
</Card>
<Card className="space-y-3 p-6">
<h3 className="text-base font-semibold text-slate-900">费用分类 TopN</h3>
<h3 className="text-base font-semibold text-zinc-900">费用分类 TopN</h3>
{topCategories.length ? (
<div className="space-y-2">
{topCategories.map((item) => {
@@ -292,7 +292,7 @@ export function DashboardPage() {
const width = `${Math.max(5, Math.round((amount / maxCategoryAmount) * 100))}%`;
return (
<div key={item.code} className="space-y-1">
<div className="flex items-center justify-between text-xs text-slate-600">
<div className="flex items-center justify-between text-xs text-zinc-600">
<span>
{item.name} ({item.code})
</span>
@@ -300,7 +300,7 @@ export function DashboardPage() {
{toCurrency(item.amount)} / {item.count} 笔
</span>
</div>
<div className="h-2 rounded-full bg-slate-100">
<div className="h-2 rounded-full bg-zinc-100">
<div className="h-2 rounded-full bg-emerald-500" style={{ width }} />
</div>
</div>
@@ -308,22 +308,22 @@ export function DashboardPage() {
})}
</div>
) : (
<p className="text-sm text-slate-500">暂无分类统计</p>
<p className="text-sm text-zinc-500">暂无分类统计</p>
)}
</Card>
</div>
<Card className="space-y-2 p-6 text-sm">
<h3 className="text-base font-semibold text-slate-900">审批效率</h3>
<p className="text-slate-700">
<h3 className="text-base font-semibold text-zinc-900">审批效率</h3>
<p className="text-zinc-700">
已统计通过单据:
<span className="ml-1 font-medium text-slate-900">
<span className="ml-1 font-medium text-zinc-900">
{approvalEfficiencyQuery.data?.approvedCount ?? 0}
</span>
</p>
<p className="text-slate-700">
<p className="text-zinc-700">
平均审批耗时(小时):
<span className="ml-1 font-medium text-slate-900">
<span className="ml-1 font-medium text-zinc-900">
{approvalEfficiencyQuery.data?.averageHours?.toFixed(2) ?? "0.00"}
</span>
</p>