# maishu-jueying

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

Latest version **5.0.0** (published 2026-09-14) · 0 weekly downloads

## Install

```sh
npm install maishu-jueying
pnpm add maishu-jueying
yarn add maishu-jueying
bun add maishu-jueying
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-09-14 |
| First published | 2018-11-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ansiboy |

## Links

- npm: https://www.npmjs.com/package/maishu-jueying
- npm.io page: https://npm.io/package/maishu-jueying

## Dependencies (16)

- [antd](https://npm.io/package/antd.md) ^5.29.3
- [react](https://npm.io/package/react.md) ^18.3.1
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.1
- [prettier](https://npm.io/package/prettier.md) ^3.8.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.3.1
- [css-loader](https://npm.io/package/css-loader.md) ^7.1.4
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.15.6
- [react-quill](https://npm.io/package/react-quill.md) ^2.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^16.0.7
- [@dnd-kit/core](https://npm.io/package/@dnd-kit/core.md) ^6.3.1
- [jsondiffpatch](https://npm.io/package/jsondiffpatch.md) ^0.4.1
- [maishu-toolkit](https://npm.io/package/maishu-toolkit.md) ^1.12.8
- [@dnd-kit/sortable](https://npm.io/package/@dnd-kit/sortable.md) ^10.0.0
- [@dnd-kit/modifiers](https://npm.io/package/@dnd-kit/modifiers.md) ^6.0.1
- [@dnd-kit/utilities](https://npm.io/package/@dnd-kit/utilities.md) ^3.2.2
- [@dnd-kit/accessibility](https://npm.io/package/@dnd-kit/accessibility.md) ^3.1.1

## Recent versions

- 5.0.0 (latest) — 2026-09-14
- 4.2.12 — 2023-01-31
- 4.2.9 — 2023-01-29
- 4.2.7 — 2023-01-29
- 4.1.31 — 2023-01-12
- 4.0.21 — 2023-01-05
- 3.5.1 — 2022-11-09
- 3.4.1 — 2022-11-04
- 3.1.19 — 2021-03-16
- 3.1.17 — 2021-03-02
- 3.1.16 — 2021-03-02
- 3.1.14 — 2021-03-02
- 3.1.13 — 2021-01-16
- 3.1.12 — 2021-01-13
- 3.1.9 — 2021-01-11
- … 35 more at https://npm.io/package/maishu-jueying/versions

## README

# 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. 安装依赖

```bash
npm install
```

### 2. 启动开发环境

```bash
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

## 常用命令

```bash
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

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

## 目录结构

```text
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：内置组件类型、列类型和编辑器配置

最小接入示例：

```tsx
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 子路径

## 测试

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

```bash
npm test
```

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

## 当前状态

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

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

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

---
_Source: https://npm.io/package/maishu-jueying · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._