From 1d5824d498dfa0fe1f44d1e307d1d1d6f896bc62 Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Mon, 29 Dec 2025 10:57:24 +0800
Subject: [PATCH] fix: update ConfigProvider cssVar prop and improve HTTP
 method tag rendering

---
 web/src/contexts/ThemeContext.tsx |  2 +-
 web/src/layout/SideNav.tsx        |  2 +-
 web/src/pages/AuditLogsPage.tsx   | 28 ++++++++++++++++++++++++++--
 web/src/pages/SetupPage.tsx       | 11 +++++------
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/web/src/contexts/ThemeContext.tsx b/web/src/contexts/ThemeContext.tsx
index a9eedc9..7d4cc8e 100644
--- a/web/src/contexts/ThemeContext.tsx
+++ b/web/src/contexts/ThemeContext.tsx
@@ -190,7 +190,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <Ctx.Provider value={ctxValue}>
-      <ConfigProvider theme={{ ...themeConfig, cssVar: true }} locale={locale}>
+      <ConfigProvider theme={{ ...themeConfig, cssVar: {} }} locale={locale}>
         {children}
       </ConfigProvider>
     </Ctx.Provider>
diff --git a/web/src/layout/SideNav.tsx b/web/src/layout/SideNav.tsx
index ad4749c..04b3389 100644
--- a/web/src/layout/SideNav.tsx
+++ b/web/src/layout/SideNav.tsx
@@ -305,7 +305,7 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
                 />
               )}
 
-              <Divider orientation="left" plain>{t('Changelog')}</Divider>
+              <Divider titlePlacement="left" plain>{t('Changelog')}</Divider>
               <div style={{
                 maxHeight: '40vh',
                 overflowY: 'auto',
diff --git a/web/src/pages/AuditLogsPage.tsx b/web/src/pages/AuditLogsPage.tsx
index 1054a17..62a00bf 100644
--- a/web/src/pages/AuditLogsPage.tsx
+++ b/web/src/pages/AuditLogsPage.tsx
@@ -22,6 +22,30 @@ const ACTION_OPTIONS = [
   'other'
 ];
 
+const HTTP_METHOD_COLOR_MAP: Record<string, string> = {
+  GET: 'green',
+  POST: 'blue',
+  PUT: 'orange',
+  PATCH: 'gold',
+  DELETE: 'red',
+  HEAD: 'cyan',
+  OPTIONS: 'purple',
+};
+
+const renderHttpMethodTag = (method: string) => {
+  const upper = method.toUpperCase();
+  const color = HTTP_METHOD_COLOR_MAP[upper] || 'default';
+  return (
+    <Tag
+      bordered={false}
+      color={color}
+      style={{ margin: 0, paddingInline: 8, minWidth: 56, textAlign: 'center', fontWeight: 500 }}
+    >
+      {upper}
+    </Tag>
+  );
+};
+
 const AuditLogsPage = memo(function AuditLogsPage() {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState<PaginatedAuditLogs | null>(null);
@@ -118,7 +142,7 @@ const AuditLogsPage = memo(function AuditLogsPage() {
       ellipsis: true,
       render: (path: string, rec: AuditLogItem) => (
         <Space size={4}>
-          <Tag bordered={false} color="default" style={{ margin: 0, paddingInline: 8 }}>{rec.method}</Tag>
+          {renderHttpMethodTag(rec.method)}
           <span style={{ maxWidth: 320, display: 'inline-block' }}>{path}</span>
         </Space>
       ),
@@ -256,7 +280,7 @@ const AuditLogsPage = memo(function AuditLogsPage() {
               </Descriptions.Item>
               <Descriptions.Item label={t('Path')} span={2}>
                 <Space size={6} wrap style={{ wordBreak: 'break-all' }}>
-                  <Tag bordered={false} color="default" style={{ margin: 0, paddingInline: 8 }}>{selectedLog.method}</Tag>
+                  {renderHttpMethodTag(selectedLog.method)}
                   <Typography.Text copyable style={{ wordBreak: 'break-all' }}>{selectedLog.path}</Typography.Text>
                 </Space>
               </Descriptions.Item>
diff --git a/web/src/pages/SetupPage.tsx b/web/src/pages/SetupPage.tsx
index debb334..4e8b746 100644
--- a/web/src/pages/SetupPage.tsx
+++ b/web/src/pages/SetupPage.tsx
@@ -8,7 +8,6 @@ import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 
 const { Title, Text } = Typography;
-const { Step } = Steps;
 
 const SetupPage = () => {
   const [loading, setLoading] = useState(false);
@@ -243,11 +242,11 @@ const SetupPage = () => {
           <img src="/logo.svg" alt="Foxel Logo" style={{ width: 48, marginBottom: 16 }} />
           <Title level={2}>{t('System Initialization')}</Title>
         </div>
-        <Steps current={currentStep} style={{ marginBottom: 32 }}>
-          {steps.map(item => (
-            <Step key={item.title} title={item.title} />
-          ))}
-        </Steps>
+        <Steps
+          current={currentStep}
+          style={{ marginBottom: 32 }}
+          items={steps.map((item) => ({ title: item.title }))}
+        />
 
         <Form form={form} name="setup" onFinish={onFinish} layout="vertical">
           {steps.map((step, index) => (