From 89fc482d99f8641d06a1c37675eda2d0820f8f53 Mon Sep 17 00:00:00 2001 From: iven Date: Mon, 20 Apr 2026 23:27:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E9=87=87=E7=94=A8=20UI=20UX=20Pro?= =?UTF-8?q?=20Max=20Soft=20UI=20Evolution=20=E8=AE=BE=E8=AE=A1=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 从 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 个组件文件 --- DESIGN.md | 396 +++++++++--------- apps/web/src/App.tsx | 54 +-- apps/web/src/components/NotificationPanel.tsx | 16 +- apps/web/src/index.css | 382 ++++++++--------- apps/web/src/pages/Home.tsx | 34 +- apps/web/src/pages/Login.tsx | 10 +- apps/web/src/pages/Organizations.tsx | 18 +- apps/web/src/pages/PluginAdmin.tsx | 10 +- apps/web/src/pages/PluginDashboardPage.tsx | 8 +- apps/web/src/pages/PluginGraphPage.tsx | 4 +- apps/web/src/pages/PluginMarket.tsx | 12 +- apps/web/src/pages/Roles.tsx | 26 +- apps/web/src/pages/Users.tsx | 36 +- .../src/pages/dashboard/DashboardWidgets.tsx | 14 +- .../pages/dashboard/dashboardConstants.tsx | 6 +- apps/web/src/pages/graph/graphRenderer.ts | 8 +- .../src/pages/messages/MessageTemplates.tsx | 18 +- .../src/pages/messages/NotificationList.tsx | 30 +- .../messages/NotificationPreferences.tsx | 4 +- .../src/pages/plugins/graph/graphConstants.ts | 8 +- .../src/pages/plugins/graph/graphRenderer.ts | 4 +- .../web/src/pages/settings/AuditLogViewer.tsx | 24 +- .../web/src/pages/settings/SystemSettings.tsx | 10 +- .../web/src/pages/workflow/CompletedTasks.tsx | 12 +- .../src/pages/workflow/InstanceMonitor.tsx | 14 +- apps/web/src/pages/workflow/PendingTasks.tsx | 12 +- .../src/pages/workflow/ProcessDefinitions.tsx | 16 +- 27 files changed, 598 insertions(+), 588 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 4952c58..b7eb584 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,263 +1,273 @@ -# Design System Inspired by Pinterest +# Design System — Enterprise ERP Platform + +> Generated by UI UX Pro Max | Style: Soft UI Evolution | Target: Cross-industry business users ## 1. Visual Theme & Atmosphere -Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (`#e60023`) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone — grays lean toward olive/sand (`#91918c`, `#62625b`, `#e5e5e0`) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing. +A warm, professional, and approachable design that feels trustworthy for business users across all industries — manufacturing, retail, finance, services, and more. The design uses a clean white canvas with soft blue as the primary brand color, conveying reliability and clarity without feeling cold or corporate. -The typography uses Pin Sans — a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 12–14px. The CSS variable naming system (`--comp-*`, `--sema-*`, `--base-*`) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens. - -What distinguishes Pinterest is its generous border-radius system (12px–40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (`#e5e5e0`) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius — rounded but not pill-shaped. Combined with warm badge backgrounds (`hsla(60,20%,98%,.5)` — a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile. +The Soft UI Evolution style provides subtle depth through improved shadows — softer than flat design but clearer than neumorphism. This creates a sense of modern polish that invites interaction while maintaining excellent readability and accessibility (WCAG AA+). **Key Characteristics:** -- Warm white canvas with olive/sand-toned neutrals — cozy, not clinical -- Pinterest Red (`#e60023`) as singular bold accent — never subtle, always confident -- Pin Sans custom font with global fallback stack (including CJK) -- Three-tier token architecture: `--comp-*` / `--sema-*` / `--base-*` -- Warm secondary surfaces: sand gray (`#e5e5e0`), warm badge (`hsla(60,20%,98%,.5)`) -- Generous border-radius: 16px standard, up to 40px for large containers -- Photography-first content — pins/images are the primary visual element -- Dark near-purple text (`#211922`) — warm, with a hint of plum +- Clean white canvas with soft blue accent — trustworthy, professional, warm +- Subtle depth through soft shadows — modern but not flat, not skeuomorphic +- Moderate border-radius (10-12px) — friendly but not playful +- Chinese-first typography with Noto Sans SC — readable at all sizes +- Two-tier token system: CSS Variables (`--erp-*`) + Ant Design ConfigProvider +- Dual theme support: light (default) + dark mode ## 2. Color Palette & Roles ### Primary Brand -- **Pinterest Red** (`#e60023`): Primary CTA, brand accent — bold, confident red -- **Green 700** (`#103c25`): `--base-color-green-700`, success/nature accent -- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, pressed green +- **Primary Blue** (`#2563EB`): Primary CTA, active states, links, brand accent +- **Primary Hover** (`#1D4ED8`): Pressed/active primary state +- **Primary Light** (`#EFF6FF`): Primary background tint, subtle highlights +- **Primary Subtle** (`#DBEAFE`): Light blue backgrounds for badges, chips + +### Semantic Colors +- **Success Green** (`#059669`): Success states, positive indicators, confirmations +- **Success Light** (`#ECFDF5`): Success background tint +- **Warning Amber** (`#D97706`): Warnings, pending states, attention needed +- **Warning Light** (`#FFFBEB`): Warning background tint +- **Error Red** (`#DC2626`): Errors, destructive actions, required fields +- **Error Light** (`#FEF2F2`): Error background tint +- **Info Blue** (`#0284C7`): Informational elements, tooltips, help text ### Text -- **Plum Black** (`#211922`): Primary text — warm near-black with plum undertone -- **Black** (`#000000`): Secondary text, button text -- **Olive Gray** (`#62625b`): Secondary descriptions, muted text -- **Warm Silver** (`#91918c`): `--comp-button-color-text-transparent-disabled`, disabled text, input borders -- **White** (`#ffffff`): Text on dark/colored surfaces - -### Interactive -- **Focus Blue** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, focus rings -- **Performance Purple** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, performance features -- **Recommendation Purple** (`#7e238b`): `--sema-color-hover-text-recommendation`, AI recommendation -- **Link Blue** (`#2b48d4`): Link text color -- **Facebook Blue** (`#0866ff`): `--facebook-background-color`, social login -- **Pressed Blue** (`#617bff`): `--base-color-pressed-blue-200`, pressed state +- **Primary Text** (`#0F172A`): Headings, primary body text — deep navy, professional +- **Secondary Text** (`#475569`): Descriptions, labels, helper text +- **Tertiary Text** (`#94A3B8`): Placeholders, disabled text, timestamps +- **Inverse Text** (`#FFFFFF`): Text on colored/dark surfaces ### Surface & Border -- **Sand Gray** (`#e5e5e0`): Secondary button background — warm, craft-like -- **Warm Light** (`#e0e0d9`): Circular button backgrounds, badges -- **Warm Wash** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, subtle warm badge bg -- **Fog** (`#f6f6f3`): Light surface (at 50% opacity) -- **Border Disabled** (`#c8c8c1`): `--sema-color-border-disabled`, disabled borders -- **Hover Gray** (`#bcbcb3`): `--base-color-hover-grayscale-150`, hover border -- **Dark Surface** (`#33332e`): Dark section backgrounds +- **Page Background** (`#F8FAFC`): App background — cool off-white +- **Container Background** (`#FFFFFF`): Cards, panels, modals +- **Elevated Background** (`#FFFFFF`): Dropdowns, popovers, tooltips +- **Border** (`#E2E8F0`): Default borders, dividers +- **Border Strong** (`#CBD5E1`): Emphasized borders, active card outlines +- **Hover Background** (`#F1F5F9`): Row hover, item hover backgrounds +- **Muted Background** (`#F1F5F9`): Subtle section backgrounds, table headers -### Semantic -- **Error Red** (`#9e0a0a`): Checkbox/form error states +### Dark Mode +- **Dark Page** (`#0F172A`): Dark app background +- **Dark Container** (`#1E293B`): Dark cards, panels +- **Dark Elevated** (`#334155`): Dark dropdowns, popovers +- **Dark Border** (`#334155`): Dark borders +- **Dark Hover** (`#1E293B`): Dark row hover +- **Dark Text Primary** (`#F8FAFC`): Dark mode primary text +- **Dark Text Secondary** (`#94A3B8`): Dark mode secondary text ## 3. Typography Rules ### Font Family -- **Primary**: `Pin Sans`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial` +- **Primary**: `Noto Sans SC`, fallbacks: `-apple-system, system-ui, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif` +- **Monospace (optional)**: `'JetBrains Mono', 'Fira Code', Consolas, monospace` ### Hierarchy -| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | -|------|------|------|--------|-------------|----------------|-------| -| Display Hero | Pin Sans | 70px (4.38rem) | 600 | normal | normal | Maximum impact | -| Section Heading | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | Negative tracking | -| Body | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | Standard reading | -| Caption Bold | Pin Sans | 14px (0.88rem) | 700 | normal | normal | Strong metadata | -| Caption | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | Small text, tags | -| Button | Pin Sans | 12px (0.75rem) | 400 | normal | normal | Button labels | +| Role | Size | Weight | Line Height | Usage | +|------|------|--------|-------------|-------| +| Page Title | 24px (1.5rem) | 700 | 1.3 | Page headings, dialog titles | +| Section Title | 20px (1.25rem) | 600 | 1.4 | Section headings, card titles | +| Subsection | 16px (1rem) | 600 | 1.5 | Subsection labels, form group titles | +| Body | 14px (0.875rem) | 400 | 1.6 | Standard body text, table cells, descriptions | +| Caption | 12px (0.75rem) | 400 | 1.5 | Timestamps, badges, helper text, metadata | ### Principles -- **Compact type scale**: The range is 12px–70px with a dramatic jump — most functional text is 12–16px, creating a dense, app-like information hierarchy. -- **Warm weight distribution**: 600–700 for headings, 400–500 for body. No ultra-light weights — the type always feels substantial. -- **Negative tracking on headings**: -1.2px on 28px headings creates cozy, intimate section titles. -- **Single font family**: Pin Sans handles everything — no secondary display or monospace font detected. +- **Chinese-first**: Noto Sans SC ensures excellent CJK rendering +- **Readable weights**: 400 for body, 600-700 for headings — always substantial, never thin +- **Generous line-height**: 1.5-1.6 for body text ensures comfortable reading +- **Moderate scale**: 12-24px range creates a compact, professional information hierarchy ## 4. Component Stylings ### Buttons - -**Primary Red** -- Background: `#e60023` (Pinterest Red) -- Text: `#000000` (black — unusual choice for contrast on red) -- Padding: 6px 14px -- Radius: 16px (generously rounded, not pill) -- Border: `2px solid rgba(255, 255, 255, 0)` (transparent) -- Focus: semantic border + outline via CSS variables - -**Secondary Sand** -- Background: `#e5e5e0` (warm sand gray) -- Text: `#000000` -- Padding: 6px 14px -- Radius: 16px -- Focus: same semantic border system - -**Circular Action** -- Background: `#e0e0d9` (warm light) -- Text: `#211922` (plum black) -- Radius: 50% (circle) -- Use: Pin actions, navigation controls - -**Ghost / Transparent** -- Background: transparent -- Text: `#000000` -- No border -- Use: Tertiary actions +- **Primary**: Blue (#2563EB) background, white text, 10px radius, soft shadow +- **Secondary**: White background, slate border (#CBD5E1), dark text, 10px radius +- **Ghost**: Transparent background, primary blue text, no border +- **Danger**: Red (#DC2626) background, white text, for destructive actions +- **All buttons**: Min height 36px, 40px preferred; smooth hover transition 200ms ### Cards & Containers -- Photography-first pin cards with generous radius (12px–20px) -- No traditional box-shadow on most cards -- White or warm fog backgrounds -- 8px white thick border on some image containers +- White background, 12px radius, soft shadow: `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)` +- Hover: Slightly elevated shadow: `0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05)` +- No thick borders — shadows and subtle background differences create depth ### Inputs -- Email input: white background, `1px solid #91918c` border, 16px radius, 11px 15px padding -- Focus: semantic border + outline system via CSS variables +- White background, 1px solid #CBD5E1 border, 10px radius +- Focus: Blue ring (2px solid #2563EB) with outer glow +- Error: Red border + error message below field +- Height: 40px standard, 32px small -### Navigation -- Clean header on white or warm background -- Pinterest logo + search bar centered -- Pin Sans 16px for nav links -- Pinterest Red accents for active states +### Tables +- Header: #F1F5F9 background, #475569 text, 14px weight 600 +- Row hover: #F1F5F9 background +- Cell padding: 16px vertical, 12px horizontal +- Border: Bottom-only using #E2E8F0 -### Image Treatment -- Pin-style masonry grid (signature Pinterest layout) -- Rounded corners: 12px–20px on images -- Photography as primary content — every pin is an image -- Thick white borders (8px) on featured image containers +### Navigation / Sidebar +- Background: White (#FFFFFF) with right border #E2E8F0 +- Active item: #EFF6FF background, #2563EB text, left accent bar (3px) +- Hover item: #F1F5F9 background +- Item height: 40px, 12px radius +- Icons: 20px, inline with label text + +### Tags / Badges +- Small radius (6px), medium padding (4px 8px) +- Color-coded backgrounds: blue tint, green tint, amber tint, red tint +- Text matches semantic color (darker shade than background) + +### Modals / Dialogs +- 16px radius, generous padding (24px) +- Soft elevated shadow: `0 8px 30px rgba(0,0,0,0.12)` +- Header with title, footer with action buttons ## 5. Layout Principles ### Spacing System -- Base unit: 8px -- Scale: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px -- Large jumps: 32px → 80px → 100px for section spacing +- Base unit: 4px +- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px +- Content padding: 24px standard, 16px compact -### Grid & Container -- Masonry grid for pin content (signature layout) -- Centered content sections with generous max-width -- Full-width dark footer -- Search bar as primary navigation element - -### Whitespace Philosophy -- **Inspiration density**: The masonry grid packs pins tightly — the content density IS the value proposition. Whitespace exists between sections, not within the grid. -- **Breathing above, density below**: Hero/feature sections get generous padding; the pin grid is compact and immersive. +### Layout +- Fixed sidebar: 240px wide, collapsible to 72px +- Sticky header: 56px +- Content area: Fluid width with max comfortable reading width +- Standard CRUD table/list views for data management ### Border Radius Scale -- Standard (12px): Small cards, links -- Button (16px): Buttons, inputs, medium cards -- Comfortable (20px): Feature cards -- Large (28px): Large containers -- Section (32px): Tab elements, large panels -- Hero (40px): Hero containers, large feature blocks -- Circle (50%): Action buttons, tab indicators +- Small (6px): Tags, badges, small elements +- Standard (10px): Buttons, inputs, cards +- Large (12px): Panels, modals, large containers +- Full (50%): Circular avatars, icon buttons ## 6. Depth & Elevation -| Level | Treatment | Use | -|-------|-----------|-----| -| Flat (Level 0) | No shadow | Default — pins rely on content, not shadow | -| Subtle (Level 1) | Minimal shadow (from tokens) | Elevated overlays, dropdowns | -| Focus (Accessibility) | `--sema-color-border-focus-outer-default` ring | Focus states | +| Level | Shadow | Use | +|-------|--------|-----| +| Level 0 (Flat) | None | Page background, sidebar | +| Level 1 (Subtle) | `0 1px 2px rgba(0,0,0,0.05)` | Cards, form sections | +| Level 2 (Default) | `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)` | Elevated cards, dropdowns | +| Level 3 (Elevated) | `0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05)` | Hover states, active cards | +| Level 4 (Modal) | `0 8px 30px rgba(0,0,0,0.12)` | Modals, overlays | -**Shadow Philosophy**: Pinterest uses minimal shadows. The masonry grid relies on content (photography) to create visual interest rather than elevation effects. Depth comes from the warmth of surface colors and the generous rounding of containers. +## 7. Interactive States -## 7. Do's and Don'ts +### Hover +- Background color shift: `#F1F5F9` for neutral, semantic tint for colored elements +- Transition: 200ms ease +- Cursor: `pointer` on clickable elements + +### Focus +- 2px solid ring using `#2563EB` +- 2px offset for visibility +- Always visible for keyboard navigation + +### Active / Pressed +- Slightly darker shade of the element's color +- Brief scale or shadow change for tactile feedback + +### Disabled +- Reduced opacity (0.5) +- No hover effects +- Cursor: `not-allowed` + +### Loading +- Spinner or skeleton placeholder +- Disabled interactions during async operations + +## 8. Do's and Don'ts ### Do -- Use warm neutrals (`#e5e5e0`, `#e0e0d9`, `#91918c`) — the warm olive/sand tone is the identity -- Apply Pinterest Red (`#e60023`) only for primary CTAs — it's bold and singular -- Use Pin Sans exclusively — one font for everything -- Apply generous border-radius: 16px for buttons/inputs, 20px+ for cards -- Keep the masonry grid dense — content density is the value -- Use warm badge backgrounds (`hsla(60,20%,98%,.5)`) for subtle warm washes -- Use `#211922` (plum black) for primary text — it's warmer than pure black +- Use soft shadows for depth — the Soft UI Evolution identity +- Apply Primary Blue (#2563EB) only for primary actions and active states +- Use Noto Sans SC for consistent Chinese rendering +- Apply 10-12px radius — friendly but professional +- Use semantic color tints for status backgrounds +- Keep tables clean with subtle header differentiation +- Ensure 4.5:1 contrast ratio for all text ### Don't -- Don't use cool gray neutrals — always warm/olive-toned -- Don't use pure black (`#000000`) as primary text — use plum black (`#211922`) -- Don't use pill-shaped buttons — 16px radius is rounded but not pill -- Don't add heavy shadows — Pinterest is flat by design, depth from content -- Don't use small border-radius (<12px) on cards — the generous rounding is core -- Don't introduce additional brand colors — red + warm neutrals is the complete palette -- Don't use thin font weights — Pin Sans at 400 minimum +- Don't use heavy or dramatic shadows — keep depth subtle +- Don't use pure black (#000000) for text — use #0F172A instead +- Don't use pill-shaped buttons — 10px radius is rounded but not pill +- Don't mix warm and cool neutrals — stay in the slate family +- Don't use emojis as icons — use SVG icons (Lucide/Heroicons) +- Don't use decorative-only animations — every animation must serve a purpose +- Don't use colors as the sole means of conveying information -## 8. Responsive Behavior +## 9. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| -| Mobile | <576px | Single column, compact layout | -| Mobile Large | 576–768px | 2-column pin grid | -| Tablet | 768–890px | Expanded grid | -| Desktop Small | 890–1312px | Standard masonry grid | -| Desktop | 1312–1440px | Full layout | -| Large Desktop | 1440–1680px | Expanded grid columns | -| Ultra-wide | >1680px | Maximum grid density | +| Mobile | <576px | Sidebar collapsed, single column | +| Tablet | 576-768px | Sidebar collapsed, 2-column grid | +| Desktop Small | 768-1024px | Sidebar expanded, responsive grid | +| Desktop | 1024-1440px | Full layout | +| Large Desktop | >1440px | Maximum content width | ### Collapsing Strategy -- Pin grid: 5+ columns → 3 → 2 → 1 -- Navigation: search bar + icons → simplified mobile nav -- Feature sections: side-by-side → stacked -- Hero: 70px → scales down proportionally -- Footer: dark multi-column → stacked - -## 9. Agent Prompt Guide - -### Quick Color Reference -- Brand: Pinterest Red (`#e60023`) -- Background: White (`#ffffff`) -- Text: Plum Black (`#211922`) -- Secondary text: Olive Gray (`#62625b`) -- Button surface: Sand Gray (`#e5e5e0`) -- Border: Warm Silver (`#91918c`) -- Focus: Focus Blue (`#435ee5`) - -### Example Component Prompts -- "Create a hero: white background. Headline at 70px Pin Sans weight 600, plum black (#211922). Red CTA button (#e60023, 16px radius, 6px 14px padding). Secondary sand button (#e5e5e0, 16px radius)." -- "Design a pin card: white background, 16px radius, no shadow. Photography fills top, 16px Pin Sans weight 400 description below in #62625b." -- "Build a circular action button: #e0e0d9 background, 50% radius, #211922 icon." -- "Create an input field: white background, 1px solid #91918c, 16px radius, 11px 15px padding. Focus: blue outline via semantic tokens." -- "Design the dark footer: #33332e background. Pinterest script logo in white. 12px Pin Sans links in #91918c." - -### Iteration Guide -1. Warm neutrals everywhere — olive/sand grays, never cool steel -2. Pinterest Red for CTAs only — bold and singular -3. 16px radius on buttons/inputs, 20px+ on cards — generous but not pill -4. Pin Sans is the only font — compact at 12px for UI, 70px for display -5. Photography carries the design — the UI stays warm and minimal -6. Plum black (#211922) for text — warmer than pure black +- Sidebar: 240px → 72px (icon only) on mobile/tablet +- Tables: Horizontal scroll on narrow screens +- Forms: Single column on mobile, multi-column on desktop +- Cards: Full-width stack → grid layout ## 10. ERP Platform Adaptations -Pinterest's design system is adapted for an enterprise resource planning platform: - ### Layout -- Fixed sidebar navigation (240px wide, collapsible to 72px) replaces Pinterest's top nav +- Fixed sidebar navigation (240px wide, collapsible to 72px) - Sticky header (56px) with search, notifications, user menu - Content area uses CSS Grid for responsive multi-column dashboards - Standard CRUD table/list views replace masonry grid for data management ### Color Adaptations -- Pinterest Red (`#e60023`) for primary actions (Save, Create, Submit) -- Sand Gray (`#e5e5e0`) for secondary/outlined buttons -- Focus Blue (`#435ee5`) for informational elements and links -- Pinterest Green (`#103c25`) for success states -- Pinterest Error (`#9e0a0a`) for destructive/error states +- Primary Blue (#2563EB) for primary actions (Save, Create, Submit) +- Success Green (#059669) for positive states (Approved, Completed, Paid) +- Warning Amber (#D97706) for pending states (Pending Review, Awaiting) +- Error Red (#DC2626) for destructive/error states (Rejected, Failed, Overdue) +- Info Blue (#0284C7) for informational elements (Tips, Help, Documentation) ### Component Adaptations -- **Tables**: Warm header bg (`#f6f6f3`), generous cell padding, red-tinted row hover -- **Forms**: 16px radius inputs, warm borders (`#91918c`), generous spacing -- **Cards**: 20px radius, minimal shadow, warm fog hover backgrounds -- **Sidebar**: Plum black active states, warm sand hover, 12px radius items -- **Tags/Badges**: Warm pill shapes (8px radius), sand backgrounds -- **Modals**: 28px radius, warm shadows, generous padding +- **Tables**: Slate header bg (#F1F5F9), generous cell padding, subtle hover (#F1F5F9) +- **Forms**: 10px radius inputs, slate borders (#CBD5E1), generous spacing +- **Cards**: 12px radius, soft shadow, white background +- **Sidebar**: Blue active states (#EFF6FF bg), slate hover, 12px radius items +- **Tags/Badges**: 6px radius, semantic color tints (blue/green/amber/red) +- **Modals**: 16px radius, elevated shadow, generous padding ### Dark Mode -- Background: `#1a1a18` (warm dark) -- Container: `#2a2a28` (olive dark) -- Elevated: `#33332e` (plum dark) -- Sidebar: `#211922` (plum black) -- Active accent: `#f05a5a` (warm light red) -- Text: Standard white/gray hierarchy with olive undertones +- Background: #0F172A (deep navy) +- Container: #1E293B (dark slate) +- Elevated: #334155 (medium slate) +- Border: #334155 +- Active accent: #3B82F6 (lighter blue for dark backgrounds) +- Text: #F8FAFC primary, #94A3B8 secondary + +## 11. Agent Prompt Guide + +### Quick Color Reference +- Brand: Primary Blue (#2563EB) +- Background: Cool Off-White (#F8FAFC) +- Text: Deep Navy (#0F172A) +- Secondary text: Slate (#475569) +- Border: Light Slate (#E2E8F0) +- Success: Green (#059669) +- Warning: Amber (#D97706) +- Error: Red (#DC2626) +- Focus: Blue (#2563EB) + +### Example Component Prompts +- "Create a card: white background, 12px radius, soft shadow (0 1px 3px rgba(0,0,0,0.06)). Title in 16px weight 600 #0F172A. Body in 14px #475569." +- "Design a primary button: #2563EB background, white text, 10px radius, 8px 16px padding. Hover: #1D4ED8. Focus: 2px solid #2563EB ring." +- "Build a table: header #F1F5F9 background, #475569 text 14px weight 600. Row hover #F1F5F9. Cell padding 16px 12px. Border bottom #E2E8F0." +- "Create a sidebar: white background, right border #E2E8F0. Active item: #EFF6FF background, #2563EB text, 3px left accent bar. Hover: #F1F5F9." +- "Design a modal: 16px radius, shadow 0 8px 30px rgba(0,0,0,0.12). Title 20px weight 600. Footer with primary blue CTA." + +### Iteration Guide +1. Soft shadows everywhere — subtle depth is the identity +2. Primary Blue for CTAs and active states — trustworthy, not overwhelming +3. 10px radius on buttons/inputs, 12px on cards — friendly but professional +4. Noto Sans SC is the primary font — Chinese-first, readable at all sizes +5. Slate neutrals — never pure black or pure gray, always with blue undertone +6. Semantic tints for status — green/amber/red backgrounds with matching text diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 8f0df03..c6455c3 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -31,27 +31,27 @@ function PrivateRoute({ children }: { children: React.ReactNode }) { const themeConfig = { token: { - colorPrimary: '#e60023', - colorSuccess: '#103c25', - colorWarning: '#b56e1a', - colorError: '#9e0a0a', - colorInfo: '#435ee5', - colorBgLayout: '#f6f6f3', + colorPrimary: '#2563eb', + colorSuccess: '#059669', + colorWarning: '#d97706', + colorError: '#dc2626', + colorInfo: '#0284c7', + colorBgLayout: '#f8fafc', colorBgContainer: '#ffffff', colorBgElevated: '#ffffff', - colorBorder: '#e5e5e0', - colorBorderSecondary: '#e0e0d9', - borderRadius: 16, - borderRadiusLG: 20, - borderRadiusSM: 8, - fontFamily: "-apple-system, system-ui, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', Helvetica, Arial, sans-serif", + colorBorder: '#e2e8f0', + colorBorderSecondary: '#f1f5f9', + borderRadius: 10, + borderRadiusLG: 12, + borderRadiusSM: 6, + fontFamily: "'Noto Sans SC', -apple-system, system-ui, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif", fontSize: 14, fontSizeHeading4: 20, controlHeight: 40, controlHeightLG: 44, controlHeightSM: 32, boxShadow: 'none', - boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)', + boxShadowSecondary: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)', }, components: { Button: { @@ -62,21 +62,21 @@ const themeConfig = { paddingLG: 20, }, Table: { - headerBg: '#fafaf8', - headerColor: '#62625b', - rowHoverBg: '#fef0f0', + headerBg: '#f1f5f9', + headerColor: '#475569', + rowHoverBg: '#f1f5f9', fontSize: 14, }, Menu: { - itemBorderRadius: 12, + itemBorderRadius: 10, itemMarginInline: 8, itemHeight: 40, }, Modal: { - borderRadiusLG: 28, + borderRadiusLG: 16, }, Tag: { - borderRadiusSM: 8, + borderRadiusSM: 6, }, }, }; @@ -85,20 +85,20 @@ const darkThemeConfig = { ...themeConfig, token: { ...themeConfig.token, - colorBgLayout: '#1a1a18', - colorBgContainer: '#2a2a28', - colorBgElevated: '#33332e', - colorBorder: 'rgba(255, 255, 255, 0.08)', + colorBgLayout: '#0f172a', + colorBgContainer: '#1e293b', + colorBgElevated: '#334155', + colorBorder: '#334155', colorBorderSecondary: 'rgba(255, 255, 255, 0.06)', boxShadow: 'none', - boxShadowSecondary: '0 4px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15)', + boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2)', }, components: { ...themeConfig.components, Table: { - headerBg: '#33332e', - headerColor: '#91918c', - rowHoverBg: '#33332e', + headerBg: '#1e293b', + headerColor: '#94a3b8', + rowHoverBg: '#1e293b', }, }, }; diff --git a/apps/web/src/components/NotificationPanel.tsx b/apps/web/src/components/NotificationPanel.tsx index 52cfa36..bd346e5 100644 --- a/apps/web/src/components/NotificationPanel.tsx +++ b/apps/web/src/components/NotificationPanel.tsx @@ -50,7 +50,7 @@ export default function NotificationPanel() { @@ -166,7 +166,7 @@ export default function NotificationPanel() { position: 'relative', }} onMouseEnter={(e) => { - e.currentTarget.style.background = isDark ? '#211922' : '#f6f6f3'; + e.currentTarget.style.background = isDark ? '#0f172a' : '#f8fafc'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; @@ -175,7 +175,7 @@ export default function NotificationPanel() { diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 884323f..fc6a67b 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -2,65 +2,66 @@ /* ==================================================================== * ERP Platform — Design System Tokens & Global Styles - * Inspired by Pinterest: warm discovery, red accent, generous radius + * Soft UI Evolution: Professional, warm, accessible for all industries + * Generated by UI UX Pro Max * ==================================================================== */ /* --- Design Tokens (CSS Custom Properties) --- */ :root { - /* Primary Palette — Pinterest Red */ - --erp-primary: #e60023; - --erp-primary-hover: #ad081b; - --erp-primary-active: #9e0a0a; - --erp-primary-light: #fef0f0; - --erp-primary-light-hover: #fddbdb; - --erp-primary-bg-subtle: #fef0f0; + /* Primary Palette — Trust Blue */ + --erp-primary: #2563eb; + --erp-primary-hover: #1d4ed8; + --erp-primary-active: #1e40af; + --erp-primary-light: #eff6ff; + --erp-primary-light-hover: #dbeafe; + --erp-primary-bg-subtle: #eff6ff; - /* Semantic Colors — Pinterest warm tones */ - --erp-success: #103c25; + /* Semantic Colors — Professional slate tones */ + --erp-success: #059669; --erp-success-bg: #ecfdf5; - --erp-warning: #b56e1a; - --erp-warning-bg: #fff7ed; - --erp-error: #9e0a0a; + --erp-warning: #d97706; + --erp-warning-bg: #fffbeb; + --erp-error: #dc2626; --erp-error-bg: #fef2f2; - --erp-info: #435ee5; - --erp-info-bg: #eef1fd; + --erp-info: #0284c7; + --erp-info-bg: #f0f9ff; - /* Neutral Palette — Warm neutrals with olive/sand undertones */ - --erp-bg-page: #f6f6f3; + /* Neutral Palette — Slate neutrals with blue undertones */ + --erp-bg-page: #f8fafc; --erp-bg-container: #ffffff; --erp-bg-elevated: #ffffff; - --erp-bg-spotlight: #fafaf8; + --erp-bg-spotlight: #f1f5f9; --erp-bg-sidebar: #ffffff; - --erp-bg-sidebar-hover: #f6f6f3; - --erp-bg-sidebar-active: #fef0f0; + --erp-bg-sidebar-hover: #f1f5f9; + --erp-bg-sidebar-active: #eff6ff; - /* Text Colors — Warm near-black */ - --erp-text-primary: #211922; - --erp-text-secondary: #62625b; - --erp-text-tertiary: #91918c; + /* Text Colors — Deep navy */ + --erp-text-primary: #0f172a; + --erp-text-secondary: #475569; + --erp-text-tertiary: #94a3b8; --erp-text-inverse: #ffffff; - --erp-text-sidebar: #62625b; - --erp-text-sidebar-active: #e60023; + --erp-text-sidebar: #475569; + --erp-text-sidebar-active: #2563eb; - /* Border Colors — Whisper borders */ - --erp-border: #e5e5e0; - --erp-border-light: #e0e0d9; - --erp-border-dark: #c8c8c1; + /* Border Colors — Slate borders */ + --erp-border: #e2e8f0; + --erp-border-light: #f1f5f9; + --erp-border-dark: #cbd5e1; - /* Shadows — Multi-layer, ultra-subtle */ - --erp-shadow-xs: 0 1px 2px rgba(0,0,0,0.03); - --erp-shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); - --erp-shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04); - --erp-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05); - --erp-shadow-xl: 0 12px 36px rgba(0,0,0,0.1), 0 6px 18px rgba(0,0,0,0.06); + /* Shadows — Soft UI Evolution: subtle, layered depth */ + --erp-shadow-xs: 0 1px 2px rgba(0,0,0,0.05); + --erp-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); + --erp-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); + --erp-shadow-lg: 0 8px 30px rgba(0,0,0,0.12); + --erp-shadow-xl: 0 12px 40px rgba(0,0,0,0.15); - /* Radius — Notion subtle roundness */ - --erp-radius-sm: 8px; - --erp-radius-md: 16px; - --erp-radius-lg: 20px; - --erp-radius-xl: 28px; + /* Radius — Soft UI: friendly but professional */ + --erp-radius-sm: 6px; + --erp-radius-md: 10px; + --erp-radius-lg: 12px; + --erp-radius-xl: 16px; - /* Spacing — 8px base unit */ + /* Spacing — 4px base unit */ --erp-space-xs: 4px; --erp-space-sm: 8px; --erp-space-md: 16px; @@ -68,11 +69,10 @@ --erp-space-xl: 32px; --erp-space-2xl: 48px; - /* Typography — Inter as primary */ - --erp-font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', 'PingFang SC', - 'Microsoft YaHei', 'Hiragino Sans GB', Helvetica, Arial, sans-serif; - --erp-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; + /* Typography — Noto Sans SC for Chinese-first ERP */ + --erp-font-family: 'Noto Sans SC', -apple-system, system-ui, 'Segoe UI', Roboto, + 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif; + --erp-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace; --erp-font-size-xs: 12px; --erp-font-size-sm: 13px; --erp-font-size-base: 14px; @@ -86,10 +86,10 @@ --erp-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --erp-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); - /* Trend Colors — Warm */ - --erp-trend-up: #103c25; - --erp-trend-down: #9e0a0a; - --erp-trend-neutral: #62625b; + /* Trend Colors */ + --erp-trend-up: #059669; + --erp-trend-down: #dc2626; + --erp-trend-neutral: #475569; /* Line Height */ --erp-line-height-tight: 1.25; @@ -102,48 +102,48 @@ --erp-header-height: 56px; } -/* --- Dark Mode Tokens — Warm dark, Notion-inspired --- */ +/* --- Dark Mode Tokens --- */ [data-theme='dark'] { - --erp-primary-light: rgba(230, 0, 35, 0.15); - --erp-primary-light-hover: rgba(230, 0, 35, 0.22); - --erp-primary-bg-subtle: rgba(230, 0, 35, 0.1); + --erp-primary-light: rgba(37, 99, 235, 0.15); + --erp-primary-light-hover: rgba(37, 99, 235, 0.22); + --erp-primary-bg-subtle: rgba(37, 99, 235, 0.1); - --erp-bg-page: #1a1a18; - --erp-bg-container: #2a2a28; - --erp-bg-elevated: #33332e; - --erp-bg-spotlight: #33332e; - --erp-bg-sidebar: #211922; - --erp-bg-sidebar-hover: #33332e; + --erp-bg-page: #0f172a; + --erp-bg-container: #1e293b; + --erp-bg-elevated: #334155; + --erp-bg-spotlight: #1e293b; + --erp-bg-sidebar: #0f172a; + --erp-bg-sidebar-hover: #1e293b; --erp-text-primary: rgba(255, 255, 255, 0.95); - --erp-text-secondary: #91918c; - --erp-text-tertiary: #62625b; - --erp-text-sidebar: #91918c; - --erp-text-sidebar-active: #f05a5a; + --erp-text-secondary: #94a3b8; + --erp-text-tertiary: #64748b; + --erp-text-sidebar: #94a3b8; + --erp-text-sidebar-active: #60a5fa; - --erp-border: rgba(255, 255, 255, 0.08); - --erp-border-light: rgba(255, 255, 255, 0.05); + --erp-border: #334155; + --erp-border-light: rgba(255, 255, 255, 0.06); --erp-border-dark: rgba(255, 255, 255, 0.12); --erp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); - --erp-shadow-sm: rgba(0, 0, 0, 0.2) 0px 4px 18px, rgba(0, 0, 0, 0.15) 0px 2px 8px; - --erp-shadow-md: rgba(0, 0, 0, 0.15) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 5px 12px, rgba(0, 0, 0, 0.2) 0px 10px 24px; - --erp-shadow-lg: rgba(0, 0, 0, 0.2) 0px 2px 6px, rgba(0, 0, 0, 0.25) 0px 8px 20px, rgba(0, 0, 0, 0.3) 0px 16px 40px; + --erp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); + --erp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); + --erp-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4); - --erp-trend-up: #3db377; - --erp-trend-down: #9e0a0a; - --erp-trend-neutral: #91918c; + --erp-trend-up: #34d399; + --erp-trend-down: #f87171; + --erp-trend-neutral: #94a3b8; - --erp-success-bg: rgba(16, 60, 37, 0.15); - --erp-warning-bg: rgba(181, 110, 26, 0.15); - --erp-error-bg: rgba(158, 10, 10, 0.15); - --erp-info-bg: rgba(67, 94, 229, 0.15); + --erp-success-bg: rgba(5, 150, 105, 0.15); + --erp-warning-bg: rgba(217, 119, 6, 0.15); + --erp-error-bg: rgba(220, 38, 38, 0.15); + --erp-info-bg: rgba(2, 132, 199, 0.15); } -[data-theme='dark'] .erp-stat-card-trend-up { color: #2a9d99; } -[data-theme='dark'] .erp-stat-card-trend-down { color: #e5534b; } -[data-theme='dark'] .erp-stat-card-trend-neutral { color: #91918c; } -[data-theme='dark'] .erp-stat-card-trend-label { color: #91918c; } +[data-theme='dark'] .erp-stat-card-trend-up { color: #34d399; } +[data-theme='dark'] .erp-stat-card-trend-down { color: #f87171; } +[data-theme='dark'] .erp-stat-card-trend-neutral { color: #94a3b8; } +[data-theme='dark'] .erp-stat-card-trend-label { color: #94a3b8; } /* --- Global Reset & Base --- */ body { @@ -182,7 +182,7 @@ body { /* --- Selection --- */ ::selection { - background-color: rgba(230, 0, 35, 0.15); + background-color: rgba(37, 99, 235, 0.15); color: var(--erp-text-primary); } @@ -190,11 +190,11 @@ body { * Component Overrides — Ant Design Enhancement * ==================================================================== */ -/* --- Card — Whisper border, soft shadow --- */ +/* --- Card — Soft shadow, clean border --- */ .ant-card { border-radius: var(--erp-radius-lg) !important; border: 1px solid var(--erp-border) !important; - box-shadow: none !important; + box-shadow: var(--erp-shadow-xs) !important; transition: box-shadow var(--erp-transition-base) !important; } @@ -262,7 +262,7 @@ body { } .ant-table-tbody > tr:hover > td { - background: var(--erp-primary-bg-subtle) !important; + background: var(--erp-bg-spotlight) !important; } .ant-table-tbody > tr > td { @@ -270,9 +270,9 @@ body { border-bottom: 1px solid var(--erp-border-light) !important; } -/* --- Button — Subtle 4px radius, no heavy shadow --- */ +/* --- Button --- */ .ant-btn-primary { - border-radius: 16px !important; + border-radius: var(--erp-radius-md) !important; font-weight: 500 !important; box-shadow: none !important; transition: all var(--erp-transition-fast) !important; @@ -283,16 +283,16 @@ body { } .ant-btn-default { - border-radius: 16px !important; + border-radius: var(--erp-radius-md) !important; font-weight: 500 !important; } -/* --- Input — 4px radius, whisper border --- */ +/* --- Input --- */ .ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker { - border-radius: 16px !important; + border-radius: var(--erp-radius-md) !important; transition: all var(--erp-transition-fast) !important; } @@ -307,7 +307,7 @@ body { .ant-select-focused .ant-select-selector, .ant-picker-focused { border-color: var(--erp-primary) !important; - box-shadow: 0 0 0 2px rgba(230, 0, 35, 0.12) !important; + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important; } /* --- Modal --- */ @@ -436,12 +436,12 @@ body { border-radius: var(--erp-radius-lg) var(--erp-radius-lg) 0 0; } -.erp-gradient-card.indigo::before { background: linear-gradient(90deg, #e60023, #f05a5a); } -.erp-gradient-card.emerald::before { background: linear-gradient(90deg, #103c25, #3db377); } -.erp-gradient-card.amber::before { background: linear-gradient(90deg, #b56e1a, #fbbf24); } -.erp-gradient-card.rose::before { background: linear-gradient(90deg, #9e0a0a, #f05a5a); } -.erp-gradient-card.sky::before { background: linear-gradient(90deg, #435ee5, #8fa4f0); } -.erp-gradient-card.violet::before { background: linear-gradient(90deg, #6845ab, #a78bfa); } +.erp-gradient-card.indigo::before { background: linear-gradient(90deg, #2563eb, #60a5fa); } +.erp-gradient-card.emerald::before { background: linear-gradient(90deg, #059669, #34d399); } +.erp-gradient-card.amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); } +.erp-gradient-card.rose::before { background: linear-gradient(90deg, #dc2626, #f87171); } +.erp-gradient-card.sky::before { background: linear-gradient(90deg, #0284c7, #38bdf8); } +.erp-gradient-card.violet::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); } /* --- Fade-in Animation --- */ @keyframes erp-fade-in { @@ -475,7 +475,7 @@ body { *:focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 2px; - border-radius: 16px; + border-radius: var(--erp-radius-sm); } .erp-sidebar-item:focus-visible { @@ -491,7 +491,7 @@ body { background: var(--erp-primary); color: #fff; padding: 8px 24px; - border-radius: 0 0 16px 16px; + border-radius: 0 0 var(--erp-radius-md) var(--erp-radius-md); z-index: 10000; font-size: 14px; font-weight: 600; @@ -540,22 +540,22 @@ body { .erp-sidebar-menu .ant-menu-item { margin: 1px 8px !important; - border-radius: 16px !important; + border-radius: var(--erp-radius-md) !important; height: 36px !important; line-height: 36px !important; } .erp-sidebar-menu .ant-menu-item-selected { - background: #fef0f0 !important; - color: #e60023 !important; + background: #eff6ff !important; + color: #2563eb !important; } .erp-sidebar-menu .ant-menu-item-selected .anticon { - color: #e60023 !important; + color: #2563eb !important; } .erp-sidebar-menu .ant-menu-item:not(.ant-menu-item-selected):hover { - background: #f6f6f3 !important; + background: #f1f5f9 !important; } /* Sidebar group label */ @@ -565,17 +565,17 @@ body { font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; - color: #91918c; + color: #94a3b8; } /* ==================================================================== * MainLayout — CSS classes replacing inline styles * ==================================================================== */ -/* Sider — White sidebar, Notion style */ +/* Sider — White sidebar, Soft UI style */ .erp-sider-dark { background: #ffffff !important; - border-right: 1px solid #e0e0d9 !important; + border-right: 1px solid #e2e8f0 !important; position: fixed !important; left: 0; top: 0; @@ -585,22 +585,22 @@ body { } [data-theme='dark'] .erp-sider-dark { - background: #211922 !important; - border-right: 1px solid rgba(255, 255, 255, 0.06) !important; + background: #0f172a !important; + border-right: 1px solid #334155 !important; } -/* Logo — Warm neutral, Notion style */ +/* Logo */ .erp-sidebar-logo { height: 56px; display: flex; align-items: center; padding: 0 20px; - border-bottom: 1px solid #e0e0d9; + border-bottom: 1px solid #e2e8f0; cursor: pointer; } [data-theme='dark'] .erp-sidebar-logo { - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: 1px solid #334155; } .ant-layout-sider-collapsed .erp-sidebar-logo { @@ -611,8 +611,8 @@ body { .erp-sidebar-logo-icon { width: 28px; height: 28px; - border-radius: 16px; - background: #e60023; + border-radius: var(--erp-radius-sm); + background: #2563eb; display: flex; align-items: center; justify-content: center; @@ -624,7 +624,7 @@ body { .erp-sidebar-logo-text { margin-left: 10px; - color: #211922; + color: #0f172a; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; @@ -635,16 +635,16 @@ body { color: rgba(255, 255, 255, 0.95); } -/* Sidebar menu item — White sidebar, warm text */ +/* Sidebar menu item */ .erp-sidebar-item { display: flex; align-items: center; height: 36px; margin: 1px 8px; padding: 0 12px; - border-radius: 16px; + border-radius: var(--erp-radius-md); cursor: pointer; - color: #62625b; + color: #475569; font-size: 14px; font-weight: 400; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); @@ -657,28 +657,28 @@ body { } .erp-sidebar-item:hover:not(.erp-sidebar-item-active) { - background: #f6f6f3; - color: #211922; + background: #f1f5f9; + color: #0f172a; } [data-theme='dark'] .erp-sidebar-item { - color: #91918c; + color: #94a3b8; } [data-theme='dark'] .erp-sidebar-item:hover:not(.erp-sidebar-item-active) { - background: #33332e; + background: #1e293b; color: rgba(255, 255, 255, 0.95); } .erp-sidebar-item-active { - background: #fef0f0; - color: #e60023; + background: #eff6ff; + color: #2563eb; font-weight: 500; } [data-theme='dark'] .erp-sidebar-item-active { - background: rgba(230, 0, 35, 0.15); - color: #f05a5a; + background: rgba(37, 99, 235, 0.15); + color: #60a5fa; } .erp-sidebar-item-icon { @@ -691,16 +691,16 @@ body { margin-left: 12px; } -/* Sidebar sub-menu (plugin group) — Warm gray group headers */ +/* Sidebar sub-menu (plugin group) */ .erp-sidebar-submenu-title { display: flex; align-items: center; height: 32px; margin: 6px 8px 2px 8px; padding: 0 12px; - border-radius: 16px; + border-radius: var(--erp-radius-md); cursor: pointer; - color: #91918c; + color: #94a3b8; font-size: 11px; font-weight: 600; text-transform: uppercase; @@ -710,25 +710,25 @@ body { } .erp-sidebar-submenu-title:hover { - background: #f6f6f3; - color: #62625b; + background: #f1f5f9; + color: #475569; } [data-theme='dark'] .erp-sidebar-submenu-title { - color: #62625b; + color: #64748b; } [data-theme='dark'] .erp-sidebar-submenu-title:hover { - background: #33332e; - color: #91918c; + background: #1e293b; + color: #94a3b8; } .erp-sidebar-submenu-title-active { - color: #e60023; + color: #2563eb; } [data-theme='dark'] .erp-sidebar-submenu-title-active { - color: #f05a5a; + color: #60a5fa; } .erp-sidebar-submenu-arrow { @@ -753,10 +753,10 @@ body { transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1); } -.erp-main-layout-light { background: #f6f6f3; } -.erp-main-layout-dark { background: #1a1a18; } +.erp-main-layout-light { background: #f8fafc; } +.erp-main-layout-dark { background: #0f172a; } -/* Header — Clean white, whisper border bottom */ +/* Header */ .erp-header { height: 56px !important; padding: 0 24px !important; @@ -771,43 +771,43 @@ body { .erp-header-light { background: #ffffff !important; - border-bottom: 1px solid #e0e0d9; + border-bottom: 1px solid #e2e8f0; box-shadow: none; } .erp-header-dark { - background: #2a2a28 !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + background: #1e293b !important; + border-bottom: 1px solid #334155; box-shadow: none; } .erp-header-btn { width: 32px; height: 32px; - border-radius: 16px; + border-radius: var(--erp-radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; - color: #62625b; + color: #475569; will-change: background; } -.erp-header-light .erp-header-btn { color: #62625b; } -.erp-header-dark .erp-header-btn { color: #91918c; } -.erp-header-btn:hover { background: #f6f6f3; } -.erp-header-dark .erp-header-btn:hover { background: #33332e; } +.erp-header-light .erp-header-btn { color: #475569; } +.erp-header-dark .erp-header-btn { color: #94a3b8; } +.erp-header-btn:hover { background: #f1f5f9; } +.erp-header-dark .erp-header-btn:hover { background: #334155; } .erp-header-title { font-size: 15px; font-weight: 600; } -.erp-text-light { color: #211922; } +.erp-text-light { color: #0f172a; } .erp-text-dark { color: rgba(255, 255, 255, 0.95); } -.erp-text-light-secondary { color: #62625b; } -.erp-text-dark-secondary { color: #91918c; } +.erp-text-light-secondary { color: #475569; } +.erp-text-dark-secondary { color: #94a3b8; } .erp-header-divider { width: 1px; height: 24px; margin: 0 8px; } .erp-header-divider-light { background: rgba(0, 0, 0, 0.06); } -.erp-header-divider-dark { background: rgba(255, 255, 255, 0.05); } +.erp-header-divider-dark { background: rgba(255, 255, 255, 0.06); } /* User avatar */ .erp-header-user { @@ -816,15 +816,15 @@ body { gap: 10px; cursor: pointer; padding: 4px 8px; - border-radius: 8px; + border-radius: var(--erp-radius-sm); transition: all 0.15s ease; } -.erp-header-user:hover { background: #f6f6f3; } -.erp-header-dark .erp-header-user:hover { background: #33332e; } +.erp-header-user:hover { background: #f1f5f9; } +.erp-header-dark .erp-header-user:hover { background: #334155; } .erp-user-avatar { - background: #0075de !important; + background: #2563eb !important; font-size: 13px !important; } @@ -832,11 +832,11 @@ body { /* Footer */ .erp-footer { text-align: center; padding: 12px 24px !important; background: transparent !important; font-size: 12px; } -.erp-footer-light { color: #91918c; } -.erp-footer-dark { color: #62625b; } +.erp-footer-light { color: #94a3b8; } +.erp-footer-dark { color: #64748b; } /* ==================================================================== - * Dashboard — Stat Cards & Quick Actions (replacing inline styles) + * Dashboard — Stat Cards & Quick Actions * ==================================================================== */ /* Stat Card */ @@ -864,7 +864,7 @@ body { left: 0; right: 0; height: 3px; - background: var(--card-gradient, linear-gradient(135deg, #e60023, #f05a5a)); + background: var(--card-gradient, linear-gradient(135deg, #2563eb, #60a5fa)); } .erp-stat-card-body { @@ -895,7 +895,7 @@ body { width: 48px; height: 48px; border-radius: var(--erp-radius-lg); - background: var(--card-icon-bg, rgba(230, 0, 35, 0.08)); + background: var(--card-icon-bg, rgba(37, 99, 235, 0.08)); display: flex; align-items: center; justify-content: center; @@ -903,7 +903,7 @@ body { flex-shrink: 0; } -/* Section Header (shared by dashboard sections) */ +/* Section Header */ .erp-section-header { display: flex; align-items: center; @@ -913,7 +913,7 @@ body { .erp-section-icon { font-size: 16px; - color: #e60023; + color: #2563eb; } .erp-section-title { @@ -928,7 +928,7 @@ body { align-items: center; gap: 12px; padding: 14px 16px; - border-radius: 12px; + border-radius: var(--erp-radius-lg); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; background: var(--erp-bg-spotlight); @@ -936,17 +936,17 @@ body { } .erp-quick-action:hover { - background: #fef0f0; - border-color: var(--action-color, #e60023); + background: #eff6ff; + border-color: var(--action-color, #2563eb); } [data-theme='dark'] .erp-quick-action { - background: #1a1a18; + background: #0f172a; } [data-theme='dark'] .erp-quick-action:hover { - background: #33332e; - border-color: var(--action-color, #e60023); + background: #1e293b; + border-color: var(--action-color, #2563eb); } .erp-quick-action-icon { @@ -956,8 +956,8 @@ body { display: flex; align-items: center; justify-content: center; - background: color-mix(in srgb, var(--action-color, #e60023) 8%, transparent); - color: var(--action-color, #e60023); + background: color-mix(in srgb, var(--action-color, #2563eb) 8%, transparent); + color: var(--action-color, #2563eb); font-size: 16px; flex-shrink: 0; } @@ -1008,12 +1008,12 @@ body { font-weight: 500; } -.erp-stat-card-trend-up { color: #0b5030; } -.erp-stat-card-trend-down { color: #9e0a0a; } -.erp-stat-card-trend-neutral { color: #62625b; } +.erp-stat-card-trend-up { color: #059669; } +.erp-stat-card-trend-down { color: #dc2626; } +.erp-stat-card-trend-neutral { color: #475569; } .erp-stat-card-trend-label { - color: #62625b; + color: #475569; font-weight: 400; } @@ -1046,8 +1046,8 @@ body { display: flex; align-items: center; justify-content: center; - background: color-mix(in srgb, var(--action-color, #e60023) 8%, transparent); - color: var(--action-color, #e60023); + background: color-mix(in srgb, var(--action-color, #2563eb) 8%, transparent); + color: var(--action-color, #2563eb); font-size: 18px; flex-shrink: 0; transition: transform 0.15s ease; @@ -1075,7 +1075,7 @@ body { padding: 12px 16px; border-radius: var(--erp-radius-md); background: var(--erp-bg-spotlight); - border-left: 3px solid var(--task-color, #e60023); + border-left: 3px solid var(--task-color, #2563eb); cursor: pointer; transition: all 0.15s ease; } @@ -1088,12 +1088,12 @@ body { .erp-task-item-icon { width: 32px; height: 32px; - border-radius: 8px; + border-radius: var(--erp-radius-sm); display: flex; align-items: center; justify-content: center; - background: color-mix(in srgb, var(--task-color, #e60023) 8%, transparent); - color: var(--task-color, #e60023); + background: color-mix(in srgb, var(--task-color, #2563eb) 8%, transparent); + color: var(--task-color, #2563eb); font-size: 14px; flex-shrink: 0; } @@ -1115,25 +1115,25 @@ body { gap: 12px; margin-top: 2px; font-size: var(--erp-font-size-xs); - color: #91918c; + color: #94a3b8; } .erp-task-priority { display: inline-flex; align-items: center; padding: 1px 8px; - border-radius: 12px; + border-radius: var(--erp-radius-sm); font-size: 11px; font-weight: 600; } -.erp-task-priority-high { background: #fef2f2; color: #9e0a0a; } -.erp-task-priority-medium { background: #fff7ed; color: #b56e1a; } -.erp-task-priority-low { background: #ecfdf5; color: #103c25; } +.erp-task-priority-high { background: #fef2f2; color: #dc2626; } +.erp-task-priority-medium { background: #fffbeb; color: #d97706; } +.erp-task-priority-low { background: #ecfdf5; color: #059669; } -[data-theme='dark'] .erp-task-priority-high { background: rgba(158, 10, 10, 0.15); color: #f05a5a; } -[data-theme='dark'] .erp-task-priority-medium { background: rgba(181, 110, 26, 0.15); color: #d4852a; } -[data-theme='dark'] .erp-task-priority-low { background: rgba(16, 60, 37, 0.15); color: #3db377; } +[data-theme='dark'] .erp-task-priority-high { background: rgba(220, 38, 38, 0.15); color: #f87171; } +[data-theme='dark'] .erp-task-priority-medium { background: rgba(217, 119, 6, 0.15); color: #fbbf24; } +[data-theme='dark'] .erp-task-priority-low { background: rgba(5, 150, 105, 0.15); color: #34d399; } /* Activity Timeline */ .erp-activity-list { @@ -1189,12 +1189,12 @@ body { .erp-activity-time { font-size: 11px; - color: #91918c; + color: #94a3b8; margin-top: 2px; } [data-theme='dark'] .erp-activity-time { - color: #62625b; + color: #64748b; } /* Empty State */ diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx index 86d3d33..1acbc9b 100644 --- a/apps/web/src/pages/Home.tsx +++ b/apps/web/src/pages/Home.tsx @@ -167,7 +167,7 @@ export default function Home() { title: '用户总数', value: stats.userCount, icon: , - gradient: 'linear-gradient(135deg, #e60023, #f05a5a)', + gradient: 'linear-gradient(135deg, #2563eb, #60a5fa)', iconBg: 'rgba(79, 70, 229, 0.12)', delay: 'erp-fade-in erp-fade-in-delay-1', trend: { value: '+2', direction: 'up', label: '较上周' }, @@ -179,7 +179,7 @@ export default function Home() { title: '角色数量', value: stats.roleCount, icon: , - gradient: 'linear-gradient(135deg, #103c25, #10B981)', + gradient: 'linear-gradient(135deg, #059669, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', delay: 'erp-fade-in erp-fade-in-delay-2', trend: { value: '+1', direction: 'up', label: '较上月' }, @@ -191,7 +191,7 @@ export default function Home() { title: '流程实例', value: stats.processInstanceCount, icon: , - gradient: 'linear-gradient(135deg, #b56e1a, #F59E0B)', + gradient: 'linear-gradient(135deg, #d97706, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', delay: 'erp-fade-in erp-fade-in-delay-3', trend: { value: '0', direction: 'neutral', label: '较昨日' }, @@ -213,18 +213,18 @@ export default function Home() { ]; const quickActions = [ - { icon: , label: '用户管理', path: '/users', color: '#e60023' }, - { icon: , label: '权限管理', path: '/roles', color: '#103c25' }, - { icon: , label: '组织架构', path: '/organizations', color: '#b56e1a' }, + { icon: , label: '用户管理', path: '/users', color: '#2563eb' }, + { icon: , label: '权限管理', path: '/roles', color: '#059669' }, + { icon: , label: '组织架构', path: '/organizations', color: '#d97706' }, { icon: , label: '工作流', path: '/workflow', color: '#7C3AED' }, { icon: , label: '消息中心', path: '/messages', color: '#E11D48' }, - { icon: , label: '系统设置', path: '/settings', color: '#62625b' }, + { icon: , label: '系统设置', path: '/settings', color: '#475569' }, ]; const pendingTasks: TaskItem[] = [ - { id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#9e0a0a', icon: , path: '/users' }, - { id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#b56e1a', icon: , path: '/workflow' }, - { id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#103c25', icon: , path: '/roles' }, + { id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#dc2626', icon: , path: '/users' }, + { id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#d97706', icon: , path: '/workflow' }, + { id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#059669', icon: , path: '/roles' }, ]; const recentActivities: ActivityItem[] = [ @@ -243,13 +243,13 @@ export default function Home() {

工作台

-

+

欢迎回来，这是您的系统概览

@@ -308,12 +308,12 @@ export default function Home() {
- + 待办任务 {pendingTasks.length} 项待处理 @@ -340,7 +340,7 @@ export default function Home() { {priorityLabel[task.priority]} - +
))}
@@ -351,7 +351,7 @@ export default function Home() {
- + 最近动态
@@ -400,7 +400,7 @@ export default function Home() {
- + 系统信息
diff --git a/apps/web/src/pages/Login.tsx b/apps/web/src/pages/Login.tsx index 25ff1a4..af215cb 100644 --- a/apps/web/src/pages/Login.tsx +++ b/apps/web/src/pages/Login.tsx @@ -30,7 +30,7 @@ export default function Login() {
欢迎回来 -

+

请登录您的账户以继续

@@ -163,7 +163,7 @@ export default function Login() { rules={[{ required: true, message: '请输入用户名' }]} > } + prefix={} placeholder="用户名" style={{ height: 44, borderRadius: 10 }} /> @@ -173,7 +173,7 @@ export default function Login() { rules={[{ required: true, message: '请输入密码' }]} > } + prefix={} placeholder="密码" style={{ height: 44, borderRadius: 10 }} /> @@ -197,7 +197,7 @@ export default function Login() {
-

+

ERP Platform v0.1.0 · Powered by Rust + React

diff --git a/apps/web/src/pages/Organizations.tsx b/apps/web/src/pages/Organizations.tsx index 0900c34..840b074 100644 --- a/apps/web/src/pages/Organizations.tsx +++ b/apps/web/src/pages/Organizations.tsx @@ -44,7 +44,7 @@ export default function Organizations() { const cardStyle = { background: isDark ? '#111827' : '#FFFFFF', borderRadius: 12, - border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`, + border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`, }; // --- Org tree state --- @@ -264,9 +264,9 @@ export default function Organizations() { {item.name}{' '} {item.code && {item.code}} @@ -282,9 +282,9 @@ export default function Organizations() { {item.name}{' '} {item.code && {item.code}} @@ -343,7 +343,7 @@ export default function Organizations() {

- + 组织架构管理

管理组织、部门和岗位的层级结构
@@ -356,7 +356,7 @@ export default function Organizations() {
= { - uploaded: { color: '#62625b', label: '已上传' }, + uploaded: { color: '#475569', label: '已上传' }, installed: { color: '#2563EB', label: '已安装' }, - enabled: { color: '#103c25', label: '已启用' }, - running: { color: '#103c25', label: '运行中' }, - disabled: { color: '#9e0a0a', label: '已禁用' }, + enabled: { color: '#059669', label: '已启用' }, + running: { color: '#059669', label: '运行中' }, + disabled: { color: '#dc2626', label: '已禁用' }, uninstalled: { color: '#9333EA', label: '已卸载' }, }; @@ -215,7 +215,7 @@ export default function PluginAdmin() { key: 'status', width: 100, render: (status: PluginStatus) => { - const cfg = STATUS_CONFIG[status] || { color: '#62625b', label: status }; + const cfg = STATUS_CONFIG[status] || { color: '#475569', label: status }; return {cfg.label}; }, }, diff --git a/apps/web/src/pages/PluginDashboardPage.tsx b/apps/web/src/pages/PluginDashboardPage.tsx index b0ed8d2..a3b4004 100644 --- a/apps/web/src/pages/PluginDashboardPage.tsx +++ b/apps/web/src/pages/PluginDashboardPage.tsx @@ -299,7 +299,7 @@ export function PluginDashboardPage() { style={{ fontSize: 24, fontWeight: 700, - color: isDark ? '#f6f6f3' : 'rgba(0,0,0,0.95)', + color: isDark ? '#f8fafc' : 'rgba(0,0,0,0.95)', margin: '0 0 4px', letterSpacing: '-0.5px', }} @@ -309,7 +309,7 @@ export function PluginDashboardPage() {

@@ -352,7 +352,7 @@ export function PluginDashboardPage() {

图表分析
@@ -389,7 +389,7 @@ export function PluginDashboardPage() {
{currentEntity?.display_name || selectedEntity} 数据分布 diff --git a/apps/web/src/pages/PluginGraphPage.tsx b/apps/web/src/pages/PluginGraphPage.tsx index 073e99b..332518f 100644 --- a/apps/web/src/pages/PluginGraphPage.tsx +++ b/apps/web/src/pages/PluginGraphPage.tsx @@ -313,8 +313,8 @@ export function PluginGraphPage() { const r = degreeToRadius(degree, isCenter); // Determine node color from its most common edge type, or default palette - let nodeColorBase = '#e60023'; - let nodeColorLight = '#f05a5a'; + let nodeColorBase = '#2563eb'; + let nodeColorLight = '#60a5fa'; let nodeColorGlow = 'rgba(79,70,229,0.3)'; if (isCenter) { diff --git a/apps/web/src/pages/PluginMarket.tsx b/apps/web/src/pages/PluginMarket.tsx index 3e3c11a..5ee5064 100644 --- a/apps/web/src/pages/PluginMarket.tsx +++ b/apps/web/src/pages/PluginMarket.tsx @@ -37,12 +37,12 @@ import { const { Title, Text, Paragraph } = Typography; const CATEGORY_COLORS: Record = { - '财务': '#103c25', + '财务': '#059669', 'CRM': '#2563EB', '进销存': '#9333EA', - '生产': '#9e0a0a', - '人力资源': '#b56e1a', - '基础': '#62625b', + '生产': '#dc2626', + '人力资源': '#d97706', + '基础': '#475569', }; export default function PluginMarket() { @@ -190,7 +190,7 @@ export default function PluginMarket() {
{plugin.name} {plugin.category} @@ -244,7 +244,7 @@ export default function PluginMarket() {
- + {selectedPlugin.category} v{selectedPlugin.version} diff --git a/apps/web/src/pages/Roles.tsx b/apps/web/src/pages/Roles.tsx index b3cff2f..4e40d19 100644 --- a/apps/web/src/pages/Roles.tsx +++ b/apps/web/src/pages/Roles.tsx @@ -153,12 +153,12 @@ export default function Roles() { height: 32, borderRadius: 8, background: record.is_system - ? 'linear-gradient(135deg, #e60023, #f05a5a)' - : isDark ? '#211922' : '#f6f6f3', + ? 'linear-gradient(135deg, #2563eb, #60a5fa)' + : isDark ? '#0f172a' : '#f8fafc', display: 'flex', alignItems: 'center', justifyContent: 'center', - color: record.is_system ? '#fff' : isDark ? '#91918c' : '#62625b', + color: record.is_system ? '#fff' : isDark ? '#94a3b8' : '#475569', fontSize: 14, }} > @@ -174,9 +174,9 @@ export default function Roles() { key: 'code', render: (v: string) => ( @@ -190,7 +190,7 @@ export default function Roles() { key: 'description', ellipsis: true, render: (v: string | undefined) => ( - {v || '-'} + {v || '-'} ), }, { @@ -201,8 +201,8 @@ export default function Roles() { render: (v: boolean) => ( } onClick={() => openPermModal(record)} - style={{ color: '#e60023' }} + style={{ color: '#2563eb' }} > 权限 @@ -233,7 +233,7 @@ export default function Roles() { type="text" icon={} onClick={() => openEditModal(record)} - style={{ color: isDark ? '#91918c' : '#62625b' }} + style={{ color: isDark ? '#94a3b8' : '#475569' }} />
= { - active: '#103c25', - disabled: '#9e0a0a', - locked: '#b56e1a', + active: '#059669', + disabled: '#dc2626', + locked: '#d97706', }; const STATUS_BG_MAP: Record = { @@ -219,7 +219,7 @@ export default function Users() { width: 32, height: 32, borderRadius: 8, - background: 'linear-gradient(135deg, #e60023, #f05a5a)', + background: 'linear-gradient(135deg, #2563eb, #60a5fa)', display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -233,7 +233,7 @@ export default function Users() {
{v}
{record.display_name && ( -
+
{record.display_name}
)} @@ -262,7 +262,7 @@ export default function Users() { 0 ? roles.map((r) => ( {r.name} )) - : -, + : -, }, { title: '操作', @@ -299,14 +299,14 @@ export default function Users() { type="text" icon={} onClick={() => openEditModal(record)} - style={{ color: isDark ? '#91918c' : '#62625b' }} + style={{ color: isDark ? '#94a3b8' : '#475569' }} />
- } disabled={!!editUser} /> + } disabled={!!editUser} /> {!editUser && ( {r.name} - + {r.code} diff --git a/apps/web/src/pages/dashboard/DashboardWidgets.tsx b/apps/web/src/pages/dashboard/DashboardWidgets.tsx index efa8253..9ddc5cc 100644 --- a/apps/web/src/pages/dashboard/DashboardWidgets.tsx +++ b/apps/web/src/pages/dashboard/DashboardWidgets.tsx @@ -46,7 +46,7 @@ function prepareChartData(data: WidgetData['data'], dimensionOrder?: string[]) { const TAG_COLOR_MAP: Record = { blue: '#3B82F6', green: '#10B981', orange: '#F59E0B', red: '#EF4444', purple: '#8B5CF6', cyan: '#06B6D4', magenta: '#EC4899', gold: '#EAB308', - lime: '#84CC16', geekblue: '#f05a5a', volcano: '#F97316', + lime: '#84CC16', geekblue: '#60a5fa', volcano: '#F97316', }; function tagStrokeColor(color: string): string { @@ -204,7 +204,7 @@ export function SkeletonBreakdownCard({ index }: { index: number }) { function StatWidgetCard({ widgetData }: { widgetData: WidgetData }) { const { widget, count } = widgetData; const animatedValue = useCountUp(count ?? 0); - const color = widget.color || '#e60023'; + const color = widget.color || '#2563eb'; return (
@@ -229,7 +229,7 @@ function StatWidgetCard({ widgetData }: { widgetData: WidgetData }) { function BarWidgetCard({ widgetData, isDark }: { widgetData: WidgetData; isDark: boolean }) { const { widget, data } = widgetData; const chartData = prepareChartData(data, widget.dimension_order); - const axisLabelStyle = { fill: isDark ? '#91918c' : '#62625b' }; + const axisLabelStyle = { fill: isDark ? '#94a3b8' : '#475569' }; return ( {chartData.length > 0 ? ( @@ -275,7 +275,7 @@ function FunnelWidgetCard({ widgetData }: { widgetData: WidgetData }) { function LineWidgetCard({ widgetData, isDark }: { widgetData: WidgetData; isDark: boolean }) { const { widget, data } = widgetData; const chartData = prepareChartData(data, widget.dimension_order); - const axisLabelStyle = { fill: isDark ? '#91918c' : '#62625b' }; + const axisLabelStyle = { fill: isDark ? '#94a3b8' : '#475569' }; return ( {chartData.length > 0 ? ( @@ -315,7 +315,7 @@ function StatCardsWidget({ widgetData }: { widgetData: WidgetData }) { {statCards.map((sc, i) => (
diff --git a/apps/web/src/pages/dashboard/dashboardConstants.tsx b/apps/web/src/pages/dashboard/dashboardConstants.tsx index b6aa833..264d107 100644 --- a/apps/web/src/pages/dashboard/dashboardConstants.tsx +++ b/apps/web/src/pages/dashboard/dashboardConstants.tsx @@ -19,9 +19,9 @@ import { // ── 通用调色板 ── const UNIVERSAL_COLORS = [ - { gradient: 'linear-gradient(135deg, #e60023, #f05a5a)', iconBg: 'rgba(79, 70, 229, 0.12)', tagColor: 'purple' }, - { gradient: 'linear-gradient(135deg, #103c25, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', tagColor: 'green' }, - { gradient: 'linear-gradient(135deg, #b56e1a, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', tagColor: 'orange' }, + { gradient: 'linear-gradient(135deg, #2563eb, #60a5fa)', iconBg: 'rgba(79, 70, 229, 0.12)', tagColor: 'purple' }, + { gradient: 'linear-gradient(135deg, #059669, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', tagColor: 'green' }, + { gradient: 'linear-gradient(135deg, #d97706, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', tagColor: 'orange' }, { gradient: 'linear-gradient(135deg, #7C3AED, #A78BFA)', iconBg: 'rgba(124, 58, 237, 0.12)', tagColor: 'volcano' }, { gradient: 'linear-gradient(135deg, #E11D48, #F43F5E)', iconBg: 'rgba(225, 29, 72, 0.12)', tagColor: 'red' }, { gradient: 'linear-gradient(135deg, #0891B2, #06B6D4)', iconBg: 'rgba(8, 145, 178, 0.12)', tagColor: 'cyan' }, diff --git a/apps/web/src/pages/graph/graphRenderer.ts b/apps/web/src/pages/graph/graphRenderer.ts index 49303ef..f0d3030 100644 --- a/apps/web/src/pages/graph/graphRenderer.ts +++ b/apps/web/src/pages/graph/graphRenderer.ts @@ -11,11 +11,11 @@ import type { GraphEdge } from './graphTypes'; /** 关系类型对应的色板 (base / light / glow) — 通用调色板自动分配 */ const EDGE_PALETTE: Array<{ base: string; light: string; glow: string }> = [ - { base: '#e60023', light: '#f05a5a', glow: 'rgba(79,70,229,0.3)' }, - { base: '#103c25', light: '#34D399', glow: 'rgba(5,150,105,0.3)' }, - { base: '#b56e1a', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' }, + { base: '#2563eb', light: '#60a5fa', glow: 'rgba(79,70,229,0.3)' }, + { base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' }, + { base: '#d97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' }, { base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' }, - { base: '#9e0a0a', light: '#F87171', glow: 'rgba(220,38,38,0.3)' }, + { base: '#dc2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' }, { base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' }, { base: '#EA580C', light: '#FB923C', glow: 'rgba(234,88,12,0.3)' }, { base: '#DB2777', light: '#F472B6', glow: 'rgba(219,39,119,0.3)' }, diff --git a/apps/web/src/pages/messages/MessageTemplates.tsx b/apps/web/src/pages/messages/MessageTemplates.tsx index 20922af..90f2190 100644 --- 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 = { - 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) => ( @@ -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 ( ( - {v} + {v} ), }, ]; @@ -124,7 +124,7 @@ export default function MessageTemplates() { alignItems: 'center', marginBottom: 16, }}> - + 共 {total} 个模板
= { - 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: (
{record.body} -
+
{record.created_at}
@@ -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 ( {s === 'system' ? '系统' : '用户'}, + render: (s: string) => {s === 'system' ? '系统' : '用户'}, }, { title: '状态', @@ -155,9 +155,9 @@ export default function NotificationList({ queryFilter }: Props) { width: 80, render: (r: boolean) => ( {r ? '已读' : '未读'} @@ -170,7 +170,7 @@ export default function NotificationList({ queryFilter }: Props) { key: 'created_at', width: 180, render: (v: string) => ( - {v} + {v} ), }, { @@ -185,7 +185,7 @@ export default function NotificationList({ queryFilter }: Props) { size="small" icon={} onClick={() => handleMarkRead(record.id)} - style={{ color: '#e60023' }} + style={{ color: '#2563eb' }} /> )}
- + 通知偏好设置
diff --git a/apps/web/src/pages/plugins/graph/graphConstants.ts b/apps/web/src/pages/plugins/graph/graphConstants.ts index 69080e0..4ba464d 100644 --- a/apps/web/src/pages/plugins/graph/graphConstants.ts +++ b/apps/web/src/pages/plugins/graph/graphConstants.ts @@ -5,11 +5,11 @@ // 通用边调色板 const EDGE_PALETTE: Array<{ base: string; light: string; glow: string }> = [ - { base: '#e60023', light: '#f05a5a', glow: 'rgba(79,70,229,0.3)' }, - { base: '#103c25', light: '#34D399', glow: 'rgba(5,150,105,0.3)' }, - { base: '#b56e1a', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' }, + { base: '#2563eb', light: '#60a5fa', glow: 'rgba(79,70,229,0.3)' }, + { base: '#059669', light: '#34D399', glow: 'rgba(5,150,105,0.3)' }, + { base: '#d97706', light: '#FBBF24', glow: 'rgba(217,119,6,0.3)' }, { base: '#0891B2', light: '#22D3EE', glow: 'rgba(8,145,178,0.3)' }, - { base: '#9e0a0a', light: '#F87171', glow: 'rgba(220,38,38,0.3)' }, + { base: '#dc2626', light: '#F87171', glow: 'rgba(220,38,38,0.3)' }, { base: '#7C3AED', light: '#A78BFA', glow: 'rgba(124,58,237,0.3)' }, { base: '#EA580C', light: '#FB923C', glow: 'rgba(234,88,12,0.3)' }, { base: '#DB2777', light: '#F472B6', glow: 'rgba(219,39,119,0.3)' }, diff --git a/apps/web/src/pages/plugins/graph/graphRenderer.ts b/apps/web/src/pages/plugins/graph/graphRenderer.ts index 8428b0b..c3a10f3 100644 --- a/apps/web/src/pages/plugins/graph/graphRenderer.ts +++ b/apps/web/src/pages/plugins/graph/graphRenderer.ts @@ -295,8 +295,8 @@ export function drawFullGraph( const degree = degreeMap.get(node.id) || 0; const r = degreeToRadius(degree, isCenter); - let nodeColorBase = '#e60023'; - let nodeColorLight = '#f05a5a'; + let nodeColorBase = '#2563eb'; + let nodeColorLight = '#60a5fa'; let nodeColorGlow = 'rgba(79,70,229,0.3)'; if (isCenter) { diff --git a/apps/web/src/pages/settings/AuditLogViewer.tsx b/apps/web/src/pages/settings/AuditLogViewer.tsx index c6335d0..a1a9568 100644 --- a/apps/web/src/pages/settings/AuditLogViewer.tsx +++ b/apps/web/src/pages/settings/AuditLogViewer.tsx @@ -17,9 +17,9 @@ const RESOURCE_TYPE_OPTIONS = [ ]; const ACTION_STYLES: Record = { - create: { bg: '#ECFDF5', color: '#103c25', text: '创建' }, - update: { bg: '#fef0f0', color: '#e60023', text: '更新' }, - delete: { bg: '#FEF2F2', color: '#9e0a0a', text: '删除' }, + create: { bg: '#ECFDF5', color: '#059669', text: '创建' }, + update: { bg: '#eff6ff', color: '#2563eb', text: '更新' }, + delete: { bg: '#FEF2F2', color: '#dc2626', 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: '#f6f6f3', color: '#62625b', text: action }; + const info = ACTION_STYLES[action] || { bg: '#f8fafc', color: '#475569', text: action }; return ( ( {v} @@ -115,7 +115,7 @@ export default function AuditLogViewer() { width: 200, ellipsis: true, render: (v: string) => ( - + {v} ), @@ -127,7 +127,7 @@ export default function AuditLogViewer() { width: 200, ellipsis: true, render: (v: string) => ( - + {v} ), @@ -138,7 +138,7 @@ export default function AuditLogViewer() { key: 'created_at', width: 180, render: (value: string) => ( - + {formatDateTime(value)} ), @@ -156,7 +156,7 @@ export default function AuditLogViewer() { padding: 12, background: isDark ? '#111827' : '#FFFFFF', borderRadius: 10, - border: `1px solid ${isDark ? '#211922' : '#f6f6f3'}`, + border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`, }}>
( @@ -162,7 +162,7 @@ export default function SystemSettings() { type="text" icon={} onClick={() => openEdit(record)} - style={{ color: isDark ? '#91918c' : '#62625b' }} + style={{ color: isDark ? '#94a3b8' : '#475569' }} /> } + prefix={} value={searchKey} onChange={(e) => setSearchKey(e.target.value)} onPressEnter={handleSearch} @@ -207,7 +207,7 @@ export default function SystemSettings() {
= { - approved: { bg: '#ECFDF5', color: '#103c25', text: '同意' }, - rejected: { bg: '#FEF2F2', color: '#9e0a0a', text: '拒绝' }, - delegated: { bg: '#fef0f0', color: '#e60023', text: '已委派' }, + approved: { bg: '#ECFDF5', color: '#059669', text: '同意' }, + rejected: { bg: '#FEF2F2', color: '#dc2626', text: '拒绝' }, + delegated: { bg: '#eff6ff', color: '#2563eb', text: '已委派' }, }; export default function CompletedTasks() { @@ -50,7 +50,7 @@ export default function CompletedTasks() { key: 'outcome', width: 100, render: (o: string) => { - const info = outcomeStyles[o] || { bg: '#f6f6f3', color: '#62625b', text: o }; + const info = outcomeStyles[o] || { bg: '#f8fafc', color: '#475569', text: o }; return ( ( - + {v ? new Date(v).toLocaleString() : '-'} ), @@ -80,7 +80,7 @@ export default function CompletedTasks() {
= { - running: { bg: '#fef0f0', color: '#e60023', text: '运行中' }, - suspended: { bg: '#FFFBEB', color: '#b56e1a', text: '已挂起' }, - completed: { bg: '#ECFDF5', color: '#103c25', text: '已完成' }, - terminated: { bg: '#FEF2F2', color: '#9e0a0a', text: '已终止' }, + running: { bg: '#eff6ff', color: '#2563eb', text: '运行中' }, + suspended: { bg: '#FFFBEB', color: '#d97706', text: '已挂起' }, + completed: { bg: '#ECFDF5', color: '#059669', text: '已完成' }, + terminated: { bg: '#FEF2F2', color: '#dc2626', text: '已终止' }, }; export default function InstanceMonitor() { @@ -129,7 +129,7 @@ export default function InstanceMonitor() { key: 'status', width: 100, render: (s: string) => { - const info = statusStyles[s] || { bg: '#f6f6f3', color: '#62625b', text: s }; + const info = statusStyles[s] || { bg: '#f8fafc', color: '#475569', text: s }; return ( ( - + {new Date(v).toLocaleString()} ), @@ -214,7 +214,7 @@ export default function InstanceMonitor() {
v ? ( @@ -93,9 +93,9 @@ export default function PendingTasks() { width: 100, render: (s: string) => ( {s} @@ -108,7 +108,7 @@ export default function PendingTasks() { key: 'created_at', width: 180, render: (v: string) => ( - + {new Date(v).toLocaleString()} ), @@ -145,7 +145,7 @@ export default function PendingTasks() {
= { - draft: { bg: '#f6f6f3', color: '#62625b', text: '草稿' }, - published: { bg: '#ecfdf5', color: '#103c25', text: '已发布' }, - deprecated: { bg: '#fef2f2', color: '#9e0a0a', text: '已弃用' }, + draft: { bg: '#f8fafc', color: '#475569', text: '草稿' }, + published: { bg: '#ecfdf5', color: '#059669', text: '已发布' }, + deprecated: { bg: '#fef2f2', color: '#dc2626', text: '已弃用' }, }; export default function ProcessDefinitions() { @@ -92,9 +92,9 @@ export default function ProcessDefinitions() { key: 'key', render: (v: string) => ( @@ -110,7 +110,7 @@ export default function ProcessDefinitions() { key: 'status', width: 100, render: (s: string) => { - const info = statusColors[s] || { bg: '#f6f6f3', color: '#62625b', text: s }; + const info = statusColors[s] || { bg: '#f8fafc', color: '#475569', text: s }; return ( - + 共 {total} 个流程定义