Package Exports

deepinnet-dynamic-layout
deepinnet-dynamic-layout/dist/index.esm.js
deepinnet-dynamic-layout/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (deepinnet-dynamic-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

贡献指南

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

License

MIT