From 85d6b76387e13339e8802e43472cbe0bcb4c6aec Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Mon, 25 May 2026 03:15:35 +0800
Subject: [PATCH] feat(select): add small size option for Select component and
 corresponding styles fix(provider): update button icon styles in
 ProviderHeaderCard style(provider): enhance layout and typography in
 ProviderHeaderCard and ProviderResourcePanel fix(provider): update status
 styles in ProviderResourceTable and sharedForm

---
 src/components/ui/Select.module.scss          |  7 +++++++
 src/components/ui/Select.tsx                  |  4 +++-
 src/components/ui/icons.tsx                   |  2 +-
 .../components/OpenAIBrandToolbar.tsx         |  1 +
 .../components/ProviderHeaderCard.module.scss | 19 ++++++++++---------
 .../components/ProviderHeaderCard.tsx         |  2 +-
 .../ProviderResourcePanel.module.scss         | 17 +++++------------
 .../components/ProviderResourcePanel.tsx      |  3 ---
 .../ProviderResourceTable.module.scss         |  6 +++---
 .../sheets/forms/sharedForm.module.scss       |  2 +-
 10 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/ui/Select.module.scss b/src/components/ui/Select.module.scss
index 7a3bd32..844537c 100644
--- a/src/components/ui/Select.module.scss
+++ b/src/components/ui/Select.module.scss
@@ -45,6 +45,13 @@
   }
 }
 
+.triggerSm {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  box-shadow: none;
+}
+
 .triggerText {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 9c36515..b1c49b0 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -28,6 +28,7 @@ interface SelectProps {
   ariaLabelledBy?: string;
   ariaDescribedBy?: string;
   fullWidth?: boolean;
+  size?: 'sm' | 'md';
   id?: string;
 }
 
@@ -87,6 +88,7 @@ export function Select({
   ariaLabelledBy,
   ariaDescribedBy,
   fullWidth = true,
+  size = 'md',
   id,
 }: SelectProps) {
   const generatedId = useId();
@@ -301,7 +303,7 @@ export function Select({
         <button
           id={selectId}
           type="button"
-          className={styles.trigger}
+          className={`${styles.trigger} ${size === 'sm' ? styles.triggerSm : ''}`.trim()}
           onClick={disabled ? undefined : () => setOpen((prev) => !prev)}
           onKeyDown={handleKeyDown}
           aria-haspopup="listbox"
diff --git a/src/components/ui/icons.tsx b/src/components/ui/icons.tsx
index 20983db..e0a6cbe 100644
--- a/src/components/ui/icons.tsx
+++ b/src/components/ui/icons.tsx
@@ -207,7 +207,7 @@ export function IconPencil({ size = 20, ...props }: IconProps) {
 export function IconAlertTriangle({ size = 20, ...props }: IconProps) {
   return (
     <svg {...baseSvgProps} width={size} height={size} {...props}>
-      <path d="M21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
       <path d="M12 9v4" />
       <path d="M12 17h.01" />
     </svg>
diff --git a/src/features/providers/components/OpenAIBrandToolbar.tsx b/src/features/providers/components/OpenAIBrandToolbar.tsx
index 6e9199e..6556aaa 100644
--- a/src/features/providers/components/OpenAIBrandToolbar.tsx
+++ b/src/features/providers/components/OpenAIBrandToolbar.tsx
@@ -88,6 +88,7 @@ export function OpenAIBrandToolbar({
           options={sortOptions}
           onChange={(value) => onSortBy(value as OpenAISortBy)}
           ariaLabel={t('providersPage.toolbar.sortBy')}
+          size="sm"
         />
         <button
           type="button"
diff --git a/src/features/providers/components/ProviderHeaderCard.module.scss b/src/features/providers/components/ProviderHeaderCard.module.scss
index 337bd7b..a2c9bf5 100644
--- a/src/features/providers/components/ProviderHeaderCard.module.scss
+++ b/src/features/providers/components/ProviderHeaderCard.module.scss
@@ -2,11 +2,9 @@
 @use '../../../styles/variables' as *;
 
 .card {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .row {
@@ -30,9 +28,8 @@
 
 .title {
   margin: 0;
-  font-size: 22px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-size: 28px;
+  font-weight: 700;
   color: var(--text-primary);
 }
 
@@ -108,7 +105,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 20px;
 }
 
 .chip {
@@ -141,6 +137,11 @@
   animation: pwc-spin 0.9s linear infinite;
 }
 
+.btnIcon {
+  display: inline-flex;
+  align-items: center;
+}
+
 @keyframes pwc-spin {
   from {
     transform: rotate(0deg);
diff --git a/src/features/providers/components/ProviderHeaderCard.tsx b/src/features/providers/components/ProviderHeaderCard.tsx
index e0436bb..d4ca1d9 100644
--- a/src/features/providers/components/ProviderHeaderCard.tsx
+++ b/src/features/providers/components/ProviderHeaderCard.tsx
@@ -51,7 +51,7 @@ export function ProviderHeaderCard({
                 : t('providersPage.actions.refresh')
             }
           >
-            <span className={isFetching ? styles.spin : undefined}>
+            <span className={`${styles.btnIcon} ${isFetching ? styles.spin : ''}`.trim()}>
               {isFetching ? <IconLoader2 size={14} /> : <IconRefreshCw size={14} />}
             </span>
             <span>
diff --git a/src/features/providers/components/ProviderResourcePanel.module.scss b/src/features/providers/components/ProviderResourcePanel.module.scss
index 706ab1a..74103eb 100644
--- a/src/features/providers/components/ProviderResourcePanel.module.scss
+++ b/src/features/providers/components/ProviderResourcePanel.module.scss
@@ -43,18 +43,17 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
 }
 
 .titleRow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .logo {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: var(--radius-md);
   object-fit: contain;
   flex-shrink: 0;
@@ -67,17 +66,11 @@
 }
 
 .title {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--muted-foreground);
-  margin: 0;
-  line-height: 1.5;
+  letter-spacing: -0.005em;
 }
 
 .searchWrap {
diff --git a/src/features/providers/components/ProviderResourcePanel.tsx b/src/features/providers/components/ProviderResourcePanel.tsx
index 739a419..5186763 100644
--- a/src/features/providers/components/ProviderResourcePanel.tsx
+++ b/src/features/providers/components/ProviderResourcePanel.tsx
@@ -89,9 +89,6 @@ export function ProviderResourcePanel({
                 {t(`providersPage.providerNames.${group.id}`)}
               </h2>
             </div>
-            <p className={styles.subtitle}>
-              {t('providersPage.table.description', { route: group.path })}
-            </p>
           </div>
           {group.id !== 'ampcode' ? (
             <div className={styles.searchWrap}>
diff --git a/src/features/providers/components/ProviderResourceTable.module.scss b/src/features/providers/components/ProviderResourceTable.module.scss
index 1e34005..8315271 100644
--- a/src/features/providers/components/ProviderResourceTable.module.scss
+++ b/src/features/providers/components/ProviderResourceTable.module.scss
@@ -113,9 +113,9 @@
 }
 
 .statusActive {
-  border-color: var(--primary-30);
-  background: var(--primary-10);
-  color: var(--primary-color);
+  border-color: var(--success-badge-border);
+  background: var(--success-badge-bg);
+  color: var(--success-badge-text);
 }
 
 .statusDisabled {
diff --git a/src/features/providers/sheets/forms/sharedForm.module.scss b/src/features/providers/sheets/forms/sharedForm.module.scss
index 495a2de..1e5773f 100644
--- a/src/features/providers/sheets/forms/sharedForm.module.scss
+++ b/src/features/providers/sheets/forms/sharedForm.module.scss
@@ -310,7 +310,7 @@
 }
 
 .statusIconSuccess {
-  color: var(--primary-color);
+  color: var(--success-color);
 }
 
 .statusIconError {