From cf9e2f5b590060e6dfd72f95e6218363f2c1fca5 Mon Sep 17 00:00:00 2001 From: Zichao Lin Date: Wed, 5 Aug 2026 08:05:58 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=86=85=E7=BD=AE=E5=93=81?= =?UTF-8?q?=E7=89=8C=E5=9B=BE=E6=A0=87=E5=BA=93=EF=BC=8Cbadge=20=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E7=9C=9F=E5=AE=9E=E5=B9=B3=E5=8F=B0=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=20=20-=20=E6=96=B0=E5=A2=9E=20app/static/icons.js=EF=BC=9A17?= =?UTF-8?q?=20=E4=B8=AA=E5=93=81=E7=89=8C=20SVG=20=E7=A6=BB=E7=BA=BF?= =?UTF-8?q?=E5=86=85=E5=B5=8C=20=20=20=EF=BC=88simple-icons=20CC0=20+=20ta?= =?UTF-8?q?bler=20MIT=EF=BC=9AOpenAI/Anthropic/Claude/DeepSeek/OpenRouter/?= =?UTF-8?q?=20=20=20=20Google/Gemini/Meta/Perplexity/HuggingFace/Replicate?= =?UTF-8?q?/Baidu/MiniMax/NVIDIA/Qwen/Ollama/LMStudio=EF=BC=89=20-=20badge?= =?UTF-8?q?=20=E6=B8=B2=E6=9F=93=EF=BC=9A=E6=9C=89=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=99=BD=E8=89=B2=E5=93=81=E7=89=8C=E5=9B=BE?= =?UTF-8?q?=E5=BD=A2=EF=BC=8C=E6=97=A0=E5=9B=BE=E6=A0=87=E5=9B=9E=E8=90=BD?= =?UTF-8?q?=E5=93=81=E7=89=8C=E8=89=B2=E7=BC=A9=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/app.js | 13 +++++++++++-- app/static/icons.js | 20 ++++++++++++++++++++ app/static/index.html | 1 + app/static/style.css | 2 ++ 4 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 app/static/icons.js diff --git a/app/static/app.js b/app/static/app.js index 6238bf5..b74b5d2 100644 --- a/app/static/app.js +++ b/app/static/app.js @@ -129,6 +129,15 @@ return { color, abbr }; } + /* 品牌图标 badge：有内嵌 SVG 显示真实图标，否则品牌色 + 缩写 */ + function badgeHtml(iconKey, color, abbr) { + const svg = BRAND_ICONS[iconKey]; + if (!svg) { + return `${escapeHtml(abbr)}`; + } + return `${svg}`; + } + /* ---------- 视图/状态 ---------- */ function switchView(name) { @@ -209,7 +218,7 @@ return `
-
${escapeHtml(b.abbr)}
+ ${badgeHtml(plat.icon || "", b.color, b.abbr)}
${escapeHtml(plat.name || "未知平台")} · ${escapeHtml(plat.currency || "")}
${escapeHtml(a.name)}
@@ -360,7 +369,7 @@ const rowCls = `platform-row ${p.enabled ? "" : "platform-off"}${animate ? "" : " no-anim"}`; return `
-
${escapeHtml(b.abbr)}
+ ${badgeHtml(p.icon || "", b.color, b.abbr)}
${escapeHtml(p.name)} ${p.enabled ? "" : '已停用'} diff --git a/app/static/icons.js b/app/static/icons.js new file mode 100644 index 0000000..8b809aa --- /dev/null +++ b/app/static/icons.js @@ -0,0 +1,20 @@ +/* 品牌图标（simple-icons CC0 / tabler MIT），离线内嵌 */ +const BRAND_ICONS = { + "Anthropic": "", + "Claude": "", + "DeepSeek": "", + "OpenRouter": "", + "Google": "", + "Gemini": "", + "Meta": "", + "Perplexity": "", + "HuggingFace": "", + "Replicate": "", + "Baidu": "", + "MiniMax": "", + "NVIDIA": "", + "Qwen": "", + "Ollama": "", + "LMStudio": "", + "OpenAI": "" +}; diff --git a/app/static/index.html b/app/static/index.html index e93cdd0..3a76e39 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -138,6 +138,7 @@
+ diff --git a/app/static/style.css b/app/static/style.css index d97187e..6216a7d 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -235,6 +235,8 @@ label { font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } +.badge-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } +.badge-icon svg { width: 18px; height: 18px; } .card-title { min-width: 0; } .card-platform { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; } .card-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }