feat:update icon

2026-02-18 10:40:50 +08:00 · 2025-12-13 00:51:01 +08:00
parent bcf82252ea
commit a7b77ffa25
16 changed files with 370 additions and 124 deletions
--- a/src/pages/AiProvidersPage.module.scss
+++ b/src/pages/AiProvidersPage.module.scss
@@ -274,6 +274,10 @@
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
+
+  svg {
+    display: block;
+  }
 }

 .apiKeyEntryStatSuccess {
--- a/src/pages/AiProvidersPage.tsx
+++ b/src/pages/AiProvidersPage.tsx
@@ -7,6 +7,7 @@ import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { HeaderInputList } from '@/components/ui/HeaderInputList';
 import { ModelInputList, modelsToEntries, entriesToModels } from '@/components/ui/ModelInputList';
+import { IconCheck, IconX } from '@/components/ui/icons';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { modelsApi, providersApi, usageApi } from '@/services/api';
 import type {
@@ -1038,10 +1039,10 @@ export function AiProvidersPage() {
                            )}
                            <div className={styles.apiKeyEntryStats}>
                              <span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}>
-                                ✓ {entryStats.success}
+                                <IconCheck size={12} /> {entryStats.success}
                              </span>
                              <span className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}>
-                                ✗ {entryStats.failure}
+                                <IconX size={12} /> {entryStats.failure}
                              </span>
                            </div>
                          </div>
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -251,8 +251,7 @@
 }

 .actionIcon {
-  font-style: normal;
-  font-size: 14px;
+  display: block;
 }

 .virtualBadge {
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -6,6 +6,7 @@ import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
+import { IconDownload, IconInfo, IconTrash2 } from '@/components/ui/icons';
 import { useAuthStore, useNotificationStore, useThemeStore } from '@/stores';
 import { authFilesApi, usageApi } from '@/services/api';
 import { apiClient } from '@/services/api/client';
@@ -545,30 +546,33 @@ export function AuthFilesPage() {
                size="sm"
                onClick={() => showDetails(item)}
                className={styles.iconButton}
+                title={t('common.info', { defaultValue: '关于' })}
                disabled={disableControls}
              >
-                <i className={styles.actionIcon}>ℹ</i>
+                <IconInfo className={styles.actionIcon} size={16} />
              </Button>
              <Button
                variant="secondary"
                size="sm"
                onClick={() => handleDownload(item.name)}
                className={styles.iconButton}
+                title={t('auth_files.download_button')}
                disabled={disableControls}
              >
-                <i className={styles.actionIcon}>↓</i>
+                <IconDownload className={styles.actionIcon} size={16} />
              </Button>
              <Button
                variant="danger"
                size="sm"
                onClick={() => handleDelete(item.name)}
                className={styles.iconButton}
+                title={t('auth_files.delete_button')}
                disabled={disableControls || deleting === item.name}
              >
                {deleting === item.name ? (
                  <LoadingSpinner size={14} />
                ) : (
-                  <i className={styles.actionIcon}>🗑</i>
+                  <IconTrash2 className={styles.actionIcon} size={16} />
                )}
              </Button>
            </>
--- a/src/pages/ConfigPage.tsx
+++ b/src/pages/ConfigPage.tsx
@@ -7,6 +7,7 @@ import { keymap } from '@codemirror/view';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { IconChevronDown, IconChevronUp, IconSearch } from '@/components/ui/icons';
 import { useNotificationStore, useAuthStore, useThemeStore } from '@/stores';
 import { configFileApi } from '@/services/api/configFile';
 import styles from './ConfigPage.module.scss';
@@ -256,20 +257,7 @@ export function ConfigPage() {
                        disabled={!searchQuery || disableControls || loading}
                        title={t('config_management.search_button', { defaultValue: '搜索' })}
                      >
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          aria-hidden="true"
-                        >
-                          <circle cx="11" cy="11" r="8" />
-                          <line x1="21" y1="21" x2="16.65" y2="16.65" />
-                        </svg>
+                        <IconSearch size={16} />
                      </button>
                    </div>
                  }
@@ -283,7 +271,7 @@ export function ConfigPage() {
                  disabled={!searchQuery || lastSearchedQuery !== searchQuery || searchResults.total === 0}
                  title={t('config_management.search_prev', { defaultValue: '上一个' })}
                >
-                  ↑
+                  <IconChevronUp size={16} />
                </Button>
                <Button
                  variant="secondary"
@@ -292,7 +280,7 @@ export function ConfigPage() {
                  disabled={!searchQuery || lastSearchedQuery !== searchQuery || searchResults.total === 0}
                  title={t('config_management.search_next', { defaultValue: '下一个' })}
                >
-                  ↓
+                  <IconChevronDown size={16} />
                </Button>
              </div>
            </div>
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -3,6 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { IconEye, IconEyeOff } from '@/components/ui/icons';
 import { useAuthStore, useNotificationStore } from '@/stores';
 import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';

@@ -121,8 +122,18 @@ export function LoginPage() {
              type="button"
              className="btn btn-ghost btn-sm"
              onClick={() => setShowKey((prev) => !prev)}
+              aria-label={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
+              title={
+                showKey
+                  ? t('login.hide_key', { defaultValue: '隐藏密钥' })
+                  : t('login.show_key', { defaultValue: '显示密钥' })
+              }
            >
-              {showKey ? '🙈' : '👁️'}
+              {showKey ? <IconEyeOff size={16} /> : <IconEye size={16} />}
            </button>
          }
        />
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -111,6 +111,10 @@
  font-size: 13px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
+
+  svg {
+    display: block;
+  }
 }

 .statHeader {
--- a/src/pages/UsagePage.tsx
+++ b/src/pages/UsagePage.tsx
@@ -15,6 +15,7 @@ import { Line } from 'react-chartjs-2';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
 import { usageApi } from '@/services/api/usage';
 import {
  formatTokensInMillions,
@@ -319,7 +320,7 @@ export function UsagePage() {
    {
      key: 'requests',
      label: t('usage_stats.total_requests'),
-      icon: '🛰️',
+      icon: <IconSatellite size={16} />,
      accent: '#2563eb',
      value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
      meta: (
@@ -339,7 +340,7 @@ export function UsagePage() {
    {
      key: 'tokens',
      label: t('usage_stats.total_tokens'),
-      icon: '💠',
+      icon: <IconDiamond size={16} />,
      accent: '#8b5cf6',
      value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0),
      meta: (
@@ -357,7 +358,7 @@ export function UsagePage() {
    {
      key: 'rpm',
      label: t('usage_stats.rpm_30m'),
-      icon: '⏱️',
+      icon: <IconTimer size={16} />,
      accent: '#22c55e',
      value: loading ? '-' : formatPerMinuteValue(rateStats.rpm),
      meta: (
@@ -370,7 +371,7 @@ export function UsagePage() {
    {
      key: 'tpm',
      label: t('usage_stats.tpm_30m'),
-      icon: '📈',
+      icon: <IconTrendingUp size={16} />,
      accent: '#f97316',
      value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
      meta: (
@@ -383,7 +384,7 @@ export function UsagePage() {
    {
      key: 'cost',
      label: t('usage_stats.total_cost'),
-      icon: '💰',
+      icon: <IconDollarSign size={16} />,
      accent: '#f59e0b',
      value: loading ? '-' : hasPrices ? formatUsd(totalCost) : '--',
      meta: (