mirror of
https://github.com/MoonshotAI/kimi-code.git
synced 2026-07-09 17:29:12 +00:00
docs(web): sync design system with the Remix icon switch (#1300)
* docs(web): sync design system with the Remix icon switch Update the §02 icon guidance to describe Remix Icon (fill, 24x24, registry-sourced) and drop the stale 'line-icon' wording. Convert the §03 component-gallery demo icons from hand-drawn stroke SVGs to Remix fill icons. Clarify that the workspace-group add button reveals on hover or keyboard focus for accessibility. Sync public/design-system.html with design/. * docs(web): show composer send button as an up arrow
This commit is contained in:
qer
GitHub
parent
021de5433b
commit
7fa18c9e45
2 changed files with 171 additions and 103 deletions
|
|
@ -1117,8 +1117,8 @@
|
|||
<div class="icon-cell"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8.5 7a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m0 6.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M15.5 7a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/></svg><span class="ic-name">grip</span></div>
|
||||
</div>
|
||||
|
||||
<p>禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此线稿图标体系内。</p>
|
||||
<p>少数<b>非线稿图形</b>不进注册表，各有专属组件统一维护，禁止复制手写：<code><ContextRing :pct /></code>（Composer 上下文进度环，数据驱动）、<code><AuthStateIcon kind /></code>（登录流程的成功 / 过期 / 错误彩色插图）、<code><Spinner /></code>（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（<code>border-radius:50%</code>），不再用 SVG。<code>scripts/check-style.mjs</code> 的 <code>icon-from-registry</code> 规则对以上与品牌标记豁免，其余手写 <code><svg></code> 一律告警。</p>
|
||||
<p>禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此图标体系内。</p>
|
||||
<p>少数<b>特殊图形</b>不进注册表，各有专属组件统一维护，禁止复制手写：<code><ContextRing :pct /></code>（Composer 上下文进度环，数据驱动）、<code><AuthStateIcon kind /></code>（登录流程的成功 / 过期 / 错误彩色插图）、<code><Spinner /></code>（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（<code>border-radius:50%</code>），不再用 SVG。<code>scripts/check-style.mjs</code> 的 <code>icon-from-registry</code> 规则对以上与品牌标记豁免，其余手写 <code><svg></code> 一律告警。</p>
|
||||
|
||||
<h3 class="sub">间距 Spacing </h3>
|
||||
<p>4px 基础网格，组件内外所有间距、间隙、内边距都来自此刻度，杜绝随机像素。</p>
|
||||
|
|
@ -1273,8 +1273,8 @@
|
|||
</div>
|
||||
<span class="stage-label">带图标 / 状态</span>
|
||||
<div class="demo-row">
|
||||
<button class="p-btn primary"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>新建会话</button>
|
||||
<button class="p-btn secondary"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>已复制</button>
|
||||
<button class="p-btn primary"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>新建会话</button>
|
||||
<button class="p-btn secondary"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg>已复制</button>
|
||||
<button class="p-btn primary disabled" >加载中…</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1315,11 +1315,11 @@
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">IconButton</span></div>
|
||||
<div class="stage p">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callout info"><span class="ico">i</span><div>
|
||||
|
|
@ -1343,7 +1343,7 @@
|
|||
</div>
|
||||
<span class="stage-label">带图标 / 小尺寸</span>
|
||||
<div class="demo-row">
|
||||
<span class="p-badge info"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5v-9Z" stroke="currentColor" stroke-width="1.4"/></svg>plan</span>
|
||||
<span class="p-badge info"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m1 2v14h14V5z"/></svg>plan</span>
|
||||
<span class="p-badge success sm"><span class="bd"></span>passed</span>
|
||||
<span class="p-badge neutral sm">read-only</span>
|
||||
</div>
|
||||
|
|
@ -1352,9 +1352,9 @@
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Pill · 工具条药丸（composer）</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 3.5h12M2 8h12M2 12.5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></span>
|
||||
<span class="p-pill"><span style="width:7px;height:7px;border-radius:50%;background:var(--p-warning)"></span>yolo</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>12k / 200k</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m1-8h4v2h-6V7h2z"/></svg>12k / 200k</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1456,7 +1456,7 @@
|
|||
<div class="p-code-block">
|
||||
<div class="p-code-block-head">
|
||||
<span>session.ts</span>
|
||||
<button class="p-icon-btn sm" aria-label="复制"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="8" height="8" rx="1.5"/><path d="M3 10V3.5A1.5 1.5 0 0 1 4.5 2H10"/></svg></button>
|
||||
<button class="p-icon-btn sm" aria-label="复制"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg></button>
|
||||
</div>
|
||||
<pre>import { verify } from './jwt';
|
||||
|
||||
|
|
@ -1487,7 +1487,7 @@ export function auth(token: string) {
|
|||
<div class="p-dialog-title">新建会话</div>
|
||||
<div class="p-dialog-desc">为当前工作区创建一个独立的 Agent 会话。</div>
|
||||
</div>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg></button>
|
||||
</div>
|
||||
<div class="p-dialog-body">
|
||||
<div class="p-field">
|
||||
|
|
@ -1514,11 +1514,11 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Toast</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-toast success">
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>
|
||||
<div><div class="tt">已连接到服务器</div><div class="td">本地守护进程响应正常，可以开始新会话。</div></div>
|
||||
</div>
|
||||
<div class="p-toast warning">
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 2 14 13H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="11" r=".6" fill="currentColor"/></svg></span>
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg></span>
|
||||
<div><div class="tt">上下文使用 82%</div><div class="td">建议执行 /compact 以释放空间。</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1569,7 +1569,7 @@ export function auth(token: string) {
|
|||
<div class="stage p col">
|
||||
<div class="demo-row" style="font-size:var(--p-font-size-base);color:var(--p-text)">
|
||||
<span>阅读完整 <a class="p-link" href="#">设计令牌文档</a> 后再动手。</span>
|
||||
<a class="p-link" href="#">在 GitHub 查看<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M6 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 2h5v5M14 2 7.5 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a class="p-link" href="#">在 GitHub 查看<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z"/></svg></a>
|
||||
<a class="p-link muted" href="#">查看历史记录</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1582,11 +1582,11 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Menu · 下拉菜单</span></div>
|
||||
<div class="stage p col" style="align-items:flex-start">
|
||||
<div class="p-menu">
|
||||
<div class="p-menu-item"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>打开文件</div>
|
||||
<div class="p-menu-item active"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>已选中项</div>
|
||||
<div class="p-menu-item disabled"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/></svg>不可用项</div>
|
||||
<div class="p-menu-item"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>打开文件</div>
|
||||
<div class="p-menu-item active"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg>已选中项</div>
|
||||
<div class="p-menu-item disabled"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16M8.523 7.109l8.368 8.368a6 6 0 0 1-1.414 1.414L7.109 8.523A6 6 0 0 1 8.523 7.11"/></svg>不可用项</div>
|
||||
<div class="p-menu-sep"></div>
|
||||
<div class="p-menu-item danger"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>删除会话</div>
|
||||
<div class="p-menu-item danger"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg>删除会话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1636,9 +1636,9 @@ export function auth(token: string) {
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Checkbox · 复选框</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-check on"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="p-check on"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>
|
||||
<span class="p-check"></span>
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;color:var(--p-text);font-size:var(--p-font-size-base);cursor:pointer"><span class="p-check on"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>启用自动保存</label>
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;color:var(--p-text);font-size:var(--p-font-size-base);cursor:pointer"><span class="p-check on"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>启用自动保存</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1649,7 +1649,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Avatar</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-avatar">K</span>
|
||||
<span class="p-avatar"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="5.5" r="2.5" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" stroke-width="1.5" stroke-linecap="round"/></svg></span>
|
||||
<span class="p-avatar"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4"/></svg></span>
|
||||
<span class="p-avatar sm">K</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1661,7 +1661,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">EmptyState</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-empty" style="width:100%;border:1px dashed var(--p-line);border-radius:var(--p-r-lg)">
|
||||
<svg class="em-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M3 4.5A1.5 1.5 0 0 1 4.5 3h7A1.5 1.5 0 0 1 13 4.5v5A1.5 1.5 0 0 1 11.5 11H7l-3 2.5V11H4.5A1.5 1.5 0 0 1 3 9.5z" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg class="em-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1zm-.692-2H20V5H4v13.385zM8 10h8v2H8z"/></svg>
|
||||
<div class="em-title">暂无会话</div>
|
||||
<div class="em-hint">点击「新建会话」开始与 Kimi 对话</div>
|
||||
</div>
|
||||
|
|
@ -1692,7 +1692,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Tooltip（悬停按钮）</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-tip">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 3v10M3 8h10" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<span class="p-tooltip">新建会话</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1704,8 +1704,8 @@ export function auth(token: string) {
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Banner</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-banner info"><svg class="bn-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="8" r="6.5" stroke-width="1.5"/><path d="M8 7v4" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="5" r=".7" fill="currentColor" stroke="none"/></svg>已连接到服务器</div>
|
||||
<div class="p-banner warning"><svg class="bn-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 2 14 13H2z" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="10.5" r=".7" fill="currentColor" stroke="none"/></svg>当前处于 yolo 模式，工具调用将自动执行</div>
|
||||
<div class="p-banner info"><svg class="bn-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16M11 7h2v2h-2zm0 4h2v6h-2z"/></svg>已连接到服务器</div>
|
||||
<div class="p-banner warning"><svg class="bn-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg>当前处于 yolo 模式，工具调用将自动执行</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1747,7 +1747,7 @@ export function auth(token: string) {
|
|||
<div class="stage p col">
|
||||
<div class="p-cmdbar" style="max-width:620px">
|
||||
<button class="p-btn primary">安装 Kimi Code ▾</button>
|
||||
<span class="p-cmd"><span class="cmd-text">curl -fsSL https://code.kimi.com/install.sh | bash</span><button class="cmd-copy"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><rect x="5.5" y="5.5" width="8" height="8" rx="1.6" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 5.5V3.6A1.1 1.1 0 0 0 9.4 2.5H3.6A1.1 1.1 0 0 0 2.5 3.6v5.8a1.1 1.1 0 0 0 1.1 1.1h1.9" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
|
||||
<span class="p-cmd"><span class="cmd-text">curl -fsSL https://code.kimi.com/install.sh | bash</span><button class="cmd-copy"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg></button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1760,11 +1760,11 @@ export function auth(token: string) {
|
|||
<div class="stage p col" style="gap:14px;background:radial-gradient(circle at 18% 30%,rgba(23,131,255,.16),transparent 42%),radial-gradient(circle at 82% 75%,rgba(20,23,28,.10),transparent 46%),var(--p-surface-sunken)">
|
||||
<div class="p-topbar" style="width:100%;max-width:580px">
|
||||
<span class="tb-title">实色 TopBar</span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button></span>
|
||||
</div>
|
||||
<div class="p-topbar frost" style="width:100%;max-width:580px">
|
||||
<span class="tb-title">毛玻璃 TopBar · .frost</span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1776,11 +1776,11 @@ export function auth(token: string) {
|
|||
<div class="stage p col" style="gap:0;background:var(--p-surface);padding:0;max-width:300px;align-items:stretch">
|
||||
<div class="p-section-label" style="padding:12px 16px 4px">Workspaces</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;margin:1px 6px;border-radius:8px;color:var(--p-text);font-size:13px">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" style="color:var(--d-fg-faint);flex:none"><path d="M1.5 4V3A1.5 1.5 0 0 1 3 1.5h3l1.2 1.6H13A1.5 1.5 0 0 1 14.5 4.6v6.9A1.5 1.5 0 0 1 13 13H3a1.5 1.5 0 0 1-1.5-1.5Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg style="color:var(--d-fg-faint);flex:none" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 5v14h16V7h-8.414l-2-2zm8.414 0H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414z"/></svg>
|
||||
kimi-code-web
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;margin:1px 6px;border-radius:8px;color:var(--p-text);font-size:13px">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" style="color:var(--d-fg-faint);flex:none"><path d="M1.5 4V3A1.5 1.5 0 0 1 3 1.5h3l1.2 1.6H13A1.5 1.5 0 0 1 14.5 4.6v6.9A1.5 1.5 0 0 1 13 13H3a1.5 1.5 0 0 1-1.5-1.5Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg style="color:var(--d-fg-faint);flex:none" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 5v14h16V7h-8.414l-2-2zm8.414 0H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414z"/></svg>
|
||||
playground
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1814,19 +1814,19 @@ export function auth(token: string) {
|
|||
<div class="p-tool-group open">
|
||||
<div class="p-tool-group-head">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>
|
||||
<span class="tg-title">3 个工具调用</span>
|
||||
<span class="tg-meta">· 已完成 · 0.8s</span>
|
||||
<svg class="tg-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tg-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<!-- row 1 · 已展开（按需披露细节） -->
|
||||
<div class="p-tool-row expanded">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/session.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<div class="p-tool-detail">
|
||||
<div class="p-code">12 export function verify(token: string) {<br/>13 return jwt.verify(token, getSecret());<br/>14 }</div>
|
||||
|
|
@ -1834,20 +1834,20 @@ export function auth(token: string) {
|
|||
<!-- row 2 · 折叠 -->
|
||||
<div class="p-tool-row">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/middleware.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<!-- row 3 · 折叠 -->
|
||||
<div class="p-tool-row">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z"/></svg>
|
||||
<span class="tr-name">grep</span>
|
||||
<span class="tr-arg">"jwt.verify" · 4 处匹配</span>
|
||||
<span class="tr-time">0.1s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1859,7 +1859,7 @@ export function auth(token: string) {
|
|||
<!-- question（需要用户决策 → 保留完整卡片） -->
|
||||
<div class="p-action">
|
||||
<div class="p-action-head">
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none" style="color:var(--p-accent)"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><path d="M6.2 6a1.8 1.8 0 0 1 3.5.6c0 1.2-1.7 1.4-1.7 2.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r=".7" fill="currentColor"/></svg>
|
||||
<svg class="p-ic" style="color:var(--p-accent)" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355"/></svg>
|
||||
<span class="p-action-title">需要你确认一个决定</span>
|
||||
</div>
|
||||
<div class="p-action-body">JWT 的过期时间希望设多长？默认 7 天，刷新令牌 30 天。</div>
|
||||
|
|
@ -1872,7 +1872,7 @@ export function auth(token: string) {
|
|||
<!-- approval (warning) -->
|
||||
<div class="p-action warn">
|
||||
<div class="p-action-head">
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none" style="color:var(--p-warning)"><path d="M8 2 14 13H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="11" r=".6" fill="currentColor"/></svg>
|
||||
<svg class="p-ic" style="color:var(--p-warning)" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg>
|
||||
<span class="p-action-title">需要写入权限</span>
|
||||
<span class="p-badge warning sm" style="margin-left:auto">write_file</span>
|
||||
</div>
|
||||
|
|
@ -1905,7 +1905,7 @@ export function auth(token: string) {
|
|||
<span class="stage-label">① 工具行 · 最轻（默认）</span>
|
||||
<div class="p-tool-row" style="border:1px solid var(--p-line);border-radius:8px">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/session.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
|
|
@ -1914,10 +1914,10 @@ export function auth(token: string) {
|
|||
<div class="p-tool-group">
|
||||
<div class="p-tool-group-head">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>
|
||||
<span class="tg-title">3 个工具调用</span>
|
||||
<span class="tg-meta">· 已完成 · 0.8s</span>
|
||||
<svg class="tg-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tg-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="stage-label">③ 决策卡 · 重（仅 question / approval，需用户介入）</span>
|
||||
|
|
@ -1958,13 +1958,13 @@ export function auth(token: string) {
|
|||
<div class="p-composer-ta ph">给 Kimi 发消息，/ 调用命令，@ 引用文件…</div>
|
||||
<div class="p-composer-bar">
|
||||
<div class="p-composer-left">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<span class="p-pill"><span style="width:7px;height:7px;border-radius:50%;background:var(--p-warning)"></span>yolo</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>plan</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>plan</span>
|
||||
</div>
|
||||
<div class="p-composer-right">
|
||||
<span class="p-pill"><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<button class="p-send"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 13V3m0 0L4.5 6.5M8 3l3.5 3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
<span class="p-pill"><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></span>
|
||||
<button class="p-send"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M13 7.828V20h-2V7.828l-5.364 5.364l-1.414-1.414L12 4l7.778 7.778l-1.414 1.414z"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2197,7 +2197,7 @@ export function auth(token: string) {
|
|||
<ul class="clean">
|
||||
<li>文件夹图标放在 <code>--sb-gutter</code> 槽里，开合态切换图标。</li>
|
||||
<li>名称下方一行 <code>fg-muted</code> 的小字路径。</li>
|
||||
<li>kebab（菜单）与「+」（在该工作区新建）都用 <code>IconButton</code> sm，hover 才显示。</li>
|
||||
<li>kebab（菜单）与「+」（在该工作区新建）都用 <code>IconButton</code> sm，hover 或键盘聚焦时显示（不 hover 时以 <code>opacity:0</code> 保留在 tab 序里，保持键盘可达）。</li>
|
||||
<li>分组可折叠；折叠时隐藏其会话列表。</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -823,6 +823,7 @@
|
|||
<a href="#themes"><span class="num">05</span>主题系统</a>
|
||||
<a href="#rules"><span class="num">06</span>样式规则</a>
|
||||
<a href="#shell"><span class="num">07</span>应用壳与侧栏</a>
|
||||
<a href="#a11y"><span class="num">08</span>可访问性</a>
|
||||
</nav>
|
||||
|
||||
<div class="nav-group">配套产出</div>
|
||||
|
|
@ -1116,8 +1117,8 @@
|
|||
<div class="icon-cell"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8.5 7a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m0 6.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M15.5 7a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/></svg><span class="ic-name">grip</span></div>
|
||||
</div>
|
||||
|
||||
<p>禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此线稿图标体系内。</p>
|
||||
<p>少数<b>非线稿图形</b>不进注册表，各有专属组件统一维护，禁止复制手写：<code><ContextRing :pct /></code>（Composer 上下文进度环，数据驱动）、<code><AuthStateIcon kind /></code>（登录流程的成功 / 过期 / 错误彩色插图）、<code><Spinner /></code>（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（<code>border-radius:50%</code>），不再用 SVG。<code>scripts/check-style.mjs</code> 的 <code>icon-from-registry</code> 规则对以上与品牌标记豁免，其余手写 <code><svg></code> 一律告警。</p>
|
||||
<p>禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此图标体系内。</p>
|
||||
<p>少数<b>特殊图形</b>不进注册表，各有专属组件统一维护，禁止复制手写：<code><ContextRing :pct /></code>（Composer 上下文进度环，数据驱动）、<code><AuthStateIcon kind /></code>（登录流程的成功 / 过期 / 错误彩色插图）、<code><Spinner /></code>（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（<code>border-radius:50%</code>），不再用 SVG。<code>scripts/check-style.mjs</code> 的 <code>icon-from-registry</code> 规则对以上与品牌标记豁免，其余手写 <code><svg></code> 一律告警。</p>
|
||||
|
||||
<h3 class="sub">间距 Spacing </h3>
|
||||
<p>4px 基础网格，组件内外所有间距、间隙、内边距都来自此刻度，杜绝随机像素。</p>
|
||||
|
|
@ -1227,6 +1228,10 @@
|
|||
从而天然支持亮 / 暗模式与可定制主题色。
|
||||
</p>
|
||||
|
||||
<div class="callout info"><span class="ico">i</span><div>
|
||||
每个交互基元的<b>键盘行为、焦点与 ARIA 契约见 §08 可访问性</b>。新增基元须一并给出键盘模型，不能只实现鼠标交互。
|
||||
</div></div>
|
||||
|
||||
<!-- ===== 组件选型指南 ===== -->
|
||||
<h3 class="sub">组件选型指南</h3>
|
||||
<table class="dt">
|
||||
|
|
@ -1268,8 +1273,8 @@
|
|||
</div>
|
||||
<span class="stage-label">带图标 / 状态</span>
|
||||
<div class="demo-row">
|
||||
<button class="p-btn primary"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>新建会话</button>
|
||||
<button class="p-btn secondary"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>已复制</button>
|
||||
<button class="p-btn primary"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>新建会话</button>
|
||||
<button class="p-btn secondary"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg>已复制</button>
|
||||
<button class="p-btn primary disabled" >加载中…</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1310,11 +1315,11 @@
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">IconButton</span></div>
|
||||
<div class="stage p">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callout info"><span class="ico">i</span><div>
|
||||
|
|
@ -1338,7 +1343,7 @@
|
|||
</div>
|
||||
<span class="stage-label">带图标 / 小尺寸</span>
|
||||
<div class="demo-row">
|
||||
<span class="p-badge info"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 12.5v-9Z" stroke="currentColor" stroke-width="1.4"/></svg>plan</span>
|
||||
<span class="p-badge info"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m1 2v14h14V5z"/></svg>plan</span>
|
||||
<span class="p-badge success sm"><span class="bd"></span>passed</span>
|
||||
<span class="p-badge neutral sm">read-only</span>
|
||||
</div>
|
||||
|
|
@ -1347,9 +1352,9 @@
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Pill · 工具条药丸（composer）</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 3.5h12M2 8h12M2 12.5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></span>
|
||||
<span class="p-pill"><span style="width:7px;height:7px;border-radius:50%;background:var(--p-warning)"></span>yolo</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>12k / 200k</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m1-8h4v2h-6V7h2z"/></svg>12k / 200k</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1451,7 +1456,7 @@
|
|||
<div class="p-code-block">
|
||||
<div class="p-code-block-head">
|
||||
<span>session.ts</span>
|
||||
<button class="p-icon-btn sm" aria-label="复制"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="8" height="8" rx="1.5"/><path d="M3 10V3.5A1.5 1.5 0 0 1 4.5 2H10"/></svg></button>
|
||||
<button class="p-icon-btn sm" aria-label="复制"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg></button>
|
||||
</div>
|
||||
<pre>import { verify } from './jwt';
|
||||
|
||||
|
|
@ -1482,7 +1487,7 @@ export function auth(token: string) {
|
|||
<div class="p-dialog-title">新建会话</div>
|
||||
<div class="p-dialog-desc">为当前工作区创建一个独立的 Agent 会话。</div>
|
||||
</div>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg></button>
|
||||
</div>
|
||||
<div class="p-dialog-body">
|
||||
<div class="p-field">
|
||||
|
|
@ -1509,11 +1514,11 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Toast</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-toast success">
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>
|
||||
<div><div class="tt">已连接到服务器</div><div class="td">本地守护进程响应正常，可以开始新会话。</div></div>
|
||||
</div>
|
||||
<div class="p-toast warning">
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 2 14 13H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="11" r=".6" fill="currentColor"/></svg></span>
|
||||
<span class="ti"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg></span>
|
||||
<div><div class="tt">上下文使用 82%</div><div class="td">建议执行 /compact 以释放空间。</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1564,7 +1569,7 @@ export function auth(token: string) {
|
|||
<div class="stage p col">
|
||||
<div class="demo-row" style="font-size:var(--p-font-size-base);color:var(--p-text)">
|
||||
<span>阅读完整 <a class="p-link" href="#">设计令牌文档</a> 后再动手。</span>
|
||||
<a class="p-link" href="#">在 GitHub 查看<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M6 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 2h5v5M14 2 7.5 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||
<a class="p-link" href="#">在 GitHub 查看<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z"/></svg></a>
|
||||
<a class="p-link muted" href="#">查看历史记录</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1577,11 +1582,11 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Menu · 下拉菜单</span></div>
|
||||
<div class="stage p col" style="align-items:flex-start">
|
||||
<div class="p-menu">
|
||||
<div class="p-menu-item"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>打开文件</div>
|
||||
<div class="p-menu-item active"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>已选中项</div>
|
||||
<div class="p-menu-item disabled"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/></svg>不可用项</div>
|
||||
<div class="p-menu-item"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>打开文件</div>
|
||||
<div class="p-menu-item active"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg>已选中项</div>
|
||||
<div class="p-menu-item disabled"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16M8.523 7.109l8.368 8.368a6 6 0 0 1-1.414 1.414L7.109 8.523A6 6 0 0 1 8.523 7.11"/></svg>不可用项</div>
|
||||
<div class="p-menu-sep"></div>
|
||||
<div class="p-menu-item danger"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>删除会话</div>
|
||||
<div class="p-menu-item danger"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z"/></svg>删除会话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1631,9 +1636,9 @@ export function auth(token: string) {
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Checkbox · 复选框</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-check on"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<span class="p-check on"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>
|
||||
<span class="p-check"></span>
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;color:var(--p-text);font-size:var(--p-font-size-base);cursor:pointer"><span class="p-check on"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 6.5 12 13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>启用自动保存</label>
|
||||
<label style="display:inline-flex;align-items:center;gap:8px;color:var(--p-text);font-size:var(--p-font-size-base);cursor:pointer"><span class="p-check on"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m10 15.17l9.192-9.191l1.414 1.414L10 17.999l-6.364-6.364l1.414-1.414z"/></svg></span>启用自动保存</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1644,7 +1649,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Avatar</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-avatar">K</span>
|
||||
<span class="p-avatar"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="5.5" r="2.5" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" stroke-width="1.5" stroke-linecap="round"/></svg></span>
|
||||
<span class="p-avatar"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6s6 2.685 6 6s-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4"/></svg></span>
|
||||
<span class="p-avatar sm">K</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1656,7 +1661,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">EmptyState</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-empty" style="width:100%;border:1px dashed var(--p-line);border-radius:var(--p-r-lg)">
|
||||
<svg class="em-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M3 4.5A1.5 1.5 0 0 1 4.5 3h7A1.5 1.5 0 0 1 13 4.5v5A1.5 1.5 0 0 1 11.5 11H7l-3 2.5V11H4.5A1.5 1.5 0 0 1 3 9.5z" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg class="em-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1zm-.692-2H20V5H4v13.385zM8 10h8v2H8z"/></svg>
|
||||
<div class="em-title">暂无会话</div>
|
||||
<div class="em-hint">点击「新建会话」开始与 Kimi 对话</div>
|
||||
</div>
|
||||
|
|
@ -1687,7 +1692,7 @@ export function auth(token: string) {
|
|||
<div class="stage-bar"><span class="st">Tooltip（悬停按钮）</span></div>
|
||||
<div class="stage p">
|
||||
<span class="p-tip">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 3v10M3 8h10" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<span class="p-tooltip">新建会话</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1699,8 +1704,8 @@ export function auth(token: string) {
|
|||
<div class="stage-wrap">
|
||||
<div class="stage-bar"><span class="st">Banner</span></div>
|
||||
<div class="stage p col">
|
||||
<div class="p-banner info"><svg class="bn-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="8" r="6.5" stroke-width="1.5"/><path d="M8 7v4" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="5" r=".7" fill="currentColor" stroke="none"/></svg>已连接到服务器</div>
|
||||
<div class="p-banner warning"><svg class="bn-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 2 14 13H2z" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="10.5" r=".7" fill="currentColor" stroke="none"/></svg>当前处于 yolo 模式，工具调用将自动执行</div>
|
||||
<div class="p-banner info"><svg class="bn-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16M11 7h2v2h-2zm0 4h2v6h-2z"/></svg>已连接到服务器</div>
|
||||
<div class="p-banner warning"><svg class="bn-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg>当前处于 yolo 模式，工具调用将自动执行</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1742,7 +1747,7 @@ export function auth(token: string) {
|
|||
<div class="stage p col">
|
||||
<div class="p-cmdbar" style="max-width:620px">
|
||||
<button class="p-btn primary">安装 Kimi Code ▾</button>
|
||||
<span class="p-cmd"><span class="cmd-text">curl -fsSL https://code.kimi.com/install.sh | bash</span><button class="cmd-copy"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><rect x="5.5" y="5.5" width="8" height="8" rx="1.6" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 5.5V3.6A1.1 1.1 0 0 0 9.4 2.5H3.6A1.1 1.1 0 0 0 2.5 3.6v5.8a1.1 1.1 0 0 0 1.1 1.1h1.9" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
|
||||
<span class="p-cmd"><span class="cmd-text">curl -fsSL https://code.kimi.com/install.sh | bash</span><button class="cmd-copy"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg></button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1755,11 +1760,11 @@ export function auth(token: string) {
|
|||
<div class="stage p col" style="gap:14px;background:radial-gradient(circle at 18% 30%,rgba(23,131,255,.16),transparent 42%),radial-gradient(circle at 82% 75%,rgba(20,23,28,.10),transparent 46%),var(--p-surface-sunken)">
|
||||
<div class="p-topbar" style="width:100%;max-width:580px">
|
||||
<span class="tb-title">实色 TopBar</span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button></span>
|
||||
</div>
|
||||
<div class="p-topbar frost" style="width:100%;max-width:580px">
|
||||
<span class="tb-title">毛玻璃 TopBar · .frost</span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||||
<span class="tb-actions"><button class="p-icon-btn sm"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z"/></svg></button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1771,11 +1776,11 @@ export function auth(token: string) {
|
|||
<div class="stage p col" style="gap:0;background:var(--p-surface);padding:0;max-width:300px;align-items:stretch">
|
||||
<div class="p-section-label" style="padding:12px 16px 4px">Workspaces</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;margin:1px 6px;border-radius:8px;color:var(--p-text);font-size:13px">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" style="color:var(--d-fg-faint);flex:none"><path d="M1.5 4V3A1.5 1.5 0 0 1 3 1.5h3l1.2 1.6H13A1.5 1.5 0 0 1 14.5 4.6v6.9A1.5 1.5 0 0 1 13 13H3a1.5 1.5 0 0 1-1.5-1.5Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg style="color:var(--d-fg-faint);flex:none" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 5v14h16V7h-8.414l-2-2zm8.414 0H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414z"/></svg>
|
||||
kimi-code-web
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:7px 10px;margin:1px 6px;border-radius:8px;color:var(--p-text);font-size:13px">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" style="color:var(--d-fg-faint);flex:none"><path d="M1.5 4V3A1.5 1.5 0 0 1 3 1.5h3l1.2 1.6H13A1.5 1.5 0 0 1 14.5 4.6v6.9A1.5 1.5 0 0 1 13 13H3a1.5 1.5 0 0 1-1.5-1.5Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
|
||||
<svg style="color:var(--d-fg-faint);flex:none" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M4 5v14h16V7h-8.414l-2-2zm8.414 0H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414z"/></svg>
|
||||
playground
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1809,19 +1814,19 @@ export function auth(token: string) {
|
|||
<div class="p-tool-group open">
|
||||
<div class="p-tool-group-head">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>
|
||||
<span class="tg-title">3 个工具调用</span>
|
||||
<span class="tg-meta">· 已完成 · 0.8s</span>
|
||||
<svg class="tg-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tg-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<!-- row 1 · 已展开（按需披露细节） -->
|
||||
<div class="p-tool-row expanded">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/session.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<div class="p-tool-detail">
|
||||
<div class="p-code">12 export function verify(token: string) {<br/>13 return jwt.verify(token, getSecret());<br/>14 }</div>
|
||||
|
|
@ -1829,20 +1834,20 @@ export function auth(token: string) {
|
|||
<!-- row 2 · 折叠 -->
|
||||
<div class="p-tool-row">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/middleware.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
<!-- row 3 · 折叠 -->
|
||||
<div class="p-tool-row">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.4"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z"/></svg>
|
||||
<span class="tr-name">grep</span>
|
||||
<span class="tr-arg">"jwt.verify" · 4 处匹配</span>
|
||||
<span class="tr-time">0.1s</span>
|
||||
<svg class="tr-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1854,7 +1859,7 @@ export function auth(token: string) {
|
|||
<!-- question（需要用户决策 → 保留完整卡片） -->
|
||||
<div class="p-action">
|
||||
<div class="p-action-head">
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none" style="color:var(--p-accent)"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.4"/><path d="M6.2 6a1.8 1.8 0 0 1 3.5.6c0 1.2-1.7 1.4-1.7 2.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r=".7" fill="currentColor"/></svg>
|
||||
<svg class="p-ic" style="color:var(--p-accent)" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355"/></svg>
|
||||
<span class="p-action-title">需要你确认一个决定</span>
|
||||
</div>
|
||||
<div class="p-action-body">JWT 的过期时间希望设多长？默认 7 天，刷新令牌 30 天。</div>
|
||||
|
|
@ -1867,7 +1872,7 @@ export function auth(token: string) {
|
|||
<!-- approval (warning) -->
|
||||
<div class="p-action warn">
|
||||
<div class="p-action-head">
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none" style="color:var(--p-warning)"><path d="M8 2 14 13H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M8 6v3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="11" r=".6" fill="currentColor"/></svg>
|
||||
<svg class="p-ic" style="color:var(--p-warning)" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0m-8.66 16h15.588L12 5.5zM11 16h2v2h-2zm0-7h2v5h-2z"/></svg>
|
||||
<span class="p-action-title">需要写入权限</span>
|
||||
<span class="p-badge warning sm" style="margin-left:auto">write_file</span>
|
||||
</div>
|
||||
|
|
@ -1900,7 +1905,7 @@ export function auth(token: string) {
|
|||
<span class="stage-label">① 工具行 · 最轻（默认）</span>
|
||||
<div class="p-tool-row" style="border:1px solid var(--p-line);border-radius:8px">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="tr-ic" viewBox="0 0 16 16" fill="none"><path d="M3 3h7l3 3v7H3V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M9 3v3h3" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
<svg class="tr-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8zM5.83 8H9V4.83zM11 4v5a1 1 0 0 1-1 1H5v10h14V4z"/></svg>
|
||||
<span class="tr-name">read_file</span>
|
||||
<span class="tr-arg">src/auth/session.ts</span>
|
||||
<span class="tr-time">0.2s</span>
|
||||
|
|
@ -1909,10 +1914,10 @@ export function auth(token: string) {
|
|||
<div class="p-tool-group">
|
||||
<div class="p-tool-group-head">
|
||||
<span class="p-dot done"></span>
|
||||
<svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>
|
||||
<span class="tg-title">3 个工具调用</span>
|
||||
<span class="tg-meta">· 已完成 · 0.8s</span>
|
||||
<svg class="tg-car" viewBox="0 0 16 16" fill="none"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="tg-car" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="stage-label">③ 决策卡 · 重（仅 question / approval，需用户介入）</span>
|
||||
|
|
@ -1953,13 +1958,13 @@ export function auth(token: string) {
|
|||
<div class="p-composer-ta ph">给 Kimi 发消息，/ 调用命令，@ 引用文件…</div>
|
||||
<div class="p-composer-bar">
|
||||
<div class="p-composer-left">
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></button>
|
||||
<button class="p-icon-btn"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg></button>
|
||||
<span class="p-pill"><span style="width:7px;height:7px;border-radius:50%;background:var(--p-warning)"></span>yolo</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h8M2 12h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>plan</span>
|
||||
<span class="p-pill"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"/></svg>plan</span>
|
||||
</div>
|
||||
<div class="p-composer-right">
|
||||
<span class="p-pill"><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
||||
<button class="p-send"><svg class="p-ic" viewBox="0 0 16 16" fill="none"><path d="M8 13V3m0 0L4.5 6.5M8 3l3.5 3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
||||
<span class="p-pill"><span class="pp-strong">kimi-k2</span><span class="pp-sub">· thinking</span><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z"/></svg></span>
|
||||
<button class="p-send"><svg class="p-ic" viewBox="0 0 24 24" fill="currentColor"><path fill="currentColor" d="M13 7.828V20h-2V7.828l-5.364 5.364l-1.414-1.414L12 4l7.778 7.778l-1.414 1.414z"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2079,7 +2084,7 @@ export function auth(token: string) {
|
|||
</table>
|
||||
|
||||
<h3 class="sub">状态矩阵 State matrix </h3>
|
||||
<p>每个可交互基元都应在适用处定义以下状态，缺失即按样式规则告警。<code>focus-visible</code> 一律走 <code>--p-focus-ring</code>，<code>disabled</code> 统一 <code>opacity:.5</code>。</p>
|
||||
<p>每个可交互基元都应在适用处定义以下状态，缺失即按样式规则告警。<code>focus-visible</code> 一律走 <code>--p-focus-ring</code>（只在键盘聚焦时出现，详见 §08），<code>disabled</code> 统一 <code>opacity:.5</code>。</p>
|
||||
<table class="dt">
|
||||
<thead><tr><th>状态 State</th><th>Button</th><th>Input</th><th>Card</th><th>Menu item</th><th>Switch</th></tr></thead>
|
||||
<tbody>
|
||||
|
|
@ -2192,7 +2197,7 @@ export function auth(token: string) {
|
|||
<ul class="clean">
|
||||
<li>文件夹图标放在 <code>--sb-gutter</code> 槽里，开合态切换图标。</li>
|
||||
<li>名称下方一行 <code>fg-muted</code> 的小字路径。</li>
|
||||
<li>kebab（菜单）与「+」（在该工作区新建）都用 <code>IconButton</code> sm，hover 才显示。</li>
|
||||
<li>kebab（菜单）与「+」（在该工作区新建）都用 <code>IconButton</code> sm，hover 或键盘聚焦时显示（不 hover 时以 <code>opacity:0</code> 保留在 tab 序里，保持键盘可达）。</li>
|
||||
<li>分组可折叠；折叠时隐藏其会话列表。</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -2222,6 +2227,69 @@ export function auth(token: string) {
|
|||
</div></div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 08 可访问性 A11y ===== -->
|
||||
<section id="a11y">
|
||||
<div class="sec-head">
|
||||
<span class="sec-num">08</span>
|
||||
<h2 class="sec-title">可访问性 A11y（务实版）</h2>
|
||||
</div>
|
||||
<p class="sec-desc">
|
||||
Kimi Web 是本地开发者工具，<b>不以 WCAG 某一 conformance 级别为目标</b>，也不维护完整的读屏 QA 矩阵。
|
||||
本节只收「低成本、不损观感、对键盘重度用户也有直接好处」的规则，作为各基元的底线契约；
|
||||
其余昂贵且 ROI 偏低的部分（如对流式输出的实时播报编排）暂不作为强制要求。
|
||||
</p>
|
||||
|
||||
<div class="callout info"><span class="ico">i</span><div>
|
||||
<b>关于焦点环「丑」：</b>下面要求的焦点可见性一律用 <code>:focus-visible</code>（而非 <code>:focus</code>）。
|
||||
它<b>只在键盘聚焦时</b>出现，鼠标点击不会触发，因此不会污染鼠标驱动的视觉；环的强弱用 <code>--p-focus-ring</code> 统一调，不逐处覆盖。
|
||||
</div></div>
|
||||
|
||||
<h4 class="mini">1. 对比度与颜色 Contrast & color</h4>
|
||||
<ul class="clean">
|
||||
<li>正文文本与背景对比度 <b>≥ 4.5:1</b>；控件边框、图标、关键图形 <b>≥ 3:1</b>。换主题色 / 暗色模式时按 §05 一起核对。</li>
|
||||
<li><b>状态不只靠颜色传达。</b>错误、选中、禁用等状态要同时有文字、图标或形态变化（例如错误态不只红，还带文案或图标）。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mini">2. 键盘可操作 Keyboard operable</h4>
|
||||
<p>鼠标能完成的操作，键盘必须也能完成；Tab 顺序跟随 DOM，不另造跳序。复合控件按下表定义键盘模型，缺失即视为不完整：</p>
|
||||
<table class="dt">
|
||||
<thead><tr><th>控件</th><th>键盘行为</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td class="tk">Dialog</td><td><code>Tab</code> 在弹窗内循环（焦点锁）；<code>Esc</code> 关闭；关闭后焦点回到触发元素。</td></tr>
|
||||
<tr><td class="tk">Menu</td><td><code>↑</code> / <code>↓</code> 移动高亮，<code>Enter</code> 选中，<code>Esc</code> 关闭。</td></tr>
|
||||
<tr><td class="tk">Tabs</td><td><code>←</code> / <code>→</code> 切换标签（roving tabindex），只有当前标签在 Tab 序列里。</td></tr>
|
||||
<tr><td class="tk">Switch / Segmented</td><td><code>←</code> / <code>→</code> 或 <code>Space</code> / <code>Enter</code> 切换。</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4 class="mini">3. 焦点可见 Focus visibility</h4>
|
||||
<ul class="clean">
|
||||
<li>每个可交互元素在键盘聚焦时必须有可见焦点指示，统一走 <code>:focus-visible</code> + <code>--p-focus-ring</code>（主操作可用 <code>--p-focus-ring-strong</code>）。</li>
|
||||
<li>禁止裸 <code>outline: none</code>。要去掉默认轮廓，必须同时给出等价的替代样式。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mini">4. 命名与语义 Labels & semantics</h4>
|
||||
<ul class="clean">
|
||||
<li><b>语义 HTML 优先</b>（button / a / input / dialog…），ARIA 只在原生语义不够时补。</li>
|
||||
<li>只有图标的按钮必须有 <code>aria-label</code>——<code>IconButton</code> 已用必填的 <code>label</code> prop 强制。</li>
|
||||
<li>弹窗：<code>role="dialog"</code> + <code>aria-modal="true"</code>，标题作为对话框的可访问名称。</li>
|
||||
<li>纯装饰性 SVG / 图标加 <code>aria-hidden="true"</code>，避免被读屏念出。</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="mini">5. 目标尺寸 Target size</h4>
|
||||
<p>桌面可点击目标 <b>≥ 32px</b>；触摸设备 <b>≥ 44px</b>（与 §01 原则、IconButton 的 <code>lg</code> 档一致）。</p>
|
||||
|
||||
<h4 class="mini">6. 减少动态效果 Reduced motion</h4>
|
||||
<p>统一在全局样式按 §02 的 <code>@media (prefers-reduced-motion: reduce)</code> 处理，组件不各自判断；MoonSpinner 月相在当前帧暂停。</p>
|
||||
|
||||
<h4 class="mini">7. 动态内容播报 Live announcements（非强制）</h4>
|
||||
<p>读屏播报在本产品里<b>不做强制契约</b>。Toast 这类短提示用 <code>role="status"</code> / <code>aria-live</code> 即可；聊天流式输出当前不做逐字播报，属可接受取舍，后续如有真实需求再补。</p>
|
||||
|
||||
<div class="callout good"><span class="ico">✓</span><div>
|
||||
<b>明确暂不强制：</b>WCAG conformance 级别声明、完整 ARIA 模式表、逐款读屏软件的 QA 矩阵、以及对流式输出的实时播报编排——这些不写入基元契约，避免成为无人维护的口号。
|
||||
</div></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue