screen-home.jsx
3.16 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
// Simple home — gives the workspace something useful when first opened.
const Home = ({ user, onOpenScreen }) => {
const cards = [
{ id: "userlist", title: "用户列表", desc: "管理系统账号、角色与权限分组", icon: <Ic.user size={18} /> },
{ id: "module", title: "系统模块配置", desc: "配置 KPI 流程作业单与业务模块", icon: <Ic.settings size={18} /> },
];
const stats = [
{ label: "今日待办", value: 12, tone: "var(--accent)" },
{ label: "进行中报价", value: 47, tone: "var(--warning)" },
{ label: "本月订单", value: 286, tone: "var(--success)" },
{ label: "待审核", value: 8, tone: "var(--danger)" },
];
return (
<div style={{ padding: 16, height: "100%", overflow: "auto", background: "var(--bg-app)" }}>
<div style={{ background: "#fff", border: "1px solid var(--border)", padding: 16, marginBottom: 12 }}>
<div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>欢迎回来，{user || "admin"}</div>
<div style={{ fontSize: 12, color: "var(--text-muted)" }}>
XLY-ERP 印刷制造管理平台 · {new Date().toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric", weekday: "long" })}
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 12 }}>
{stats.map((s) => (
<div key={s.label} style={{ background: "#fff", border: "1px solid var(--border)", padding: "12px 14px" }}>
<div style={{ fontSize: 11, color: "var(--text-muted)", marginBottom: 4 }}>{s.label}</div>
<div style={{ fontSize: 22, fontWeight: 600, color: s.tone, fontFamily: '"JetBrains Mono", Menlo, monospace' }}>
{s.value}
</div>
</div>
))}
</div>
<div style={{ background: "#fff", border: "1px solid var(--border)" }}>
<div style={{ padding: "8px 12px", borderBottom: "1px solid var(--border)", fontSize: 12, fontWeight: 500, background: "var(--bg-row-zebra)" }}>
快捷入口
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--border)" }}>
{cards.map((c) => (
<div
key={c.id}
onClick={() => onOpenScreen(c.id, c.title)}
style={{
background: "#fff", padding: 14,
cursor: "pointer", display: "flex", alignItems: "center", gap: 10,
}}
onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-row-hover)"}
onMouseLeave={(e) => e.currentTarget.style.background = "#fff"}
>
<span style={{ width: 32, height: 32, background: "var(--accent-soft)", color: "var(--accent-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{c.icon}</span>
<div>
<div style={{ fontSize: 13, fontWeight: 500 }}>{c.title}</div>
<div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>{c.desc}</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
window.Home = Home;