From 6eb60a47a17a3ffde155fc6d7140ba8bc7b164b0 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Sun, 19 Apr 2026 10:10:16 +0800
Subject: [PATCH] style: update component styles for improved consistency and
 readability

---
 src/pages/Agents/components/AgentCard.tsx     |  4 ++--
 src/pages/Agents/index.tsx                    | 22 +++++++++----------
 .../components/AccountSettingsPanel.tsx       | 16 +++++++-------
 src/pages/Setting/components/SettingMenu.tsx  |  6 ++---
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/pages/Agents/components/AgentCard.tsx b/src/pages/Agents/components/AgentCard.tsx
index ae5fbd7..ea21132 100644
--- a/src/pages/Agents/components/AgentCard.tsx
+++ b/src/pages/Agents/components/AgentCard.tsx
@@ -25,9 +25,9 @@ export default function AgentCard({
   onOpenSettings,
 }: AgentCardProps) {
   return (
-    <article className="rounded-[32px] bg-[#EEE9DD] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]">
+    <article className="rounded-2xl bg-[#F5F7FA] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]">
       <div className="flex items-center gap-5">
-        <div className="flex h-[82px] w-[82px] shrink-0 items-center justify-center rounded-full bg-[#E3E0D9] text-[#2E67F8] shadow-[0_6px_18px_rgba(15,23,42,0.08)] dark:bg-[#26262a]">
+        <div className="flex h-20.5 w-20.5 shrink-0 items-center justify-center rounded-full bg-[#E3E0D9] text-[#2E67F8] shadow-[0_6px_18px_rgba(15,23,42,0.08)] dark:bg-[#26262a]">
           <Bot className="h-9 w-9 stroke-[1.8]" />
         </div>
 
diff --git a/src/pages/Agents/index.tsx b/src/pages/Agents/index.tsx
index afb16b0..63c13e9 100644
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -215,7 +215,7 @@ export default function AgentsPage() {
   if (isInitialLoading) {
     return (
       <section className="h-full w-full min-h-0">
-        <div className="flex h-full w-full min-h-0 items-center justify-center rounded-[32px] bg-[#F5F0E4] dark:bg-[#141416]">
+        <div className="flex h-full w-full min-h-0 items-center justify-center rounded-4xl bg-[#F5F0E4] dark:bg-[#141416]">
           <Spinner />
         </div>
       </section>
@@ -285,16 +285,16 @@ export default function AgentsPage() {
 
   return (
     <section className="h-full w-full min-h-0">
-      <div className="flex h-full w-full min-h-0 flex-col overflow-y-auto rounded-[32px] bg-[#F5F0E4] px-12 py-12 dark:bg-[#141416]">
+      <div className="flex h-full w-full min-h-0 flex-col overflow-y-auto rounded-2xl bg-white px-12 py-12 dark:bg-[#141416]">
         <div className="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between">
           <div className="min-w-0">
             <h1
-              className="text-[72px] font-normal leading-none tracking-tight text-[#0D1730] dark:text-[#f3f4f6] md:text-[92px]"
+              className="text-[24px] font-normal leading-none tracking-tight text-[#0D1730] dark:text-[#f3f4f6] md:text-[92px]"
               style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
             >
               {pageCopy.title}
             </h1>
-            <p className="mt-8 max-w-[960px] text-[24px] font-semibold leading-[1.55] text-[#555C69] dark:text-gray-400">
+            <p className="mt-8 max-w-240 text-[12px] font-semibold leading-[1.55] text-[#555C69] dark:text-gray-400">
               {pageCopy.subtitle}
             </p>
           </div>
@@ -303,7 +303,7 @@ export default function AgentsPage() {
             <button
               type="button"
               disabled={isBusy}
-              className="inline-flex h-[66px] items-center gap-3 rounded-full border border-black/12 bg-white/50 px-9 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
+              className="inline-flex px-4 py-2 items-center gap-3 rounded-full border border-black/12 bg-white/50 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
               onClick={() => {
                 void handleRefresh();
               }}
@@ -315,7 +315,7 @@ export default function AgentsPage() {
             <button
               type="button"
               disabled={isBusy}
-              className="inline-flex h-[66px] items-center gap-3 rounded-full bg-[#2E67F8] px-10 text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60"
+              className="inline-flex px-4 py-2 items-center gap-3 rounded-full bg-[#2E67F8] text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60"
               onClick={() => {
                 setAddDialogOpen(true);
               }}
@@ -328,7 +328,7 @@ export default function AgentsPage() {
 
         <div className="mt-10 space-y-4">
           {warning ? (
-            <div className="rounded-[24px] border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
+            <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{warning}</span>
@@ -337,7 +337,7 @@ export default function AgentsPage() {
           ) : null}
 
           {error ? (
-            <div className="rounded-[24px] border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300">
+            <div className="rounded-3xl border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{message('agents.errorPrefix', '加载 Agents 失败：{error}', { error })}</span>
@@ -346,7 +346,7 @@ export default function AgentsPage() {
           ) : null}
 
           {providerError ? (
-            <div className="rounded-[24px] border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
+            <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
               <div className="flex items-start gap-3">
                 <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
                 <span>{`${pageCopy.settingsDialog.providerLoadErrorPrefix}${providerError}`}</span>
@@ -355,9 +355,9 @@ export default function AgentsPage() {
           ) : null}
         </div>
 
-        <div className="mt-12 space-y-5 pb-6">
+        <div className="space-y-5 pb-4">
           {sortedAgents.length === 0 ? (
-            <div className="rounded-[32px] border border-dashed border-black/10 bg-[#EEE9DD] px-8 py-12 text-[#555C69] dark:border-white/10 dark:bg-[#1f1f22] dark:text-gray-400">
+            <div className="rounded-2xl border border-dashed border-black/10 bg-[#F5F7FA] px-8 py-12 text-[#555C69] dark:border-white/10 dark:bg-[#1f1f22] dark:text-gray-400">
               <div className="text-[24px] font-semibold text-[#0D1730] dark:text-[#f3f4f6]">
                 {pageCopy.emptyTitle}
               </div>
diff --git a/src/pages/Setting/components/AccountSettingsPanel.tsx b/src/pages/Setting/components/AccountSettingsPanel.tsx
index 9488b9f..f097a35 100644
--- a/src/pages/Setting/components/AccountSettingsPanel.tsx
+++ b/src/pages/Setting/components/AccountSettingsPanel.tsx
@@ -9,30 +9,30 @@ export default function AccountSettingsPanel() {
   const { t } = useI18n();
 
   return (
-    <section className="flex-1 h-full p-[20px] select-none">
+    <section className="flex-1 h-full p-5 select-none">
       <SectionHeader
         title={t('settings.account.title')}
         description={t('settings.account.description')}
       />
 
-      <div className="mt-[20px] box-border flex w-full items-center border-b border-dashed border-[#E5E8EE] py-[20px] dark:border-gray-700">
-        <div className="mr-[24px] whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
+      <div className="mt-5 box-border flex w-full items-center border-b border-dashed border-[#E5E8EE] py-5 dark:border-gray-700">
+        <div className="mr-6 whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
           {t('settings.account.accountLabel')}
         </div>
         <div className="text-[14px] font-medium text-[#171717] dark:text-gray-100">{ACCOUNT_ID}</div>
       </div>
 
-      <div className="box-border flex w-full items-center gap-3 border-b border-dashed border-[#E5E8EE] py-[20px] dark:border-gray-700">
-        <div className="mr-[24px] whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
+      <div className="box-border flex w-full items-center gap-3 border-b border-dashed border-[#E5E8EE] py-5 dark:border-gray-700">
+        <div className="mr-6 whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
           {t('settings.account.passwordLabel')}
         </div>
         <div className="min-w-0 text-[14px] text-[#99A0AE] dark:text-gray-500">
           {t('settings.account.passwordHelp', { time: LAST_LOGIN_TIME })}
         </div>
 
-        <div className="flex shrink-0 items-center rounded-[6px] border border-[#E5E8EE] px-[6px] py-[4px] dark:border-gray-700">
-          <CheckCircle className="h-[16px] w-[16px] text-[#1FC16B]" />
-          <span className="ml-[2px] whitespace-nowrap text-[12px] text-[#525866] dark:text-gray-400">
+        <div className="flex shrink-0 items-center rounded-md border border-[#E5E8EE] px-1.5 py-1 dark:border-gray-700">
+          <CheckCircle className="h-4 w-4 text-[#1FC16B]" />
+          <span className="ml-0.5 whitespace-nowrap text-[12px] text-[#525866] dark:text-gray-400">
             {t('settings.account.configured')}
           </span>
         </div>
diff --git a/src/pages/Setting/components/SettingMenu.tsx b/src/pages/Setting/components/SettingMenu.tsx
index ed30cd1..2a6cf7a 100644
--- a/src/pages/Setting/components/SettingMenu.tsx
+++ b/src/pages/Setting/components/SettingMenu.tsx
@@ -43,16 +43,16 @@ export default function SettingMenu({ currentView, onChange }: SettingMenuProps)
             type="button"
             onClick={() => onChange(id)}
             className={[
-              'box-border flex cursor-pointer items-center rounded-[6px] px-[12px] py-[10px] transition-colors',
+              'box-border flex cursor-pointer items-center rounded-md px-3 py-2.5 transition-colors',
               active ? 'bg-[#EFF6FF] dark:bg-[#222225]' : 'hover:bg-[#EFF6FF] dark:hover:bg-[#222225]',
             ].join(' ')}
           >
             <Icon
-              className="h-[20px] w-[20px]"
+              className="h-5 w-5"
               style={{ color: active ? '#2B7FFF' : '#525866' }}
             />
             <span
-              className="box-border px-[8px] text-[14px] font-medium dark:text-gray-300"
+              className="box-border px-2 text-[14px] font-medium dark:text-gray-300"
               style={{ color: active ? '#2B7FFF' : '#525866' }}
             >
               {t(labelKey)}