# lowcode-dev-template

**Repository Path**: peterfei_1109/lowcode-dev-template

## Basic Information

- **Project Name**: lowcode-dev-template
- **Description**: 一个具有现代UI设计和交互功能的高保真低代码开发平台模版。本项目提供了一套完整的HTML模版， 展示了一个综合的低代码开发平台界面，非常适合快速原型设计和开发。
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 0
- **Created**: 2025-10-23
- **Last Updated**: 2025-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: lowcode, 低代码, 开发模版, HTML, CSS

## README

# 低代码开发模版

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

一个具有现代UI设计和交互功能的高保真低代码开发平台模版。本项目提供了一套完整的HTML模版，展示了一个综合的低代码开发平台界面，非常适合快速原型设计和开发。

## 📸 界面截图

### 主要界面
<div align="center">
  <img src="images/thumbs/dashboard.png" alt="仪表板界面" width="800"/>
  <p><strong>仪表板界面</strong> - 主控制面板，包含项目概览和分析</p>
</div>

### 项目管理
<div align="center">
  <img src="images/thumbs/projects.png" alt="项目管理" width="800"/>
  <p><strong>项目管理</strong> - 创建、编辑和管理开发项目</p>
</div>

<div align="center">
  <img src="images/thumbs/versions.png" alt="版本管理" width="800"/>
  <p><strong>版本管理</strong> - 跟踪和管理应用版本</p>
</div>

### 设计工具
<div align="center">
  <img src="images/thumbs/designer.png" alt="可视化设计器" width="800"/>
  <p><strong>可视化设计器</strong> - 带组件库的拖拽式界面构建器</p>
</div>

<div align="center">
  <img src="images/thumbs/form-designer.png" alt="表单设计器" width="800"/>
  <p><strong>表单设计器</strong> - 带逻辑设计器和验证的高级表单构建器</p>
</div>

<div align="center">
  <img src="images/thumbs/model-designer.png" alt="模型设计器" width="800"/>
  <p><strong>模型设计器</strong> - 数据模型设计器，支持字段管理和关联关系</p>
</div>

### 数据管理
<div align="center">
  <img src="images/thumbs/data-sources.png" alt="数据源管理" width="800"/>
  <p><strong>数据源管理</strong> - 连接和管理各种数据源</p>
</div>

<div align="center">
  <img src="images/thumbs/data-models.png" alt="数据模型管理" width="800"/>
  <p><strong>数据模型管理</strong> - 设计和管理数据模型及关联关系</p>
</div>

<div align="center">
  <img src="images/thumbs/api-management.png" alt="API管理" width="800"/>
  <p><strong>API管理</strong> - 设计、测试和管理REST API</p>
</div>

### 发布管理
<div align="center">
  <img src="images/thumbs/publish.png" alt="应用发布" width="800"/>
  <p><strong>应用发布</strong> - 部署和发布应用到生产环境</p>
</div>

### 用户管理
<div align="center">
  <img src="images/thumbs/login.png" alt="登录页面" width="400"/>
  <p><strong>登录页面</strong> - 简洁现代的认证界面</p>
</div>

<div align="center">
  <img src="images/thumbs/register.png" alt="注册页面" width="400"/>
  <p><strong>注册页面</strong> - 用户注册，包含公司信息</p>
</div>

<div align="center">
  <img src="images/thumbs/settings.png" alt="系统设置" width="800"/>
  <p><strong>系统设置</strong> - 全面的平台配置</p>
</div>

## 🚀 功能特性

### 核心功能
- **仪表板管理** - 全面的项目概览和分析
- **项目管理** - 创建、编辑和管理开发项目
- **可视化设计器** - 带组件库的拖拽式界面构建器
- **表单设计器** - 带逻辑设计器和验证的高级表单构建器
- **模型设计器** - 带字段管理和关联的数据模型设计
- **数据源管理** - 连接和管理各种数据源
- **API管理** - 设计、测试和管理REST API
- **版本控制** - 跟踪和管理应用版本
- **系统设置** - 全面的平台配置

### 设计特性
- **现代UI设计** - 遵循现代设计原则的简洁专业界面
- **响应式布局** - 完全响应式设计，支持桌面、平板和移动设备
- **交互式组件** - 丰富的交互元素和平滑动画
- **统一品牌** - 所有页面统一的品牌标识
- **无障碍设计** - 遵循无障碍设计最佳实践

### 技术特性
- **纯HTML/CSS/JS** - 无框架依赖，易于定制
- **FontAwesome图标** - 全面的图标库
- **模块化架构** - 良好的代码组织结构
- **跨浏览器兼容** - 支持所有现代浏览器

## 📁 项目结构

```
lowcode-dev-template/
├── ./                 # 主要模版文件
│   ├── css/                   # 共享CSS样式
│   │   └── style.css         # 统一样式系统
│   ├── js/                   # JavaScript工具
│   │   └── breadcrumb.js     # 面包屑导航管理器
│   ├── images/               # 图片资源
│   │   └── username.png      # 用户头像图片
│   ├── interface-planning.md # 产品界面规划文档
│   ├── ui-design-system.md   # UI设计系统规范
│   ├── dashboard.html        # 主仪表板
│   ├── projects.html         # 项目管理
│   ├── designer.html         # 可视化设计器
│   ├── form-designer.html    # 表单构建器
│   ├── model-designer.html   # 数据模型设计器
│   ├── data-sources.html     # 数据源管理
│   ├── data-models.html      # 数据模型管理
│   ├── api-management.html   # API管理
│   ├── publish.html          # 应用发布
│   ├── versions.html         # 版本管理
│   └── settings.html         # 系统设置
├── LICENSE                   # MIT许可证 (英文)
├── LICENSE_CN.md            # MIT许可证 (中文)
├── README.md                # 英文文档
├── README_CN.md             # 中文文档
└── CONTRIBUTING.md          # 贡献指南
```

## 🛠️ 安装和使用

### 前置要求
- 现代网页浏览器（Chrome、Firefox、Safari、Edge）
- 本地Web服务器（可选，用于开发）

### 快速开始

1. **克隆仓库**
   ```bash
   git clone https://github.com/peterfei/lowcode-dev-template.git
   cd lowcode-dev-template
   ```

2. **在浏览器中打开**
   - 直接在浏览器中打开任何HTML文件
   - 或使用本地服务器获得更好的开发体验：
   ```bash
   # 使用Python
   python -m http.server 8000
   
   # 使用Node.js
   npx serve .
   
   # 使用PHP
   php -S localhost:8000
   ```

3. **导航到模版**
   - 打开 `dashboard.html` 开始探索
   - 使用侧边栏导航访问不同功能

### 开发设置

1. **自定义设计**
   - 修改 `css/style.css` 进行全局样式设置
   - 编辑单个HTML文件进行页面特定更改
   - 更新 `js/breadcrumb.js` 进行导航逻辑设置

2. **添加新页面**
   - 在目录中创建新的HTML文件
   - 遵循现有的结构和命名约定
   - 在所有页面中更新侧边栏导航

3. **扩展功能**
   - 在 `js/` 中添加新的JavaScript模块
   - 在 `css/` 中创建新的CSS组件
   - 遵循模块化架构模式

## 🎨 设计系统

### 设计文档概览

| 文档类型 | 文件名 | 描述 | 链接 |
|---------|--------|------|------|
| 产品界面规划 | interface-planning.md | 完整的产品界面架构和布局规划 | [查看详情](#产品界面规划) |
| UI设计系统 | ui-design-system.md | 统一的设计规范和组件标准 | [查看详情](#ui设计系统规范) |

### 产品界面规划

#### 信息架构设计
```
快速开发平台
├── 用户认证模块 (登录、注册、密码重置)
├── 主控制台模块 (仪表板、项目管理、用户设置)
├── 可视化设计器模块 (设计器主界面、组件库、属性配置)
├── 数据管理模块 (数据源、数据模型、API接口)
└── 发布管理模块 (应用发布、版本管理、部署配置)
```

#### 界面布局规划
- **标准布局**: 1920x1080 (顶部导航60px + 左侧边栏280px + 主内容1640px)
- **紧凑布局**: 1366x768 (顶部导航50px + 左侧边栏240px + 主内容1126px)
- **响应式设计**: 支持桌面、平板、移动端适配

#### 关键界面设计
- **登录注册**: 居中卡片式布局，支持分步骤表单
- **主控制台**: 网格布局 + 卡片组件，数据可视化
- **可视化设计器**: 三栏布局（组件库 + 画布 + 属性面板）
- **数据管理**: 列表 + 详情布局，图形化编辑器
- **发布管理**: 步骤向导布局，实时监控

### UI设计系统规范

#### 色彩系统
```css
/* 主色调 */
--primary-500: #0ea5e9;  /* 主品牌色 */
--secondary-500: #64748b; /* 辅助色 */

/* 功能色彩 */
--success-500: #22c55e;   /* 成功色 */
--warning-500: #f59e0b;   /* 警告色 */
--error-500: #ef4444;     /* 错误色 */
--info-500: #3b82f6;      /* 信息色 */
```

#### 字体系统
```css
/* 中文字体 */
--font-family-zh: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;

/* 英文字体 */
--font-family-en: "Inter", "SF Pro Display", -apple-system, sans-serif;

/* 字体大小 */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
```

#### 间距系统
```css
--space-2: 0.5rem;    /* 8px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
```

#### 组件设计规范
- **按钮组件**: 主要按钮、次要按钮、悬停效果
- **输入框组件**: 统一样式、焦点状态、占位符
- **卡片组件**: 阴影效果、悬停动画、内容分区
- **导航组件**: 顶部导航、侧边导航、面包屑导航

#### 图标系统
- **主要图标库**: FontAwesome 6.0
- **图标尺寸**: xs(12px) ~ xl(32px)
- **图标风格**: 线性图标为主，填充图标为辅

#### 动画系统
- **过渡动画**: 0.2s ease 基础过渡
- **悬停动画**: 上浮、缩放、淡入淡出效果
- **加载动画**: 旋转、脉冲动画效果

### 用户体验分析

#### 设计原则
- **简洁高效**: 界面简洁明了，操作高效便捷
- **一致性**: 统一的设计语言和交互模式
- **可访问性**: 支持无障碍访问和键盘操作
- **响应式**: 适配不同屏幕尺寸和设备

#### 交互设计
- **鼠标操作**: 悬停效果、右键菜单
- **触摸操作**: 点击反馈、手势支持
- **键盘操作**: 快捷键、Tab导航

#### 状态设计
- **加载状态**: 骨架屏、进度条、加载动画
- **空状态**: 空状态插画、操作提示
- **成功状态**: 成功提示、自动关闭
- **错误状态**: 错误信息、重试按钮

## 📚 设计文档

### 完整设计文档链接

| 文档 | 路径 | 描述 |
|------|------|------|
| **产品界面规划** |  [interface-planning.md](./interface-planning.md) | 完整的产品界面架构设计，包含信息架构、布局规划、关键界面设计等 |
| **UI设计系统规范** | [ui-design-system.md](./ui-design-system.md) | 统一的设计系统规范，包含色彩、字体、间距、组件、图标、动画等完整规范 |


### 设计文档使用指南

1. **产品界面规划文档** - 了解整体产品架构和界面布局
   - 信息架构设计：模块划分和导航结构
   - 界面布局规划：不同屏幕尺寸的适配方案
   - 关键界面设计：各模块的详细界面设计

2. **UI设计系统规范** - 遵循统一的设计标准
   - 色彩系统：主色调、功能色彩、中性色彩
   - 字体系统：中英文字体、大小、权重规范
   - 组件规范：按钮、输入框、卡片、导航等组件标准
   - 图标系统：图标库选择和尺寸规范
   - 动画系统：过渡、悬停、加载动画效果

3. **用户体验分析** - 理解用户需求和交互设计
   - 设计原则：简洁高效、一致性、可访问性
   - 交互设计：鼠标、触摸、键盘操作支持
   - 状态设计：加载、空状态、成功、错误状态

### 快速访问
```bash
# 查看产品界面规划
cat interface-planning.md

# 查看UI设计系统规范
cat ui-design-system.md

```

## 🔧 自定义

### 样式
项目使用 `css/style.css` 中的统一CSS系统。主要自定义点：

- **CSS变量**: 修改配色方案和间距
- **组件样式**: 自定义单个组件外观
- **响应式断点**: 调整不同屏幕尺寸
- **动画效果**: 修改过渡和动画属性

### 功能
通过附加功能扩展平台：

- **新页面类型**: 添加专业设计器界面
- **组件库**: 扩展可用的UI组件
- **数据集成**: 连接到真实数据源
- **用户管理**: 实现身份验证和授权
- **API集成**: 连接到后端服务

## 📱 响应式设计

模版完全响应式，针对以下设备优化：

- **桌面**: 1200px+ (完整功能集)
- **平板**: 768px - 1199px (适配布局)
- **移动**: 320px - 767px (触摸优化)

### 响应式特性
- **灵活网格系统**: 适应不同屏幕尺寸
- **触摸友好界面**: 针对移动交互优化
- **可折叠导航**: 移动友好菜单系统
- **可缩放字体**: 在所有设备上可读

## 🌐 浏览器支持

- **Chrome**: 90+
- **Firefox**: 88+
- **Safari**: 14+
- **Edge**: 90+

## 🤝 贡献

我们欢迎贡献！请查看我们的[贡献指南](CONTRIBUTING.md)了解详情。

### 如何贡献
1. Fork仓库
2. 创建功能分支
3. 进行更改
4. 充分测试
5. 提交拉取请求

### 贡献领域
- **UI/UX改进**: 增强设计和用户体验
- **新功能**: 添加新功能和页面
- **文档**: 改进文档和示例
- **错误修复**: 报告和修复问题
- **性能**: 优化代码和资源

## 📄 许可证

本项目采用MIT许可证 - 查看[LICENSE](./LICENSE_CN.md)文件了解详情。

### English License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

## 🙏 致谢

- **Tailwind CSS** - 提供实用优先的CSS框架
- **FontAwesome** - 提供全面的图标库
- **贡献者** - 感谢所有帮助改进此项目的贡献者

## 📞 支持

- **问题**: [GitHub Issues](https://github.com/peterfei/lowcode-dev-template/issues)
- **讨论**: [GitHub Discussions](https://github.com/peterfei/lowcode-dev-template/discussions)
- **邮箱**: peterfeispace@gmail.com

## 🗺️ 路线图

### 版本 1.0
- [ ] 添加更多交互式组件
- [ ] 实现数据持久化
- [ ] 添加用户身份验证
- [ ] 创建组件库

---

**为开发者社区用心制作 ❤️**