低代码开发模版

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

📸 界面截图

主要界面

仪表板界面 - 主控制面板，包含项目概览和分析

项目管理

项目管理 - 创建、编辑和管理开发项目

版本管理 - 跟踪和管理应用版本

设计工具

可视化设计器 - 带组件库的拖拽式界面构建器

表单设计器 - 带逻辑设计器和验证的高级表单构建器

模型设计器 - 数据模型设计器，支持字段管理和关联关系

数据管理

数据源管理 - 连接和管理各种数据源

数据模型管理 - 设计和管理数据模型及关联关系

API管理 - 设计、测试和管理REST API

发布管理

应用发布 - 部署和发布应用到生产环境

用户管理

登录页面 - 简洁现代的认证界面

注册页面 - 用户注册，包含公司信息

系统设置 - 全面的平台配置

🚀 功能特性

核心功能

仪表板管理 - 全面的项目概览和分析
项目管理 - 创建、编辑和管理开发项目
可视化设计器 - 带组件库的拖拽式界面构建器
表单设计器 - 带逻辑设计器和验证的高级表单构建器
模型设计器 - 带字段管理和关联的数据模型设计
数据源管理 - 连接和管理各种数据源
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服务器（可选，用于开发）

快速开始

克隆仓库

git clone https://github.com/peterfei/lowcode-dev-template.git
cd lowcode-dev-template

在浏览器中打开
- 直接在浏览器中打开任何HTML文件
- 或使用本地服务器获得更好的开发体验：
```
# 使用Python
python -m http.server 8000

# 使用Node.js
npx serve .

# 使用PHP
php -S localhost:8000
```
导航到模版
- 打开 dashboard.html 开始探索
- 使用侧边栏导航访问不同功能

开发设置

自定义设计
- 修改 css/style.css 进行全局样式设置
- 编辑单个HTML文件进行页面特定更改
- 更新 js/breadcrumb.js 进行导航逻辑设置
添加新页面
- 在目录中创建新的HTML文件
- 遵循现有的结构和命名约定
- 在所有页面中更新侧边栏导航
扩展功能
- 在 js/ 中添加新的JavaScript模块
- 在 css/ 中创建新的CSS组件
- 遵循模块化架构模式

🎨 设计系统

设计文档概览

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

产品界面规划

信息架构设计

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

界面布局规划

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

关键界面设计

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

UI设计系统规范

色彩系统

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

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

字体系统

/* 中文字体 */
--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 */

间距系统

--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	完整的产品界面架构设计，包含信息架构、布局规划、关键界面设计等
UI设计系统规范	ui-design-system.md	统一的设计系统规范，包含色彩、字体、间距、组件、图标、动画等完整规范

设计文档使用指南

产品界面规划文档 - 了解整体产品架构和界面布局
- 信息架构设计：模块划分和导航结构
- 界面布局规划：不同屏幕尺寸的适配方案
- 关键界面设计：各模块的详细界面设计
UI设计系统规范 - 遵循统一的设计标准
- 色彩系统：主色调、功能色彩、中性色彩
- 字体系统：中英文字体、大小、权重规范
- 组件规范：按钮、输入框、卡片、导航等组件标准
- 图标系统：图标库选择和尺寸规范
- 动画系统：过渡、悬停、加载动画效果
用户体验分析 - 理解用户需求和交互设计
- 设计原则：简洁高效、一致性、可访问性
- 交互设计：鼠标、触摸、键盘操作支持
- 状态设计：加载、空状态、成功、错误状态

快速访问

# 查看产品界面规划
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+

🤝 贡献

我们欢迎贡献！请查看我们的贡献指南了解详情。

如何贡献

Fork仓库
创建功能分支
进行更改
充分测试
提交拉取请求

贡献领域

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

📄 许可证

本项目采用MIT许可证 - 查看LICENSE文件了解详情。

English License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 致谢

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

📞 支持

🗺️ 路线图

版本 1.0

添加更多交互式组件
实现数据持久化
添加用户身份验证
创建组件库

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

FilesExpand file tree

README_CN.md

Latest commit

History