# lcvc

**Repository Path**: zybdip2023/lcvc

## Basic Information

- **Project Name**: lcvc
- **Description**: 组件低代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-18
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 低代码Vue组件库

一个基于Vue 3的可视化拖拽页面编辑器，支持PC管理页面和小程序页面的快速搭建。

## 功能特性

- 🎨 **可视化拖拽编辑** - 通过拖拽组件快速构建页面
- 📱 **多端支持** - 支持PC管理页面和小程序页面两种类型
- 🧩 **组件库** - 内置丰富的基础组件（按钮、输入框、图片、文本、容器等）
- ⚙️ **属性配置** - 可视化配置组件属性
- 💾 **页面管理** - 支持页面的保存、加载、预览和删除
- 🔌 **标准接口** - 提供标准的RESTful API接口

## 技术栈

- Vue 3 (Composition API)
- Vite
- Element Plus
- Vue Router
- Pinia
- vuedraggable

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

## 项目结构

```
low_code_vue_comp/
├── src/
│   ├── api/              # API接口
│   │   ├── page.js       # 页面相关API
│   │   └── mock.js       # Mock数据
│   ├── components/       # 组件
│   │   ├── base/         # 基础组件库
│   │   ├── editor/       # 编辑器组件
│   │   └── renderer/     # 渲染器组件
│   ├── router/           # 路由配置
│   ├── store/            # 状态管理
│   ├── views/            # 页面视图
│   │   ├── Editor.vue    # 编辑器页面
│   │   ├── Preview.vue   # 预览页面
│   │   └── PageList.vue  # 页面列表
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── server/               # 后端API示例
│   └── api-example.js    # Express API示例
├── package.json
├── vite.config.js
└── README.md
```

## API接口说明

### 基础URL

```
http://localhost:3001/api
```

### 接口列表

#### 1. 获取页面列表

```http
GET /api/pages
```

**响应示例：**
```json
{
  "code": 200,
  "message": "success",
  "data": [
    {
      "id": "1",
      "name": "示例页面",
      "type": "pc",
      "createdAt": "2024-01-01T00:00:00.000Z",
      "updatedAt": "2024-01-01T00:00:00.000Z"
    }
  ]
}
```

#### 2. 获取页面详情

```http
GET /api/pages/:id
```

**响应示例：**
```json
{
  "code": 200,
  "message": "success",
  "data": {
    "id": "1",
    "name": "示例页面",
    "type": "pc",
    "config": {
      "components": [
        {
          "id": "comp_xxx",
          "type": "BaseButton",
          "props": {
            "text": "按钮",
            "type": "primary"
          }
        }
      ]
    },
    "createdAt": "2024-01-01T00:00:00.000Z",
    "updatedAt": "2024-01-01T00:00:00.000Z"
  }
}
```

#### 3. 创建页面

```http
POST /api/pages
Content-Type: application/json

{
  "name": "新页面",
  "type": "pc",
  "config": {
    "components": []
  }
}
```

#### 4. 更新页面

```http
PUT /api/pages/:id
Content-Type: application/json

{
  "name": "更新后的页面",
  "type": "pc",
  "config": {
    "components": [...]
  }
}
```

#### 5. 删除页面

```http
DELETE /api/pages/:id
```

## 组件配置

### 基础组件

#### BaseButton (按钮)
- `text`: 按钮文本
- `type`: 按钮类型 (primary, success, warning, danger, info)
- `size`: 按钮尺寸 (large, default, small)
- `disabled`: 是否禁用
- `plain`: 是否为朴素按钮
- `round`: 是否为圆角按钮
- `circle`: 是否为圆形按钮
- `loading`: 是否加载中

#### BaseInput (输入框)
- `modelValue`: 输入值
- `placeholder`: 占位符
- `disabled`: 是否禁用
- `clearable`: 是否可清空
- `showPassword`: 是否显示密码
- `type`: 输入类型 (text, password, number, textarea)
- `size`: 尺寸 (large, default, small)

#### BaseImage (图片)
- `src`: 图片地址
- `alt`: 替代文本
- `width`: 宽度
- `height`: 高度
- `fit`: 适应方式 (cover, contain, fill, none, scale-down)
- `borderRadius`: 圆角

#### BaseText (文本)
- `text`: 文本内容
- `fontSize`: 字体大小
- `color`: 字体颜色
- `fontWeight`: 字体粗细 (normal, bold, lighter)
- `textAlign`: 对齐方式 (left, center, right)
- `lineHeight`: 行高

#### BaseContainer (容器)
- `width`: 宽度
- `height`: 高度
- `padding`: 内边距
- `margin`: 外边距
- `backgroundColor`: 背景色
- `borderRadius`: 圆角
- `display`: 显示方式 (block, flex, inline-block)
- `flexDirection`: 方向 (row, column)
- `justifyContent`: 主轴对齐
- `alignItems`: 交叉轴对齐

## 使用说明

### 1. 创建新页面

1. 点击"新建页面"按钮
2. 选择页面类型（PC管理 或 小程序）
3. 从左侧组件库拖拽组件到画布
4. 选中组件后，在右侧属性面板配置属性
5. 点击"保存"按钮保存页面

### 2. 编辑页面

1. 在页面列表中点击"编辑"按钮
2. 修改组件和属性
3. 保存更改

### 3. 预览页面

1. 在编辑器页面点击"预览"按钮
2. 或在页面列表中点击"预览"按钮

### 4. 删除页面

在页面列表中点击"删除"按钮，确认后删除

## 环境变量配置

创建 `.env` 文件：

```env
# API基础URL
VITE_API_BASE_URL=http://localhost:3001/api

# 是否使用Mock数据（true/false）
VITE_USE_MOCK=true
```

## 开发指南

### 添加新组件

1. 在 `src/components/base/` 目录下创建新组件
2. 在 `src/components/base/index.js` 中注册组件和配置
3. 组件配置包括：
   - `name`: 组件名称
   - `icon`: 图标名称
   - `category`: 组件分类
   - `defaultProps`: 默认属性
   - `propTypes`: 属性类型配置

### 扩展API

修改 `src/api/page.js` 添加新的API接口

## 注意事项

- 当前版本使用Mock数据，生产环境需要配置真实的后端API
- 组件配置会实时保存到本地Mock存储，刷新页面会丢失（使用真实API时不会）
- 建议在生产环境中添加用户认证和权限控制

## License

MIT