weifuwu 0.85.0 → 0.87.0

package/content/components/passwordinput.md

@@ -0,0 +1,57 @@
+# PasswordInput · components
+
+## 概述
+
+密码输入：眼睛按钮切换可见性
+
+## 典型场景
+
+- 应用模板：auth（examples/apps/ 完整可跑）
+- 表单输入/搜索/筛选——查询区、编辑表单、设置页
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `value` | `string` | 否 |  |
+| `onInput` | `(e: Event) => void` | 否 |  |
+| `onChange` | `(e: Event) => void` | 否 |  |
+| `label` | `string` | 否 |  |
+| `name` | `string` | 否 |  |
+| `placeholder` | `string` | 否 |  |
+| `disabled` | `boolean` | 否 |  |
+| `error` | `string` | 否 |  |
+| `hint` | `string` | 否 |  |
+| `required` | `boolean` | 否 |  |
+| `autoComplete` | `string` | 否 |  |
+| `className` | `string` | 否 |  |
+
+## 用法示例
+
+```tsx
+<PasswordInput label="密码" value={pwd} onInput={e => setPwd(e.target.value)} />
+{/* 眼睛按钮切换可见性 */}
+```
+
+## 纪律/坑
+
+> 受控输入纪律（§5.3）：输入期间 value 走内部态（useControlledInput）——依赖回流会重挂 input 丢焦点；IME composition 门控
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：[auth](../apps/auth.md)
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/PasswordInput/PasswordInput.ts` |
+| 样式 | `src/client/components/PasswordInput/PasswordInput.css` |
+| 测试 | `src/client/components/PasswordInput/PasswordInput.test.ts` |
+| demo | `apps/showcase/src/demos/DemoPasswordInput.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/input/passwordinput` ——（P1 填充具体步骤）

package/content/components/pininput-v2.md

@@ -0,0 +1,39 @@
+# PinInput 禁用态 · components
+
+## 概述
+
+disabled 不可编辑（状态矩阵覆盖）
+
+## 典型场景
+
+- 表单输入/搜索/筛选——查询区、编辑表单、设置页
+
+## API
+
+> props 提取降级（接口格式特殊）——见源码：`—`
+
+## 用法示例
+
+```tsx
+<PinInput length={6} disabled />
+```
+
+## 纪律/坑
+
+> 受控输入纪律（§5.3）：输入期间 value 走内部态（useControlledInput）——依赖回流会重挂 input 丢焦点；IME composition 门控
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| demo | `apps/showcase/src/demos/DemoPinInputDis.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/input/pininput-v2` ——（P1 填充具体步骤）

package/content/components/pininput.md

@@ -0,0 +1,50 @@
+# PinInput · components
+
+## 概述
+
+验证码输入：自动聚焦/粘贴分派/Backspace 回退（shadcn InputOTP）
+
+## 典型场景
+
+- 表单输入/搜索/筛选——查询区、编辑表单、设置页
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `length` | `number` | 否 | 位数，默认 6 |
+| `value` | `string` | 否 | 受控完整值（如 '483920'） |
+| `onChange` | `(value: string) => void` | 否 |  |
+| `type` | `'number' \| 'text'` | 否 | number = 纯数字（默认）；text = 任意字符 |
+| `size` | `'sm' \| 'md' \| 'lg'` | 否 |  |
+| `disabled` | `boolean` | 否 |  |
+
+## 用法示例
+
+```tsx
+<PinInput length={6} value={code}
+  onChange={setCode} />
+```
+
+## 纪律/坑
+
+> 受控输入纪律（§5.3）：输入期间 value 走内部态（useControlledInput）——依赖回流会重挂 input 丢焦点；IME composition 门控
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/PinInput/PinInput.ts` |
+| 样式 | `src/client/components/PinInput/PinInput.css` |
+| 测试 | `src/client/components/PinInput/PinInput.test.ts` |
+| demo | `apps/showcase/src/demos/DemoPinInput.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/input/pininput` ——（P1 填充具体步骤）

package/content/components/pipeline.md

@@ -0,0 +1,49 @@
+# Pipeline · components
+
+## 概述
+
+Agent 工作流 DAG：分层布局 + 贝塞尔连线 + 状态语义色 + 环检测
+
+## 典型场景
+
+- AI 对话/工具调用/审批/提示词——agent 场景全链路
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `nodes` | `PipelineNode[]` | 是 |  |
+| `edges` | `PipelineEdge[]` | 是 |  |
+| `orientation` | `'vertical' \| 'horizontal'` | 否 | 布局方向（默认 vertical：输入在左→输出在右） |
+| `width` | `number` | 否 |  |
+| `height` | `number` | 否 |  |
+| `className` | `string` | 否 |  |
+
+## 用法示例
+
+```tsx
+<Pipeline orientation="horizontal" nodes={[{ id: 'a', label: '输入' }]} edges={[]} />
+```
+
+## 纪律/坑
+
+> AI 协议纪律：消息流事件驱动（useChat 订阅）——高频 notify 由写者控制频率
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/Pipeline/Pipeline.ts` |
+| 样式 | `src/client/components/Pipeline/Pipeline.css` |
+| 测试 | `src/client/components/Pipeline/Pipeline.test.ts` |
+| demo | `apps/showcase/src/demos/DemoPipeline.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/ai/pipeline` ——（P1 填充具体步骤）

package/content/components/popconfirm.md

@@ -0,0 +1,58 @@
+# Popconfirm · components
+
+## 概述
+
+气泡确认：危险操作防误触 + 复用 usePopup 基座
+
+## 典型场景
+
+- 浮层交互——弹窗、下拉、气泡、抽屉、命令面板
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `title` | `any` | 否 |  |
+| `okText` | `string` | 否 |  |
+| `cancelText` | `string` | 否 |  |
+| `okType` | `'primary' \| 'danger'` | 否 |  |
+| `danger` | `boolean` | 否 | 危险确认（默认图标换 warning 色 + 确认按钮 danger） |
+| `onConfirm` | `() => void` | 否 |  |
+| `onCancel` | `() => void` | 否 |  |
+| `position` | `Placement` | 否 |  |
+| `open` | `boolean` | 否 |  |
+| `onOpenChange` | `(open: boolean) => void` | 否 |  |
+| `disabled` | `boolean` | 否 |  |
+| `icon` | `any` | 否 |  |
+| `children` | `any` | 否 |  |
+
+## 用法示例
+
+```tsx
+<Popconfirm title="确定删除？" danger onConfirm={del}>
+  <Button variant="danger">删除</Button>
+</Popconfirm>
+```
+
+## 纪律/坑
+
+- 气泡内表单/自定义箭头已裁剪（Popover 基座 + 定位全套复用）
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/Popconfirm/Popconfirm.ts` |
+| 样式 | `src/client/components/Popconfirm/Popconfirm.css` |
+| 测试 | `src/client/components/Popconfirm/Popconfirm.test.ts` |
+| demo | `apps/showcase/src/demos/DemoPopconfirm.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/overlay/popconfirm` ——（P1 填充具体步骤）

package/content/components/popover.md

@@ -0,0 +1,61 @@
+# Popover · components
+
+## 概述
+
+通用弹出层，click/hover 触发，4 方向
+
+## 典型场景
+
+- 浮层交互——弹窗、下拉、气泡、抽屉、命令面板
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `content` | `any` | 否 |  |
+| `trigger` | `'click' \| 'hover'` | 否 |  |
+| `position` | `PopoverPosition` | 否 |  |
+| `open` | `boolean` | 否 |  |
+| `onOpenChange` | `(open: boolean) => void` | 否 |  |
+| `disabled` | `boolean` | 否 |  |
+| `children` | `any` | 否 |  |
+
+## 用法示例
+
+```tsx
+<Popover content={<div>面板内容</div>}>
+  <Button>点击弹出</Button>
+</Popover>
+
+<Popover position="top" content=...>
+  <Button>顶部</Button>
+</Popover>
+
+<Popover trigger="hover" content=...>
+  <span>悬停查看</span>
+</Popover>
+```
+
+## 纪律/坑
+
+- portal 槽豁免（同 HoverCard）
+- 富内容自动判定已裁剪——HoverCard 补富内容（components-cuts.md）
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/Popover/Popover.ts` |
+| 样式 | `src/client/components/Popover/Popover.css` |
+| 测试 | `src/client/components/Popover/Popover.test.ts` |
+| demo | `apps/showcase/src/demos/DemoPopover.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/overlay/popover` ——（P1 填充具体步骤）

package/content/components/progressbar.md

@@ -0,0 +1,50 @@
+# ProgressBar · components
+
+## 概述
+
+进度条，支持 label/showValue
+
+## 典型场景
+
+- 页面模式：dashboard（复制即用蓝本——examples/patterns/）
+- 操作反馈/结果页/确认——保存成功、删除确认、空态/加载态
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `value` | `number` | 否 | 进度值；undefined = indeterminate（不确定态，动画扫动） |
+| `max` | `number` | 否 |  |
+| `label` | `string` | 否 |  |
+| `showValue` | `boolean` | 否 |  |
+| `status` | `'default' \| 'success' \| 'error' \| 'warning'` | 否 | 状态色（default/success/error/warning） |
+| `size` | `'sm' \| 'md' \| 'lg'` | 否 | 尺寸 |
+
+## 用法示例
+
+```tsx
+<ProgressBar value={75} label="进度" showValue />
+```
+
+## 纪律/坑
+
+> 退场动画（§8）：exit 类必须挂载（animationend 驱动）+ reduced-motion 降级
+
+## 关系
+
+- ↑ 用于页面模式：[dashboard](../patterns/dashboard.md)
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/ProgressBar/ProgressBar.ts` |
+| 样式 | `src/client/components/ProgressBar/ProgressBar.css` |
+| 测试 | `src/client/components/ProgressBar/ProgressBar.test.ts` |
+| demo | `apps/showcase/src/demos/DemoProgress.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/feedback/progressbar` ——（P1 填充具体步骤）

package/content/components/prompttemplate.md

@@ -0,0 +1,49 @@
+# PromptTemplate · components
+
+## 概述
+
+提示词模板编辑器——变量 chips 插入 + 实时预览填充（AI 场景痛点）
+
+## 典型场景
+
+- AI 对话/工具调用/审批/提示词——agent 场景全链路
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `value` | `string` | 否 | 模板文本（受控） |
+| `onChange` | `(value: string) => void` | 否 |  |
+| `variables` | `PromptTemplateVariable[]` | 否 | 变量定义（chips 行——点击插入） |
+| `values` | `Record<string, string>` | 否 | 变量值（预览填充用——缺失的变量保持占位） |
+| `readOnly` | `boolean` | 否 | 只读（预览场景） |
+| `label` | `string` | 否 |  |
+| `showPreview` | `boolean` | 否 | 预览区显示开关（默认开） |
+| `className` | `string` | 否 |  |
+
+## 用法示例
+
+> （P1 迁移 CODE 字符串）
+
+## 纪律/坑
+
+- textarea value 必须走 property（attribute 只是 defaultValue——DOM value 恒空/光标失效事故，vdom3 渲染器已修）
+- 受控输入纪律：value 由父控制 + onChange 通知
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/PromptTemplate/PromptTemplate.ts` |
+| 样式 | `src/client/components/PromptTemplate/PromptTemplate.css` |
+| 测试 | `src/client/components/PromptTemplate/PromptTemplate.test.ts` |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/ai/prompttemplate` ——（P1 填充具体步骤）

package/content/components/qrcode.md

@@ -0,0 +1,50 @@
+# QRCode · components
+
+## 概述
+
+二维码：自研 QR 编码（Reed-Solomon + 8 掩码）零依赖 SVG
+
+## 典型场景
+
+- 数据展示——列表页、详情页、信息呈现
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `value` | `string` | 是 | 二维码内容（URL/文本） |
+| `ecLevel` | `QrEcLevel` | 否 | 纠错级别，默认 M |
+| `size` | `number` | 否 | 渲染尺寸（px），默认 128 |
+| `quietZone` | `number` | 否 | 静默区模块数，默认 4 |
+| `color` | `string` | 否 | 模块颜色，默认 currentColor |
+| `bgColor` | `string` | 否 | 背景色（填充静默区），默认 transparent |
+| `className` | `string` | 否 |  |
+
+## 用法示例
+
+```tsx
+<QRCode value="https://weifuwu.dev" size={128} />
+<QRCode value="..." color="#4f6ef7" />
+```
+
+## 纪律/坑
+
+> 三层一致（§6.3）：条件渲染 false 是空洞占位——数组项 key 由业务声明
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/QRCode/QRCode.ts` |
+| 测试 | `src/client/components/QRCode/QRCode.test.ts` |
+| demo | `apps/showcase/src/demos/DemoQRCode.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/display/qrcode` ——（P1 填充具体步骤）

package/content/components/radiogroup.md

@@ -0,0 +1,53 @@
+# RadioGroup · components
+
+## 概述
+
+单选组，支持 inline/options/value
+
+## 典型场景
+
+- 表单输入/搜索/筛选——查询区、编辑表单、设置页
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `name` | `string` | 否 |  |
+| `value` | `string` | 否 |  |
+| `options` | `RadioOption[]` | 否 |  |
+| `inline` | `boolean` | 否 |  |
+| `onChange` | `(value: string) => void` | 否 |  |
+
+## 用法示例
+
+```tsx
+<RadioGroup name="gender"
+  value={gender}
+  onChange={v => gender = v}
+  options={[
+    {value:'male',label:'男'},
+  ]} />
+```
+
+## 纪律/坑
+
+> 受控输入纪律（§5.3）：输入期间 value 走内部态（useControlledInput）——依赖回流会重挂 input 丢焦点；IME composition 门控
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/RadioGroup/RadioGroup.ts` |
+| 样式 | `src/client/components/RadioGroup/RadioGroup.css` |
+| 测试 | `src/client/components/RadioGroup/RadioGroup.test.ts` |
+| demo | `apps/showcase/src/demos/DemoRadio.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/input/radiogroup` ——（P1 填充具体步骤）

package/content/components/rate.md

@@ -0,0 +1,53 @@
+# Rate · components
+
+## 概述
+
+评分：键盘方向键 / allowClear / readOnly，新增 star 图标
+
+## 典型场景
+
+- 表单输入/搜索/筛选——查询区、编辑表单、设置页
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `value` | `number` | 否 | 当前评分值（0..count） |
+| `onChange` | `(value: number) => void` | 否 |  |
+| `count` | `number` | 否 | 星星总数，默认 5 |
+| `size` | `'sm' \| 'md' \| 'lg'` | 否 |  |
+| `readOnly` | `boolean` | 否 | 只读（展示态，不可交互、不可聚焦） |
+| `disabled` | `boolean` | 否 |  |
+| `allowClear` | `boolean` | 否 | 点击当前评分值 → 清除为 0（antd 对齐） |
+| `allowHalf` | `boolean` | 否 | 允许半星（0.5 精度；点击左半=半星，右半=整星） |
+
+## 用法示例
+
+```tsx
+<Rate value={3} onChange={setRate} />
+<Rate value={4} readOnly />
+<Rate size="lg" allowClear />
+```
+
+## 纪律/坑
+
+- 小尺寸 button 固定 min/max-height（§5.6）：星 16x36 竖条事故
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/Rate/Rate.ts` |
+| 样式 | `src/client/components/Rate/Rate.css` |
+| 测试 | `src/client/components/Rate/Rate.test.ts` |
+| demo | `apps/showcase/src/demos/DemoRate.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/input/rate` ——（P1 填充具体步骤）

package/content/components/reasoningblock.md

@@ -0,0 +1,47 @@
+# ReasoningBlock · components
+
+## 概述
+
+CoT 推理折叠展示：aria-expanded + 键盘可达 + 流式脉冲（thinking 模式 reasoning_content）
+
+## 典型场景
+
+- AI 对话/工具调用/审批/提示词——agent 场景全链路
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `content` | `string` | 是 | 推理文本（reasoning_content） |
+| `defaultExpanded` | `boolean` | 否 | 初始展开（默认折叠） |
+| `label` | `string` | 否 | 折叠头部文案（默认「已思考」） |
+| `streaming` | `boolean` | 否 | 流式中（头部脉冲指示） |
+
+## 用法示例
+
+```tsx
+<ReasoningBlock content={reasoningText} />
+```
+
+## 纪律/坑
+
+> AI 协议纪律：消息流事件驱动（useChat 订阅）——高频 notify 由写者控制频率
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/ReasoningBlock/ReasoningBlock.ts` |
+| 样式 | `src/client/components/ReasoningBlock/ReasoningBlock.css` |
+| 测试 | `src/client/components/ReasoningBlock/ReasoningBlock.test.ts` |
+| demo | `apps/showcase/src/demos/DemoReasoningBlock.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/ai/reasoningblock` ——（P1 填充具体步骤）

package/content/components/relationgraph.md

@@ -0,0 +1,52 @@
+# RelationGraph · components
+
+## 概述
+
+关系图谱——环形/网格布局 + 类型着色 + 选中交互（人物/组织/网络）
+
+## 典型场景
+
+- 数据展示——列表页、详情页、信息呈现
+
+## API
+
+| prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `nodes` | `RelationGraphNode[]` | 是 |  |
+| `edges` | `RelationGraphEdge[]` | 是 |  |
+| `selectedId` | `string \| null` | 否 | 选中节点 id（受控） |
+| `onSelect` | `(id: string) => void` | 否 | 节点点击（选中态切换——父层管理） |
+| `onNodeClick` | `(id: string) => void` | 否 | 节点双击/单独动作（如打开 agent 档案——可选） |
+| `layout` | `'ring' \| 'grid'` | 否 | 布局：ring（环形——网状关系）| grid（网格——组织/矩阵）——默认 ring |
+| `width` | `string` | 否 |  |
+| `height` | `string` | 否 |  |
+| `showLegend` | `boolean` | 否 | 关系图例（type → 颜色映射） |
+| `nodeColors` | `Record<string, string>` | 否 | 类型颜色覆盖（kind → 色值） |
+| `edgeColors` | `Record<string, string>` | 否 | 关系类型颜色覆盖（edge type → 色值） |
+
+## 用法示例
+
+> （P1 迁移 CODE 字符串）
+
+## 纪律/坑
+
+> 三层一致（§6.3）：条件渲染 false 是空洞占位——数组项 key 由业务声明
+
+## 关系
+
+- ↑ 用于页面模式：（暂无）
+- ↑ 用于应用：（暂无）
+- → 后端能力：（暂无）
+
+## 文件位置
+
+| 文件 | 路径 |
+|------|------|
+| 源码 | `src/client/components/RelationGraph/RelationGraph.ts` |
+| 样式 | `src/client/components/RelationGraph/RelationGraph.css` |
+| 测试 | `src/client/components/RelationGraph/RelationGraph.test.ts` |
+| demo | `apps/showcase/src/demos/DemoRelationGraph.tsx`（P1 拆分） |
+
+## 验证
+
+> agent-browser 走查：打开 `/components/display/relationgraph` ——（P1 填充具体步骤）