Dynamic Layout

一个基于配置的动态布局系统，支持通过 JSON 配置快速构建页面布局。

特性

• 基于 JSON 配置的布局系统
• 支持自定义组件注册
• 支持组件特定的 props 属性传递
• TypeScript 支持
• 响应式设计
• 支持组件样式自定义
• 支持组件事件绑定

项目结构

deepinnet-dynamic-layout/
├── src/
│   ├── components/     # 组件目录
│   │   └── base/      # 基础组件
│   ├── types/         # TypeScript 类型定义
│   └── index.tsx      # 入口文件
├── dist/              # 构建输出目录
└── package.json       # 项目配置

安装

npm install deepinnet-dynamic-layout
# 或
yarn add deepinnet-dynamic-layout

使用示例

组件注册

// main.tsx
import { registerComponent } from "dynamic-layout";
registerComponent("DataList", DataList);

组件使用

import { DynamicLayout } from "deepinnet-dynamic-layout";

const config = {
  version: "1.0",
  layout: {
    type: "div",
    style: {
      height: "100%",
      width: "100%",
      display: "flex",
      flexDirection: "column",
      margin: "0",
      padding: "0",
      overflow: "hidden",
      position: "fixed",
      top: "0",
      left: "0",
      right: "0",
      bottom: "0",
    },
    children: [
      {
        type: "div",
        style: {
          height: "60px",
          width: "100%",
          backgroundColor: "#f5f5f5",
          borderBottom: "1px solid #e8e8e8",
        },
      },
      {
        type: "div",
        style: {
          flex: "1",
          display: "flex",
          width: "100%",
          overflow: "hidden",
        },
        children: [
          {
            type: "div",
            style: {
              width: "200px",
              height: "100%",
              borderRight: "1px solid #e8e8e8",
            },
            children: [
              {
                type: "DataList",
                style: {
                  width: "100%",
                  height: "100%",
                },
              },
            ],
          },
          {
            type: "div",
            style: {
              flex: "1",
              height: "100%",
            },
          },
          {
            type: "div",
            style: {
              width: "200px",
              height: "100%",
              borderLeft: "1px solid #e8e8e8",
            },
          },
        ],
      },
    ],
  },
};

function Home() {
  return <DynamicLayout config={config} />;
}

配置说明

组件属性

所有组件都支持以下通用属性：

• type: 组件类型
• style: 组件样式
• children: 子组件
• onClick: 点击事件
• className: 自定义类名
• props: 组件特定的属性

props 属性使用

props 属性允许您传递组件特定的属性，这些属性会与顶层属性合并，props 中的属性具有更高优先级。

const config = {
  version: "1.0",
  layout: {
    type: "div",
    style: { padding: "20px" },
    children: [
      {
        type: "DataList",
        style: { width: "100%" },
        props: {
          dataSource: ["item1", "item2", "item3"],
          loading: false,
          pagination: { pageSize: 10 },
          onItemClick: (item) => console.log(item),
        },
      },
      {
        type: "Chart",
        style: { height: "300px" },
        props: {
          option: {
            xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
            yAxis: { type: "value" },
            series: [{ data: [120, 200, 150], type: "bar" }],
          },
        },
      },
    ],
  },
};

开发

# 安装依赖
npm install

# 开发
npm run dev

# 构建
npm run build

# 测试
npm test

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

License

MIT