低代码平台的探索之路（二）——实战案例：低码资产重构UMC报告中心列表

写在最前面的话

今天接到这么一个需求：

【UMC】报告中心单独抽取为一个工作站

经过详细了解，原来很简单，就是把已经开发好了的三个页面迁移到一个新个工作站（git源项目）去。

我们通过wg-cli脚手架工具去完成。

需求梳理：

• 将原工作站（dev-service-report-tpl）中3个页面（单位管理列表、角色管理列表、流程管理列表）迁移到新工作站（dev-service-report）中。
• 新工作站（dev-service-report）中，继承已有工程化配置。
• 迁移完成后，新工作站（dev-service-report）中，这3个页面能正常访问和使用。

开发步骤：

1. 新建工作站dev-service-report

2. 继承原工作站中的工程化配置

git clone git@github.com:xxxxx/dev-service-report.git
cd dev-service-report
git remote add dev git@github.com:xxxxx/dev-service-report-tpl.git
git fetch dev
git merge dev/master --allow-unrelated-histories

3. 拷贝页面文件

cp -r ../dev-service-report-tpl/src/pages/* ./src/pages/

4. 处理页面依赖

修改页面依赖的文件。

find ./src/pages -name "*.tsx" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

5. 修改路径配置

修改页面路径配置的文件。

find ./src/pages -name "*.tsx" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

6. 修改菜单配置

修改菜单配置的文件。

find ./src/router -name "*.tsx" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

7. 修改样式文件

修改样式文件的文件。

find ./src -name "*.less" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

8. 修改语言文件

修改语言文件的文件。

find ./src -name "*.ts" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

9. 修改图片文件

修改图片文件的文件。

find ./src -name "*.png" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

10. 修改图标文件

修改图标文件的文件。

find ./src -name "*.svg" -exec sed -i "" "s#dev-service-report-tpl#dev-service-report#g" {} \;

11. 替换工作站名称

使用wg-cli脚手架工具。

npx wg-cli rename-ws dev-service-report

12. 部署

npx wg-cli build
npx wg-cli deploy

总结：

通过使用wg-cli脚手架工具，可以快速、便捷地迁移页面。

需要注意：

• 迁移页面时，需要处理好页面依赖、路径配置、菜单配置、样式文件、语言文件、图片文件、图标文件等。
• 迁移完成后，需要对新工作站进行部署。

参考：

• wg-cli 脚手架工具
• umi-webpack 迁移指南