@brushes/schema-to-view 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brushes/schema-to-view",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "根据 UI 截图/设计稿动态生成低代码平台 JSON schema。当用户提供 UI 图片要求生成页面、将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。触发条件：UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成",
   "keywords": ["pi-package"],
   "pi": {

package/settings.local.json

@@ -0,0 +1,34 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install -g @mcpcn/image-vision-mcp)",
+      "Bash(npm list -g @mcpcn/image-vision-mcp --json 2>/dev/null | grep -A5 '\"bin\"')",
+      "Bash(claude mcp --help 2>&1)",
+      "Bash(claude mcp add image-vision-mcp -- /Users/qin/.nvm/versions/node/v20.19.4/bin/image-vision-mcp)",
+      "Bash(claude mcp list)",
+      "Bash(claude mcp get image-vision-mcp 2>&1)",
+      "mcp__image-vision-mcp__image_understanding",
+      "mcp__image-vision-mcp__ocr_extract_text",
+      "Bash(python3 -c \"import json; d=json.load\\(open\\('/Users/qin/.claude.json'\\)\\); print\\(json.dumps\\(d.get\\('mcpServers', d.get\\('mcp', 'NOT FOUND'\\)\\), indent=2\\)\\)\" 2>/dev/null || echo \"No top-level mcp key\")",
+      "Bash(claude mcp add -s user zai-mcp-server --env Z_AI_API_KEY=8f58762d9666441d8727664d2f5388c4.IeHdqWPfh24GJACk -- npx -y \"@z_ai/mcp-server\")",
+      "Bash(claude mcp list -s user)",
+      "Bash(Z_AI_API_KEY=8f58762d9666441d8727664d2f5388c4.IeHdqWPfh24GJACk npx -y @z_ai/mcp-server)",
+      "mcp__zai-mcp-server__analyze_image",
+      "Bash(python3 -c \"import json; data=json.load\\(open\\('/Users/qin/Desktop/react-lowcode/web-lowcode/pageModels/fixtures.json'\\)\\); print\\(f'Valid JSON: {len\\(data\\)} nodes'\\); [print\\(f'  {k}: {v[\\\\\"displayName\\\\\"]} \\({v[\\\\\"type\\\\\"][\\\\\"resolvedName\\\\\"]}\\) parent={v.get\\(\\\\\"parent\\\\\",\\\\\"ROOT\\\\\"\\)}'\\) for k,v in data.items\\(\\)]\")",
+      "Bash(python3 -c \"\ns = open\\('/Users/qin/Desktop/react-lowcode/web-lowcode/pageModels/fixtures.json'\\).read\\(\\)\nprint\\(f'Total chars: {len\\(s\\)}'\\)\nprint\\(f'Around error \\(7647\\):'\\)\nprint\\(repr\\(s[7620:7700]\\)\\)\n\")",
+      "Bash(python3 -c \"import json; json.load\\(open\\('/Users/qin/Desktop/react-lowcode/web-lowcode/pageModels/furniture.json'\\)\\); print\\('JSON 格式正确'\\)\")",
+      "Bash(python3 -m json.tool)",
+      "Bash(git -C /Users/qin/Desktop/react-lowcode/web-lowcode log --oneline -20 --all)",
+      "Bash(git -C /Users/qin/Desktop/react-lowcode/web-lowcode log --format=\"%H %s\" -10)",
+      "Bash(git -C /Users/qin/Desktop/react-lowcode/web-lowcode diff HEAD -- .gitignore apps/editor/config/dev.ts apps/editor/src/pages/container/components/Topbar.tsx apps/main/config/dev.ts | head -200)",
+      "Bash(git -C /Users/qin/Desktop/react-lowcode/web-lowcode log --all --diff-filter=AMR --name-only --format=\"%H %s\" -20 -- \"*.ts\" \"*.tsx\" \"*.json\" | head -200)",
+      "Bash(grep -l \"image\\\\|schema\\\\|图片\\\\|生成\\\\|fixture\\\\|pageModel\" /Users/qin/.claude/projects/-Users-qin-Desktop-react-lowcode-web-lowcode/*.jsonl 2>/dev/null)",
+      "Bash(python3 -c \"\nimport json\nwith open\\('/Users/qin/Desktop/react-lowcode/web-lowcode/pageModels/furniture.json'\\) as f:\n    data = json.load\\(f\\)\nprint\\(f'furniture.json nodes: {len\\(data\\)}'\\)\nfor k, v in data.items\\(\\):\n    display = v.get\\('displayName', '?'\\)\n    resolved = v['type']['resolvedName']\n    parent = v.get\\('parent', 'ROOT'\\)\n    print\\(f'  {k}: {display} \\({resolved}\\) parent={parent}'\\)\n\")",
+      "Read(//Users/qin/.claude/**)",
+      "WebSearch",
+      "Bash(git check-ignore .claude/skills/lowcode-gen/SKILL.md && echo \"IGNORED\" || echo \"NOT IGNORED\")",
+      "Bash(git check-ignore .claude/settings.local.json && echo \"settings IGNORED\" || echo \"settings NOT IGNORED\")",
+      "Skill(schema-to-view)"
+    ]
+  }
+}

package/skills/lowcode-gen/SKILL.md

@@ -0,0 +1,248 @@
+---
+name: lowcode-gen
+description: >
+  为 web-lowcode 低代码平台生成新组件代码。当用户需要添加新的低代码组件、
+  创建组件配置面板、或注册组件到编辑器的数据源时需要此 skill。触发条件：
+  新建组件、添加可视化组件、生成低代码组件、创建 setting 面板、注册编辑器组件。
+argument-hint: "[组件名] [分类: basic|service|operate|layout]"
+allowed-tools: Bash(ls mkdir) Read Write Edit Glob Grep
+paths: "packages/component-ui/**,packages/component-setting/**,apps/editor/src/pages/left/dataSource-component/**"
+---
+
+# 低代码组件代码生成器
+
+为 web-lowcode 低代码平台生成一个新的可视化组件，遵循项目既定架构模式。
+
+## 项目架构速览
+
+```
+web-lowcode/
+├── packages/
+│   ├── component-ui/src/          # UI 组件实现
+│   │   ├── basic/                  #   基础组件 (Text, Image, Button...)
+│   │   ├── service/                #   业务组件 (Navigator, CardLR...)
+│   │   ├── operate/                #   操作组件 (Login, Buy, Save...)
+│   │   └── components/             #   复合组件 (Banner, Tab, Drawer...)
+│   ├── component-setting/src/
+│   │   ├── component-setting/      # 配置面板组件（每组件一个目录）
+│   │   └── common/                 # 通用配置工具（margin, padding, api 等）
+│   └── component-store/src/        # 状态管理 hooks
+├── apps/editor/src/pages/left/
+│   └── dataSource-component/       # 组件注册（按分类的 tsx 文件）
+└── ...
+```
+
+## 组件生成流程
+
+生成一个新组件需要创建/修改 **3 个文件**：
+
+| 步骤 | 位置 | 作用 |
+|------|------|------|
+| 1. UI 组件 | `packages/component-ui/src/{category}/{name}/index.tsx` | 组件实现 |
+| 2. 配置面板 | `packages/component-setting/src/component-setting/{name}/index.tsx` | 编辑器右侧属性面板 |
+| 3. 注册组件 | `apps/editor/src/pages/left/dataSource-component/{category}.tsx` | 注册到编辑器 |
+
+### 步骤 1：创建 UI 组件
+
+在 `packages/component-ui/src/{category}/` 下创建组件文件。
+
+**核心模式：**
+
+```typescript
+import { useMemo } from "react";
+import { get } from "lodash";
+import {
+  useModuleContext,
+  useModuleRootContext,
+} from "@brushes/component-core";
+import { HOCCodeWrapComponent } from "@brushes/core-transform";
+
+// 1. 定义 Props 接口
+type XxxProps = {
+  module?: string;
+  storeKey?: string;
+  code?: string;
+  className?: string;
+  padding?: React.CSSProperties;
+  margin?: React.CSSProperties;
+  // ... 组件特有 props
+};
+
+// 2. 实现纯组件
+const XxxInner: React.FC<XxxProps & { dataInfo: object }> = ({
+  storeKey = "_skuInfo",
+  code,
+  dataInfo,
+  padding = {},
+  margin = {},
+  className,
+  ...restProps
+}) => {
+  // 从 dataInfo 中根据 code 路径取值
+  const value = useMemo(() => {
+    if (code && dataInfo) {
+      return get(dataInfo, code) ?? restProps.someDefault;
+    }
+    return restProps.someDefault;
+  }, [code, dataInfo]);
+
+  return (
+    <div className={className} style={{ ...padding, ...margin }}>
+      {value}
+    </div>
+  );
+};
+
+// 3. 模块 store 包装
+const WrapXxx: React.FC<XxxProps> = ({ storeKey = "_skuInfo", ...resetProps }) => {
+  const _skuInfo = useModuleContext((s) => s.moduleStore[storeKey]) || {};
+  return <XxxInner dataInfo={_skuInfo} {...resetProps} />;
+};
+
+// 4. 根 store 包装
+const WrapRootXxx: React.FC<XxxProps> = ({ storeKey = "", ...resetProps }) => {
+  const _skuInfo = useModuleRootContext((s) => s.rootStore[storeKey]) || {};
+  return <XxxInner dataInfo={_skuInfo} {...resetProps} />;
+};
+
+// 5. 按 module 分发
+const XxxJsx: React.FC<XxxProps> = ({ module = "moduleStore", ...resetProps }) => {
+  if (module === "moduleStore") return <WrapXxx {...resetProps} />;
+  return <WrapRootXxx {...resetProps} />;
+};
+
+// 6. HOC 包装导出
+export const Xxx = HOCCodeWrapComponent(XxxJsx);
+```
+
+**导出注册 - 在 `packages/component-ui/src/{category}/index.ts` 中添加：**
+
+```typescript
+export * from "./xxx";
+```
+
+### 步骤 2：创建设置面板
+
+在 `packages/component-setting/src/component-setting/{name}/index.tsx` 创建。
+
+**核心模式：**
+
+```typescript
+import type { FieldType } from '@brushes/form';
+import { basicSettings, formConfigType } from '@brushes/core-transform';
+import { actionField, marginField, paddingField } from "../../common";
+
+// 样式配置字段
+const styleFields: FieldType[] = [
+  {
+    label: '文本内容',
+    name: 'text',
+    type: 'text',
+  },
+  {
+    label: 'store类型',
+    name: 'module',
+    type: 'select',
+    extraProps: {
+      options: [
+        { label: '全局store', value: 'rootStore' },
+        { label: '非全局store', value: 'moduleStore' },
+      ],
+    },
+  },
+  // ...更多字段
+  ...marginField,
+  ...paddingField,
+];
+
+// 数据配置字段
+const dataFields: FieldType[] = [
+  // 数据相关配置
+];
+
+// 组装表单配置
+const baseFormField: formConfigType[] = [
+  { title: '样式', formFields: styleFields },
+  { title: '数据', formFields: dataFields },
+  { title: '逻辑', formFields: actionField },
+];
+
+export const XxxSettings = basicSettings(baseFormField);
+```
+
+**FieldType 字段类型：**
+- `text` — 文本输入
+- `number` — 数字输入
+- `color` — 颜色选择器
+- `select` — 下拉选择（需 `extraProps.options`）
+- `radio` — 单选按钮
+- `switch` — 开关
+- `formList` — 可动态增减的列表（需 `extraProps.innerForm`）
+- `textarea` — 多行文本
+
+**导出注册 - 在 `packages/component-setting/src/component-setting/index.ts` 中添加：**
+
+```typescript
+export { XxxSettings } from './xxx';
+```
+
+### 步骤 3：注册到编辑器数据源
+
+在 `apps/editor/src/pages/left/dataSource-component/{category}.tsx` 中：
+
+1. **顶部添加 Settings 导入**
+2. **在数组中添加 TypeComponent 条目**
+
+```typescript
+{
+  name: '组件显示名',
+  icon: 'icon-text',
+  Component: BasicComponent['Xxx'],  // 或 Materials['Xxx'], ServiceComponent['Xxx'], Operate['Xxx']
+  setting: {
+    props: {
+      // 默认属性值
+      text: '默认文本',
+      module: 'moduleStore',
+    },
+    related: {
+      settings: XxxSettings,
+    },
+  },
+}
+```
+
+**组件引用来源对照（与 import 对应）：**
+
+| DataSource 文件 | 组件引用变量 | 对应包路径 |
+|----------------|-------------|-----------|
+| `basic.tsx` | `BasicComponent` | `@brushes/lowcode-component-ui/basic` |
+| `basic.tsx` | `Materials` | `@brushes/lowcode-component-ui/components` |
+| `service.tsx` | `ServiceComponent` | `@brushes/lowcode-component-ui/service` |
+| `operate.tsx` | `Operate` | `@brushes/lowcode-component-ui/operate` |
+
+## 组件分类指南
+
+| 分类 | 目录 | DataSource 文件 | 示例 |
+|------|------|-----------------|------|
+| 基础组件 | `component-ui/src/basic/` | `basic.tsx` | Text, Image, Button, Divider, Form |
+| 业务组件 | `component-ui/src/service/` | `service.tsx` | Navigator, CardLR, Search, Map |
+| 操作组件 | `component-ui/src/operate/` | `operate.tsx` | Login, Logout, Buy, Save |
+| 复合组件 | `component-ui/src/components/` | `basic.tsx` | Banner, Tab, RichText, Drawer |
+| 布局组件 | — | `layout.tsx` | OutContainer, Container |
+
+## 常用公共字段（import from `../../common`）
+
+- `marginField` — 外边距配置（marginTop/Right/Bottom/Left）
+- `paddingField` — 内边距配置（paddingTop/Right/Bottom/Left）
+- `actionField` — 交互逻辑配置
+- `SelectCube` — 魔方选择器（图片+链接）
+- `apiField` — API 配置字段
+
+## 注意事项
+
+1. 所有 UI 组件必须用 `HOCCodeWrapComponent` 包装
+2. 设置面板必须用 `basicSettings(baseFormField)` 包装
+3. DataSource 文件结尾会自动调用 `combine(array)` 注册组件
+4. 组件的 `module` 属性控制数据来源：`moduleStore` vs `rootStore`
+5. 数据绑定通过 `storeKey` + `code` 实现，用 lodash `get` 取值
+6. 生成代码后，检查所有 import 路径是否正确

package/skills/lowcode-gen/TEMPLATES.md

@@ -0,0 +1,234 @@
+# 低代码组件模板参考
+
+## 模板 1：简单展示组件（如 Badge、Tag、Label）
+
+适用场景：纯展示，不需要复杂数据绑定的组件。
+
+### UI 组件
+```typescript
+// packages/component-ui/src/basic/badge/index.tsx
+import { HOCCodeWrapComponent } from "@brushes/core-transform";
+
+interface BadgeProps {
+  text?: string;
+  color?: string;
+  background?: string;
+  borderRadius?: number;
+  fontSize?: number;
+  padding?: React.CSSProperties;
+  margin?: React.CSSProperties;
+}
+
+const BadgeJsx: React.FC<BadgeProps> = ({
+  text = '',
+  color = '#fff',
+  background = '#ff4d4f',
+  borderRadius = 4,
+  fontSize = 12,
+  padding = {},
+  margin = {},
+}) => {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        color,
+        background,
+        borderRadius,
+        fontSize,
+        padding: '2px 8px',
+        ...padding,
+        ...margin,
+      }}
+    >
+      {text}
+    </span>
+  );
+};
+
+export const Badge = HOCCodeWrapComponent(BadgeJsx);
+```
+
+### 设置面板
+```typescript
+// packages/component-setting/src/component-setting/badge/index.tsx
+import type { FieldType } from '@brushes/form';
+import { basicSettings, formConfigType } from '@brushes/core-transform';
+import { paddingField, marginField } from "../../common";
+
+const styleFields: FieldType[] = [
+  { label: '文本内容', name: 'text', type: 'text' },
+  { label: '文本颜色', name: 'color', type: 'color' },
+  { label: '背景色', name: 'background', type: 'color' },
+  { label: '圆角', name: 'borderRadius', type: 'number' },
+  { label: '字体大小', name: 'fontSize', type: 'number' },
+  ...marginField,
+  ...paddingField,
+];
+
+const baseFormField: formConfigType[] = [
+  { title: '样式', formFields: styleFields },
+];
+
+export const BadgeSettings = basicSettings(baseFormField);
+```
+
+---
+
+## 模板 2：数据绑定展示组件（如 Price、Stock、Title）
+
+适用场景：需要从 store 中读取数据并支持数据转换的组件。
+
+### UI 组件
+```typescript
+// packages/component-ui/src/basic/price/index.tsx
+import { useMemo } from "react";
+import { get } from "lodash";
+import { useModuleContext, useModuleRootContext } from "@brushes/component-core";
+import { HOCCodeWrapComponent } from "@brushes/core-transform";
+import { fixPrice } from "@brushes/component-tool";
+
+interface PriceProps {
+  module?: string;
+  storeKey?: string;
+  code?: string;
+  precision?: number;
+  fontSize?: number;
+  color?: string;
+  padding?: React.CSSProperties;
+  margin?: React.CSSProperties;
+  [key: string]: any;
+}
+
+const PriceInner: React.FC<PriceProps & { dataInfo: object }> = ({
+  code,
+  precision = 2,
+  fontSize = 14,
+  color = '#333',
+  dataInfo,
+  padding = {},
+  margin = {},
+}) => {
+  const value = useMemo(() => {
+    if (code && dataInfo) {
+      const result = get(dataInfo, code);
+      return result != null ? fixPrice(+result, precision) : '--';
+    }
+    return '--';
+  }, [code, dataInfo, precision]);
+
+  return (
+    <span style={{ fontSize, color, fontWeight: 'bold', ...padding, ...margin }}>
+      ¥{value}
+    </span>
+  );
+};
+
+const WrapPrice: React.FC<PriceProps> = ({ storeKey = "_skuInfo", ...resetProps }) => {
+  const _skuInfo = useModuleContext((s) => s.moduleStore[storeKey]) || {};
+  return <PriceInner dataInfo={_skuInfo} {...resetProps} />;
+};
+
+const WrapRootPrice: React.FC<PriceProps> = ({ storeKey = "", ...resetProps }) => {
+  const _skuInfo = useModuleRootContext((s) => s.rootStore[storeKey]) || {};
+  return <PriceInner dataInfo={_skuInfo} {...resetProps} />;
+};
+
+const PriceJsx: React.FC<PriceProps> = ({ module = "moduleStore", ...resetProps }) => {
+  if (module === "moduleStore") return <WrapPrice {...resetProps} />;
+  return <WrapRootPrice {...resetProps} />;
+};
+
+export const Price = HOCCodeWrapComponent(PriceJsx);
+```
+
+---
+
+## 模板 3：布局/容器组件
+
+适用场景：可包含子元素的布局容器，类似 Container、OutContainer。
+
+这类组件不使用 HOCCodeWrapComponent，而是通过 @craftjs 的 Element 机制。
+
+### 注册方式
+在 dataSource 文件中设置 `isCanvas: true`：
+```typescript
+{
+  name: '自定义容器',
+  icon: 'icon-rectangle',
+  isCanvas: true,
+  Component: LayoutComponent['CustomContainer'],
+  setting: {
+    props: {
+      padding: { paddingTop: 5, paddingBottom: 5 },
+      background: '#fff',
+    },
+    related: {
+      settings: CustomContainerSettings,
+    },
+  },
+}
+```
+
+---
+
+## 模板 4：带 API 数据源的组件
+
+适用场景：需要从 API 拉取数据的组件，或作为 API 数据的容器。
+
+参照 `ApiComponent`（`component-ui/src/basic/api/index.tsx`），通常作为容器包裹其他组件，配合 `linkedNodes` 使用。
+
+---
+
+## 模板 5：操作类组件
+
+适用场景：触发业务操作的组件（加入购物车、购买、保存等）。
+
+这些组件通常调用 `@brushes/component-store-web` 中的操作 hooks。
+
+```typescript
+// 参考 packages/component-ui/src/operate/ 下的现有实现
+import { useModuleContext } from "@brushes/component-core";
+import { HOCCodeWrapComponent } from "@brushes/core-transform";
+
+// 操作组件通常依赖特定的业务 hook
+const BuyJsx: React.FC<BuyProps> = (props) => {
+  const { setModuleStore } = useModuleContext((s) => s);
+  // 业务逻辑...
+  return <Button onClick={...}>立即购买</Button>;
+};
+
+export const Buy = HOCCodeWrapComponent(BuyJsx);
+```
+
+---
+
+## FieldType 完整参考
+
+```typescript
+interface FieldType {
+  label: string;           // 字段标签
+  name: string;            // 对应 props key
+  type: 'text' | 'number' | 'color' | 'select' | 'radio' | 'switch' | 'formList' | 'textarea';
+  extraProps?: {
+    options?: Array<{ label: string; value: any }>;  // select/radio 选项
+    innerForm?: FieldType[];                          // formList 的子表单
+    dependencies?: string[];                          // 联动依赖字段
+  };
+  calIsVisible?: (form: FormInstance) => boolean;     // 条件显示
+}
+```
+
+## 现有 common 公共组件一览
+
+| 导出名 | 用途 |
+|--------|------|
+| `marginField` | 外边距配置字段数组 |
+| `paddingField` | 内边距配置字段数组 |
+| `actionField` | 交互逻辑配置 |
+| `SelectCube` | 魔方选择器（图片 + 链接） |
+| `SelectPictureOrVideo` | 图片/视频选择器 |
+| `SelectLink` | 链接选择器 |
+| `apiField` | API 接口配置 |
+| `columnField` | 列配置 |
+| `borderWidthHeightRadiusField` | 边框/宽/高/圆角配置 |

package/skills/{SKILL.md → schema-to-view/SKILL.md}

@@ -1,5 +1,5 @@
 ---
-name: @brushes/schema-to-view
+name: schema-to-view
 description: >
   根据 Pc / Web UI 截图/设计稿动态生成低代码平台 Web JSON schema。当用户提供Pc/ Web UI 图片要求生成页面、
   将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。
@@ -18,7 +18,7 @@ scope:
     - 已有 Schema 的属性修改
 ---
 
-# @brushes/schema-to-view：UI 截图 → 低代码 JSON Schema
+# schema-to-view：UI 截图 → 低代码 JSON Schema
 
 将 Pc / Web UI 设计稿/截图转换为 web-lowcode 平台可用的 JSON schema 文件。