feat(web): 从 Notion 风格切换到 Pinterest 设计系统

- 替换 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

@@ -17,9 +17,9 @@ const RESOURCE_TYPE_OPTIONS = [
];
const ACTION_STYLES: Record<string, { bg: string; color: string; text: string }> = {
create: { bg: '#ECFDF5', color: '#1aae39', text: '创建' },
update: { bg: '#f2f9ff', color: '#0075de', text: '更新' },
delete: { bg: '#FEF2F2', color: '#e5534b', text: '删除' },
create: { bg: '#ECFDF5', color: '#103c25', text: '创建' },
update: { bg: '#fef0f0', color: '#e60023', text: '更新' },
delete: { bg: '#FEF2F2', color: '#9e0a0a', text: '删除' },
};
function formatDateTime(value: string): string {
@@ -80,7 +80,7 @@ export default function AuditLogViewer() {
key: 'action',
width: 100,
render: (action: string) => {
const info = ACTION_STYLES[action] || { bg: '#f6f5f4', color: '#615d59', text: action };
const info = ACTION_STYLES[action] || { bg: '#f6f6f3', color: '#62625b', text: action };
return (
<Tag style={{
background: info.bg,
@@ -100,9 +100,9 @@ export default function AuditLogViewer() {
width: 120,
render: (v: string) => (
<Tag style={{
background: isDark ? '#1e1e1d' : '#f6f5f4',
background: isDark ? '#211922' : '#f6f6f3',
border: 'none',
color: isDark ? '#CBD5E1' : '#615d59',
color: isDark ? '#CBD5E1' : '#62625b',
}}>
{v}
</Tag>
@@ -115,7 +115,7 @@ export default function AuditLogViewer() {
width: 200,
ellipsis: true,
render: (v: string) => (
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#a39e98' : '#615d59' }}>
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#91918c' : '#62625b' }}>
{v}
</span>
),
@@ -127,7 +127,7 @@ export default function AuditLogViewer() {
width: 200,
ellipsis: true,
render: (v: string) => (
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#a39e98' : '#615d59' }}>
<span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#91918c' : '#62625b' }}>
{v}
</span>
),
@@ -138,7 +138,7 @@ export default function AuditLogViewer() {
key: 'created_at',
width: 180,
render: (value: string) => (
<span style={{ color: isDark ? '#615d59' : '#a39e98', fontSize: 13 }}>
<span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>
{formatDateTime(value)}
</span>
),
@@ -156,7 +156,7 @@ export default function AuditLogViewer() {
padding: 12,
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 10,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
}}>
<Select
allowClear
@@ -173,7 +173,7 @@ export default function AuditLogViewer() {
value={query.user_id ?? ''}
onChange={(e) => handleFilterChange('user_id', e.target.value)}
/>
<span style={{ fontSize: 13, color: isDark ? '#615d59' : '#a39e98', marginLeft: 'auto' }}>
<span style={{ fontSize: 13, color: isDark ? '#62625b' : '#91918c', marginLeft: 'auto' }}>
{total}
</span>
</div>
@@ -182,7 +182,7 @@ export default function AuditLogViewer() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
overflow: 'hidden',
}}>
<Table

View File

@@ -132,9 +132,9 @@ export default function SystemSettings() {
width: 250,
render: (v: string) => (
<Tag style={{
background: isDark ? '#1e1e1d' : '#f6f5f4',
background: isDark ? '#211922' : '#f6f6f3',
border: 'none',
color: isDark ? '#CBD5E1' : '#615d59',
color: isDark ? '#CBD5E1' : '#62625b',
fontFamily: 'monospace',
fontSize: 12,
}}>
@@ -162,7 +162,7 @@ export default function SystemSettings() {
type="text"
icon={<EditOutlined />}
onClick={() => openEdit(record)}
style={{ color: isDark ? '#a39e98' : '#615d59' }}
style={{ color: isDark ? '#91918c' : '#62625b' }}
/>
<Popconfirm
title="确定删除此设置?"
@@ -191,7 +191,7 @@ export default function SystemSettings() {
<Space>
<Input
placeholder="输入设置键名查询"
prefix={<SearchOutlined style={{ color: '#a39e98' }} />}
prefix={<SearchOutlined style={{ color: '#91918c' }} />}
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
onPressEnter={handleSearch}
@@ -207,7 +207,7 @@ export default function SystemSettings() {
<div style={{
background: isDark ? '#111827' : '#FFFFFF',
borderRadius: 12,
border: `1px solid ${isDark ? '#1e1e1d' : '#f6f5f4'}`,
border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
overflow: 'hidden',
}}>
<Table