feat(web): 从 Notion 风格切换到 Pinterest 设计系统
Some checks failed
CI / rust-check (push) Has been cancelled
CI / rust-test (push) Has been cancelled
CI / frontend-build (push) Has been cancelled
CI / security-audit (push) Has been cancelled

- 替换 DESIGN.md 为 Pinterest 设计规格(暖色调、红色主题、大圆角)
- 更新 CSS 变量:主色 #0075de→#e60023, 圆角 4px→16px, 背景 #f6f5f4→#f6f6f3
- 更新 Ant Design 主题令牌:更大圆角、Pinterest 色板、更大触控目标
- 批量更新 24 个页面/组件文件中的硬编码颜色值
- 暗色模式同步适配 Pinterest 暖色调暗色方案
This commit is contained in:
iven
2026-04-20 22:13:20 +08:00
parent 8f3d2d58e7
commit 85e732cf12
27 changed files with 547 additions and 657 deletions

View File

@@ -35,9 +35,9 @@ import { listRoles, type RoleInfo } from '../api/roles';
import type { UserInfo } from '../api/auth';
const STATUS_COLOR_MAP: Record<string, string> = {
active: '#1aae39',
disabled: '#e5534b',
locked: '#dd5b00',
active: '#103c25',
disabled: '#9e0a0a',
locked: '#b56e1a',
};
const STATUS_BG_MAP: Record<string, string> = {
@@ -219,7 +219,7 @@ export default function Users() {
width: 32,
height: 32,
borderRadius: 8,
background: 'linear-gradient(135deg, #0075de, #62aef0)',
background: 'linear-gradient(135deg, #e60023, #f05a5a)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -233,7 +233,7 @@ export default function Users() {
<div>
<div style={{ fontWeight: 500, fontSize: 14 }}>{v}</div>
{record.display_name && (
<div style={{ fontSize: 12, color: isDark ? '#615d59' : '#a39e98' }}>
<div style={{ fontSize: 12, color: isDark ? '#62625b' : '#91918c' }}>
{record.display_name}
</div>
)}
@@ -261,8 +261,8 @@ export default function Users() {
render: (status: string) => (
<Tag
style={{
color: STATUS_COLOR_MAP[status] || '#615d59',
background: STATUS_BG_MAP[status] || '#f6f5f4',
color: STATUS_COLOR_MAP[status] || '#62625b',
background: STATUS_BG_MAP[status] || '#f6f6f3',
border: 'none',
fontWeight: 500,
}}
@@ -279,14 +279,14 @@ export default function Users() {
roles.length > 0
? roles.map((r) => (
<Tag key={r.id} style={{
background: isDark ? '#1e1e1d' : '#f6f5f4',
background: isDark ? '#211922' : '#f6f6f3',
border: 'none',
color: isDark ? '#CBD5E1' : '#615d59',
color: isDark ? '#CBD5E1' : '#62625b',
}}>
{r.name}
</Tag>
))
: <span style={{ color: isDark ? '#615d59' : '#CBD5E1' }}>-</span>,
: <span style={{ color: isDark ? '#62625b' : '#CBD5E1' }}>-</span>,
},
{
title: '操作',
@@ -299,14 +299,14 @@ export default function Users() {
type="text"
icon={<EditOutlined />}
onClick={() => openEditModal(record)}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
style={{ color: isDark ? '#91918c' : '#62625b' }}
/>
<Button
size="small"
type="text"
icon={<SafetyCertificateOutlined />}
onClick={() => openRoleModal(record)}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
style={{ color: isDark ? '#91918c' : '#62625b' }}
/>
{record.status === 'active' ? (
<Popconfirm
@@ -326,7 +326,7 @@ export default function Users() {
type="text"
icon={<CheckCircleOutlined />}
onClick={() => handleToggleStatus(record.id, 'active')}
style={{ color: '#1aae39' }}
style={{ color: '#103c25' }}
/>
)}
<Popconfirm
@@ -356,7 +356,7 @@ export default function Users() {
<Space size={8}>
<Input
placeholder="搜索用户名..."
prefix={<SearchOutlined style={{ color: '#a39e98' }} />}
prefix={<SearchOutlined style={{ color: '#91918c' }} />}
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
@@ -379,7 +379,7 @@ export default function Users() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
overflow: 'hidden',
}}>
<Table
@@ -415,7 +415,7 @@ export default function Users() {
label="用户名"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input prefix={<UserOutlined style={{ color: '#a39e98' }} />} disabled={!!editUser} />
<Input prefix={<UserOutlined style={{ color: '#91918c' }} />} disabled={!!editUser} />
</Form.Item>
{!editUser && (
<Form.Item
@@ -465,13 +465,13 @@ export default function Users() {
style={{
padding: '10px 14px',
borderRadius: 8,
border: `1px solid ${isDark ? '#1e1e1d' : '#E2E8F0'}`,
background: isDark ? '#0B0F1A' : '#fafaf9',
border: `1px solid ${isDark ? '#211922' : '#E2E8F0'}`,
background: isDark ? '#0B0F1A' : '#fafaf8',
}}
>
<Checkbox value={r.id}>
<span style={{ fontWeight: 500 }}>{r.name}</span>
<span style={{ color: isDark ? '#615d59' : '#a39e98', marginLeft: 8, fontSize: 12 }}>
<span style={{ color: isDark ? '#62625b' : '#91918c', marginLeft: 8, fontSize: 12 }}>
{r.code}
</span>
</Checkbox>