diff --git a/frontend/src/App.css b/frontend/src/App.css index e6ad6e2..9afbf9a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1623,15 +1623,17 @@ body { } .scenario-chip--add .scenario-chip__icon { - font-size: 0.88rem; - font-weight: 300; - line-height: 1; + display: inline-flex; + align-items: center; } .scenario-chip__icon { font-size: 0.9rem; line-height: 1; flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; } .scenario-chip__name { @@ -1681,6 +1683,9 @@ body { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; } .device-select { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d485be6..df95d42 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -19,11 +19,34 @@ import { EditScenarioModal } from "./components/EditScenarioModal"; import { AuthProvider, useAuth } from "./lib/auth"; import { loadConfig, loadTheme, saveTheme } from "./lib/storage"; import { I18nContext, parseLocale, t } from "./lib/i18n"; +import { renderScenarioIconById } from "./lib/scenarioIcons"; import type { Locale } from "./lib/i18n"; import type { Theme } from "./types"; import type { UserScenario } from "./lib/api/scenarios"; import "./App.css"; +// ---- 统一 SVG 图标系统(Feather-style,stroke-based) ---- + +const SVG_PROPS = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const }; + +/** 系统情景 SVG 图标映射 */ +function scenarioSvgIcon(id: string) { + switch (id) { + case "free_chat": + return (); + case "interviewer": + return (); + case "english_teacher": + return (); + case "debate": + return (); + case "interpreter": + return (); + default: + return null; + } +} + /** 内部组件,确保在 I18nContext.Provider 内部使用 hooks */ function AppContent() { const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth(); @@ -378,7 +401,7 @@ function AppContent() {