# 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/index.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 了解当前可用能力与后续方向。