feat: 1.修改文档 2.优化组件 3.优化分类

JackySoft · Sep 9, 2024 · 01ced47 · 01ced47
1 parent c328390
commit 01ced47
Show file tree

Hide file tree

Showing 38 changed files with 214 additions and 195 deletions.
diff --git a/packages/docs/.vitepress/config.mts b/packages/docs/.vitepress/config.mts
@@ -18,6 +18,7 @@ export default defineConfig({
       { text: '项目', link: '/project' },
       { text: '页面', link: '/page' },
       { text: '组件', link: '/lib' },
+      { text: '微服务', link: '/micro' },
       { text: '综合案例', link: '/example' },
       { text: '团队', link: '/team' },
     ],
@@ -29,7 +30,7 @@ export default defineConfig({
       },
       {
         text: '登录',
-        items: [{ text: '账号登录', link: '/login/' }],
+        items: [{ text: '账号登录', link: '/login' }],
       },
       {
         text: '项目',
@@ -61,6 +62,10 @@ export default defineConfig({
           { text: '自定义组件案例', link: '/lib/LoginForm' },
         ],
       },
+      {
+        text: '微服务',
+        items: [{ text: '接入指南', link: '/micro' }],
+      },
       {
         text: '综合案例',
         items: [

diff --git a/packages/docs/src/home.md b/packages/docs/src/home.md
@@ -1,16 +1,14 @@
 # Marsview 平台介绍
 
-Marsview 是一个开源的面向后台管理系统的可视化搭建平台，通过点击或拖拽的方式快速构建 CRUD、数据看板、图表等常规后台功能。
+Marsview 是一款中后台方向的低代码可视化搭建平台，开发者可以在平台上完成项目和页面的闭环，支持事件交互、接口调用、数据联动和逻辑编排等，开发者可通过微服务快速集成到自己的业务系统中。
 
 ## 特性
 
-- 基于 Antd 组件库开发，当前组件已支持 60+个组件，组件通过拖拽或点击方式添加到画布中。
-- 项目支持访问权限（RBAC）和开发者权限配置。
-- 项目支持名称、Logo、主题色、菜单、图标等基础配置。
-- 页面支持页面权限管理、组件树大纲、JSON 源码、页面列表、接口统一管理、变量配置等。
-- 页面支持组件属性配置、样式配置、事件配置、数据源配置等。
-- 组件支持无线嵌套、组件排序、组件复制粘贴、删除等。
-- 页面支持事件流交互，接口配置等。
+- 项目： 项目创建、项目配置（主题色、菜单布局、系统 Logo、面包屑...）、项目菜单创建、项目角色创建、用户管理； 基于 RBAC 的权限管理。创建项目后，可以直接通过 http://admin.marsview.cc 去访问配置的项目。
+- 页面： 页面创建、页面主题、页面配置、组件拖拽、组件属性、组件事件、组件数据。 目前完全可用于生产环境，项目在创建菜单时可以关联该页面。 页面同时支持其他传统系统通过微服务集成，不管你的系统是 Vue 还是 React。
+- 页面组件： 目前支持的组件有：按钮、表单（所有表单组件）、表格、图表、弹窗、图片、富文本、文件上传、文件下载、代码编辑器、编辑表格、iframe 等常用的页面组件。表单支持了常用规则验证和自定义规则验证。
+- 自定义组件： 自带页面组件满足不了需求时可以自定义开发相关组件，支持 jsx 语法，less 和事件。
+- 接口： 接口、口创建、接口配置，支持 GET、POST、PUT、DELETE 等请求方式，支持接口参数传递。 -事件流： 通过事件流可以完成高难度的业务逻辑编排，比如：组件联动、组件显隐、组件禁用、逻辑处理等。
 
 ## 项目和页面关系
 
@@ -19,117 +17,3 @@ Marsview 是一个开源的面向后台管理系统的可视化搭建平台，
 在`Marsview`中，我们不需要脚手架，不需要项目架构，只需要可视化创建项目，添加基础配置即可。当项目创建好以后，就可以点击`STG`、`PRE`、`PRD`去访问该项目。 但此时访问的项目只有一个基础的架子，还没有内容载体，所以，我们需要创建菜单，给菜单关联一个页面才算完成一个完整的项目。
 
 ![菜单关联页面](/home/page.png)
-
-## 可以跟 Vue 项目集成吗
-
-可以，Marsview 是一个基于 React 的可视化搭建平台，可以通过微服务集成到 Vue 项目中。
-
-如果是集成到传统项目中，我们就不需要创建项目了，直接创建页面即可，页面搭建好以后，点击保存，同时发布到线上，就可以访问，获取该页面地址通过`microApp`集成到自己的传统项目中即可。
-
-### 微服务集成流程
-
-Marsview 默认基于 micro-app 微服务架构实现，所以传统项目也需要使用`microApp`完成微服务集成。
-microApp 文档：https://cangdu.org/micro-app/docs.html#/
-
-**1. 安装依赖**
-
-打开传统的`Vue`或者`React`项目，安装`@micro-zoe/micro-app`依赖。
-
-```bash
-# yarn 安装
-yarn add @micro-zoe/micro-app
-# npm 安装
-npm i @micro-zoe/micro-app --save
-# pnpm 安装
-pnpm add @micro-zoe/micro-app
-```
-
-**2. 引入微服务**
-
-以`Vue`项目为例，在`main.js`中引入微服务。
-
-```js
-import Vue from 'vue';
-import App from './App.vue';
-import routes from './router';
-import microApp from '@micro-zoe/micro-app';
-
-Vue.config.productionTip = false;
-
-microApp.start();
-
-const router = new VueRouter({
-  mode: 'history',
-  routes,
-});
-
-new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount('#app');
-```
-
-关键代码就两行：
-
-- `import microApp from '@micro-zoe/micro-app';`
-- `microApp.start();`
-
-**3. 创建 microMars.vue**
-
-```html
-<template>
-  <micro-app name="mars" :url="url" iframe keep-alive @datachange="handleDataChange" />
-</template>
-
-<script>
-  export default {
-    name: 'MicroMars',
-    data() {
-      return {
-        url: 'http://admin.marsview.cc/',
-      };
-    },
-    methods: {
-      handleDataChange({ detail: { data } }) {
-        if (data.type === 'router') {
-          this.$router.push({
-            path: data.path,
-            params: data.data,
-            query: data.data,
-          });
-        }
-      },
-    },
-  };
-</script>
-```
-
-其实这些配置完全是`microApp`的配置，大家如果对`microApp`不了解，可以看一下官方文档，这里`handleDataChange`也并不是必须的，如果搭建的页面不需要跳转就不需要配置，假如搭建的页面需要跳转到你的 Vue 菜单中，那需要`handleDataChange`来实现跳转。
-
-**4. 配置路由**
-
-常规开发中，我们会在`router.js`中配置路由，我们此时同样需要分配一个路由用来加载`marsview`。
-
-**修改前**
-
-```js
-{
-    path: '/dashboard',
-    name: 'dashboard',
-    component: () => import('@components/Dashboard.vue'),
-},
-```
-
-**修改后**
-
-```js
-{
-    path: '/page/stg/149',
-    name: 'mars',
-    component: () => import('@components/microMars.vue'),
-},
-```
-
-示例：http://admin.marsview.cc/page/stg/149 这是一个数据看板的页面地址，对应的是测试环境，那上面的地址就对应数据看板，当在你的老项目中，点击该菜单时，就会加载该`marsview`页面。
-
-如果你们公司的菜单也是动态创建的，那此处可能需要修改为动态路由，比如：`/page/:env/:id`，然后再你们公司后台配置菜单时，配置对应的页面路由即可，比如：`/page/stg/149`。
diff --git a/packages/docs/src/micro.md b/packages/docs/src/micro.md
@@ -0,0 +1,110 @@
+# 微服务集成
+
+`Marsview`是一个基于`React`的可视化搭建平台，可以通过微服务集成到传统`Vue`项目中。
+
+如果是集成到传统项目中，我们就不需要创建项目了，直接创建页面即可，页面搭建好以后，点击保存，同时发布到线上，就可以直接访问，复制该页面地址通过`microApp`集成到自己的传统项目中即可。
+
+microApp 文档：https://cangdu.org/micro-app/docs.html#/
+
+## **1. 安装依赖**
+
+打开传统的`Vue`或者`React`项目，安装`@micro-zoe/micro-app`依赖。
+
+```bash
+# yarn 安装
+yarn add @micro-zoe/micro-app
+# npm 安装
+npm i @micro-zoe/micro-app --save
+# pnpm 安装
+pnpm add @micro-zoe/micro-app
+```
+
+## **2. 引入微服务**
+
+以`Vue`项目为例，在`main.js`中引入微服务。
+
+```js
+import Vue from 'vue';
+import App from './App.vue';
+import routes from './router';
+import microApp from '@micro-zoe/micro-app';
+
+Vue.config.productionTip = false;
+
+microApp.start();
+
+const router = new VueRouter({
+  mode: 'history',
+  routes,
+});
+
+new Vue({
+  router,
+  render: (h) => h(App),
+}).$mount('#app');
+```
+
+关键代码就两行：
+
+- `import microApp from '@micro-zoe/micro-app';`
+- `microApp.start();`
+
+## **3. 创建 microMars.vue**
+
+```html
+<template>
+  <micro-app name="mars" :url="url" iframe keep-alive @datachange="handleDataChange" />
+</template>
+
+<script>
+  export default {
+    name: 'MicroMars',
+    data() {
+      return {
+        url: 'http://admin.marsview.cc/',
+      };
+    },
+    methods: {
+      handleDataChange({ detail: { data } }) {
+        if (data.type === 'router') {
+          this.$router.push({
+            path: data.path,
+            params: data.data,
+            query: data.data,
+          });
+        }
+      },
+    },
+  };
+</script>
+```
+
+其实这些配置完全是`microApp`的配置，大家如果对`microApp`不了解，可以看一下官方文档，这里`handleDataChange`也并不是必须的，如果搭建的页面不需要跳转就不需要配置，假如搭建的页面需要跳转到你的 Vue 菜单中，那需要`handleDataChange`来实现跳转。
+
+## **4. 配置路由**
+
+常规开发中，我们会在`router.js`中配置路由，我们此时同样需要分配一个路由用来加载`marsview`。
+
+**修改前**
+
+```js
+{
+    path: '/dashboard',
+    name: 'dashboard',
+    component: () => import('@components/Dashboard.vue'),
+},
+```
+
+**修改后**
+
+```js
+{
+    path: '/page/stg/149',
+    name: 'mars',
+    component: () => import('@components/microMars.vue'),
+},
+```
+
+示例：http://admin.marsview.cc/page/stg/149 这是一个数据看板的页面地址，对应的是测试环境，那上面的地址就对应数据看板，当在你的老项目中，点击该菜单时，就会加载该`marsview`页面。
+
+如果你们公司的菜单也是动态创建的，那此处可能需要修改为动态路由，比如：`/page/:env/:id`，然后再你们公司后台配置菜单时，配置对应的页面路由即可，比如：`/page/stg/149`。
diff --git a/packages/docs/src/page/api.md b/packages/docs/src/page/api.md
@@ -1,6 +1,16 @@
 # 接口管理
 
-Marsview 支持接口位置，通过左侧菜单，可以提前创建页面需要的接口，最终把接口配置在组件中。
+一个动态的页面，往往离不开接口调用，比如`Table`组件，需要从接口获取数据。我们可以直接选中表格组件，给它配置接口请求或者直接在页面左侧工具条统一配置接口。
+
+**主要功能：**
+
+- 接口支持全局拦截器、返回结构定义、报错信息提示。
+- 接口支持：GET、POST、PUT、DELETE。
+- 接口支持：参数、请求头配置。
+- 参数支持模板字符串、动态变量。比如：`/api/${id}`。
+- 接口支持代理，解决跨域问题。
+
+参考示例：[CRUD 调用](http://www.marsview.cc/editor/144/edit)
 
 ## 创建接口
 

diff --git a/packages/docs/src/page/drag.md b/packages/docs/src/page/drag.md
@@ -1,9 +1,17 @@
 # 组件拖拽
 
-打开左侧组件物料，可以直接点击或者拖拽组件到画布中。
+打开左侧组件物料，可以直接**点击**或者拖拽组件到画布中，我们推荐点击的方式添加组件到画布。
 
 ![访问端工作台](/page/drag.png)
 
+## 组件特性
+
+- 容器组件支持无限嵌套。
+- 表单项组件必须放在 Form 组件或者 SearchForm 组件中。
+- 组件通过事件流可以完成联动、显隐等操作。
+- 组件支持上下、左右排序。
+- 组件支持复制和删除。例如：直接 ctrl+c 复制，ctrl+v 粘贴。
+
 ## 组件排序
 
 组件支持排序，选中画布中的组件，会有一个工具条，点击上移或者下移，即可调整组件的位置。

diff --git a/packages/docs/src/page/index.md b/packages/docs/src/page/index.md
@@ -1,6 +1,8 @@
 # 页面
 
-页面是整个低代码平台中最重要的部分，也是整个低代码平台的核心。它可以关联到项目中，也可以独立存在。假设我们公司有一个老项目，我们想要通过 Marsview 单独实现其中一个页面，就可以只创建该页面，等页面搭建完成后，通过微服务集成到老项目中。
+页面是整个低代码平台中最重要的部分，也是整个低代码平台的核心。
+
+它可以关联到项目中，也可以独立存在。假设我们公司有一个老项目，我们想要通过 Marsview 单独实现其中一个页面，就可以只创建该页面，等页面搭建完成后，通过微服务集成到老项目中。
 
 **页面使用**
 
@@ -32,6 +34,7 @@
 - 页面工具条：源码导出、保存、预览、多环境发布、发布历史、页面回滚。
 - 页面编辑器：组件点击/拖拽、组件排序、组件复制、组件删除。
 - 页面配置：属性配置、样式配置、事件配置和接口配置。
+- 页面成员：用来配置页面的开发者权限。
 
 ## 页面编辑器
 

diff --git a/packages/docs/src/page/variable.md b/packages/docs/src/page/variable.md
@@ -1,6 +1,10 @@
 # 变量管理
 
-变量可以用来完成页面中复杂的页面交互，比如点击一个按钮，需要动态控制变量值，包括页面组件需要绑定一个变量值等，跟我们平常开发`React`中的`useState`一样。
+变量可以用来完成页面中复杂的功能，比如点击一个按钮，调用接口，把接口返回值保存到变量中，最后给页面组件绑定变量值。跟我们平常开发`React`中的`useState`一样。
+
+平台已经创建了几个关于变量使用的页面，大家可以参考一下：
+
+1. [计数器](http://www.marsview.cc/editor/147/edit)
 
 ## 创建变量