mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-17 10:35:11 +08:00
refactor(admin): 管理端readme更新
This commit is contained in:
parisma
jia000
parent
fe821f7d84
commit
91e2591495
@ -1,34 +1,17 @@
|
||||
# 介绍
|
||||
|
||||
我们提供了与编辑器，表单配套的管理端供开发者直接使用。管理端（magic-admin）代码存放于[开源仓库](https://github.com/Tencent/tmagic-editor)"magic-admin"目录下，可作为一个独立项目运行。我们提供这个管理端一方面期望开发者可以更清晰的了解一个活动从编辑到生成的整个流程，另一方面，开发者也可以
|
||||
我们提供了与编辑器，表单配套的管理端供开发者直接使用。管理端（magic-admin）代码存放于[开源仓库](https://github.com/Tencent/tmagic-editor)"magic-admin"目录下，可作为一个独立项目运行。我们提供这个管理端一方面期望开发者可以更清晰的了解一个项目从编辑到生成的整个流程，另一方面，开发者也可以
|
||||
在 magic-admin 的基础上快速搭建适合自己业务的管理平台。
|
||||
|
||||
管理端提供了如下能力：
|
||||
|
||||
- 活动列表展示，查询
|
||||
- 活动创建，复制
|
||||
- 活动编辑以及 AB TEST 配置能力
|
||||
- 活动发布以及发布状态查看和管理
|
||||
- 项目列表展示，查询
|
||||
- 项目创建，复制
|
||||
- 项目编辑以及 AB TEST 配置能力
|
||||
- 项目发布以及发布状态查看和管理
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211129/81d34a1638168945248.png">
|
||||
|
||||
## 快速开始
|
||||
|
||||
::: tip
|
||||
前提条件：node 环境>=14.15
|
||||
:::
|
||||
|
||||
1、首先 clone 开源仓库代码到本地
|
||||
|
||||
2、执行如下命令运行管理端
|
||||
|
||||
```bash
|
||||
$ cd magic-admin
|
||||
$ npm run admin:run
|
||||
```
|
||||
|
||||
3、访问 http://localhost:80 (端口以实际启动的为准)
|
||||
|
||||
## 开发调试
|
||||
|
||||
magic-admin 管理端分为 web 端和 server 端，目录结构如下：
|
||||
@ -102,9 +85,9 @@ magic-admin 管理端分为 web 端和 server 端，目录结构如下：
|
||||
我们在 magic-admin/server/src/database/init.sql 中准备了库表初始化文件，开发者首先需要创建所需数据表
|
||||
|
||||
- 表名：magic_act_info
|
||||
活动基础信息表，包含活动 ID，活动名称，活动负责人，活动时间等活动基础信息。
|
||||
项目基础信息表，包含项目 ID，项目名称，项目负责人，项目时间等项目基础信息。
|
||||
- 表名：magic_ui_config
|
||||
页面配置表，magic-admin 支持了一个活动中包含多个活动页面的能力，因此每个页面的组件配置信息将分别存储。
|
||||
页面配置表，magic-admin 支持了一个项目中包含多个项目页面的能力，因此每个页面的组件配置信息将分别存储。
|
||||
|
||||
- 启动 web 端：
|
||||
|
||||
@ -133,7 +116,7 @@ server 文件夹下面这些敏感文件，需要开发者参考示例进行替
|
||||
```
|
||||
|
||||
- 关于登录态：
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（活动负责人），开发者可以根据自身业务需要，实现用户登录态
|
||||
magic-admin 在库表中为开发者预留了用户信息字段（项目负责人），开发者可以根据自身业务需要，实现用户登录态
|
||||
|
||||
```js
|
||||
// web/src/App.vue
|
||||
@ -146,19 +129,19 @@ watchEffect(async () => {
|
||||
|
||||
## 管理端能力
|
||||
|
||||
- **活动状态**
|
||||
- **项目状态**
|
||||
|
||||
我们将活动的状态分为三种：修改中，部分页面已发布，全部页面已发布。在活动列表页面，可以展开查看每个活动页面的状态。
|
||||
我们将项目的状态分为三种：修改中，部分页面已发布，全部页面已发布。在项目列表页面，可以展开查看每个项目页面的状态。
|
||||
|
||||
修改中：活动所有页面均在编辑状态
|
||||
修改中：项目所有页面均在编辑状态
|
||||
|
||||
部分已发布：活动的一些页面在编辑状态，一些页面已发布
|
||||
部分已发布：项目的一些页面在编辑状态，一些页面已发布
|
||||
|
||||
已发布：活动所有页面均已发布
|
||||
已发布：项目所有页面均已发布
|
||||
|
||||
- **在管理端引入 runtime**
|
||||
|
||||
在管理端中我们提供了一个可视化的模拟器，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
|
||||
在管理端中我们提供了一个可视化的模拟画布，他需要依赖 runtime 核心库，因此我们需要先在 magic 根目录下运行
|
||||
|
||||
```js
|
||||
cd magic
|
||||
@ -173,9 +156,9 @@ npm run build
|
||||
|
||||
- **AB TEST**
|
||||
|
||||
当活动开发者需要对页面进行 AB TEST 测试时，可以在活动中创建多个活动页面，并且在活动配置中进行配置
|
||||
当项目开发者需要对页面进行 AB TEST 测试时，可以在项目中创建多个项目页面，并且在项目配置中进行配置
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211129/c11fa81638173475771.png">
|
||||
这里仅为管理端的配置，通过这里我们将在活动配置文件中得到类似如下结构的 abtest 信息，开发者可以在页面加载时根据 uiconfig 的 abtest 字段进行判断。
|
||||
这里仅为管理端的配置，通过这里我们将在项目配置文件中得到类似如下结构的 abtest 信息，开发者可以在页面加载时根据 DSL 的 abtest 字段进行判断。
|
||||
|
||||
```js
|
||||
abTest: [
|
||||
@ -196,32 +179,40 @@ abTest: [
|
||||
];
|
||||
```
|
||||
|
||||
- **活动保存**
|
||||
- **项目保存**
|
||||
|
||||
活动创建之后的配置信息分为两部份：活动基础信息，页面组件配置信息。
|
||||
活动基础信息是整个活动共用的配置项，对应 magic_act_info 数据表
|
||||
页面组件配置信息是一个活动中单个页面的配置项，对应 magic_ui_config 数据表
|
||||
项目创建之后的配置信息分为两部份：项目基础信息，页面组件配置信息。
|
||||
项目基础信息是整个项目共用的配置项，对应 magic_act_info 数据表
|
||||
页面组件配置信息是一个项目中单个页面的配置项，对应 magic_ui_config 数据表
|
||||
|
||||
活动基础信息不在 magic-editor 支持范围以内，需要开发者自行结合 magic-form 按需开发。管理端示例中这部分内容在页面右上角【活动配置】抽屉页
|
||||
项目基础信息不在 magic-editor 支持范围以内，需要开发者自行结合 @tmagic/form 按需开发。管理端示例中这部分内容在页面右上角【项目配置】抽屉页
|
||||
|
||||
页面组件配置信息是指 magic-editor 中的 modelValue，他是一份 js schema 包含了页面内组件的配置内容，也是页面渲染的关键依赖文件。[uiconfig 概念参考](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E7%BC%96%E8%BE%91%E5%99%A8%E4%BA%A7%E7%89%A9-uiconfig)
|
||||
页面组件配置信息是指 magic-editor 中的 modelValue，他是一份 js schema 包含了页面内组件的配置内容，也是页面渲染的关键依赖文件。[DSL 概念参考](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E7%BC%96%E8%BE%91%E5%99%A8%E4%BA%A7%E7%89%A9-DSL)
|
||||
|
||||
magic-admin 支持一个活动中创建多个活动页面的能力，因此，在活动保存的时候，我们的做法是将每个页面单独作为一条记录保存，比如活动 A 中包含页面 1 和页面 2
|
||||
magic-admin 支持一个项目中创建多个项目页面的能力，因此，在项目保存的时候，我们的做法是将每个页面单独作为一条记录保存，比如项目 A 中包含页面 1 和页面 2
|
||||
保存之后我们将得到
|
||||
|
||||
magic_act_info 表
|
||||
| act_id | act_name | operator | act_status | abtest_raw | ... |
|
||||
| --- | --- | --- | --- |--- |--- |
|
||||
| 123 |活动 A | username | 修改中| []|... |
|
||||
| 123 |项目 A | username | 修改中| []|... |
|
||||
|
||||
magic_ui_config 表
|
||||
| id | act_id | c_dist_code | page_title | page_publish_status |... |
|
||||
| --- | --- | --- | --- |--- | --- |
|
||||
| 1 |123 | 页面 1 的 uiconfig 配置 |页面 1 |修改中|...|
|
||||
| 2 |123 | 页面 2 的 uiconfig 配置 |页面 2|修改中|...|
|
||||
| 1 |123 | 页面 1 的 DSL 配置 |页面 1 |修改中|...|
|
||||
| 2 |123 | 页面 2 的 DSL 配置 |页面 2|修改中|...|
|
||||
|
||||
- **活动发布**
|
||||
- **项目发布**
|
||||
|
||||
管理端的活动发布是对[页面发布](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E9%A1%B5%E9%9D%A2%E5%8F%91%E5%B8%83) 的实践。
|
||||
原始的页面框架 page.html 需要通过 runtime 打包生成，注入的 uiconfig 保存在 magic_ui_config 表 c_dist_code 字段中。
|
||||
发布时将 uiconfig 文件注入到 page.html 中，写入 server/assets/publish 目录下，访问路径： http://localhost/pubish/${page_name}.html
|
||||
管理端的项目发布是对[页面发布](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E9%A1%B5%E9%9D%A2%E5%8F%91%E5%B8%83) 的实践。
|
||||
原始的页面框架 page.html 需要通过 runtime 打包生成，注入的 DSL 保存在 magic_ui_config 表 c_dist_code 字段中。
|
||||
发布时将 DSL 文件注入到 page.html 中，写入 server/assets/publish 目录下，访问路径： http://localhost/publish/${page_name}.html
|
||||
|
||||
## 部署
|
||||
|
||||
::: tip
|
||||
前提条件：node 环境>=14.15
|
||||
:::
|
||||
|
||||
如需使用流水线部署，请参考 /magic-admin/setup.sh
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user