maishu-jueying

Jueying

Jueying 是一个基于 React、TypeScript 与 Ant Design 生态的可视化页面设计与属性编辑库。仓库同时包含一个可运行的 Demo 应用，用于演示组件设计器、属性编辑器、DataList / ProTable 等页面构建能力。

当前仓库既可以作为组件库源码进行二次开发，也可以通过 Demo 验证设计器、属性编辑器和页面生成相关能力。

核心能力

• 可视化组件设计器，支持组件树编辑、属性编辑与结构调整
• 属性编辑器体系，覆盖基础值、对象、数组、样式、表达式、ReactNode 等场景
• 内置 DataForm、DataList、ProTable、TreeList、Page 等编辑配置
• 组件配置、列配置、字段配置等元数据驱动能力
• Demo 应用可直接预览页面、菜单、表单与属性编辑场景

技术栈

• React 18
• TypeScript
• Ant Design 5
• Webpack 5
• NestJS
• Jest
• SQLite（Demo 默认配置）

快速开始

1. 安装依赖

npm install

2. 启动开发环境

npm start

该命令会同时完成以下工作：

• 监听并编译 demo/src 下的服务端与静态前端代码
• 启动 Demo 服务，默认地址为 http://localhost:3000
• 监听并打包库代码到 node_modules/maishu-jueying，供 Demo 直接引用
• 在源码变更后通过 SSE 通知前端刷新

开发态有一个实现细节需要注意：Demo 前端依赖 demo/out/static 中预编译后的 AMD 模块，而不是在请求时动态转译 TypeScript。

3. 打开演示页面

启动后可以直接访问以下页面：

• http://localhost:3000/
• http://localhost:3000/property-editor-demos
• http://localhost:3000/property-editor-demos/designer-panel
• http://localhost:3000/page/list

常用命令

npm start
npm run build
npm test

说明：

• npm start：启动 Demo 开发环境与源码监听
• npm run build：构建发布产物到 dist
• npm test：运行 Jest 测试并输出覆盖率到 coverage

构建产物

执行 npm run build 后，产物会输出到 dist 目录。

开发环境中，库代码会额外打包到 node_modules/maishu-jueying，供 Demo 中的 RequireJS / 浏览器侧模块加载直接使用。

Demo 配置

Demo 默认配置文件位于 demo/config.yaml，当前仓库内默认值包括：

• 端口：3000
• 数据库：data/maju.db3
• 数据库类型：sqlite

如需调整端口或数据库连接，可修改该配置文件后重新启动开发环境。

目录结构

src/            组件库源码
demo/           Demo 应用源码（NestJS 服务端 + React 静态前端）
scripts/        构建与开发脚本
static/         Demo 公共静态资源
data/           Demo 默认数据文件
doc/            设计说明与规划文档
coverage/       测试覆盖率输出

其中：

• src/index.ts 是主入口，导出设计器、解析器、上下文和默认配置
• src/property-editors 提供属性编辑器集合
• src/component-editors.tsx 提供组件编辑器配置导出
• demo/src/static/app.tsx 定义了 Demo 前端路由

作为库接入

主入口导出了一组常用能力：

• Designer：可视化设计器主组件
• ComponentParser / RuntimeComponentParser：组件解析能力
• generateComponentJSX：根据组件结构生成 JSX
• defaultConfigData：内置组件类型、列类型和编辑器配置

最小接入示例：

import React from 'react';
import { Designer, defaultConfigData, type ComponentData } from 'maishu-jueying';

type Props = {
  componentData: ComponentData;
};

export function DesignerPage(props: Props) {
  return (
    <Designer
      componentData={props.componentData}
      componentTypes={defaultConfigData.componentTypes}
      componentEditors={defaultConfigData.componentEditors}
      onChanged={(nextData) => {
        console.log('component changed', nextData);
      }}
    />
  );
}

如果你需要单独使用属性编辑器或组件编辑器配置，也可以从以下子路径导入：

• maishu-jueying/property-editors
• maishu-jueying/component-editors
• maishu-jueying/components

开发说明

• Demo 静态页面源码位于 demo/src/static
• Demo 服务端源码位于 demo/src
• 修改 demo/src/static 后，需要确保对应文件被编译到 demo/out/static
• 浏览器侧入口只映射了若干顶层模块路径，Demo 中应避免直接引用过深的 maishu-jueying 子路径

测试

仓库包含组件设计器、属性编辑器、解析器、配置与公共工具等单元测试。执行以下命令可运行全部测试：

npm test

覆盖率结果会输出到 coverage 目录。

当前状态

项目仍在持续迭代中，当前待办事项记录在 TODO.md，包括：

• 代码编辑器交互优化
• JSX 代码预览增强
• 属性编辑器剩余能力补全
• 组件搜索与高级查询
• 设计器折叠状态持久化

如果你准备继续开发，建议先从 Demo 页面和 TODO.md 了解当前可用能力与后续方向。