# LowCodeBase_Angular

**Repository Path**: verity-ry/low-code-base_angular

## Basic Information

- **Project Name**: LowCodeBase_Angular
- **Description**: 打造一款接近无码编辑生成系统及业务流程的项目（为小微企业提供无码编辑自己的管理系统）
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 0
- **Created**: 2026-05-25
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LowCodeBase

基于 Angular 17 + Node.js 的插件化低代码开发平台，提供可视化设计器、Schema管理、组件库、菜单系统等核心功能。

## ✨ 核心特性

### 🔧 核心功能
- **可视化设计器** - 拖拽式组件编辑，实时预览，组件树层级管理
- **Schema 管理** - 字段验证规则、索引配置、权限管理、生命周期钩子
- **组件库** - 丰富的基础组件（文本、按钮、表单、布局、表格、图表）
- **菜单系统** - 多级菜单、分组、折叠、搜索、收藏、权限控制、快捷键提示
- **登录界面** - 国际化支持、响应式设计、渐变背景动画效果

### 📦 架构特性
- **插件化架构** - 热插拔插件系统，支持独立前后端运行
- **数据源管理** - 多数据库支持（MySQL、PostgreSQL、SQLite、MongoDB）
- **主题系统** - 深色/浅色模式，自定义配色方案
- **国际化** - 多语言支持（中文/英文/繁体）

### 📱 多端支持
- Web 应用
- Electron 桌面应用
- 响应式设计

## 🛠️ 技术栈

| 层级 | 技术 | 版本 |
|------|------|------|
| 前端框架 | Angular | 17+ |
| UI组件 | ng-zorro-antd | 17+ |
| 后端框架 | Express | 4.x |
| 数据库 | SQLite / 内存存储 | - |
| 桌面应用 | Electron | 28+ |
| 构建工具 | Angular CLI | 17+ |
| 国际化 | ngx-translate | 15+ |

## 🚀 快速开始

### 环境要求
- Node.js >= 20.x
- npm >= 10.x

### 安装依赖
```bash
# 安装根目录依赖
npm install

# 安装后端依赖
cd backend && npm install

# 安装前端依赖
cd ../frontend && npm install
```

### 启动开发服务器

**后端服务**（端口 3001）：
```bash
cd backend
npm run build
npm start
```

**前端服务**（端口 4205）：
```bash
cd frontend
npx ng serve --port 4205 --proxy-config proxy.conf.json
```

### 访问地址
- 前端应用: http://localhost:4205
- 后端API: http://localhost:3001/api
- 文档中心: http://localhost:4300
- 默认账号: `admin` / `admin123`

## 📁 项目结构

```
LowCodeBase/
├── frontend/                    # 前端代码
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/     # UI组件
│   │   │   │   ├── login/           # 登录组件
│   │   │   │   ├── designable/      # 可视化设计器
│   │   │   │   ├── menu/            # 菜单组件
│   │   │   │   ├── schema-settings/ # Schema设置器
│   │   │   │   ├── schema-toolbar/  # 工具栏组件
│   │   │   │   └── component-list/  # 组件库页面
│   │   │   ├── services/        # 服务层
│   │   │   ├── guards/          # 路由守卫
│   │   │   └── i18n/            # 国际化配置
│   │   └── assets/              # 静态资源
│   └── angular.json             # Angular配置
├── backend/                     # 后端代码
│   ├── src/
│   │   ├── core/                # 核心模块
│   │   │   ├── plugin-manager.ts # 插件管理器
│   │   │   └── plugin.ts        # 插件基类
│   │   ├── data/                # 数据层
│   │   │   └── schema.repository.ts
│   │   ├── schema/              # Schema管理
│   │   │   ├── schema-initializer.ts
│   │   │   └── schema-manager.ts
│   │   └── routes/              # API路由
│   └── package.json
├── plugins/                     # 插件目录
│   ├── auth-plugin/             # 认证插件
│   ├── datasource-plugin/       # 数据源插件
│   ├── i18n-plugin/            # 国际化插件
│   ├── theme-plugin/            # 主题插件
│   └── workflow-plugin/         # 工作流插件
├── docs/                        # 项目文档
│   ├── README.md                # 文档首页
│   ├── api.md                   # API接口文档
│   ├── installation.md          # 安装部署指南
│   ├── plugins.md               # 插件开发指南
│   ├── schema.md                # Schema协议文档
│   └── usage.md                 # 操作手册
└── README.md                    # 项目说明
```

## 🔌 插件开发

### 创建插件
```typescript
// plugins/my-plugin/src/index.ts
import { Plugin } from '../../backend/src/core/plugin';

export default class MyPlugin extends Plugin {
  name = 'my-plugin';
  version = '1.0.0';
  priority = 10;

  async initialize(): Promise<void> {
    // 添加API路由
    this.addRoute({
      path: '/hello',
      method: 'get',
      handler: (req, res) => res.json({ message: 'Hello!' })
    });

    // 注册前端路由
    this.registerFrontendRoute({ 
      path: 'my-page', 
      component: 'MyComponent' 
    });

    // 添加菜单项
    this.addMenu({ 
      id: 'my-menu', 
      label: '我的菜单', 
      route: '/my-page',
      icon: '📦'
    });
  }
}
```

### 插件配置
每个插件需包含 `package.json`：
```json
{
  "name": "my-plugin",
  "version": "1.0.0",
  "main": "dist/index.js"
}
```

## 🌐 API 接口

### Schema 管理
| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/schemas` | GET | 获取Schema列表 |
| `/api/schemas/:name` | GET | 获取单个Schema |
| `/api/schemas` | POST | 创建Schema |
| `/api/schemas/:name` | PUT | 更新Schema |
| `/api/schemas/:name` | DELETE | 删除Schema |
| `/api/schemas/:name/validate` | POST | 验证数据 |

### 插件管理
| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/plugins` | GET | 获取插件列表 |
| `/api/plugins/:name` | GET | 获取插件详情 |
| `/api/plugins/:name/toggle` | POST | 启用/禁用插件 |
| `/api/plugins/install` | POST | 安装插件 |
| `/api/plugins/:name/uninstall` | DELETE | 卸载插件 |

### 用户认证
| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/auth-plugin/login` | POST | 用户登录 |
| `/api/auth-plugin/logout` | POST | 用户退出 |

### 数据源管理
| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/plugins/datasource-plugin` | GET | 获取数据源列表 |
| `/api/plugins/datasource-plugin` | POST | 创建数据源 |
| `/api/plugins/datasource-plugin/:id` | PUT | 更新数据源 |
| `/api/plugins/datasource-plugin/:id` | DELETE | 删除数据源 |
| `/api/plugins/datasource-plugin/:id/test` | POST | 测试连接 |

## 📋 核心组件

### Login 登录组件
- 国际化语言切换
- 渐变背景动画
- 浮动粒子装饰
- 输入框焦点光效
- 响应式设计

### Designable 设计器
- 组件面板：拖拽添加组件
- 属性面板：实时编辑组件属性
- 组件树：层级结构展示
- 画布：可视化预览

### SchemaSettings
- 字段验证规则管理（required、minLength、maxLength、format等）
- 索引配置
- 权限配置
- 生命周期钩子

### SchemaToolbar
- 搜索功能
- 视图切换（列表/卡片）
- 排序管理
- 导入/导出
- 刷新功能

### 菜单组件
- 多级菜单支持
- 搜索过滤
- 收藏功能
- 权限控制
- 快捷键提示
- 徽章标记

## 📝 文档

详细文档位于 `docs/` 目录：

| 文档 | 描述 |
|------|------|
| [README.md](docs/README.md) | 文档中心首页 |
| [api.md](docs/api.md) | API接口文档 |
| [installation.md](docs/installation.md) | 安装部署指南 |
| [plugins.md](docs/plugins.md) | 插件开发指南 |
| [schema.md](docs/schema.md) | Schema协议文档 |
| [usage.md](docs/usage.md) | 操作手册 |

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📧 联系方式

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件

---

**LowCodeBase** - 让低代码开发更简单