fix(QuotaSection): update MAX_ITEMS_PER_PAGE from 14 to 25 for improved pagination

.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-  },
-};

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies

src/components/quota/QuotaSection.tsx

@@ -24,7 +24,7 @@ type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
 
 type ViewMode = 'paged' | 'all';
 
-const MAX_ITEMS_PER_PAGE = 14;
+const MAX_ITEMS_PER_PAGE = 25;
 const MAX_SHOW_ALL_THRESHOLD = 30;
 
 interface QuotaPaginationState<T> {

src/pages/AiProvidersAmpcodeEditPage.tsx

@@ -254,17 +254,8 @@ export function AiProvidersAmpcodeEditPage() {
           disabled={loading || saving || disableControls}
           hint={t('ai_providers.ampcode_upstream_api_key_hint')}
         />
-        <div
-          style={{
-            display: 'flex',
-            gap: 8,
-            alignItems: 'center',
-            marginTop: -8,
-            marginBottom: 12,
-            flexWrap: 'wrap',
-          }}
-        >
-          <div className="hint" style={{ margin: 0 }}>
+        <div className={layoutStyles.upstreamApiKeyRow}>
+          <div className={layoutStyles.upstreamApiKeyHint}>
             {t('ai_providers.ampcode_upstream_api_key_current', {
               key: config?.ampcode?.upstreamApiKey
                 ? maskApiKey(config.ampcode.upstreamApiKey)

src/pages/AiProvidersEditLayout.module.scss

@@ -3,3 +3,17 @@
   max-width: 960px;
   margin: 0 auto;
 }
+
+.upstreamApiKeyRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.upstreamApiKeyHint {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+}

src/pages/AiProvidersOpenAIEditPage.tsx

@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/Card';
 import { HeaderInputList } from '@/components/ui/HeaderInputList';
 import { Input } from '@/components/ui/Input';
 import { ModelInputList } from '@/components/ui/ModelInputList';
+import { Select } from '@/components/ui/Select';
 import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
 import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
 import { useNotificationStore } from '@/stores';
@@ -139,6 +140,20 @@ export function AiProvidersOpenAIEditPage() {
   const canSave = !disableControls && !loading && !saving && !invalidIndexParam && !invalidIndex && !isTestingKeys;
   const hasConfiguredModels = form.modelEntries.some((entry) => entry.name.trim());
   const hasTestableKeys = form.apiKeyEntries.some((entry) => entry.apiKey?.trim());
+  const modelSelectOptions = useMemo(() => {
+    const seen = new Set<string>();
+    return form.modelEntries.reduce<Array<{ value: string; label: string }>>((acc, entry) => {
+      const name = entry.name.trim();
+      if (!name || seen.has(name)) return acc;
+      seen.add(name);
+      const alias = entry.alias.trim();
+      acc.push({
+        value: name,
+        label: alias && alias !== name ? `${name} (${alias})` : name,
+      });
+      return acc;
+    }, []);
+  }, [form.modelEntries]);
   const connectivityConfigSignature = useMemo(() => {
     const headersSignature = form.headers
       .map((entry) => `${entry.key.trim()}:${entry.value.trim()}`)
@@ -496,9 +511,9 @@ export function AiProvidersOpenAIEditPage() {
     >
       <Card>
         {invalidIndexParam || invalidIndex ? (
-          <div className="hint">{t('common.invalid_provider_index')}</div>
+          <div className={styles.sectionHint}>{t('common.invalid_provider_index')}</div>
         ) : (
-          <>
+          <div className={styles.openaiEditForm}>
             <Input
               label={t('ai_providers.openai_add_modal_name_label')}
               value={form.name}
@@ -564,7 +579,7 @@ export function AiProvidersOpenAIEditPage() {
               </div>
 
               {/* 提示文本 */}
-              <div className="hint">{t('ai_providers.openai_models_hint')}</div>
+              <div className={styles.sectionHint}>{t('ai_providers.openai_models_hint')}</div>
 
               {/* 模型列表 */}
               <ModelInputList
@@ -589,34 +604,23 @@ export function AiProvidersOpenAIEditPage() {
                   <span className={styles.modelTestHint}>{t('ai_providers.openai_test_hint')}</span>
                 </div>
                 <div className={styles.modelTestControls}>
-                  <select
-                    className={`input ${styles.openaiTestSelect}`}
+                  <Select
                     value={testModel}
-                    onChange={(e) => {
-                      setTestModel(e.target.value);
+                    options={modelSelectOptions}
+                    onChange={(value) => {
+                      setTestModel(value);
                       setTestStatus('idle');
                       setTestMessage('');
                     }}
-                    disabled={saving || disableControls || isTestingKeys || testStatus === 'loading' || availableModels.length === 0}
-                  >
-                    <option value="">
-                      {availableModels.length
+                    placeholder={
+                      availableModels.length
                         ? t('ai_providers.openai_test_select_placeholder')
-                        : t('ai_providers.openai_test_select_empty')}
-                    </option>
-                    {form.modelEntries
-                      .filter((entry) => entry.name.trim())
-                      .map((entry, idx) => {
-                        const name = entry.name.trim();
-                        const alias = entry.alias.trim();
-                        const label = alias && alias !== name ? `${name} (${alias})` : name;
-                        return (
-                          <option key={`${name}-${idx}`} value={name}>
-                            {label}
-                          </option>
-                        );
-                      })}
-                  </select>
+                        : t('ai_providers.openai_test_select_empty')
+                    }
+                    className={styles.openaiTestSelect}
+                    ariaLabel={t('ai_providers.openai_test_title')}
+                    disabled={saving || disableControls || isTestingKeys || testStatus === 'loading' || availableModels.length === 0}
+                  />
                   <Button
                     variant={testStatus === 'error' ? 'danger' : 'secondary'}
                     size="sm"
@@ -645,14 +649,14 @@ export function AiProvidersOpenAIEditPage() {
               )}
             </div>
 
-            <div className={`form-group ${styles.keyEntriesSection}`}>
+            <div className={styles.keyEntriesSection}>
               <div className={styles.keyEntriesHeader}>
-                <label>{t('ai_providers.openai_add_modal_keys_label')}</label>
+                <label className={styles.keyEntriesTitle}>{t('ai_providers.openai_add_modal_keys_label')}</label>
                 <span className={styles.keyEntriesHint}>{t('ai_providers.openai_keys_hint')}</span>
               </div>
               {renderKeyEntries(form.apiKeyEntries)}
             </div>
-          </>
+          </div>
         )}
       </Card>
     </SecondaryScreenShell>

src/pages/AiProvidersOpenAIModelsPage.tsx

@@ -153,70 +153,76 @@ export function AiProvidersOpenAIModelsPage() {
       loadingLabel={t('common.loading')}
     >
       <Card>
-        <div className="hint" style={{ marginBottom: 8 }}>
-          {t('ai_providers.openai_models_fetch_hint')}
-        </div>
-        <div className="form-group">
-          <label>{t('ai_providers.openai_models_fetch_url_label')}</label>
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-            <input className="input" readOnly value={endpoint} />
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => void fetchOpenaiModelDiscovery({ allowFallback: true })}
-              loading={fetching}
-              disabled={disableControls || saving}
-            >
-              {t('ai_providers.openai_models_fetch_refresh')}
-            </Button>
+        <div className={styles.openaiModelsContent}>
+          <div className={styles.sectionHint}>{t('ai_providers.openai_models_fetch_hint')}</div>
+          <div className={styles.openaiModelsEndpointSection}>
+            <label className={styles.openaiModelsEndpointLabel}>
+              {t('ai_providers.openai_models_fetch_url_label')}
+            </label>
+            <div className={styles.openaiModelsEndpointControls}>
+              <input
+                className={`input ${styles.openaiModelsEndpointInput}`}
+                readOnly
+                value={endpoint}
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => void fetchOpenaiModelDiscovery({ allowFallback: true })}
+                loading={fetching}
+                disabled={disableControls || saving}
+              >
+                {t('ai_providers.openai_models_fetch_refresh')}
+              </Button>
+            </div>
           </div>
-        </div>
-        <Input
-          label={t('ai_providers.openai_models_search_label')}
-          placeholder={t('ai_providers.openai_models_search_placeholder')}
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          disabled={fetching}
-        />
-        {error && <div className="error-box">{error}</div>}
-        {fetching ? (
-          <div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
-        ) : models.length === 0 ? (
-          <div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
-        ) : filteredModels.length === 0 ? (
-          <div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
-        ) : (
-          <div className={styles.modelDiscoveryList}>
-            {filteredModels.map((model) => {
-              const checked = selected.has(model.name);
-              return (
-                <label
-                  key={model.name}
-                  className={`${styles.modelDiscoveryRow} ${
-                    checked ? styles.modelDiscoveryRowSelected : ''
-                  }`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={checked}
-                    onChange={() => toggleSelection(model.name)}
-                  />
-                  <div className={styles.modelDiscoveryMeta}>
-                    <div className={styles.modelDiscoveryName}>
-                      {model.name}
-                      {model.alias && (
-                        <span className={styles.modelDiscoveryAlias}>{model.alias}</span>
+          <Input
+            label={t('ai_providers.openai_models_search_label')}
+            placeholder={t('ai_providers.openai_models_search_placeholder')}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            disabled={fetching}
+          />
+          {error && <div className="error-box">{error}</div>}
+          {fetching ? (
+            <div className={styles.sectionHint}>{t('ai_providers.openai_models_fetch_loading')}</div>
+          ) : models.length === 0 ? (
+            <div className={styles.sectionHint}>{t('ai_providers.openai_models_fetch_empty')}</div>
+          ) : filteredModels.length === 0 ? (
+            <div className={styles.sectionHint}>{t('ai_providers.openai_models_search_empty')}</div>
+          ) : (
+            <div className={styles.modelDiscoveryList}>
+              {filteredModels.map((model) => {
+                const checked = selected.has(model.name);
+                return (
+                  <label
+                    key={model.name}
+                    className={`${styles.modelDiscoveryRow} ${
+                      checked ? styles.modelDiscoveryRowSelected : ''
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={() => toggleSelection(model.name)}
+                    />
+                    <div className={styles.modelDiscoveryMeta}>
+                      <div className={styles.modelDiscoveryName}>
+                        {model.name}
+                        {model.alias && (
+                          <span className={styles.modelDiscoveryAlias}>{model.alias}</span>
+                        )}
+                      </div>
+                      {model.description && (
+                        <div className={styles.modelDiscoveryDesc}>{model.description}</div>
                       )}
                     </div>
-                    {model.description && (
-                      <div className={styles.modelDiscoveryDesc}>{model.description}</div>
-                    )}
-                  </div>
-                </label>
-              );
-            })}
-          </div>
-        )}
+                  </label>
+                );
+              })}
+            </div>
+          )}
+        </div>
       </Card>
     </SecondaryScreenShell>
   );

src/pages/AiProvidersPage.module.scss

@@ -322,7 +322,7 @@
   gap: 6px;
   max-height: 360px;
   overflow-y: auto;
-  margin-top: 8px;
+  margin-top: 0;
   padding-right: 4px;
 }
 
@@ -561,11 +561,72 @@
 // Model Config Section - Unified Layout
 // ============================================
 
-.modelConfigSection {
-  margin-bottom: $spacing-md;
+.openaiEditForm {
   display: flex;
   flex-direction: column;
+  gap: $spacing-md;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+
+  :global(.status-badge) {
+    margin-bottom: 0;
+    align-self: flex-start;
+  }
+}
+
+.sectionHint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.openaiModelsContent {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.openaiModelsEndpointSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.openaiModelsEndpointLabel {
+  display: block;
+  margin: 0;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.openaiModelsEndpointControls {
+  display: flex;
+  align-items: center;
   gap: $spacing-sm;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.openaiModelsEndpointInput {
+  flex: 1;
+  min-width: 0;
+}
+
+.modelConfigSection {
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
 }
 
 .modelConfigHeader {
@@ -581,10 +642,11 @@
 }
 
 .modelConfigTitle {
+  margin: 0;
   font-weight: 600;
   color: var(--text-primary);
   font-size: 14px;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .modelConfigToolbar {
@@ -646,7 +708,7 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: $spacing-md;
-  margin-top: $spacing-sm;
+  margin-top: 0;
   padding: $spacing-sm $spacing-md;
   border: 1px solid var(--border-color);
   border-radius: $radius-md;
@@ -661,7 +723,7 @@
 .modelTestMeta {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
   min-width: 0;
 }
 
@@ -669,13 +731,13 @@
   font-size: 13px;
   font-weight: 600;
   color: var(--text-secondary);
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .modelTestHint {
   font-size: 12px;
   color: var(--text-tertiary);
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .modelTestControls {
@@ -697,22 +759,29 @@
 
 .keyEntriesSection {
   margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
 }
 
 .keyEntriesHeader {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: $spacing-sm;
+  gap: 6px;
+  margin-bottom: 0;
+}
 
-  label {
-    margin: 0;
-  }
+.keyEntriesTitle {
+  display: block;
+  margin: 0;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.5;
 }
 
 .keyEntriesHint {
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.5;
   color: var(--text-secondary);
 }
 

src/pages/OAuthPage.module.scss

@@ -28,6 +28,35 @@
   gap: $spacing-xl;
 }
 
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+
+  :global(.status-badge) {
+    margin-bottom: 0;
+    align-self: flex-start;
+  }
+}
+
+.cardHint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.cardHintSecondary {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-tertiary);
+}
+
 .oauthSection {
   display: flex;
   flex-direction: column;
@@ -72,10 +101,10 @@
 }
 
 .callbackSection {
-  margin-top: $spacing-md;
+  margin-top: 0;
   display: flex;
   flex-direction: column;
-  gap: $spacing-xs;
+  gap: $spacing-sm;
 }
 
 .callbackActions {
@@ -117,11 +146,24 @@
 
 .geminiProjectField {
   :global(.form-group) {
-    margin-top: $spacing-sm;
+    margin-top: 0;
+    margin-bottom: 0;
     gap: $spacing-sm;
   }
 }
 
+.formItem {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.formItemLabel {
+  margin: 0;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
 .filePicker {
   display: flex;
   align-items: center;
@@ -143,3 +185,49 @@
 .fileNamePlaceholder {
   color: var(--text-secondary);
 }
+
+.connectionBox {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.connectionLabel {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.keyValueList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.keyValueItem {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 10px;
+  align-items: start;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+
+.keyValueKey {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.keyValueValue {
+  color: var(--text-primary);
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}

src/pages/OAuthPage.tsx

@@ -358,88 +358,90 @@ export function OAuthPage() {
                   </Button>
                 }
               >
-                <div className="hint">{t(provider.hintKey)}</div>
-                {provider.id === 'gemini-cli' && (
-                  <div className={styles.geminiProjectField}>
-                    <Input
-                      label={t('auth_login.gemini_cli_project_id_label')}
-                      hint={t('auth_login.gemini_cli_project_id_hint')}
-                      value={state.projectId || ''}
-                      error={state.projectIdError}
-                      onChange={(e) =>
-                        updateProviderState(provider.id, {
-                          projectId: e.target.value,
-                          projectIdError: undefined
-                        })
-                      }
-                      placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
-                    />
-                  </div>
-                )}
-                {state.url && (
-                  <div className={`connection-box ${styles.authUrlBox}`}>
-                    <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
-                    <div className={styles.authUrlValue}>{state.url}</div>
-                    <div className={styles.authUrlActions}>
-                      <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
-                        {t(getAuthKey(provider.id, 'copy_link'))}
-                      </Button>
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
-                      >
-                        {t(getAuthKey(provider.id, 'open_link'))}
-                      </Button>
+                <div className={styles.cardContent}>
+                  <div className={styles.cardHint}>{t(provider.hintKey)}</div>
+                  {provider.id === 'gemini-cli' && (
+                    <div className={styles.geminiProjectField}>
+                      <Input
+                        label={t('auth_login.gemini_cli_project_id_label')}
+                        hint={t('auth_login.gemini_cli_project_id_hint')}
+                        value={state.projectId || ''}
+                        error={state.projectIdError}
+                        onChange={(e) =>
+                          updateProviderState(provider.id, {
+                            projectId: e.target.value,
+                            projectIdError: undefined
+                          })
+                        }
+                        placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
+                      />
                     </div>
-                  </div>
-                )}
-                {canSubmitCallback && (
-                  <div className={styles.callbackSection}>
-                    <Input
-                      label={t('auth_login.oauth_callback_label')}
-                      hint={t('auth_login.oauth_callback_hint')}
-                      value={state.callbackUrl || ''}
-                      onChange={(e) =>
-                        updateProviderState(provider.id, {
-                          callbackUrl: e.target.value,
-                          callbackStatus: undefined,
-                          callbackError: undefined
-                        })
-                      }
-                      placeholder={t('auth_login.oauth_callback_placeholder')}
-                    />
-                    <div className={styles.callbackActions}>
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => submitCallback(provider.id)}
-                        loading={state.callbackSubmitting}
-                      >
-                        {t('auth_login.oauth_callback_button')}
-                      </Button>
+                  )}
+                  {state.url && (
+                    <div className={styles.authUrlBox}>
+                      <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
+                      <div className={styles.authUrlValue}>{state.url}</div>
+                      <div className={styles.authUrlActions}>
+                        <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
+                          {t(getAuthKey(provider.id, 'copy_link'))}
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
+                        >
+                          {t(getAuthKey(provider.id, 'open_link'))}
+                        </Button>
+                      </div>
                     </div>
-                    {state.callbackStatus === 'success' && state.status === 'waiting' && (
-                      <div className="status-badge success" style={{ marginTop: 8 }}>
-                        {t('auth_login.oauth_callback_status_success')}
+                  )}
+                  {canSubmitCallback && (
+                    <div className={styles.callbackSection}>
+                      <Input
+                        label={t('auth_login.oauth_callback_label')}
+                        hint={t('auth_login.oauth_callback_hint')}
+                        value={state.callbackUrl || ''}
+                        onChange={(e) =>
+                          updateProviderState(provider.id, {
+                            callbackUrl: e.target.value,
+                            callbackStatus: undefined,
+                            callbackError: undefined
+                          })
+                        }
+                        placeholder={t('auth_login.oauth_callback_placeholder')}
+                      />
+                      <div className={styles.callbackActions}>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          onClick={() => submitCallback(provider.id)}
+                          loading={state.callbackSubmitting}
+                        >
+                          {t('auth_login.oauth_callback_button')}
+                        </Button>
                       </div>
-                    )}
-                    {state.callbackStatus === 'error' && (
-                      <div className="status-badge error" style={{ marginTop: 8 }}>
-                        {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
-                      </div>
-                    )}
-                  </div>
-                )}
-                {state.status && state.status !== 'idle' && (
-                  <div className="status-badge" style={{ marginTop: 8 }}>
-                    {state.status === 'success'
-                      ? t(getAuthKey(provider.id, 'oauth_status_success'))
-                      : state.status === 'error'
-                        ? `${t(getAuthKey(provider.id, 'oauth_status_error'))} ${state.error || ''}`
-                        : t(getAuthKey(provider.id, 'oauth_status_waiting'))}
-                  </div>
-                )}
+                      {state.callbackStatus === 'success' && state.status === 'waiting' && (
+                        <div className="status-badge success">
+                          {t('auth_login.oauth_callback_status_success')}
+                        </div>
+                      )}
+                      {state.callbackStatus === 'error' && (
+                        <div className="status-badge error">
+                          {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {state.status && state.status !== 'idle' && (
+                    <div className="status-badge">
+                      {state.status === 'success'
+                        ? t(getAuthKey(provider.id, 'oauth_status_success'))
+                        : state.status === 'error'
+                          ? `${t(getAuthKey(provider.id, 'oauth_status_error'))} ${state.error || ''}`
+                          : t(getAuthKey(provider.id, 'oauth_status_waiting'))}
+                    </div>
+                  )}
+                </div>
               </Card>
             </div>
           );
@@ -459,78 +461,80 @@ export function OAuthPage() {
             </Button>
           }
         >
-          <div className="hint">{t('vertex_import.description')}</div>
-          <Input
-            label={t('vertex_import.location_label')}
-            hint={t('vertex_import.location_hint')}
-            value={vertexState.location}
-            onChange={(e) =>
-              setVertexState((prev) => ({
-                ...prev,
-                location: e.target.value
-              }))
-            }
-            placeholder={t('vertex_import.location_placeholder')}
-          />
-          <div className="form-group">
-            <label>{t('vertex_import.file_label')}</label>
-            <div className={styles.filePicker}>
-              <Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
-                {t('vertex_import.choose_file')}
-              </Button>
-              <div
-                className={`${styles.fileName} ${
-                  vertexState.fileName ? '' : styles.fileNamePlaceholder
-                }`.trim()}
-              >
-                {vertexState.fileName || t('vertex_import.file_placeholder')}
-              </div>
-            </div>
-            <div className="hint">{t('vertex_import.file_hint')}</div>
-            <input
-              ref={vertexFileInputRef}
-              type="file"
-              accept=".json,application/json"
-              style={{ display: 'none' }}
-              onChange={handleVertexFileChange}
+          <div className={styles.cardContent}>
+            <div className={styles.cardHint}>{t('vertex_import.description')}</div>
+            <Input
+              label={t('vertex_import.location_label')}
+              hint={t('vertex_import.location_hint')}
+              value={vertexState.location}
+              onChange={(e) =>
+                setVertexState((prev) => ({
+                  ...prev,
+                  location: e.target.value
+                }))
+              }
+              placeholder={t('vertex_import.location_placeholder')}
             />
-          </div>
-          {vertexState.error && (
-            <div className="status-badge error" style={{ marginTop: 8 }}>
-              {vertexState.error}
-            </div>
-          )}
-          {vertexState.result && (
-            <div className="connection-box" style={{ marginTop: 12 }}>
-              <div className="label">{t('vertex_import.result_title')}</div>
-              <div className="key-value-list">
-                {vertexState.result.projectId && (
-                  <div className="key-value-item">
-                    <span className="key">{t('vertex_import.result_project')}</span>
-                    <span className="value">{vertexState.result.projectId}</span>
-                  </div>
-                )}
-                {vertexState.result.email && (
-                  <div className="key-value-item">
-                    <span className="key">{t('vertex_import.result_email')}</span>
-                    <span className="value">{vertexState.result.email}</span>
-                  </div>
-                )}
-                {vertexState.result.location && (
-                  <div className="key-value-item">
-                    <span className="key">{t('vertex_import.result_location')}</span>
-                    <span className="value">{vertexState.result.location}</span>
-                  </div>
-                )}
-                {vertexState.result.authFile && (
-                  <div className="key-value-item">
-                    <span className="key">{t('vertex_import.result_file')}</span>
-                    <span className="value">{vertexState.result.authFile}</span>
-                  </div>
-                )}
+            <div className={styles.formItem}>
+              <label className={styles.formItemLabel}>{t('vertex_import.file_label')}</label>
+              <div className={styles.filePicker}>
+                <Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
+                  {t('vertex_import.choose_file')}
+                </Button>
+                <div
+                  className={`${styles.fileName} ${
+                    vertexState.fileName ? '' : styles.fileNamePlaceholder
+                  }`.trim()}
+                >
+                  {vertexState.fileName || t('vertex_import.file_placeholder')}
+                </div>
               </div>
+              <div className={styles.cardHintSecondary}>{t('vertex_import.file_hint')}</div>
+              <input
+                ref={vertexFileInputRef}
+                type="file"
+                accept=".json,application/json"
+                style={{ display: 'none' }}
+                onChange={handleVertexFileChange}
+              />
             </div>
-          )}
+            {vertexState.error && (
+              <div className="status-badge error">
+                {vertexState.error}
+              </div>
+            )}
+            {vertexState.result && (
+              <div className={styles.connectionBox}>
+                <div className={styles.connectionLabel}>{t('vertex_import.result_title')}</div>
+                <div className={styles.keyValueList}>
+                  {vertexState.result.projectId && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('vertex_import.result_project')}</span>
+                      <span className={styles.keyValueValue}>{vertexState.result.projectId}</span>
+                    </div>
+                  )}
+                  {vertexState.result.email && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('vertex_import.result_email')}</span>
+                      <span className={styles.keyValueValue}>{vertexState.result.email}</span>
+                    </div>
+                  )}
+                  {vertexState.result.location && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('vertex_import.result_location')}</span>
+                      <span className={styles.keyValueValue}>{vertexState.result.location}</span>
+                    </div>
+                  )}
+                  {vertexState.result.authFile && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('vertex_import.result_file')}</span>
+                      <span className={styles.keyValueValue}>{vertexState.result.authFile}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
         </Card>
 
         {/* iFlow Cookie 登录 */}
@@ -547,60 +551,61 @@ export function OAuthPage() {
             </Button>
           }
         >
-          <div className="hint">{t('auth_login.iflow_cookie_hint')}</div>
-          <div className="hint" style={{ marginTop: 4 }}>
-            {t('auth_login.iflow_cookie_key_hint')}
-          </div>
-          <div className="form-item" style={{ marginTop: 12 }}>
-            <label className="label">{t('auth_login.iflow_cookie_label')}</label>
-            <Input
-              value={iflowCookie.cookie}
-              onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
-              placeholder={t('auth_login.iflow_cookie_placeholder')}
-            />
-          </div>
-          {iflowCookie.error && (
-            <div
-              className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
-              style={{ marginTop: 8 }}
-            >
-              {iflowCookie.errorType === 'warning'
-                ? t('auth_login.iflow_cookie_status_duplicate')
-                : t('auth_login.iflow_cookie_status_error')}{' '}
-              {iflowCookie.error}
+          <div className={styles.cardContent}>
+            <div className={styles.cardHint}>{t('auth_login.iflow_cookie_hint')}</div>
+            <div className={styles.cardHintSecondary}>
+              {t('auth_login.iflow_cookie_key_hint')}
             </div>
-          )}
-          {iflowCookie.result && iflowCookie.result.status === 'ok' && (
-            <div className="connection-box" style={{ marginTop: 12 }}>
-              <div className="label">{t('auth_login.iflow_cookie_result_title')}</div>
-              <div className="key-value-list">
-                {iflowCookie.result.email && (
-                  <div className="key-value-item">
-                    <span className="key">{t('auth_login.iflow_cookie_result_email')}</span>
-                    <span className="value">{iflowCookie.result.email}</span>
-                  </div>
-                )}
-                {iflowCookie.result.expired && (
-                  <div className="key-value-item">
-                    <span className="key">{t('auth_login.iflow_cookie_result_expired')}</span>
-                    <span className="value">{iflowCookie.result.expired}</span>
-                  </div>
-                )}
-                {iflowCookie.result.saved_path && (
-                  <div className="key-value-item">
-                    <span className="key">{t('auth_login.iflow_cookie_result_path')}</span>
-                    <span className="value">{iflowCookie.result.saved_path}</span>
-                  </div>
-                )}
-                {iflowCookie.result.type && (
-                  <div className="key-value-item">
-                    <span className="key">{t('auth_login.iflow_cookie_result_type')}</span>
-                    <span className="value">{iflowCookie.result.type}</span>
-                  </div>
-                )}
+            <div className={styles.formItem}>
+              <label className={styles.formItemLabel}>{t('auth_login.iflow_cookie_label')}</label>
+              <Input
+                value={iflowCookie.cookie}
+                onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
+                placeholder={t('auth_login.iflow_cookie_placeholder')}
+              />
+            </div>
+            {iflowCookie.error && (
+              <div
+                className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
+              >
+                {iflowCookie.errorType === 'warning'
+                  ? t('auth_login.iflow_cookie_status_duplicate')
+                  : t('auth_login.iflow_cookie_status_error')}{' '}
+                {iflowCookie.error}
               </div>
-            </div>
-          )}
+            )}
+            {iflowCookie.result && iflowCookie.result.status === 'ok' && (
+              <div className={styles.connectionBox}>
+                <div className={styles.connectionLabel}>{t('auth_login.iflow_cookie_result_title')}</div>
+                <div className={styles.keyValueList}>
+                  {iflowCookie.result.email && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_email')}</span>
+                      <span className={styles.keyValueValue}>{iflowCookie.result.email}</span>
+                    </div>
+                  )}
+                  {iflowCookie.result.expired && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_expired')}</span>
+                      <span className={styles.keyValueValue}>{iflowCookie.result.expired}</span>
+                    </div>
+                  )}
+                  {iflowCookie.result.saved_path && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_path')}</span>
+                      <span className={styles.keyValueValue}>{iflowCookie.result.saved_path}</span>
+                    </div>
+                  )}
+                  {iflowCookie.result.type && (
+                    <div className={styles.keyValueItem}>
+                      <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_type')}</span>
+                      <span className={styles.keyValueValue}>{iflowCookie.result.type}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
         </Card>
       </div>
     </div>

src/pages/UsagePage.module.scss

@@ -932,7 +932,7 @@
 }
 
 .healthTitle {
-  font-size: 14px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;