Home.tsx
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { useAppDispatch, useAppSelector } from "@/store";
import { openTab } from "@/store/tabsSlice";
const STATS = [
{ label: "待办事项", value: 12, color: "#3a8ee0" },
{ label: "今日报价", value: 5, color: "#27a567" },
{ label: "进行中订单", value: 28, color: "#d98e1f" },
{ label: "待审核", value: 3, color: "#d04141" },
];
export default function Home() {
const auth = useAppSelector((s) => s.auth);
const dispatch = useAppDispatch();
return (
<div style={{ padding: 16, height: "100%", overflow: "auto", background: "var(--bg-app)" }}>
<div
style={{
background: "#fff",
padding: 20,
marginBottom: 14,
border: "1px solid var(--border)",
}}
>
<div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>
欢迎回来，{auth.user?.sUserName ?? ""}
</div>
<div style={{ fontSize: 12, color: "var(--text-muted)" }}>
XLY-ERP · {auth.companyName ?? ""}
</div>
</div>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
gap: 12,
marginBottom: 14,
}}
>
{STATS.map((s) => (
<div
key={s.label}
style={{
background: "#fff",
padding: 16,
border: "1px solid var(--border)",
borderTop: `3px solid ${s.color}`,
}}
>
<div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 6 }}>
{s.label}
</div>
<div style={{ fontSize: 26, fontWeight: 600, color: s.color }}>{s.value}</div>
</div>
))}
</div>
<div
style={{
background: "#fff",
padding: 16,
border: "1px solid var(--border)",
}}
>
<div style={{ fontSize: 13, fontWeight: 500, marginBottom: 10 }}>快捷入口</div>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
<QuickLink
label="用户列表"
onClick={() =>
dispatch(openTab({ id: "userlist", label: "用户列表", screen: "userlist" }))
}
/>
<QuickLink
label="系统模块配置"
onClick={() =>
dispatch(openTab({ id: "module", label: "系统模块配置", screen: "module" }))
}
/>
</div>
</div>
</div>
);
}
function QuickLink({ label, onClick }: { label: string; onClick: () => void }) {
return (
<button
onClick={onClick}
style={{
height: 30,
padding: "0 14px",
border: "1px solid var(--border)",
background: "var(--bg-input)",
cursor: "pointer",
fontSize: 12,
color: "var(--text)",
fontFamily: "inherit",
}}
>
{label}
</button>
);
}