{"id":25089950,"url":"https://github.com/linmoqc/memory-lowcodeeditor","last_synced_at":"2025-04-15T19:52:22.990Z","repository":{"id":271543087,"uuid":"913789703","full_name":"LinMoQC/Memory-LowCodeEditor","owner":"LinMoQC","description":"Memory LowCodeEditor is a low-code platform designed to streamline the creation, organization, and visualization of user-generated content and workflows.","archived":false,"fork":false,"pushed_at":"2025-02-05T08:37:46.000Z","size":5186,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T00:33:20.855Z","etag":null,"topics":["react","tailwindcss","typescript","zustand"],"latest_commit_sha":null,"homepage":"https://linmoqc.github.io/Memory-LowCodeEditor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinMoQC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-08T11:03:36.000Z","updated_at":"2025-02-15T12:58:09.000Z","dependencies_parsed_at":"2025-01-08T12:23:05.337Z","dependency_job_id":"f1b8cd61-5a86-4770-8ab0-404822b5d8c5","html_url":"https://github.com/LinMoQC/Memory-LowCodeEditor","commit_stats":null,"previous_names":["linmoqc/memory-flow","linmoqc/memory-lowcodeeditor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinMoQC%2FMemory-LowCodeEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinMoQC%2FMemory-LowCodeEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinMoQC%2FMemory-LowCodeEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinMoQC%2FMemory-LowCodeEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinMoQC","download_url":"https://codeload.github.com/LinMoQC/Memory-LowCodeEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249144903,"owners_count":21219966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","tailwindcss","typescript","zustand"],"created_at":"2025-02-07T11:29:53.086Z","updated_at":"2025-04-15T19:52:22.962Z","avatar_url":"https://github.com/LinMoQC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Memory LowCode-Editor\n\n## 🌟 介绍\n\u003e Memory LowCode-Editor 是一个基于React + Typescript + Zustand 的低代码编辑器，用于减少重复造轮子（Maybe），目前正在开发中～\n\n## 📚 预览\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg src=\"./src/assets/pre.gif\" alt=\"预览\"/\u003e\n\u003c/div\u003e\n\n\n## ✨ 使用文档\n\n### 安装依赖\n``` javascript\nnpm i @cusmoedge/lowcode-editor\nnpm i @cusmoedge/lowcode-materials // 物料库\n```\n\n### 编写全局Store\n``` typescript\n// 目前只适配Zustand，可以复制src/pages/test/stores下的默认配置\n\n// lowcode-store.ts\nconst creator: StateCreator\u003cLowCodeState \u0026 LowCodeAction\u003e = (set, get) =\u003e {\n    return {\n        components: [], // 存储所有组件\n        curComponent: null, // 当前选中的组件\n        curComponentId: null, // 当前选中组件的 ID\n        mode: 'edit', // 编辑器模式\n\n        // 设置编辑模式\n        setMode: (mode) =\u003e set({ mode }),\n\n        // 设置当前选中的组件 ID\n        setCurComponentId: (componentId) =\u003e { /* 实现逻辑 */ },\n\n        // 添加新组件\n        addComponent: (component, parentId) =\u003e { /* 实现逻辑 */ },\n\n        // 删除组件\n        deleteComponent: (componentId) =\u003e { /* 实现逻辑 */ },\n\n        // 更新组件属性\n        updateComponent: (componentId, props) =\u003e { /* 实现逻辑 */ },\n\n        // 更新组件样式（支持部分或完全替换）\n        updateComponentStyles: (componentId, styles, replace) =\u003e { /* 实现逻辑 */ },\n\n        // 根据 ID 查找组件\n        getComponentById: (id, components) =\u003e { /* 实现逻辑 */ },\n    };\n};\n\nexport const useLowCodeStore = create\u003cLowCodeState \u0026 LowCodeAction\u003e()(creator);\n\n// lowcode-config-store.ts\nexport const useLowCodeConfigStore = create\u003cLowCodeConfigState \u0026 LowCodeConfigAction\u003e((set) =\u003e ({\n    componentConfig: MaterialConfigs, // 默认物料库，可根据文档自定义\n    registerComponent: (name, componentConfig) =\u003e set((state) =\u003e {\n        return {\n            ...state,\n            componentConfig: {\n                ...state.componentConfig,\n                [name]: componentConfig\n            }\n        }\n    })\n}));\n```\n\n### 🚀 注入全局Store\n``` typescript\nimport {LowCodeStoreProvider} from \"@cusmoedge/lowcode-editor\";\nimport {LowCodeConfigStoreProvider} from \"@cusmoedge/lowcode-editor\";\nimport {useLowCodeStore} from \"./stores/lowcode-store.ts\";\nimport {useLowCodeConfigStore} from \"./stores/lowcode-config-store.ts\";\nimport '@cusmoedge/lowcode-editor/index.css' // 引入样式\nimport LowCodeEditor from '@cusmoedge/lowcode-editor'\n\nexport default function Test() {\n    return (\n        \u003cdiv className='h-[100vh] w-full p-5'\u003e\n            \u003cLowCodeStoreProvider store={useLowCodeStore}\u003e\n                \u003cLowCodeConfigStoreProvider store={useLowCodeConfigStore}\u003e\n                    \u003cLowCodeEditor /\u003e\n                \u003c/LowCodeConfigStoreProvider\u003e\n            \u003c/LowCodeStoreProvider\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n# 🎯 特点  \n\n## ⚡️ 高扩展性  \n- 采用 **Zustand** 注入全局状态，支持灵活扩展和自定义。  \n- **支持物料注册**，开发者可以轻松扩展物料库，新增组件无需改动核心代码。   \n\n## 🎨 拖拽式低代码编辑  \n- 提供 **拖拽式 UI 组件布局**，降低开发成本，无需手写 JSX。  \n- 可视化搭建页面，支持 **实时预览**。  \n\n## 🔧 高度自定义  \n- 组件支持 **属性配置** 和 **事件绑定**，满足各种业务需求。  \n- 可扩展 **样式编辑器**，支持动态样式修改。  \n\n## 📦 完整的物料生态  \n- **内置基础物料库**，开箱即用（Button、Table、Form 等）。  \n- **支持自定义物料**，可根据业务需求灵活拓展。  \n\n## 🔗 易集成  \n- 提供 **简洁的 API**，方便接入其他 React 项目。  \n- **支持 TypeScript**，类型安全，增强开发体验。  \n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinmoqc%2Fmemory-lowcodeeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinmoqc%2Fmemory-lowcodeeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinmoqc%2Fmemory-lowcodeeditor/lists"}