one-design-next 0.0.10 → 0.0.11

package/README.md

@@ -155,11 +155,11 @@ one-design-next/
 
 | 阶段 | Skill | 职责 |
 |:-----|:------|:-----|
-| **P1** 需求 | `p1-design-analyst` · `p1-design-spec` | 需求结构化分析、组件级设计说明 |
-| **P2** 知识 | `p2-one-design` · `p2-block-catalog` · `p2-business-knowledge` | 组件库知识、区块目录、业务页面知识 |
-| **P3** 质量 | `p3-audit` · `p3-polish` | 代码质量审查、发布前精修 |
-| **P4** 转化 | `p4-figma-to-block` · `p4-component-update-process` | 设计稿转区块、组件更新流程 |
-| **P5** 落地 | `p5-figma-to-page` · `p5-feedback` | 整页拼装、上下文与反馈采集 |
+| **P1** 设计 | `p1-design-analyst` · `p1-design-spec` | 需求结构化分析、组件级设计说明 |
+| **P2** 知识 | `p2-one-design` · `p2-block-catalog` · `p2-business-knowledge` · `p2-page-catalog` | 组件库知识、区块目录、业务页面知识 |
+| **P3** 执行 | `p3-page-implement` | 用 ODN 组件 + 区块拼装页面代码 |
+| **P4** 质量 | `p4-audit` · `p4-polish` | 代码质量审查、发布前精修 |
+| **内部维护** | `p4-figma-to-block` · `p5-figma-to-page` · `p4-component-update-process` · `p5-dmp-web-restore` · `p5-fe-free-trade-restore` | 设计稿转区块/整页、组件更新、线上页面还原（仅维护者本地用） |
 | **辅助** | `ten-questions` · `philosophy-talks` | 方法论讨论与设计哲学 |
 
 ### 多产品 Skill 发布

package/dist/_genui-types.d.ts

@@ -61,7 +61,24 @@ export interface SkillItem {
 export interface SendMeta {
     attachments?: Attachment[];
     webSearch?: boolean;
-    skill?: string;
+    /**
+     * 编辑器内插入的 chip 列表（按出现顺序）。
+     * - 来源包含工具栏按钮、`/` 触发、`@` 触发等
+     * - 通过 `kind` 字段区分 skill / mention / 自定义类型
+     * - 业务方按需 filter，例如：`meta.chips?.filter(c => c.kind === 'skill')`
+     *
+     * BREAKING（pre-1.0）：取代 v0.0.x 的 `skill?: string` 单值字段。
+     * 老业务迁移：`meta.skill` → `meta.chips?.find(c => c.kind === 'skill')?.label`
+     */
+    chips?: ComposerChipMeta[];
+}
+/** SendMeta.chips 的元素结构；与 components/composer/chip.tsx ChipData 对齐。 */
+export interface ComposerChipMeta {
+    id: string;
+    skillId: string;
+    label: string;
+    icon: string;
+    kind?: 'skill' | 'mention' | (string & {});
 }
 export type AgentEvent = {
     kind: 'thinking';

package/dist/composer/chip.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Composer · 编辑器内的 chip 视觉
+ *
+ * 当前形态极简：[icon][label][×]
+ * - hover 时 icon 变 ×（左槽位互斥），节省横向空间
+ * - × 用 onMouseDown preventDefault 防止 contenteditable 把焦点吃过去
+ *
+ * 视觉是 inline-flex 的 atomic 元素；其 DOM 容器（host span）由 useChipManager
+ * 创建并维护 contentEditable=false / data-mention-id；这里只渲染 host 内的内容。
+ */
+/// <reference types="react" />
+/** chip 渲染所需的最小数据结构。 */
+export interface ChipData {
+    /** chip 实例唯一 id（与 value marker 中的 id 对应） */
+    id: string;
+    /** 业务定义 id（如 skill id / mention 对象 id），业务方在 onSend 时反查源数据用 */
+    skillId: string;
+    /** chip 显示文本 */
+    label: string;
+    /** chip 显示 icon name */
+    icon: string;
+    /**
+     * chip 语义来源标记，业务方自定义。Composer 内部不消费 kind，
+     * 仅原样透传到 onSend(meta.chips)，方便业务方按 kind 分类。
+     * 约定：'skill' = 工具栏按钮 / `/` 触发选出来的能力；
+     *       'mention' = `@` 触发的对象引用；
+     *       其他自定义字符串业务方自行解释。
+     */
+    kind?: 'skill' | 'mention' | (string & {});
+}
+export interface ChipProps {
+    data: ChipData;
+    onRemove: () => void;
+}
+export declare function Chip({ data, onRemove }: ChipProps): import("react").JSX.Element;
+export default Chip;

package/dist/composer/chip.js

@@ -0,0 +1,49 @@
+/**
+ * Composer · 编辑器内的 chip 视觉
+ *
+ * 当前形态极简：[icon][label][×]
+ * - hover 时 icon 变 ×（左槽位互斥），节省横向空间
+ * - × 用 onMouseDown preventDefault 防止 contenteditable 把焦点吃过去
+ *
+ * 视觉是 inline-flex 的 atomic 元素；其 DOM 容器（host span）由 useChipManager
+ * 创建并维护 contentEditable=false / data-mention-id；这里只渲染 host 内的内容。
+ */
+
+import Icon from "../icon";
+
+/** chip 渲染所需的最小数据结构。 */
+
+export function Chip(_ref) {
+  var data = _ref.data,
+    onRemove = _ref.onRemove;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-composer-chip": true,
+    "data-state": "valid"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-composer-chip-icon": true,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: data.icon,
+    size: 12
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-composer-chip-remove": true,
+    "aria-label": "\u79FB\u9664 ".concat(data.label),
+    onMouseDown: function onMouseDown(e) {
+      // 阻止 contenteditable 把焦点拽走 / 光标错位
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onRemove();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    size: 12
+  })), /*#__PURE__*/React.createElement("span", {
+    "data-odn-composer-chip-label": true
+  }, data.label));
+}
+export default Chip;

package/dist/composer/editor.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Composer · 编辑器（contenteditable 实现）
+ *
+ * 替代 Input.Textarea 在 Composer 内部承担"输入区"角色。
+ *
+ * 阶段（按 MR 拆分）：
+ *  - [step 2] 基础壳：纯文本输入 + autoSize + Enter 自插 br + IME 短路
+ *  - [step 3] chip 命令式 API + Portal 渲染 + Backspace 整块删
+ *  - [step 4] @ + / 触发判定 + 浮层信号 + replaceTriggerWithChip ← 当前
+ *
+ * 与 Input.Textarea 的对外 API 尽量对齐：
+ *   value / defaultValue / onChange / placeholder / autoSize / onPressEnter
+ *
+ * chip 模型（hybrid）：
+ *   - DOM 由 contenteditable 自治：每个 chip 是 contentEditable=false 的 span（host），带 data-mention-id
+ *   - 视觉由 React Portal 注入到 host 内：chip.tsx 负责
+ *   - chip 状态（id ↔ host）由 useChipManager 维护
+ */
+/// <reference types="react" />
+import { type ChipData } from './chip';
+/** Composer editor 触发态对外信号——告诉父组件该弹浮层选 skill 了。 */
+export interface ComposerEditorTriggerInfo {
+    /** 触发字符（@ 或 /） */
+    trigger: string;
+    /** 触发字符之后到 caret 的查询串 */
+    query: string;
+    /**
+     * 触发字符 + query 整段的 client rect。父组件用它定位浮层。
+     * 滚动 / resize 后如需最新位置，可重新调用 ref.getTriggerRect()。
+     */
+    rect: DOMRect;
+}
+export interface ComposerEditorAutoSize {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface ComposerEditorProps {
+    /** 受控值。string，未来会含 marker（chip 序列化为 `\u200b\u2063id\u2063\u200b`）。 */
+    value?: string;
+    /** 非受控初始值。 */
+    defaultValue?: string;
+    /** 值变化回调；参数是 raw string，含 marker。 */
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    autoSize?: ComposerEditorAutoSize;
+    /**
+     * Enter 键回调。
+     * - 返回 `false` 阻止默认行为
+     * - 调用 `e.preventDefault()` 同样阻止
+     * - 默认行为（未阻止）= 自插 `<br>` 换行
+     *
+     * 父组件（Composer）在这里根据 submitType 决定 Enter 是"发送"还是"让默认换行"。
+     */
+    onPressEnter?: (e: React.KeyboardEvent<HTMLDivElement>) => void | false;
+    /**
+     * 启用的触发字符。默认 `['@', '/']`。
+     * 设为空数组可禁用触发判定。
+     */
+    triggers?: readonly string[];
+    /**
+     * 触发态变化回调：
+     *   - 进入触发态 → 传入 info
+     *   - 仍在触发态但 query / rect 变化 → 传入新 info
+     *   - 退出触发态（按 Esc 之外的方式：删触发字符、空格隔断、光标移开等）→ 传入 null
+     * IME 合成期间不会触发。
+     */
+    onTriggerChange?: (info: ComposerEditorTriggerInfo | null) => void;
+    /**
+     * 仅当 trigger 处于活动态（triggerRef.current 非空）时调用：
+     * 把 ↑↓ Enter Esc Tab 等导航键先丢给父组件让它驱动浮层选择。
+     * - 返回 `true` → editor 视为父已处理，不再走自身换行 / 提交逻辑
+     * - 返回 `false / undefined` → editor 走原默认（onPressEnter / 换行 / 删 chip 等）
+     *
+     * 父组件如需 preventDefault，请在 handler 内自己调用——editor 不会替父代劳，
+     * 避免某些导航键（如 Tab）在父决定让默认通过时误吃。
+     */
+    onTriggerKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => boolean | void;
+    /**
+     * 编辑器可视高度变化回调。
+     * height = editor.offsetHeight（受 max-height clamp）；atMax 表示触顶。
+     * Composer 的 lite 升格逻辑、scrollbar 显隐都用这个。
+     */
+    onHeightChange?: (height: number, atMax: boolean) => void;
+    /**
+     * 剪贴板含文件（如截图、资源管理器复制文件）时回调；由上层转为附件等。
+     * 若提供且 `files.length > 0`，编辑器会 `preventDefault` 且不再插入纯文本。
+     */
+    onPasteFiles?: (files: File[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface ComposerEditorRef {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    /** 清空：文本 + 全部 chip + 抛 onChange('') */
+    clear: () => void;
+    /** 在当前光标位置插入 chip；多次调用产生多个 chip。 */
+    insertChip: (data: ChipData) => void;
+    /** 按 chip id 移除（也可由 chip 上的 × 自行触发）。 */
+    removeChip: (id: string) => void;
+    /**
+     * 把当前 trigger 区段（含触发字符 + query）替换为 chip。
+     * 如果当前没有活动 trigger，退化为 insertChip 在光标位置插入。
+     * 配合浮层"用户选了某个 skill"的回调使用。
+     */
+    replaceTriggerWithChip: (data: ChipData) => void;
+    /** 主动取消当前触发态（不修改 DOM，只清状态 + 抛 onTriggerChange(null)）。 */
+    cancelTrigger: () => void;
+    /** 取最新的 trigger rect，便于浮层在滚动 / resize 时刷新位置。 */
+    getTriggerRect: () => DOMRect | null;
+    /**
+     * 取当前编辑器内全部 chip 的快照（按 DOM 出现顺序）。
+     * 父组件 onSend 时用，避免自行 parse value marker。
+     */
+    getChips: () => ChipData[];
+    /** 底层 contenteditable 元素 */
+    nativeElement: HTMLDivElement | null;
+}
+export declare const ComposerEditor: import("react").ForwardRefExoticComponent<ComposerEditorProps & import("react").RefAttributes<ComposerEditorRef>>;
+export default ComposerEditor;