Color Star Low Code - 低代码可视化页面构建器

基于 Vue 3 + LogicFlow 的高可用、可扩展低代码页面设计器。

✨ 特性

• 🎨 可视化编辑 - 拖拽式组件编排，所见即所得
• 🔌 插件化架构 - 基于 LogicFlow 的强大画布引擎
• 📦 组件注册中心 - 灵活的组件管理和扩展机制
• 🎯 属性配置 - 动态表单，支持多种属性类型
• ⚡ 事件系统 - 可视化事件配置 + Monaco 代码编辑
• 💾 状态管理 - 基于 Pinia 的集中式状态管理
• ↩️ 撤销重做 - 完整的历史记录栈
• 🎹 键盘快捷键 - Ctrl+Z/Y 撤销重做，Ctrl+S 保存
• 📤 导入导出 - JSON 格式页面数据
• 🎭 TypeScript - 完整的类型定义和智能提示

📦 安装

pnpm install color-star-low-code

🚀 快速开始

基础使用

<template>
  <ColorStarLowCodeEditor title="我的页面编辑器" :initial-data="initialData" @save="handleSave" />
</template>

<script setup>
import { ColorStarLowCodeEditor } from 'color-star-low-code';

const initialData = {
  nodes: [],
  edges: [],
};

function handleSave(data) {
  console.log('保存数据:', data);
  // 发送到后端保存
}
</script>

分别使用组件

<template>
  <div class="my-editor">
    <!-- 左侧组件面板 -->
    <ColorStarComponentPalette />

    <!-- 中间画布 -->
    <ColorStarLowCodeCanvas @ready="handleCanvasReady" @node-click="handleNodeClick" />

    <!-- 右侧属性面板 -->
    <ColorStarPropertyPanel />
  </div>
</template>

<script setup>
import {
  ColorStarComponentPalette,
  ColorStarLowCodeCanvas,
  ColorStarPropertyPanel,
} from 'color-star-low-code';
</script>

📚 核心概念

组件注册

import { registerComponent, ComponentType } from 'color-star-low-code';

// 注册自定义组件
registerComponent({
  type: 'my-custom-button',
  name: '自定义按钮',
  icon: 'mdi:button-cursor',
  category: '自定义组件',
  description: '我的自定义按钮组件',
  canHaveChildren: false,
  properties: [
    {
      name: 'label',
      label: '按钮文字',
      type: 'string',
      defaultValue: '点击我',
      group: 'basic',
    },
    {
      name: 'color',
      label: '按钮颜色',
      type: 'color',
      defaultValue: '#409eff',
      group: 'style',
    },
  ],
  events: [
    {
      name: 'click',
      label: '点击事件',
      description: '按钮被点击时触发',
    },
  ],
  defaultStyle: {
    width: 120,
    height: 40,
  },
});

使用 Store

import { useEditorStore, useComponentStore } from 'color-star-low-code';

const editorStore = useEditorStore();
const componentStore = useComponentStore();

// 添加节点
editorStore.addNode({
  type: 'button',
  x: 100,
  y: 100,
  properties: {
    props: { text: '按钮' },
  },
});

// 获取所有组件
const allComponents = componentStore.allComponents;

// 撤销/重做
editorStore.undo();
editorStore.redo();

自定义 LogicFlow 节点

import { HtmlNode, HtmlNodeModel } from '@logicflow/core';

class CustomButtonModel extends HtmlNodeModel {
  setAttributes() {
    this.width = 120;
    this.height = 40;
  }
}

class CustomButtonNode extends HtmlNode {
  setHtml(rootEl) {
    const { properties } = this.props.model;

    const button = document.createElement('button');
    button.textContent = properties.props?.text || '按钮';
    button.className = 'custom-button';

    rootEl.appendChild(button);
  }
}

export default {
  type: 'custom-button',
  view: CustomButtonNode,
  model: CustomButtonModel,
};

🔧 API

ColorStarLowCodeEditor Props

| 属性 | 类型 | 默认值 | 说明 | | ---------------- | ------------ | ------------------ | ---------------------------- | | title | string | '低代码页面编辑器' | 编辑器标题 | | initialData | CanvasData | - | 初始画布数据 | | canvasConfig | EditorConfig | {} | 画布配置 | | showMiniMap | boolean | false | 是否显示缩略图 | | autoSaveInterval | number | 0 | 自动保存间隔(ms)，0 表示禁用 |

ColorStarLowCodeEditor Events

| 事件 | 参数 | 说明 | | ------------ | ------------------ | ------------------ | | save | (data: CanvasData) | 保存按钮点击时触发 | | canvas-ready | (lf: LogicFlow) | 画布初始化完成 |

ColorStarLowCodeEditor Methods

| 方法 | 参数 | 返回值 | 说明 | | --------- | ---- | ------------- | ---------------- | | getCanvas | - | Canvas实例 | 获取画布组件实例 | | save | - | Promise | 保存数据 | | export | - | void | 导出 JSON | | preview | - | void | 打开预览 |

🎨 内置组件

• ✏️ 文本 - 文本显示组件
• 🔘 按钮 - 可点击按钮
• 📝 输入框 - 文本输入
• 🖼️ 图片 - 图片展示
• 📦 容器 - 通用容器
• 🃏 卡片 - 卡片容器
• 🔽 选择器 - 下拉选择
• ☑️ 多选框 - 多选框组
• 📊 表格 - 数据表格

🔌 扩展开发

添加自定义组件类型

// 1. 定义类型
export enum MyComponentType {
  CUSTOM_WIDGET = 'custom-widget',
}

// 2. 创建 Schema
const customWidgetSchema: ComponentSchema = {
  type: MyComponentType.CUSTOM_WIDGET,
  name: '自定义小部件',
  // ...其他配置
};

// 3. 注册
registerComponent(customWidgetSchema);

自定义属性编辑器

<template>
  <PropertyInput :property="customProperty" :value="value" @update="handleUpdate" />
</template>

🛠️ 技术栈

• Vue 3.5 - 渐进式 JavaScript 框架
• LogicFlow 2.1 - 流程图编辑框架
• Pinia 3.0 - Vue 状态管理
• Element Plus 2.13 - UI 组件库
• Monaco Editor 0.52 - 代码编辑器
• TypeScript 5.9 - 类型安全
• Vite 7.3 - 构建工具

📖 最佳实践

1. 组件命名规范

使用统一的前缀和语义化命名：

type: 'form-input'; // ✅ 推荐
type: 'input'; // ❌ 可能冲突
type: 'FormInputWidget'; // ❌ 过于复杂

2. 事件处理

在事件处理器中访问组件数据：

// 在 Monaco 编辑器中编写
function handleClick(event) {
  // this 指向当前节点的 properties
  const buttonText = this.props.text;
  console.log('按钮文字:', buttonText);

  // 访问其他节点（需要通过 LogicFlow API）
  const lf = window.__logicflow_instance__;
  const allNodes = lf.getGraphData().nodes;
}

3. 性能优化

• 大型页面使用虚拟滚动
• 避免在属性面板中频繁更新
• 合理设置历史记录数量

const editorStore = useEditorStore();
editorStore.maxHistory = 30; // 限制历史记录

📄 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

• 作者：林鸾纯
• Email：[email protected]