perf: replace shell icon bundle

2026-06-05 20:42:34 +08:00
parent 6f7355e689
commit 9a0be35501
7 changed files with 417 additions and 116 deletions
@@ -1,18 +1,9 @@
-import {
-  BarChartOutlined,
-  CheckCircleFilled,
-  CopyOutlined,
-  DownloadOutlined,
-  FileTextOutlined,
-  LoadingOutlined,
-  ThunderboltOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
 import "../../styles/pages/script-tokens-v5.css";
 import "../../styles/pages/script-tokens.css";
 import { evaluateScript } from "../../api/scriptEvalClient";
 import { buildApiUrl, getStoredToken } from "../../api/serverConnection";
+import { ShellIcon } from "../../components/ShellIcon";
 import { useSessionStore } from "../../stores";

 interface ScoreDimension {
@@ -494,7 +485,7 @@ function ScriptTokensPage() {
              >
                {uploadedFile ? (
                  <div className="script-eval-v5-upload-done is-show">
-                    <CheckCircleFilled />
+                    <ShellIcon name="check-circle" />
                    <span className="script-eval-v5-uf-meta">
                      <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
                      <span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</span>
@@ -505,10 +496,10 @@ function ScriptTokensPage() {
                  </div>
                ) : (
                  <>
-                    <div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
+                    <div className="script-eval-v5-upload-icon"><ShellIcon name="upload" /></div>
                    <div className="script-eval-v5-upload-text">拖拽或点击上传</div>
                    <button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
-                      <UploadOutlined /> 选择剧本
+                      <ShellIcon name="upload" /> 选择剧本
                    </button>
                    <div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div>
                  </>
@@ -581,11 +572,11 @@ function ScriptTokensPage() {
                disabled={loading || !hasContent}
                onClick={() => void handleEvaluate()}
              >
-                {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+                {loading ? <ShellIcon name="loading" /> : <ShellIcon name="thunderbolt" />}
                <span>{loading ? "评测中..." : "开始评测"}</span>
              </button>
              <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-                <DownloadOutlined />
+                <ShellIcon name="download" />
                <span>导出评测报告</span>
              </button>
            </div>
@@ -603,10 +594,10 @@ function ScriptTokensPage() {
              {result && (
                <>
                  <button type="button" className="script-eval-v5-action-btn" onClick={() => void handleCopyReport()}>
-                    <CopyOutlined />{copied ? "已复制" : "复制"}
+                    <ShellIcon name="copy" />{copied ? "已复制" : "复制"}
                  </button>
                  <button type="button" className="script-eval-v5-action-btn" onClick={handleExportMarkdown}>
-                    <DownloadOutlined />导出
+                    <ShellIcon name="download" />导出
                  </button>
                </>
              )}
@@ -640,7 +631,7 @@ function ScriptTokensPage() {
                    onKeyDown={uploadKeyDown}
                  >
                    <div className="script-eval-v5-upload-card-icon">
-                      <FileTextOutlined />
+                      <ShellIcon name="file-text" />
                    </div>
                    <div className="script-eval-v5-upload-card-title">
                      {uploadedFile ? "剧本已导入" : "上传剧本文件"}
@@ -744,7 +735,7 @@ function ScriptTokensPage() {
                      </div>
                    </div>
                    <div className="script-eval-report__chart-note">
-                      <BarChartOutlined />
+                      <ShellIcon name="bar-chart" />
                      <span>
                        {activeDim === null
                          ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
@@ -1,16 +1,5 @@
-import {
-  ArrowLeftOutlined,
-  BarChartOutlined,
-  CheckCircleOutlined,
-  LeftOutlined,
-  LineChartOutlined,
-  ReloadOutlined,
-  RightOutlined,
-  TeamOutlined,
-  UserOutlined,
-  WarningOutlined,
-} from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { ShellIcon } from "../../components/ShellIcon";
 import "../../styles/pages/more-tools.css";
 import "../../styles/pages/script-tokens-v5.css";
 import "../../styles/pages/script-tokens.css";
@@ -246,7 +235,7 @@ function TokenUsagePage({
        <header className="management-center-toolbar" aria-label="管理中心操作">
          <div className="management-center-toolbar__title">
            <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
-              <ArrowLeftOutlined />
+              <ShellIcon name="arrow-left" />
            </button>
            <span>
              <strong>管理中心</strong>
@@ -257,18 +246,18 @@ function TokenUsagePage({
            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
          </span>
          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
-            <ReloadOutlined />
+            <ShellIcon name="reload" />
            刷新数据
          </button>
          <button type="button" className="is-muted-action">
-            <UserOutlined />
+            <ShellIcon name="user" />
            成员管理
          </button>
        </header>

        {isLowBalance ? (
          <div className="management-balance-alert" role="alert">
-            <WarningOutlined />
+            <ShellIcon name="warning" />
            <span>当前余额 {formatCredits(availableBalanceCents)}，可能不足以完成下一次生成，请及时充值。</span>
          </div>
        ) : null}
@@ -287,7 +276,7 @@ function TokenUsagePage({
          <article className="management-card management-card--chart">
            <div className="management-card__head">
              <h2>
-                <BarChartOutlined />
+                <ShellIcon name="bar-chart" />
                模型消耗分布
              </h2>
              <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
@@ -309,7 +298,7 @@ function TokenUsagePage({
              </div>
            ) : (
              <div className="management-empty-chart">
-                <BarChartOutlined />
+                <ShellIcon name="bar-chart" />
                <span>暂无模型用量数据</span>
              </div>
            )}
@@ -318,7 +307,7 @@ function TokenUsagePage({
          <article className="management-card management-status-card">
            <div className="management-card__head">
              <h2>
-                <LineChartOutlined />
+                <ShellIcon name="line-chart" />
                系统状态
              </h2>
            </div>
@@ -347,7 +336,7 @@ function TokenUsagePage({
        <section className="management-card management-members">
          <div className="management-card__head">
            <h2>
-              <TeamOutlined />
+              <ShellIcon name="team" />
              团队成员 ({members.length})
            </h2>
            <button type="button">{isEnterpriseAdmin ? "企业管理员" : "当前账号"}</button>
@@ -366,7 +355,7 @@ function TokenUsagePage({
                  <b>{member.taskCount} 调用</b>
                  <b>{formatDateTime(member.lastUsedAt)}</b>
                </span>
-                <CheckCircleOutlined />
+                <ShellIcon name="check-circle" />
              </article>
            ))}
          </div>
@@ -375,7 +364,7 @@ function TokenUsagePage({
        <section className="management-card management-records">
          <div className="management-card__head">
            <h2>
-              <BarChartOutlined />
+              <ShellIcon name="bar-chart" />
              调用记录
            </h2>
            <span>{records.length} 条记录</span>
@@ -411,11 +400,11 @@ function TokenUsagePage({
          {records.length > pageSize && (
            <div className="management-record-pagination">
              <button type="button" disabled={recordPage === 0} onClick={() => setRecordPage((p) => p - 1)}>
-                <LeftOutlined />
+                <ShellIcon name="chevron-left" />
              </button>
              <span>{recordPage + 1} / {totalPages}</span>
              <button type="button" disabled={recordPage >= totalPages - 1} onClick={() => setRecordPage((p) => p + 1)}>
-                <RightOutlined />
+                <ShellIcon name="chevron-right" />
              </button>
            </div>
          )}