Skip to content

Commit d67937e

Browse files
DemoJustLuGuoDemoJustLuGuo
committed
⏪ 回退管理台 GUI 外观至提交 5e22445 并保留响应式设计
移除「雕版/纸感」视觉改版(woodblock.css、衬线标题、装饰卡片、纸感底纹),恢复旧外观。保留 #8/#9 中一并合入的移动端响应式适配与非 GUI 功能修复。
1 parent 198a50a commit d67937e

4 files changed

Lines changed: 106 additions & 399 deletions

File tree

‎web/src/components/layout/DashboardLayout.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -250,18 +250,13 @@ export const DashboardLayout: React.FC = () => {
250250
style={{ maxWidth: "100%" }}
251251
/>
252252
</div>
253-
<hr
254-
className="wb-rule wb-rule-on-dark"
255-
style={{ margin: "0 16px 8px" }}
256-
/>
257253
{menuElement}
258254
</Sider>
259255

260256
<Layout
261257
className="dashboard-inner-layout"
262258
style={{ height: "100dvh", minHeight: 0 }}
263259
>
264-
<div className="wb-weave" />
265260
<Header
266261
className="dashboard-header"
267262
style={{
@@ -385,7 +380,7 @@ export const DashboardLayout: React.FC = () => {
385380
</Drawer>
386381

387382
<div
388-
className="dashboard-page-scroll wb-paper-bg"
383+
className="dashboard-page-scroll"
389384
style={
390385
{
391386
flex: 1,

‎web/src/index.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "./styles/woodblock.css";
2-
31
html,
42
body,
53
#root {

‎web/src/pages/auth/Login.tsx‎

Lines changed: 105 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useBreakpoint } from "../../hooks/useBreakpoint";
66
import logoMonoLight from "../../assets/logo-mono-light.svg";
77
import logoColor from "../../assets/logo-color.svg";
88

9-
const { Title, Paragraph, Text } = Typography;
9+
const { Title, Paragraph } = Typography;
1010

1111
export const Login: React.FC = () => {
1212
const [errorMsg, setErrorMsg] = useState("");
@@ -31,120 +31,122 @@ export const Login: React.FC = () => {
3131

3232
return (
3333
<main
34-
className="management-login-page wb-paper-bg"
34+
className="management-login-page login-split-layout"
3535
style={{
3636
minHeight: "100dvh",
37-
display: "flex",
38-
flexDirection: "column",
39-
alignItems: "center",
40-
justifyContent: "center",
41-
padding: isMobile ? "24px 16px" : "32px 20px",
37+
display: "grid",
38+
gridTemplateColumns: isMobile ? "1fr" : "1.5fr 1px 1fr",
39+
background: token.colorBgLayout,
4240
}}
4341
>
44-
<div
45-
className="wb-card wb-card-in"
42+
{!isMobile && (
43+
<>
44+
<section
45+
style={{
46+
display: "flex",
47+
alignItems: "center",
48+
justifyContent: "center",
49+
padding: "48px",
50+
background: isDark
51+
? `radial-gradient(circle at 30% 30%, #15293d, transparent 60%), ${token.colorBgLayout}`
52+
: `radial-gradient(circle at 30% 30%, #dceef5, transparent 60%), ${token.colorBgLayout}`,
53+
position: "relative",
54+
overflow: "hidden",
55+
}}
56+
className="login-hero-pane"
57+
>
58+
<div style={{ maxWidth: "600px" }} className="login-hero-content">
59+
<img
60+
src={isDark ? logoMonoLight : logoColor}
61+
alt="CQUT-AUTH Logo"
62+
style={{ height: "80px", width: "auto" }}
63+
/>
64+
</div>
65+
</section>
66+
<div
67+
style={{ backgroundColor: token.colorBorderSecondary }}
68+
className="login-divider"
69+
></div>
70+
</>
71+
)}
72+
<section
4673
style={{
47-
width: "100%",
48-
maxWidth: 420,
49-
padding: isMobile ? "24px 20px 20px" : "36px 36px 32px",
74+
display: "flex",
75+
alignItems: "center",
76+
justifyContent: "center",
77+
padding: isMobile ? "32px 16px" : "48px 36px",
78+
background: token.colorBgContainer,
5079
}}
80+
className="login-form-pane"
5181
>
5282
<div
53-
className="wb-rise-in"
54-
style={{
55-
display: "flex",
56-
flexDirection: "column",
57-
alignItems: "center",
58-
gap: 12,
59-
marginBottom: 20,
60-
}}
61-
>
62-
<img
63-
src={isDark ? logoMonoLight : logoColor}
64-
alt="CQUT-Auth Logo"
65-
width={isMobile ? 192 : 224}
66-
height={isMobile ? 48 : 56}
67-
/>
68-
<div style={{ textAlign: "center" }}>
69-
<Title
70-
level={isMobile ? 4 : 3}
71-
className="wb-serif"
72-
style={{ margin: 0, letterSpacing: "0.08em" }}
73-
>
74-
登录管理台
75-
</Title>
76-
<Text
77-
type="secondary"
78-
style={{ fontSize: 11, letterSpacing: "0.32em" }}
79-
>
80-
CQUT UNIFIED AUTH
81-
</Text>
82-
</div>
83-
</div>
84-
<hr className="wb-rule" />
85-
<Paragraph
86-
type="secondary"
87-
style={{ textAlign: "center", marginBottom: 24 }}
83+
style={{ width: "100%", maxWidth: "320px" }}
84+
className="login-form-content"
8885
>
89-
使用校园统一身份认证账号登录。
90-
</Paragraph>
91-
{errorMsg && (
92-
<Alert
93-
message={errorMsg}
94-
type="error"
95-
showIcon
96-
style={{ marginBottom: 20 }}
97-
/>
98-
)}
99-
<Form layout="vertical" onFinish={onFinish} requiredMark={false}>
100-
<Form.Item
101-
label="账号"
102-
name="account"
103-
rules={[{ required: true, message: "请输入账号" }]}
104-
>
105-
<Input
106-
size="large"
107-
placeholder="学号/工号"
108-
autoComplete="username"
109-
spellCheck={false}
86+
{isMobile && (
87+
<img
88+
src={isDark ? logoMonoLight : logoColor}
89+
alt="CQUT-AUTH Logo"
90+
style={{
91+
height: "56px",
92+
width: "auto",
93+
display: "block",
94+
margin: "0 auto 24px",
95+
}}
11096
/>
111-
</Form.Item>
112-
<Form.Item
113-
label="密码"
114-
name="password"
115-
rules={[{ required: true, message: "请输入密码" }]}
116-
>
117-
<Input.Password
118-
size="large"
119-
placeholder="密码"
120-
autoComplete="current-password"
97+
)}
98+
<Title level={2} style={{ margin: "0 0 8px 0", fontWeight: 750 }}>
99+
登录管理台
100+
</Title>
101+
<Paragraph type="secondary" style={{ marginBottom: "24px" }}>
102+
使用校园统一身份认证账号登录。密码仅用于本次认证，不会被保存。
103+
</Paragraph>
104+
{errorMsg && (
105+
<Alert
106+
message={errorMsg}
107+
type="error"
108+
showIcon
109+
style={{ marginBottom: "20px" }}
121110
/>
122-
</Form.Item>
123-
<Form.Item style={{ marginBottom: 0 }}>
124-
<Button
125-
type="primary"
126-
htmlType="submit"
127-
size="large"
128-
block
129-
loading={isLoading}
111+
)}
112+
<Form layout="vertical" onFinish={onFinish} requiredMark={false}>
113+
<Form.Item
114+
label="账号"
115+
name="account"
116+
rules={[{ required: true, message: "请输入账号" }]}
130117
>
131-
登录管理台
132-
</Button>
133-
</Form.Item>
134-
</Form>
135-
</div>
136-
<p
137-
className="wb-rise-in"
138-
style={{
139-
marginTop: 22,
140-
fontSize: 12,
141-
letterSpacing: "0.18em",
142-
textAlign: "center",
143-
color: token.colorTextSecondary,
144-
}}
145-
>
146-
密码仅用于本次认证，不会被保存
147-
</p>
118+
<Input
119+
size="large"
120+
placeholder="学号/工号"
121+
autoComplete="username"
122+
spellCheck={false}
123+
/>
124+
</Form.Item>
125+
<Form.Item
126+
label="密码"
127+
name="password"
128+
rules={[{ required: true, message: "请输入密码" }]}
129+
>
130+
<Input.Password
131+
size="large"
132+
placeholder="密码"
133+
autoComplete="current-password"
134+
/>
135+
</Form.Item>
136+
<Form.Item>
137+
<Button
138+
type="primary"
139+
htmlType="submit"
140+
size="large"
141+
block
142+
loading={isLoading}
143+
>
144+
登录管理台
145+
</Button>
146+
</Form.Item>
147+
</Form>
148+
</div>
149+
</section>
148150
</main>
149151
);
150152
};

0 commit comments

Comments
 (0)