@rocktyy/dynamic-page-core v0.0.1

Dynamic Page Core

一个基于 React 的动态页面渲染引擎，支持静态和动态路由、组件渲染、布局管理等功能。

特性

• 支持静态和动态路由配置
• 灵活的页面布局系统
• 组件渲染系统
• 支持事件处理
• 支持样式管理
• 支持默认页面配置

安装

npm install dynamic-page-core

使用方法

1. 配置类型

import { Config, Page, Component } from 'dynamic-page-core';

const config: Config = {
  pages: {
    home: {
      id: 'home',
      path: '/',
      layout: {
        // 页面布局配置
      },
      components: [
        // 组件配置
      ]
    },
    dynamic: {
      id: 'dynamic',
      path: '/dynamic/:id',
      layout: {
        // 页面布局配置
      },
      components: [
        // 组件配置
      ]
    }
  },
  defaultPage: 'home'
};

2. 使用 DynamicPage 组件

import { DynamicPage } from 'dynamic-page-core';

function App() {
  return (
    <DynamicPage config={config} />
  );
}

3. 使用 useConfig Hook

import { useConfig } from 'dynamic-page-core';

function MyComponent() {
  const { currentPage } = useConfig(config);
  
  if (!currentPage) {
    return <div>Page not found</div>;
  }

  return (
    <div>
      Current page: {currentPage.id}
    </div>
  );
}

配置说明

Config 接口

interface Config {
  pages: Record<string, Page>;
  defaultPage?: string;
}

Page 接口

interface Page {
  id: string;
  path: string;
  layout: PageLayout;
  components: Component[];
  params?: Record<string, string>;
}

Component 接口

interface Component {
  id: string;
  type: string;
  props?: Record<string, any>;
  layout: ComponentLayout;
  events?: Record<string, () => void>;
}

布局系统

PageLayout

页面布局支持以下属性：

• display: 'flex' | 'grid' | 'block'
• flexDirection: 'row' | 'column'
• gap: number
• padding: number
• margin: number
• backgroundColor: string
• position: 'relative' | 'absolute' | 'fixed'
• top: number
• left: number
• right: number
• bottom: number
• width: number
• height: number

ComponentLayout

组件布局支持与 PageLayout 相同的属性，用于控制单个组件的位置和样式。

事件处理

组件支持事件处理：

const component: Component = {
  id: 'button',
  type: 'button',
  props: {
    text: 'Click me'
  },
  events: {
    onClick: () => {
      console.log('Button clicked');
    }
  }
};

动态路由

支持动态路由参数：

const config: Config = {
  pages: {
    dynamic: {
      id: 'dynamic',
      path: '/dynamic/:id',
      // ... 其他配置
    }
  }
};

在组件中可以通过 useConfig hook 访问路由参数：

function MyComponent() {
  const { currentPage } = useConfig(config);
  
  if (currentPage?.params) {
    console.log('Dynamic ID:', currentPage.params.id);
  }
}

开发

# 安装依赖
npm install

# 运行测试
npm test

# 构建
npm run build

许可证

MIT