# ProtoCanvas

**Repository Path**: coderzhouyu/proto-canvas

## Basic Information

- **Project Name**: ProtoCanvas
- **Description**: ProtoCanvas 是一个轻量级 HTML 原型设计工具，无需复杂配置，可快速创建、编辑和管理 HTML 原型组件。支持多画板管理、拖拽布局、多分辨率适配，适合前端开发者和设计师快速搭建界面原型，验证交互逻辑。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-11-08
- **Last Updated**: 2025-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ProtoCanvas（原型画布）

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

ProtoCanvas 是一个轻量级 HTML 原型设计工具，无需复杂配置，可快速创建、编辑和管理 HTML
原型组件。支持多画板管理、拖拽布局、多分辨率适配，适合前端开发者和设计师快速搭建界面原型，验证交互逻辑。

## 核心功能

- **多画板管理**：支持创建多个独立画板，按页面或功能模块分类管理
- **区域自定义**：添加不同分辨率区域（支持 PC/移动端预设尺寸），直接编写 HTML 内容
- **拖拽布局**：可视化调整区域位置，实时保存布局状态
- **缩放控制**：支持画布缩放，适应不同尺寸原型预览
- **即时预览**：区域内容实时渲染，所见即所得
- **轻量部署**：基于 PHP 开发，无需数据库，数据以 JSON 和文件形式存储，部署简单

## 快速开始

### 环境要求

- PHP 7.0+（兼容 PHP 8.0+）
- 服务器：Apache/Nginx 或本地 PHP 环境（如 XAMPP/WAMP）
- 权限：`html_canvas_data` 目录需读写权限

### 安装步骤

1. **获取代码**

   ```bash
   git clone https://gitee.com/coderzhouyu/proto-canvas.git
   cd proto-canvas

或直接下载 ZIP 包解压。

1. 配置密码编辑 config.php 文件，修改管理员密码（默认密码为 123456）：php
   define('ADMIN_PASSWORD', '你的新密码');
2. 启动服务
   ○ 本地开发：使用 PHP 内置服务器bash
   php -S localhost:8000
   ○ 服务器部署：上传代码至网站根目录，通过域名访问
3. 访问工具打开浏览器访问 http://localhost:8000（或你的域名），使用配置的密码登录。
### 使用指南
1. 画板管理
   * 创建画板：登录后点击左侧「新建画板」，输入名称即可
   * 重命名画板：左侧树状目录中点击编辑图标，修改名称并确认
   * 删除画板：左侧树状目录中点击删除图标，确认后删除（含关联区域）
   * 切换画板：点击左侧画板名称进入对应编辑界面
2. 区域管理
   * 添加区域：填写「区域名称」、选择「分辨率」、输入「HTML 内容」，点击「添加到画板」
   * 编辑区域：左侧区域列表点击「编辑」，修改后保存
   * 调整位置：右侧画布中拖拽区域，松开自动保存
   * 删除区域：左侧区域列表点击「删除」，确认后删除
3. 视图控制
   * 缩放画布：顶部工具栏「+/-」按钮调整缩放比例
   * 重置视图：点击「重置视图」恢复默认缩放和位置
   * 收起 / 展开侧边栏：点击顶部按钮切换侧边栏显示状态
## 目录结构
```plaintext
   protocanvas/
   ├── assets/ # 静态资源
   │ ├── css/ # 样式文件
   │ └── js/ # 交互脚本
   ├── html_canvas_data/ # 数据存储（自动创建）
   │ ├── html_files/ # 区域HTML文件
   │ └── app_data.json # 配置数据
   ├── templates/ # 页面模板
   │ ├── login.php # 登录页
   │ └── main.php # 主界面
   ├── config.php # 配置文件（密码、路径等）
   ├── functions.php # 辅助函数
   ├── handlers.php # 业务逻辑
   ├── init.php # 初始化脚本
   └── index.php # 入口文件
```

   ## 贡献指南

   欢迎参与贡献！无论是 Bug 报告、功能建议还是代码提交：
   1. Fork 本仓库
   2. 创建特性分支（git checkout -b feature/xxx）
   3. 提交修改（git commit -m 'Add xxx'）
   4. 推送到分支（git push origin feature/xxx）
   5. 打开 Pull Request


   ## 许可证
   本项目采用 MIT 许可证开源，详情参见 LICENSE 文件。
   ## 截图预览
   登录界面
   ![](images/login.png)
   项目管理
   ![](images/project.png)
   看板
   ![](images/kanban.png)