Skip to content

Commit 69d7fc9

Browse files
wkylinwkylin
committed
feat: ui perf
1 parent 21557d8 commit 69d7fc9

File tree

8 files changed

+1059
-273
lines changed

8 files changed

+1059
-273
lines changed

‎src/pages/privacy/index.jsx‎

Lines changed: 81 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,101 @@
11
import React from 'react'
2-
import { Layout, Typography, Card, Button, theme } from 'antd'
2+
import { Layout, Typography, Card, Button, theme, Grid } from 'antd'
33
import { ArrowLeftOutlined } from '@ant-design/icons'
44
import useSafeNavigate from '@app-hooks/useSafeNavigate'
5-
import AlignCenter from '@stateless/AlignCenter'
5+
import styles from './index.module.less'
66

77
const { Title, Paragraph, Text } = Typography
88
const { Content } = Layout
9+
const { useBreakpoint } = Grid
910

1011
const Privacy = () => {
1112
const { redirectTo } = useSafeNavigate()
12-
const {
13-
token: { colorBgContainer, colorBgLayout, colorText },
14-
} = theme.useToken()
13+
const { token } = theme.useToken()
14+
const screens = useBreakpoint()
15+
const isMobile = !screens.md
16+
17+
const cssVars = {
18+
'--legal-bg': token.colorBgBase,
19+
'--legal-panel': token.colorBgContainer,
20+
'--legal-panel-2': token.colorBgLayout,
21+
'--legal-border': token.colorBorderSecondary,
22+
'--legal-text': token.colorText,
23+
'--legal-text-2': token.colorTextSecondary,
24+
'--legal-primary': token.colorPrimary,
25+
'--legal-primary-2': token.colorInfo,
26+
'--legal-shadow': token.boxShadowSecondary,
27+
}
1528

1629
return (
1730
<Layout style={{ minHeight: '100vh' }}>
18-
<Content style={{ backgroundColor: colorBgLayout, padding: '24px', display: 'flex', justifyContent: 'center' }}>
19-
<Card
20-
style={{
21-
width: '100%',
22-
maxWidth: 800,
23-
borderRadius: '8px',
24-
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
25-
backgroundColor: colorBgContainer,
26-
height: '90vh',
27-
display: 'flex',
28-
flexDirection: 'column',
29-
}}
30-
styles={{
31-
body: {
32-
padding: 0,
33-
height: '100%',
34-
display: 'flex',
35-
flexDirection: 'column',
36-
},
37-
}}
38-
>
39-
<div style={{ padding: '24px 40px 0 40px', flexShrink: 0 }}>
40-
<Button
41-
type="text"
42-
icon={<ArrowLeftOutlined />}
43-
onClick={() => redirectTo('/signup')}
44-
style={{ marginBottom: 16, paddingLeft: 0, color: colorText }}
45-
>
46-
返回
47-
</Button>
48-
</div>
49-
<div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 40px 40px 40px' }}>
50-
<Title level={2}>隐私政策 (Privacy Policy)</Title>
51-
<Paragraph>
52-
<Text type="secondary">最后更新日期：2025年11月25日</Text>
53-
</Paragraph>
31+
<Content className={styles.root} style={cssVars}>
32+
<div className={styles.bg} aria-hidden="true" />
33+
34+
<div className={styles.container} style={{ padding: isMobile ? 16 : 24 }}>
35+
<Card
36+
className={styles.card}
37+
variant="borderless"
38+
styles={{ body: { padding: 0, height: '100%', display: 'flex', flexDirection: 'column' } }}
39+
>
40+
<div className={styles.header}>
41+
<Button type="text" icon={<ArrowLeftOutlined />} onClick={() => redirectTo('/signup')}>
42+
返回
43+
</Button>
44+
<div className={styles.headerMeta}>
45+
<span className={styles.kicker}>PRIVACY</span>
46+
<span className={styles.dot} />
47+
<span className={styles.metaText}>Pro React Admin</span>
48+
</div>
49+
</div>
50+
51+
<div className={styles.body}>
52+
<Title level={2} className={styles.title}>
53+
隐私政策
54+
</Title>
55+
<Paragraph className={styles.subTitle}>
56+
<Text type="secondary">最后更新日期：2025年11月25日</Text>
57+
</Paragraph>
5458

55-
<Title level={4}>1. 信息收集</Title>
56-
<Paragraph>
57-
我们可能会收集您在使用本系统时提供的个人信息，包括但不限于：
58-
<ul>
59-
<li>注册信息（如用户名、邮箱地址、手机号码）；</li>
60-
<li>使用日志（如访问时间、IP地址、浏览器类型）；</li>
61-
<li>设备信息。</li>
62-
</ul>
63-
</Paragraph>
59+
<Title level={4}>1. 信息收集</Title>
60+
<Paragraph>
61+
我们可能会收集您在使用本系统时提供的个人信息，包括但不限于：
62+
<ul>
63+
<li>注册信息（如用户名、邮箱地址、手机号码）；</li>
64+
<li>使用日志（如访问时间、IP地址、浏览器类型）；</li>
65+
<li>设备信息。</li>
66+
</ul>
67+
</Paragraph>
6468

65-
<Title level={4}>2. 信息使用</Title>
66-
<Paragraph>
67-
我们收集的信息将用于：
68-
<ul>
69-
<li>提供和改进我们的服务；</li>
70-
<li>个性化用户体验；</li>
71-
<li>发送服务通知和更新；</li>
72-
<li>保障账户安全。</li>
73-
</ul>
74-
</Paragraph>
69+
<Title level={4}>2. 信息使用</Title>
70+
<Paragraph>
71+
我们收集的信息将用于：
72+
<ul>
73+
<li>提供和改进我们的服务；</li>
74+
<li>个性化用户体验；</li>
75+
<li>发送服务通知和更新；</li>
76+
</ul>
77+
</Paragraph>
7578

76-
<Title level={4}>3. 信息共享</Title>
77-
<Paragraph>
78-
我们不会向第三方出售您的个人信息。我们仅在以下情况下共享信息：
79-
<ul>
80-
<li>获得您的明确同意；</li>
81-
<li>遵守法律法规要求；</li>
82-
<li>保护我们的合法权益。</li>
83-
</ul>
84-
</Paragraph>
79+
<Title level={4}>3. 信息共享</Title>
80+
<Paragraph>
81+
我们不会向第三方出售您的个人信息。我们仅在以下情况下共享信息：
82+
<ul>
83+
<li>获得您的明确同意；</li>
84+
<li>遵守法律法规要求；</li>
85+
</ul>
86+
</Paragraph>
8587

86-
<Title level={4}>4. Cookie 技术</Title>
87-
<Paragraph>
88-
我们使用 Cookie 和类似技术来提升您的体验，记住您的偏好设置，并分析流量。您可以通过浏览器设置管理 Cookie。
89-
</Paragraph>
88+
<Title level={4}>4. Cookie 技术</Title>
89+
<Paragraph>
90+
我们使用 Cookie 和类似技术来提升您的体验，记住您的偏好设置，并分析流量。您可以通过浏览器设置管理
91+
Cookie。
92+
</Paragraph>
9093

91-
<Title level={4}>5. 数据安全</Title>
92-
<Paragraph>我们采取合理的安全措施来保护您的个人信息，防止未经授权的访问、披露或丢失。</Paragraph>
93-
</div>
94-
</Card>
94+
<Title level={4}>5. 数据安全</Title>
95+
<Paragraph>我们采取合理的安全措施来保护您的个人信息，防止未经授权的访问、披露或丢失。</Paragraph>
96+
</div>
97+
</Card>
98+
</div>
9599
</Content>
96100
</Layout>
97101
)

‎src/pages/privacy/index.module.less‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
.root {
2+
min-height: 100vh;
3+
background: var(--legal-bg);
4+
color: var(--legal-text);
5+
position: relative;
6+
overflow: hidden;
7+
}
8+
9+
.bg {
10+
position: absolute;
11+
inset: 0;
12+
pointer-events: none;
13+
background:
14+
radial-gradient(1200px 820px at 22% 12%, color-mix(in srgb, var(--legal-primary) 16%, transparent), transparent 62%),
15+
radial-gradient(980px 760px at 82% 18%, color-mix(in srgb, var(--legal-primary-2) 16%, transparent), transparent 64%),
16+
linear-gradient(180deg, color-mix(in srgb, var(--legal-panel-2) 22%, transparent), transparent 56%);
17+
filter: saturate(1.15);
18+
}
19+
20+
.container {
21+
position: relative;
22+
z-index: 1;
23+
display: flex;
24+
justify-content: center;
25+
}
26+
27+
.card {
28+
width: 100%;
29+
max-width: 980px;
30+
height: min(86vh, 860px);
31+
border: 1px solid color-mix(in srgb, var(--legal-border) 72%, transparent);
32+
background: color-mix(in srgb, var(--legal-panel) 92%, transparent);
33+
box-shadow: var(--legal-shadow);
34+
border-radius: 16px;
35+
overflow: hidden;
36+
}
37+
38+
.header {
39+
display: flex;
40+
align-items: center;
41+
justify-content: space-between;
42+
padding: 14px 18px;
43+
border-bottom: 1px solid color-mix(in srgb, var(--legal-border) 70%, transparent);
44+
background: color-mix(in srgb, var(--legal-panel) 82%, transparent);
45+
backdrop-filter: blur(10px);
46+
}
47+
48+
.headerMeta {
49+
display: flex;
50+
align-items: center;
51+
gap: 10px;
52+
color: var(--legal-text-2);
53+
font-size: 12px;
54+
letter-spacing: 0.06em;
55+
text-transform: uppercase;
56+
}
57+
58+
.kicker {
59+
padding: 4px 10px;
60+
border-radius: 999px;
61+
border: 1px solid color-mix(in srgb, var(--legal-border) 70%, transparent);
62+
background:
63+
linear-gradient(90deg,
64+
color-mix(in srgb, var(--legal-primary) 14%, transparent),
65+
color-mix(in srgb, var(--legal-primary-2) 18%, transparent));
66+
}
67+
68+
.dot {
69+
width: 6px;
70+
height: 6px;
71+
border-radius: 999px;
72+
background: color-mix(in srgb, var(--legal-primary-2) 70%, transparent);
73+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--legal-primary-2) 12%, transparent);
74+
}
75+
76+
.metaText {
77+
opacity: 0.9;
78+
}
79+
80+
.body {
81+
flex: 1;
82+
min-height: 0;
83+
overflow: auto;
84+
padding: 18px 22px 26px;
85+
}
86+
87+
.title {
88+
margin-bottom: 8px;
89+
}
90+
91+
.subTitle {
92+
margin-bottom: 18px;
93+
}
94+
95+
@media (max-width: 768px) {
96+
.card {
97+
height: auto;
98+
min-height: 72vh;
99+
border-radius: 14px;
100+
}
101+
102+
.body {
103+
padding: 14px 16px 18px;
104+
}
105+
}
106+
107+
@media (prefers-reduced-motion: reduce) {
108+
.bg {
109+
filter: none;
110+
}
111+
.header {
112+
backdrop-filter: none;
113+
}
114+
}

0 commit comments

Comments
 (0)