feat(web): 采用 UI UX Pro Max Soft UI Evolution 设计系统

从 Pinterest 风格切换到 Soft UI Evolution 设计系统，使用 UI UX Pro Max 推理引擎生成适合跨行业 ERP 业务用户的专业设计方案。设计变更： - 主色从 Pinterest Red (#e60023) 切换到 Trust Blue (#2563EB) - 字体从系统默认切换到 Noto Sans SC（中文优先） - 圆角从 16-20px 调整到 10-12px（专业但不夸张） - 中性色从暖橄榄调切换到 Slate 石板蓝调 - 成功色 #103c25 → #059669，警告色 #b56e1a → #d97706 - 暗色模式从暖黑 (#1a1a18) 切换到深海军蓝 (#0f172a) 涉及文件：DESIGN.md + index.css + App.tsx + 24 个组件文件
2026-04-20 23:27:24 +08:00
parent 85e732cf12
commit 89fc482d99
27 changed files with 598 additions and 588 deletions
--- a/apps/web/src/pages/messages/MessageTemplates.tsx
+++ b/apps/web/src/pages/messages/MessageTemplates.tsx
@@ -5,9 +5,9 @@ import type { ColumnsType } from 'antd/es/table';
 import { listTemplates, createTemplate, type MessageTemplateInfo } from '../../api/messageTemplates';

 const channelMap: Record<string, { label: string; color: string }> = {
-  in_app: { label: '站内', color: '#e60023' },
-  email: { label: '邮件', color: '#103c25' },
-  sms: { label: '短信', color: '#b56e1a' },
+  in_app: { label: '站内', color: '#2563eb' },
+  email: { label: '邮件', color: '#059669' },
+  sms: { label: '短信', color: '#d97706' },
  wechat: { label: '微信', color: '#7C3AED' },
 };

@@ -64,9 +64,9 @@ export default function MessageTemplates() {
      key: 'code',
      render: (v: string) => (
        <Tag style={{
-          background: isDark ? '#211922' : '#f6f6f3',
+          background: isDark ? '#0f172a' : '#f8fafc',
          border: 'none',
-          color: isDark ? '#91918c' : '#62625b',
+          color: isDark ? '#94a3b8' : '#475569',
          fontFamily: 'monospace',
          fontSize: 12,
        }}>
@@ -80,7 +80,7 @@ export default function MessageTemplates() {
      key: 'channel',
      width: 90,
      render: (c: string) => {
-        const info = channelMap[c] || { label: c, color: '#62625b' };
+        const info = channelMap[c] || { label: c, color: '#475569' };
        return (
          <Tag style={{
            background: info.color + '15',
@@ -111,7 +111,7 @@ export default function MessageTemplates() {
      key: 'created_at',
      width: 180,
      render: (v: string) => (
-        <span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>{v}</span>
+        <span style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: 13 }}>{v}</span>
      ),
    },
  ];
@@ -124,7 +124,7 @@ export default function MessageTemplates() {
        alignItems: 'center',
        marginBottom: 16,
      }}>
-        <span style={{ fontSize: 13, color: isDark ? '#62625b' : '#91918c' }}>
+        <span style={{ fontSize: 13, color: isDark ? '#475569' : '#94a3b8' }}>
          共 {total} 个模板
        </span>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalOpen(true)}>
@@ -135,7 +135,7 @@ export default function MessageTemplates() {
      <div style={{
        background: isDark ? '#111827' : '#FFFFFF',
        borderRadius: 12,
-        border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
+        border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
        overflow: 'hidden',
      }}>
        <Table
--- a/apps/web/src/pages/messages/NotificationList.tsx
+++ b/apps/web/src/pages/messages/NotificationList.tsx
@@ -11,9 +11,9 @@ interface Props {
 }

 const priorityStyles: Record<string, { bg: string; color: string; text: string }> = {
-  urgent: { bg: '#FEF2F2', color: '#9e0a0a', text: '紧急' },
-  important: { bg: '#FFFBEB', color: '#b56e1a', text: '重要' },
-  normal: { bg: '#fef0f0', color: '#e60023', text: '普通' },
+  urgent: { bg: '#FEF2F2', color: '#dc2626', text: '紧急' },
+  important: { bg: '#FFFBEB', color: '#d97706', text: '重要' },
+  normal: { bg: '#eff6ff', color: '#2563eb', text: '普通' },
 };

 export default function NotificationList({ queryFilter }: Props) {
@@ -83,7 +83,7 @@ export default function NotificationList({ queryFilter }: Props) {
      content: (
        <div>
          <Paragraph>{record.body}</Paragraph>
-          <div style={{ marginTop: 8, color: isDark ? '#62625b' : '#91918c', fontSize: 12 }}>
+          <div style={{ marginTop: 8, color: isDark ? '#475569' : '#94a3b8', fontSize: 12 }}>
            {record.created_at}
          </div>
        </div>
@@ -104,7 +104,7 @@ export default function NotificationList({ queryFilter }: Props) {
          style={{
            fontWeight: record.is_read ? 400 : 600,
            cursor: 'pointer',
-            color: record.is_read ? (isDark ? '#91918c' : '#62625b') : 'inherit',
+            color: record.is_read ? (isDark ? '#94a3b8' : '#475569') : 'inherit',
          }}
          onClick={() => showDetail(record)}
        >
@@ -114,7 +114,7 @@ export default function NotificationList({ queryFilter }: Props) {
              width: 6,
              height: 6,
              borderRadius: '50%',
-              background: '#e60023',
+              background: '#2563eb',
              marginRight: 8,
            }} />
          )}
@@ -128,7 +128,7 @@ export default function NotificationList({ queryFilter }: Props) {
      key: 'priority',
      width: 90,
      render: (p: string) => {
-        const info = priorityStyles[p] || { bg: '#f6f6f3', color: '#62625b', text: p };
+        const info = priorityStyles[p] || { bg: '#f8fafc', color: '#475569', text: p };
        return (
          <Tag style={{
            background: info.bg,
@@ -146,7 +146,7 @@ export default function NotificationList({ queryFilter }: Props) {
      dataIndex: 'sender_type',
      key: 'sender_type',
      width: 80,
-      render: (s: string) => <span style={{ color: isDark ? '#62625b' : '#91918c' }}>{s === 'system' ? '系统' : '用户'}</span>,
+      render: (s: string) => <span style={{ color: isDark ? '#475569' : '#94a3b8' }}>{s === 'system' ? '系统' : '用户'}</span>,
    },
    {
      title: '状态',
@@ -155,9 +155,9 @@ export default function NotificationList({ queryFilter }: Props) {
      width: 80,
      render: (r: boolean) => (
        <Tag style={{
-          background: r ? (isDark ? '#211922' : '#f6f6f3') : '#fef0f0',
+          background: r ? (isDark ? '#0f172a' : '#f8fafc') : '#eff6ff',
          border: 'none',
-          color: r ? (isDark ? '#62625b' : '#91918c') : '#e60023',
+          color: r ? (isDark ? '#475569' : '#94a3b8') : '#2563eb',
          fontWeight: 500,
        }}>
          {r ? '已读' : '未读'}
@@ -170,7 +170,7 @@ export default function NotificationList({ queryFilter }: Props) {
      key: 'created_at',
      width: 180,
      render: (v: string) => (
-        <span style={{ color: isDark ? '#62625b' : '#91918c', fontSize: 13 }}>{v}</span>
+        <span style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: 13 }}>{v}</span>
      ),
    },
    {
@@ -185,7 +185,7 @@ export default function NotificationList({ queryFilter }: Props) {
              size="small"
              icon={<CheckOutlined />}
              onClick={() => handleMarkRead(record.id)}
-              style={{ color: '#e60023' }}
+              style={{ color: '#2563eb' }}
            />
          )}
          <Button
@@ -193,7 +193,7 @@ export default function NotificationList({ queryFilter }: Props) {
            size="small"
            icon={<EyeOutlined />}
            onClick={() => showDetail(record)}
-            style={{ color: isDark ? '#62625b' : '#91918c' }}
+            style={{ color: isDark ? '#475569' : '#94a3b8' }}
          />
          <Button
            type="text"
@@ -215,7 +215,7 @@ export default function NotificationList({ queryFilter }: Props) {
        alignItems: 'center',
        marginBottom: 16,
      }}>
-        <span style={{ fontSize: 13, color: isDark ? '#62625b' : '#91918c' }}>
+        <span style={{ fontSize: 13, color: isDark ? '#475569' : '#94a3b8' }}>
          共 {total} 条消息
        </span>
        <Button icon={<CheckOutlined />} onClick={handleMarkAllRead}>
@@ -226,7 +226,7 @@ export default function NotificationList({ queryFilter }: Props) {
      <div style={{
        background: isDark ? '#111827' : '#FFFFFF',
        borderRadius: 12,
-        border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
+        border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
        overflow: 'hidden',
      }}>
        <Table
--- a/apps/web/src/pages/messages/NotificationPreferences.tsx
+++ b/apps/web/src/pages/messages/NotificationPreferences.tsx
@@ -48,12 +48,12 @@ export default function NotificationPreferences() {
    <div style={{
      background: isDark ? '#111827' : '#FFFFFF',
      borderRadius: 12,
-      border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`,
+      border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
      padding: 24,
      maxWidth: 600,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
-        <BellOutlined style={{ fontSize: 16, color: '#e60023' }} />
+        <BellOutlined style={{ fontSize: 16, color: '#2563eb' }} />
        <span style={{ fontSize: 15, fontWeight: 600 }}>通知偏好设置</span>
      </div>