Skip to content

Commit

Permalink
chore: admin
Browse files Browse the repository at this point in the history
  • Loading branch information
@imcuttle
imcuttle committed Jan 31, 2024
1 parent 8dac667 commit b67da9e
Show file tree
Hide file tree
Showing 3 changed files with 322 additions and 94 deletions.
186 changes: 93 additions & 93 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
### 由于个人工作原因，近期不太有时间持续迭代，所以寻求帮助支持：[Windows 系统支持](https://github.com/imcuttle/mometa/issues/20)，[Vue 支持](https://github.com/imcuttle/mometa/issues/17)

微信联系方式：moyuuuuu 备注 mometa

<p align="center">
<img src="./images/logo.png" />
</p>
Expand All @@ -13,134 +9,138 @@
</p>

<p align="center">
面向研发的低代码元编程（代码可视化）能力</p>
The tool for R&D which has low-code meta programming and WYSIWYG editing
</p>

<p align="center">
English | <a href="README_zh_CN.md">简体中文</a>
</p>

---

<!-- toc -->

- [背景](#%E8%83%8C%E6%99%AF)
- [特性](#%E7%89%B9%E6%80%A7)
- [使用场景](#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
- [新开发一个页面](#%E6%96%B0%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2)
- [已有历史项目，需要迭代功能，只在某一小块 ui 模块内](#%E5%B7%B2%E6%9C%89%E5%8E%86%E5%8F%B2%E9%A1%B9%E7%9B%AE%E9%9C%80%E8%A6%81%E8%BF%AD%E4%BB%A3%E5%8A%9F%E8%83%BD%E5%8F%AA%E5%9C%A8%E6%9F%90%E4%B8%80%E5%B0%8F%E5%9D%97-ui-%E6%A8%A1%E5%9D%97%E5%86%85)
- [操作演示](#%E6%93%8D%E4%BD%9C%E6%BC%94%E7%A4%BA)
- [编辑](#%E7%BC%96%E8%BE%91)
- [反向定位](#%E5%8F%8D%E5%90%91%E5%AE%9A%E4%BD%8D)
- [插入物料](#%E6%8F%92%E5%85%A5%E7%89%A9%E6%96%99)
- [删除视图](#%E5%88%A0%E9%99%A4%E8%A7%86%E5%9B%BE)
- [移动视图](#%E7%A7%BB%E5%8A%A8%E8%A7%86%E5%9B%BE)
- [编辑代码](#%E7%BC%96%E8%BE%91%E4%BB%A3%E7%A0%81)
- [预览](#%E9%A2%84%E8%A7%88)
- [物料预览](#%E7%89%A9%E6%96%99%E9%A2%84%E8%A7%88)
- [响应式布局](#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80)
- [路由模拟](#%E8%B7%AF%E7%94%B1%E6%A8%A1%E6%8B%9F)
- [如何实现](#%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0)
- [快速开始](#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B)
- [如何使用](#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8)
- [安装依赖](#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96)
- [使用 antd 物料](#%E4%BD%BF%E7%94%A8-antd-%E7%89%A9%E6%96%99)
- [接入编辑器](#%E6%8E%A5%E5%85%A5%E7%BC%96%E8%BE%91%E5%99%A8)
- [NPM 包](#npm-%E5%8C%85)
- [作者](#%E4%BD%9C%E8%80%85)
- [Why use it?](#why-use-it)
- [Features](#features)
- [scenes to be used](#scenes-to-be-used)
- [Develop a new page](#develop-a-new-page)
- [There are existing historical projects and the iteration function is needed, only in a small ui module.](#there-are-existing-historical-projects-and-the-iteration-function-is-needed-only-in-a-small-ui-module)
- [Operation demonstration](#operation-demonstration)
- [edit](#edit)
- [Reverse positioning](#reverse-positioning)
- [Insert material](#insert-material)
- [Delete view](#delete-view)
- [Mobile view](#mobile-view)
- [Edit code](#edit-code)
- [Preview](#preview)
- [Material Preview](#material-preview)
- [Responsive layout](#responsive-layout)
- [Route simulation](#route-simulation)
- [How to implement](#how-to-implement)
- [Quick start](#quick-start)
- [how to use](#how-to-use)
- [Install dependencies](#install-dependencies)
- [Use antd material](#use-antd-material)
- [Access editor](#access-editor)
- [NPM Packages](#npm-packages)
- [Author](#author)

<!-- tocstop -->

## 背景
## Why use it?

mometa 不是传统主流的低代码平台（如 amis/云凤蝶），mometa 是面向研发的、代码可视设计编辑平台；它更像是 dreamweaver、gui 可视编辑 之于 程序员。
mometa is not similar to the traditional lowcode project which is schema based. mometa is code based, It's WYSIWYG editing following code ast.

**它用于解决的问题有：**
**Which problems mometa can resolved：**

- 对低代码平台不形成依赖，二次开发可以无缝进入代码开发模式
- 同时支持所见即所得的可视编辑，用于提效，提升开发体验
- 提供物料生态，可自定义物料，提升物料使用体验，提升复用率
- There is no dependence on low-code platforms, and secondary development can seamlessly enter code development mode.
- It also supports WYSIWYG visual editing to improve efficiency and development experience.
- Provide material ecology, customize materials, improve material use experience, and increase reuse rate.

mometa 定位更多是 基于程序员本地开发的模式，新增了可视化编码的能力（修改的也是本地的代码文件本身）;\
它更像是辅助编码工具，而不是 No-Code (amis/云凤蝶) 的平台方案；\
**不建议在远端服务起一个本地开发环境，所以没有做在线部署。**\
目前的实现依赖 webpack dev 开发模式，后续会考虑兼容 vite。
The positioning of mometa is more based on the local development model of programmers, adding the ability of visual coding (the local code file itself is also modified);\
**It is not recommended to set up a local development environment for remote services, so there is no online deployment.**\
The current implementation relies on the webpack dev development mode, and compatibility with vite will be considered in the future.

<p align="center">
<img src="./images/snapshot.png" />
</p>

## 特性
## Features

- 🛠 面向研发的代码可视化编辑，直接作用于源码
- 响应式布局、路由模拟、物料预览
- 反向定位（视图定位源码）
- 拖拽插入物料
- 拖拽移动
- 上下移动
- 删除
- 替换
- 层级选择
- 🍒 开放物料生态，可定制团队内物料库，见 [mometa-mat](https://github.com/imcuttle/mometa-mat)
- 💎 多语言、多生态支持，目前暂只支持 React，后续有计划支持 Vue
- 🔥 接入友好，Webpack>=4 插件化接入
- 🌟 开发友好，物料库支持热更新，不破坏已有开发模式
- 🛠 Code visual editing for R\&D, directly acting on source code
- Responsive layout, routing simulation, material preview
- Reverse locating (locating source code)
- Drag and drop to insert materials
- Drag and move
- Moving up and down
- Deleting
- Replacing
- Layers Selecting
- 🍒 Open material ecology, customizable material library within the team, see [mometa-mat](https://github.com/imcuttle/mometa-mat)
- 💎 Multi-language, multi-ecological support, currently only supports React, there are plans to support Vue in the future
- 🔥 Access-friendly, Webpack>=4 plug-in access
- 🌟 Development friendly, the material library supports hot updates without destroying the existing development model

## 使用场景
## scenes to be used

#### 新开发一个页面
#### Develop a new page

1. 使用团队开发指令，新增一个空的占位路由 & 页面
2. 进入 mometa，查看本地物料，和远端物料市场，选中自己需要的物料，直接拖拽，基本成型的页面布局完成
3. 进入 ide，完成数据联调，数据传递等，源码开发
1. Use team development instructions to add an empty placeholder route & page
2. Enter mometa, view local materials and remote material markets, select the materials you need, drag and drop directly, and the basic page layout is completed.
3. Enter the IDE, complete data joint debugging, data transfer, etc., and source code development

#### 已有历史项目，需要迭代功能，只在某一小块 ui 模块内
#### There are existing historical projects and the iteration function is needed, only in a small ui module.

1. 进入 mometa，物料操作插入
2. 反向定位直接进入 ide 源码开发
1. Enter mometa and insert material operation
2. Reverse positioning to directly enter IDE source code development

## 操作演示
## Operation demonstration

#### 编辑
#### edit

##### 反向定位
##### Reverse positioning

支持从视图定位代码位置
Support positioning code location from view
![](./images/mometa-locate.gif)

##### 插入物料
##### Insert material

可视化插入物料
Visually insert materials
![](./images/mometa-insert-material.gif)

##### 删除视图
##### Delete view

![](./images/mometa-delete.gif)

##### 移动视图
##### Mobile view

![](./images/mometa-move.gif)

##### 编辑代码
##### Edit code

![](./images/mometa-code-edit.gif)

#### 预览
#### Preview

##### 物料预览
##### Material Preview

![](./images/mometa-preview-clientrender.gif)

##### 响应式布局
##### Responsive layout

![](./images/mometa-preview-responsive.gif)

##### 路由模拟
##### Route simulation

![](./images/mometa-preview-url.gif)

## 如何实现
## How to implement

见 [mometa 实现原理](./docs/how-to-work.md)
See [mometa implementation principle](./docs/how-to-work.md)

## 快速开始
## Quick start

由于 mometa 依赖本地开发环境，只使用在本地开发环境，所以没有搭建在线 demo；在本地开发的时候可以进行使用
Since mometa relies on the local development environment and is only used in the local development environment, there is no online demo built; it can be used during local development.

```bash
git clone https://github.com/imcuttle/mometa.git
Expand All @@ -149,33 +149,33 @@ pnpm install
pnpm run start:app:cr # 开启本地开发预览模式
```

## 如何使用
## how to use

#### 安装依赖
#### Install dependencies

```bash
npm i @mometa/editor -D
```

#### 使用 antd 物料
#### Use antd material

1. 安装 antd 物料
1. Install antd materials

```bash
npm i @mometa-mat/antd -D
```

2. 在项目根目录中创建 `mometa-material.config.js`
2. Create `mometa-material.config.js` in the project root directory

```jsx
module.exports = [require('@mometa-mat/antd').default]
```

你也可以创建自己的物料库，数据结构规则见 [Material 定义](./packages/materials-generator/src/types.ts)
You can also create your own material library. For data structure rules, see [Material definition](./packages/materials-generator/src/types.ts)

#### 接入编辑器
#### Access editor

`webpack.config.js` 修改如下：
`webpack.config.js` is modified as follows:

```js
const MometaEditorPlugin = require('@mometa/editor/webpack')
Expand All @@ -185,7 +185,7 @@ module.exports = {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
// 注意，只需要处理你需要编辑的文件目录
// Note that only the file directory you need to edit needs to be processed
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
Expand All @@ -198,27 +198,27 @@ module.exports = {
isEnvDevelopment &&
new MometaEditorPlugin({
react: true,
// 开启物料预览
//Open material preview
experimentalMaterialsClientRender: true
})
]
}
```

**注意：使用时，不需要开启官方预设的 react-refresh，mometa 默认会开启 react-refresh 能力**
**Note: You do not need to enable the official default react-refresh when using it. Mometa will enable the react-refresh capability by default**

启动 webpack dev server，开启 `http://localhost:${port}/mometa/` 即可
Start webpack dev server and open `http://localhost:${port}/mometa/`

提供的例子可见 [@mometa/app](./packages/app)
The provided example can be found at [@mometa/app](./packages/app)】

## NPM 包
## NPM Packages

- [@mometa/editor](packages/editor) - 编辑器
- [@mometa/fs-handler](packages/fs-handler) - 代码操作转换核心逻辑，如删除、移动、替换、插入等
- [@mometa/materials-generator](packages/materials-generator) - 物料生成 & 解析
- [@mometa/materials-resolver](packages/materials-resolver) - Resolve materials config
- [@mometa/react-refresh-webpack-plugin](packages/react-refresh-webpack-plugin) - An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.

## 作者
## Author

This library is written and maintained by imcuttle, <a href="mailto:imcuttle@163.com">imcuttle@163.com</a>.
Loading

0 comments on commit b67da9e

Please sign in to comment.