From be31923e749bbaf1126611ea49fcf1db26866fa5 Mon Sep 17 00:00:00 2001
From: wangbo <wangbolhr@163.com>
Date: Tue, 12 May 2026 02:15:49 +0800
Subject: [PATCH] style(web): align antd theme with app palette

---
 apps/web/src/components/ui/antd-theme.ts      | 66 +++++++++++++++++++
 .../src/components/ui/date-time-picker.tsx    | 20 +-----
 apps/web/src/main.tsx                         |  7 +-
 3 files changed, 74 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/src/components/ui/antd-theme.ts

diff --git a/apps/web/src/components/ui/antd-theme.ts b/apps/web/src/components/ui/antd-theme.ts
new file mode 100644
index 0000000..0d6fd31
--- /dev/null
+++ b/apps/web/src/components/ui/antd-theme.ts
@@ -0,0 +1,66 @@
+import type { ThemeConfig } from 'antd/es/config-provider';
+
+const colors = {
+  background: '#ffffff',
+  border: '#e4e4e7',
+  foreground: '#09090b',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  primary: '#18181b',
+  primaryHover: '#27272a',
+  surfaceSubtle: '#fafafa',
+};
+
+export const gatewayAntdTheme: ThemeConfig = {
+  token: {
+    colorPrimary: colors.primary,
+    colorPrimaryHover: colors.primaryHover,
+    colorPrimaryActive: colors.foreground,
+    colorInfo: colors.primary,
+    colorLink: colors.primary,
+    colorLinkHover: colors.primaryHover,
+    colorBorder: colors.border,
+    colorText: colors.primaryHover,
+    colorTextBase: colors.primaryHover,
+    colorTextPlaceholder: colors.mutedForeground,
+    colorBgContainer: colors.background,
+    colorBgElevated: colors.background,
+    colorFillSecondary: colors.muted,
+    colorFillTertiary: colors.surfaceSubtle,
+    controlItemBgActive: colors.muted,
+    controlItemBgActiveHover: colors.border,
+    borderRadius: 6,
+    controlHeight: 36,
+    fontFamily: 'inherit',
+    fontSize: 14,
+  },
+  components: {
+    DatePicker: {
+      activeBorderColor: colors.primary,
+      activeShadow: '0 0 0 3px rgba(24, 24, 27, 0.12)',
+      cellActiveWithRangeBg: colors.muted,
+      cellHoverWithRangeBg: colors.surfaceSubtle,
+      cellRangeBorderColor: colors.border,
+      hoverBorderColor: colors.primaryHover,
+    },
+    Select: {
+      activeBorderColor: colors.primary,
+      activeOutlineColor: 'rgba(24, 24, 27, 0.12)',
+      hoverBorderColor: colors.primaryHover,
+      multipleItemBg: colors.muted,
+      multipleItemBorderColor: colors.border,
+      optionActiveBg: colors.surfaceSubtle,
+      optionSelectedBg: colors.muted,
+      optionSelectedColor: colors.foreground,
+      optionSelectedFontWeight: 600,
+    },
+    Slider: {
+      dotActiveBorderColor: colors.primary,
+      handleActiveColor: colors.primary,
+      handleActiveOutlineColor: 'rgba(24, 24, 27, 0.12)',
+      handleColor: colors.primary,
+      trackBg: colors.primary,
+      trackHoverBg: colors.primaryHover,
+    },
+  },
+};
diff --git a/apps/web/src/components/ui/date-time-picker.tsx b/apps/web/src/components/ui/date-time-picker.tsx
index 3674538..ea90ccd 100644
--- a/apps/web/src/components/ui/date-time-picker.tsx
+++ b/apps/web/src/components/ui/date-time-picker.tsx
@@ -9,6 +9,7 @@ import 'dayjs/locale/zh-cn';
 import { CalendarIcon, X } from 'lucide-react';
 import { Button } from './button';
 import { Calendar } from './calendar';
+import { gatewayAntdTheme } from './antd-theme';
 import { Input } from './input';
 import { Label } from './label';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
@@ -88,7 +89,7 @@ export function DateTimeRangePicker(props: {
   }, [props.from, props.to]);
 
   return (
-    <ConfigProvider locale={zhCN} theme={dateRangePickerTheme}>
+    <ConfigProvider locale={zhCN} theme={gatewayAntdTheme}>
       <DatePicker.RangePicker
         allowClear
         className="shDateRangePicker"
@@ -114,23 +115,6 @@ export function DateTimeRangePicker(props: {
 
 const rangeDateTimeFormat = 'YYYY-MM-DD HH:mm:ss';
 const rangeParseFormats = [rangeDateTimeFormat, 'YYYY-MM-DDTHH:mm:ss', 'YYYY-MM-DDTHH:mm', 'YYYY-MM-DD'];
-const dateRangePickerTheme = {
-  token: {
-    colorPrimary: '#18181b',
-    colorPrimaryHover: '#27272a',
-    colorBorder: '#e4e4e7',
-    colorText: '#27272a',
-    colorTextPlaceholder: '#71717a',
-    colorBgContainer: '#ffffff',
-    colorBgElevated: '#ffffff',
-    colorFillSecondary: '#f4f4f5',
-    borderRadius: 6,
-    controlHeight: 36,
-    fontFamily: 'inherit',
-    fontSize: 14,
-  },
-};
-
 function parseLocalDateTime(value: string) {
   if (!value) return undefined;
   const normalized = value.includes('T') ? value : value.replace(' ', 'T');
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index f88f480..fb1bb4d 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,6 +1,9 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import ConfigProvider from 'antd/es/config-provider';
+import zhCN from 'antd/es/locale/zh_CN';
 import { App } from './App';
+import { gatewayAntdTheme } from './components/ui/antd-theme';
 import 'katex/dist/katex.min.css';
 import 'streamdown/styles.css';
 import 'antd/dist/reset.css';
@@ -8,6 +11,8 @@ import './styles.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ConfigProvider locale={zhCN} theme={gatewayAntdTheme}>
+      <App />
+    </ConfigProvider>
   </StrictMode>,
 );