# large-screen-dev-template

**Repository Path**: beehive-insight/large-screen-dev-template

## Basic Information

- **Project Name**: large-screen-dev-template
- **Description**: 基于nextjs的大屏开发模板项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-27
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目录说明

```txt
|---- app
    |---- nextjs 的路由文件
    |---- screen-xxx/    某个大屏的入口
        |---- _modules/   大屏模块入口
            |---- section/  大屏小模块，或者分组，可选路径
            |---- index.tsx  组件入口，完成注册后，导出`getWidgets, screenName,`
            |---- fields.tsx 定义交互字段
            |---- screen.tsx 初始化的大屏组件方法
        |---- page.tsx  大屏入口
|---- components
    |---- large-screen-stage/  大屏容器以及各种状态管理
    |---- ui/ 组件
        |---- 存放公共组件
|---- hooks
    |---- useDebug.tsx
    |---- useLatest.tsx
    |---- useMemoizedFn.tsx
    |---- useSeState.tsx
|---- lib
    |---- constants.ts
    |---- definedFields.ts
```

# 快速开始

-   基于本项目创建项目
-   安装依赖
-   在 `app` 目录下面完成初始化
    -   创建大屏文件夹，如：`screen-xxx`
    -   在 `screen-xxx` 目录下面完成初始化
        -   创建 `_modules` 目录
            -   创建 `index.tsx` 文件，完成注册组件
            -   创建 `fields.tsx` 文件，定义交互字段
            -   创建 `screen.tsx` 文件，完成初始化的大屏组件方法
        -   创建 `page.tsx` 文件，完成大屏入口
-   在 `app` 目录下面完成路由配置

# 组件注册

```ts
const registerWidget: (opts: {
    name: any;
    element: React.ComponentType | React.LazyExoticComponent<any>;
    layout: TWidget['layout'];
    style?: TWidget['style'];
    group?: string | number;
    animateCss?: TWidget['animateCss'];
    subscribe?: Record<string, any>;
}) => void;
```

# 页面渲染

```tsx
'use client';

import { LargeScreenStage } from '@/components/large-screen-stage';
import { getWidgets } from './modules';
export const Demo = () => {
    return (
        <LargeScreenStage className='outline' designWidth={4300} designHeight={1200} getWidgets={getWidgets} enableSearchGroupFilter>
            <div>Hello World</div>
        </LargeScreenStage>
    );
};
```