# lowcode-dev-template

**Repository Path**: zhangzc82/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**: 0
- **Forks**: 3
- **Created**: 2025-12-04
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LowCode Dev Template

[![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)

A modern, high-fidelity low-code development platform template with interactive UI components. This project provides a complete set of HTML templates showcasing a comprehensive low-code development platform interface, perfect for rapid prototyping and development.

## 📸 Screenshots

### Main Interface
<div align="center">
  <img src="images/thumbs/dashboard.png" alt="Dashboard Interface" width="800"/>
  <p><strong>Dashboard Interface</strong> - Main control panel with project overview and analytics</p>
</div>

### Project Management
<div align="center">
  <img src="images/thumbs/projects.png" alt="Project Management" width="800"/>
  <p><strong>Project Management</strong> - Create, edit, and manage development projects</p>
</div>

<div align="center">
  <img src="images/thumbs/versions.png" alt="Version Management" width="800"/>
  <p><strong>Version Management</strong> - Track and manage application versions</p>
</div>

### Design Tools
<div align="center">
  <img src="images/thumbs/designer.png" alt="Visual Designer" width="800"/>
  <p><strong>Visual Designer</strong> - Drag-and-drop interface builder with component library</p>
</div>

<div align="center">
  <img src="images/thumbs/form-designer.png" alt="Form Designer" width="800"/>
  <p><strong>Form Designer</strong> - Advanced form builder with logic designer and validation</p>
</div>

<div align="center">
  <img src="images/thumbs/model-designer.png" alt="Model Designer" width="800"/>
  <p><strong>Model Designer</strong> - Data model designer with field management and relationships</p>
</div>

### Data Management
<div align="center">
  <img src="images/thumbs/data-sources.png" alt="Data Sources Management" width="800"/>
  <p><strong>Data Sources Management</strong> - Connect and manage various data sources</p>
</div>

<div align="center">
  <img src="images/thumbs/data-models.png" alt="Data Models Management" width="800"/>
  <p><strong>Data Models Management</strong> - Design and manage data models with relationships</p>
</div>

<div align="center">
  <img src="images/thumbs/api-management.png" alt="API Management" width="800"/>
  <p><strong>API Management</strong> - Design, test, and manage REST APIs</p>
</div>

### Publishing
<div align="center">
  <img src="images/thumbs/publish.png" alt="Application Publishing" width="800"/>
  <p><strong>Application Publishing</strong> - Deploy and publish applications to production</p>
</div>

### User Management
<div align="center">
  <img src="images/thumbs/login.png" alt="Login Page" width="400"/>
  <p><strong>Login Page</strong> - Clean and modern authentication interface</p>
</div>

<div align="center">
  <img src="images/thumbs/register.png" alt="Registration Page" width="400"/>
  <p><strong>Registration Page</strong> - User registration with company information</p>
</div>

<div align="center">
  <img src="images/thumbs/settings.png" alt="System Settings" width="800"/>
  <p><strong>System Settings</strong> - Comprehensive platform configuration</p>
</div>

## 🚀 Features

### Core Functionality
- **Dashboard Management** - Comprehensive project overview and analytics
- **Project Management** - Create, edit, and manage development projects
- **Visual Designer** - Drag-and-drop interface builder with component library
- **Form Designer** - Advanced form builder with logic designer and validation
- **Model Designer** - Data model design with field management and associations
- **Data Source Management** - Connect and manage various data sources
- **API Management** - Design, test, and manage REST APIs
- **Version Control** - Track and manage application versions
- **System Settings** - Comprehensive platform configuration

### Design Features
- **Modern UI Design** - Clean, professional interface following modern design principles
- **Responsive Layout** - Fully responsive design supporting desktop, tablet, and mobile
- **Interactive Components** - Rich interactive elements with smooth animations
- **Consistent Branding** - Unified brand identity across all pages
- **Accessibility** - Built with accessibility best practices in mind

### Technical Features
- **Pure HTML/CSS/JS** - No framework dependencies, easy to customize
- **Tailwind CSS** - Utility-first CSS framework for rapid styling
- **FontAwesome Icons** - Comprehensive icon library
- **Modular Architecture** - Well-organized code structure
- **Cross-browser Compatible** - Works on all modern browsers

## 📁 Project Structure

```
lowcode-dev-template/
├── ./                 # Main template files
│   ├── css/                   # Shared CSS styles
│   │   └── style.css         # Unified styling system
│   ├── js/                   # JavaScript utilities
│   │   └── breadcrumb.js     # Breadcrumb navigation manager
│   ├── images/               # Image assets
│   │   └── username.png      # User avatar image
│   ├── interface-planning.md # Product interface planning document
│   ├── ui-design-system.md   # UI design system specifications
│   ├── dashboard.html        # Main dashboard
│   ├── projects.html         # Project management
│   ├── designer.html         # Visual designer
│   ├── form-designer.html    # Form builder
│   ├── model-designer.html   # Data model designer
│   ├── data-sources.html     # Data source management
│   ├── data-models.html      # Data model management
│   ├── api-management.html   # API management
│   ├── publish.html          # Application publishing
│   ├── versions.html         # Version management
│   └── settings.html         # System settings               
├── LICENSE                   # MIT License (English)
├── LICENSE_CN.md            # MIT License (Chinese)
├── README.md                # This file (with integrated design system)
├── README_CN.md             # Chinese documentation
└── CONTRIBUTING.md          # Contribution guidelines
```

## 🛠️ Installation & Usage

### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A local web server (optional, for development)

### Quick Start

1. **Clone the repository**
   ```bash
   git clone https://github.com/peterfei/lowcode-dev-template.git
   cd lowcode-dev-template
   ```

2. **Open in browser**
   - Simply open any HTML file in your browser
   - Or use a local server for better development experience:
   ```bash
   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using PHP
   php -S localhost:8000
   ```

3. **Navigate to prototypes**
   - Open `dashboard.html` to start exploring
   - Use the sidebar navigation to access different features

### Development Setup

1. **Customize the design**
   - Modify `css/style.css` for global styles
   - Edit individual HTML files for page-specific changes
   - Update `js/breadcrumb.js` for navigation logic
2. **Add new pages**
   - Follow the existing structure and naming conventions
   - Update the sidebar navigation in all pages
3. **Extend functionality**
   - Add new JavaScript modules in `js/`
   - Create new CSS components in `css/`
   - Follow the modular architecture pattern

## 🎨 Design System

### Design Documentation Overview

| Document Type | Filename | Description | Link |
|---------------|----------|-------------|------|
| Interface Planning | interface-planning.md | Complete product interface architecture and layout planning | [View Details](#interface-planning) |
| UI Design System | ui-design-system.md | Unified design specifications and component standards | [View Details](#ui-design-system) |

### Interface Planning

#### Information Architecture
```
Rapid Development Platform
├── User Authentication Module (Login, Register, Password Reset)
├── Main Console Module (Dashboard, Project Management, User Settings)
├── Visual Designer Module (Designer Interface, Component Library, Property Panel)
├── Data Management Module (Data Sources, Data Models, API Management)
└── Publishing Module (App Publishing, Version Management, Deployment)
```

#### Layout Planning
- **Standard Layout**: 1920x1080 (Top Navigation 60px + Sidebar 280px + Main Content 1640px)
- **Compact Layout**: 1366x768 (Top Navigation 50px + Sidebar 240px + Main Content 1126px)
- **Responsive Design**: Supports desktop, tablet, and mobile adaptation

#### Key Interface Design
- **Login/Register**: Centered card layout with step-by-step forms
- **Main Console**: Grid layout with card components and data visualization
- **Visual Designer**: Three-column layout (Component Library + Canvas + Property Panel)
- **Data Management**: List + detail layout with graphical editor
- **Publishing Management**: Step-by-step wizard layout with real-time monitoring

### UI Design System

#### Color System
```css
/* Primary Colors */
--primary-500: #0ea5e9;  /* Primary Brand Color */
--secondary-500: #64748b; /* Secondary Color */

/* Functional Colors */
--success-500: #22c55e;   /* Success Color */
--warning-500: #f59e0b;   /* Warning Color */
--error-500: #ef4444;     /* Error Color */
--info-500: #3b82f6;      /* Info Color */
```

#### Typography System
```css
/* Chinese Fonts */
--font-family-zh: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;

/* English Fonts */
--font-family-en: "Inter", "SF Pro Display", -apple-system, sans-serif;

/* Font Sizes */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
```

#### Spacing System
```css
--space-2: 0.5rem;    /* 8px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
```

#### Component Design Standards
- **Button Components**: Primary buttons, secondary buttons, hover effects
- **Input Components**: Unified styling, focus states, placeholders
- **Card Components**: Shadow effects, hover animations, content sections
- **Navigation Components**: Top navigation, sidebar navigation, breadcrumb navigation

#### Icon System
- **Primary Icon Library**: FontAwesome 6.0
- **Icon Sizes**: xs(12px) ~ xl(32px)
- **Icon Style**: Linear icons primary, filled icons secondary

#### Animation System
- **Transition Animations**: 0.2s ease basic transitions
- **Hover Animations**: Lift up, scale, fade in/out effects
- **Loading Animations**: Rotate, pulse animation effects

### User Experience Analysis

#### Design Principles
- **Simple and Efficient**: Clean interface, efficient and convenient operations
- **Consistency**: Unified design language and interaction patterns
- **Accessibility**: Support for accessibility and keyboard navigation
- **Responsive**: Adapt to different screen sizes and devices

#### Interaction Design
- **Mouse Operations**: Hover effects, right-click menus
- **Touch Operations**: Click feedback, gesture support
- **Keyboard Operations**: Shortcuts, Tab navigation

#### State Design
- **Loading States**: Skeleton screens, progress bars, loading animations
- **Empty States**: Empty state illustrations, operation prompts
- **Success States**: Success messages, auto-close
- **Error States**: Error messages, retry buttons

## 📚 Design Documentation

### Complete Design Documentation Links

| Document | Path | Description |
|----------|------|-------------|
| **Interface Planning** | `interface-planning.md` | Complete product interface architecture design, including information architecture, layout planning, and key interface design |
| **UI Design System** | `ui-design-system.md` | Unified design system specifications, including colors, typography, spacing, components, icons, and animations |

### Design Documentation Usage Guide

1. **Interface Planning Document** - Understand overall product architecture and interface layout
   - Information Architecture Design: Module division and navigation structure
   - Layout Planning: Adaptation solutions for different screen sizes
   - Key Interface Design: Detailed interface design for each module

2. **UI Design System Specifications** - Follow unified design standards
   - Color System: Primary colors, functional colors, neutral colors
   - Typography System: Chinese and English fonts, sizes, weight specifications
   - Component Standards: Button, input, card, navigation component standards
   - Icon System: Icon library selection and size specifications
   - Animation System: Transition, hover, loading animation effects

3. **User Experience Analysis** - Understand user needs and interaction design
   - Design Principles: Simple and efficient, consistency, accessibility
   - Interaction Design: Mouse, touch, keyboard operation support
   - State Design: Loading, empty, success, error states

### Quick Access
```bash
# View interface planning
cat interface-planning.md

# View UI design system specifications
cat ui-design-system.md

```

## 🔧 Customization

### Styling
The project uses a unified CSS system in `css/style.css`. Key customization points:

- **CSS Variables**: Modify color scheme and spacing
- **Component Styles**: Customize individual component appearance
- **Responsive Breakpoints**: Adjust for different screen sizes
- **Animation Effects**: Modify transition and animation properties

### Functionality
Extend the platform with additional features:

- **New Page Types**: Add specialized designer interfaces
- **Component Library**: Expand the available UI components
- **Data Integration**: Connect to real data sources
- **User Management**: Implement authentication and authorization
- **API Integration**: Connect to backend services

## 📱 Responsive Design

The prototype is fully responsive and optimized for:

- **Desktop**: 1200px+ (Full feature set)
- **Tablet**: 768px - 1199px (Adapted layout)
- **Mobile**: 320px - 767px (Touch-optimized)

### Responsive Features
- **Flexible Grid System**: Adapts to different screen sizes
- **Touch-Friendly Interface**: Optimized for mobile interaction
- **Collapsible Navigation**: Mobile-friendly menu system
- **Scalable Typography**: Readable on all devices

## 🌐 Browser Support

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

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.

### How to Contribute
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

### Areas for Contribution
- **UI/UX Improvements**: Enhance the design and user experience
- **New Features**: Add new functionality and pages
- **Documentation**: Improve documentation and examples
- **Bug Fixes**: Report and fix issues
- **Performance**: Optimize code and assets

## 📄 License

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

### 中文许可证

本项目采用MIT许可证 - 详情请参见 [LICENSE_CN.md](./LICENSE_CN.md) 文件。

## 🙏 Acknowledgments

- **Tailwind CSS** - For the utility-first CSS framework
- **FontAwesome** - For the comprehensive icon library
- **OpenSpec** - For the development workflow methodology
- **Contributors** - Thanks to all contributors who help improve this project

## 📞 Support

- **Issues**: [GitHub Issues](https://github.com/peterfei/lowcode-dev-template/issues)
- **Discussions**: [GitHub Discussions](https://github.com/peterfei/lowcode-dev-template/discussions)
- **Email**: peterfeispace@gmail.com

## 🗺️ Roadmap

### Version 1.0
- [ ] Add more interactive components
- [ ] Implement data persistence
- [ ] Add user authentication
- [ ] Create component library

---

**Made with ❤️ for the developer community**