fix(ui): [UI7-2] 统一全局 Design Tokens,移除冗余字体,修复异常色值引用
这个提交包含在:
@@ -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>
|
||||
|
||||
在新工单中引用
屏蔽一个用户