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; }