Archived
模型卡改矮:图标一列 + 文字一栏对齐,图标恒蓝
· **矮**:132 → 96px。状态不再是横穿整卡的填色带,收成一行小字 + 一枚钮;
段距、字号、图标各降一档。
· **对齐**:名字 / 厂商型号 / 状态**同一条竖线起头**,与图标并成一块 ——
从前名字与型号缩进 48px、状态条却横到卡边,三条线各走各的。
· **图标恒蓝**(与全站主色同一支 #3370ff,不再靛紫):它是**身份**不是状态 ——
能不能用由状态行说;先前未绑定就把图标灰掉,结果两条全灰、整片死气。
「去配置」改实心蓝:那是这张卡上唯一该点的东西。
交互复核:⋯ 菜单仍落在卡内(短卡下 top 跟着上移)、去配置开抽屉、Esc 关得掉。五闸绿。
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
@@ -333,51 +333,57 @@ function LlmCard({ i, nav, onEdit, onDropped }: { i: LlmInstanceView; nav: Nav;
|
||||
return (
|
||||
<div className={'g-mcard' + (usable ? '' : ' idle')}>
|
||||
<button className="hit" aria-label={`打开 ${i.name}`} onClick={() => nav.push({ k: 'llm', id: i.id })} />
|
||||
<div className="hd">
|
||||
<span className="ico">
|
||||
<Ico name="cpu" s={18} />
|
||||
</span>
|
||||
{/* 名字折行也不截 —— 它是活动里声明的那个名,看不全等于没显示 */}
|
||||
<b className="nm">{i.name}</b>
|
||||
<button
|
||||
className={'mbtn' + (menu !== 'none' ? ' on' : '')}
|
||||
aria-label="更多"
|
||||
onClick={() => setMenu(menu === 'none' ? 'open' : 'none')}
|
||||
>
|
||||
<Ico name="more-horizontal" s={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="meta">
|
||||
<span className="prov">{PROVIDER_LABEL[i.provider]}</span>
|
||||
<span className="mdl">{i.model}</span>
|
||||
</div>
|
||||
|
||||
{usable ? (
|
||||
<div className="bar">
|
||||
<span className="host" title={i.baseUrl}>
|
||||
{hostOf(i.baseUrl)}
|
||||
</span>
|
||||
<button className="tbtn" disabled={probe.isPending} onClick={() => probe.mutate()}>
|
||||
<Ico name={probe.isPending ? 'hourglass' : 'zap'} s={11} />
|
||||
{probe.isPending ? '测试中' : '测试'}
|
||||
{/*
|
||||
* 一行图标 + 一栏字:名字、型号、状态**同一条竖线起头** —— 与图标对齐成一块,
|
||||
* 不再让状态条横穿整卡。卡因此矮下来(实测 132 → 88),扫一列就读完。
|
||||
*/}
|
||||
<span className="ico">
|
||||
<Ico name="cpu" s={17} />
|
||||
</span>
|
||||
<div className="col">
|
||||
<div className="ln">
|
||||
{/* 名字折行也不截 —— 它是活动里声明的那个名,看不全等于没显示 */}
|
||||
<b className="nm">{i.name}</b>
|
||||
<button
|
||||
className={'mbtn' + (menu !== 'none' ? ' on' : '')}
|
||||
aria-label="更多"
|
||||
onClick={() => setMenu(menu === 'none' ? 'open' : 'none')}
|
||||
>
|
||||
<Ico name="more-horizontal" s={14} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
/* 不可用就别摆统计:一句判词 + 一条去路,比四个假数字有用 */
|
||||
<div className="bar todo">
|
||||
<span>{i.apiKeyBound ? '已停用' : '未绑定密钥 · 不可用'}</span>
|
||||
<button className="tbtn go" onClick={onEdit}>
|
||||
去配置
|
||||
</button>
|
||||
<div className="meta">
|
||||
<span className="prov">{PROVIDER_LABEL[i.provider]}</span>
|
||||
<span className="mdl">{i.model}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{out !== undefined && (
|
||||
<div className={'probe' + (out.ok ? ' ok' : ' bad')}>
|
||||
<Ico name={out.ok ? 'circle-check' : 'alert-circle'} s={12} />
|
||||
{out.ok ? `连通 · ${out.latencyMs ?? '—'} ms` : (out.error ?? '不通')}
|
||||
<div className={'st' + (usable ? '' : ' todo')}>
|
||||
{usable ? (
|
||||
<>
|
||||
<span className="host" title={i.baseUrl}>
|
||||
{hostOf(i.baseUrl)}
|
||||
</span>
|
||||
<button className="tbtn" disabled={probe.isPending} onClick={() => probe.mutate()}>
|
||||
<Ico name={probe.isPending ? 'hourglass' : 'zap'} s={11} />
|
||||
{probe.isPending ? '测试中' : '测试'}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
/* 不可用就别摆统计:一句判词 + 一条去路,比四个假数字有用 */
|
||||
<>
|
||||
<span className="host">{i.apiKeyBound ? '已停用' : '未绑定密钥 · 不可用'}</span>
|
||||
<button className="tbtn go" onClick={onEdit}>
|
||||
去配置
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{out !== undefined && (
|
||||
<div className={'probe' + (out.ok ? ' ok' : ' bad')}>
|
||||
<Ico name={out.ok ? 'circle-check' : 'alert-circle'} s={12} />
|
||||
{out.ok ? `连通 · ${out.latencyMs ?? '—'} ms` : (out.error ?? '不通')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{menu !== 'none' && (
|
||||
<div className="menu">
|
||||
|
||||
Reference in New Issue
Block a user