https://github.com/linmoqc/memory-lowcodeeditor

Memory Flow is a low-code platform designed to streamline the creation, organization, and visualization of user-generated content and workflows.
https://github.com/linmoqc/memory-lowcodeeditor

react tailwindcss typescript zustand

Last synced: 6 days ago
JSON representation

Memory Flow is a low-code platform designed to streamline the creation, organization, and visualization of user-generated content and workflows.

• Host: GitHub
• URL: https://github.com/linmoqc/memory-lowcodeeditor
• Owner: LinMoQC
• Created: 2025-01-08T11:03:36.000Z (about 1 month ago)
• Default Branch: master
• Last Pushed: 2025-02-03T11:35:59.000Z (10 days ago)
• Last Synced: 2025-02-03T12:32:35.827Z (10 days ago)
• Topics: react, tailwindcss, typescript, zustand
• Language: TypeScript
• Homepage: https://linmoqc.github.io/Memory-Flow/
• Size: 3.92 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Memory LowCode-Editor

## 🌟 介绍

> Memory LowCode-Editor 是一个基于React + Typescript + Zustand 的低代码编辑器，用于减少重复造轮子（Maybe），目前正在开发中～

## 📚 预览



  



## ✨ 使用文档

### 安装依赖

``` javascript

npm i @cusmoedge/lowcode-editor

npm i @cusmoedge/lowcode-materials // 物料库

```

### 编写全局Store

``` typescript

// 目前只适配Zustand，可以复制src/pages/test/stores下的默认配置

// lowcode-store.ts

const creator: StateCreator = (set, get) => {

    return {

        components: [], // 存储所有组件

        curComponent: null, // 当前选中的组件

        curComponentId: null, // 当前选中组件的 ID

        mode: 'edit', // 编辑器模式

        // 设置编辑模式

        setMode: (mode) => set({ mode }),

        // 设置当前选中的组件 ID

        setCurComponentId: (componentId) => { /* 实现逻辑 */ },

        // 添加新组件

        addComponent: (component, parentId) => { /* 实现逻辑 */ },

        // 删除组件

        deleteComponent: (componentId) => { /* 实现逻辑 */ },

        // 更新组件属性

        updateComponent: (componentId, props) => { /* 实现逻辑 */ },

        // 更新组件样式（支持部分或完全替换）

        updateComponentStyles: (componentId, styles, replace) => { /* 实现逻辑 */ },

        // 根据 ID 查找组件

        getComponentById: (id, components) => { /* 实现逻辑 */ },

    };

};

export const useLowCodeStore = create()(creator);

// lowcode-config-store.ts

export const useLowCodeConfigStore = create((set) => ({

    componentConfig: MaterialConfigs, // 默认物料库，可根据文档自定义

    registerComponent: (name, componentConfig) => set((state) => {

        return {

            ...state,

            componentConfig: {

                ...state.componentConfig,

                [name]: componentConfig

            }

        }

    })

}));

```

### 🚀 注入全局Store

``` typescript

import {LowCodeStoreProvider} from "@cusmoedge/lowcode-editor";

import {LowCodeConfigStoreProvider} from "@cusmoedge/lowcode-editor";

import {useLowCodeStore} from "./stores/lowcode-store.ts";

import {useLowCodeConfigStore} from "./stores/lowcode-config-store.ts";

import '@cusmoedge/lowcode-editor/index.css' // 引入样式

import LowCodeEditor from '@cusmoedge/lowcode-editor'

export default function Test() {

    return (

        


            

                

                    

                

            

        

    )

}

```


# 🎯 特点  

## ⚡️ 高扩展性  

- 采用 **Zustand** 注入全局状态，支持灵活扩展和自定义。  

- **支持物料注册**，开发者可以轻松扩展物料库，新增组件无需改动核心代码。   

## 🎨 拖拽式低代码编辑  

- 提供 **拖拽式 UI 组件布局**，降低开发成本，无需手写 JSX。  

- 可视化搭建页面，支持 **实时预览**。  

## 🔧 高度自定义  

- 组件支持 **属性配置** 和 **事件绑定**，满足各种业务需求。  

- 可扩展 **样式编辑器**，支持动态样式修改。  

## 📦 完整的物料生态  

- **内置基础物料库**，开箱即用（Button、Table、Form 等）。  

- **支持自定义物料**，可根据业务需求灵活拓展。  

## 🔗 易集成  

- 提供 **简洁的 API**，方便接入其他 React 项目。  

- **支持 TypeScript**，类型安全，增强开发体验。