# FreeSwitch 会议布局设计器

**Repository Path**: ai-builder/freeswitch-layout-designer

## Basic Information

- **Project Name**: FreeSwitch 会议布局设计器
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-31
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FreeSWITCH 视频会议布局设计器

FreeSWITCH 视频会议布局设计器是一个可视化工具，用于设计和配置 FreeSWITCH 视频会议的布局。通过该工具，用户可以直观地创建和调整视频会议中各个参与者的显示位置和大小。

![设计器界面](./_resources/designer.png)
![代码示例](./_resources/code.png)

## 功能特点

- 🎨 **可视化布局设计**：通过拖拽方式直观地设计视频会议布局
- 📐 **预设模板**：提供多种常用布局模板，如 1x1、2x2、1+5 等
- 👥 **参与者管理**：轻松管理会议参与者并分配到布局元素
- 🔍 **实时预览**：实时查看布局效果
- 💻 **代码生成**：自动生成可用于 FreeSWITCH 的布局代码
- 📱 **响应式设计**：适配不同屏幕尺寸和设备
- 🌙 **深色模式**：支持深色和浅色主题切换

## 技术栈

- [Next.js 15](https://nextjs.org/)
- [React 19](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)
- [Lucide React](https://lucide.dev/)

## 快速开始

### 环境要求

- Node.js 18+
- pnpm

### 安装

```bash
pnpm install
```

### 开发

```bash
pnpm dev
```

访问 http://localhost:3000 查看应用。

### 构建

```bash
pnpm build
```

## 使用说明

1. **创建布局**：
   - 在设计器中添加新的布局元素
   - 或应用预设模板快速创建布局

2. **调整元素**：
   - 拖拽元素调整位置
   - 拖拽边缘调整元素大小
   - 点击元素进行详细设置

3. **分配参与者**：
   - 在参与者列表中管理会议参与者
   - 将参与者分配到对应的布局元素

4. **查看结果**：
   - 在预览标签页查看实时效果
   - 在代码标签页获取生成的配置代码

## 项目结构

```
├── app/                 # Next.js 应用目录
├── components/          # React 组件
│   ├── ui/              # 基础 UI 组件
│   ├── layout-designer.tsx  # 布局设计器主组件
│   ├── layout-preview.tsx   # 布局预览组件
│   └── layout-code.tsx      # 代码生成组件
├── lib/                 # 工具库和类型定义
└── _resources/          # 文档资源文件
```

## 许可证

[MIT](LICENSE)