总体规范

统一架构

统一风格

代码示例——以“组件管理”为例

模块划分

组件管理页面主要可分为：分组导航模块、查询条件模块、卡片列表模块。如下图所示：

功能梳理

定义结构

页面开发

根目录结构

• components：组件管理页面子组件
• detail：组件详情目录
• 组件管理代码：
  • index.html
  • index.scss
  • index.ts

index.html

index.scss

index.ts

菜单组件逻辑

传入数据

menu的获取

子菜单默认值其实就是父级菜单改了名字，点击全部组件实际上查的是父级菜单关联的组件列表

searchMenuId的获取

通过点击搜索结果设置searchMenuId的值，用以菜单定位。因为搜索是全局搜索，可能搜出来的组件不属于当前选中的菜单，因此需要反向定位到该组件的菜单。

传出函数

handleMenuClick 菜单点击操作

• 存储当前菜单categoryId
• 重置查询参数queryParams的condition条件
• 查询当前categoryId关联的组件列表

全量上传与批量上传

• 明确上传类型

• 打开上传组件弹窗

  组件的上传流程

• 上传前预处理

• 执行handleUpload开始上传

oneClickDownload全量下载

内部逻辑

页面渲染

选中样式——menuItemWarpper

menuItemWarpper是一个get方法，返回一个与菜单数据相关的函数。通过匹配id将选中的菜单项增加选中样式。通过匹配数据disabled字段，给菜单增加禁用样式。
其中：menuCatagory为父级菜单类目Id，调用父级菜单点击事件给其赋值；subMenuCatagory为子菜单类目Id，调用子菜单点击事件给其赋值。

菜单点击

父级菜单点击

子菜单点击

菜单反选

条件查询逻辑

条件改变

自定义功能触发

新组件上传

组件包上传——拖拽、文件选择两种方式

组件包信息填充

解析组件包名中的：组件编码和组件版本。
组件包命名规范示例：

搜索结果点击

• searchMenuId赋值，进行菜单反查；
• componentList赋值，在卡片列表中展示选中组件；

卡片列表逻辑

复用了公共的Card组件。

总结

.html 部分

1. 尽量使用语义化标签

2. 减少不必要的嵌套

   .scss 部分

3. 优先使用内置封装函数

1. Ant Design 样式按照设计规范初始化

.ts部分

1. 必要的interface 定义

示例：地图信息框样式配置

1. 组合优于继承，对页面模块细化，组件抽离

在这之前，已经将CreateCard抽离成公共组件。其他页面诸如：我的大屏、专题模板也在使用。
需求变更之后：

• html方面只需引入CreateCard组件，判断如果是 地图菜单，将其显示；
• scss方面已经是grid布局，无需改动；
• ts 方面给原点击函数增加默认参数；

1. 理清逻辑，函数尽量功能单一化，减少嵌套

需求：默认选中已选择接口，并展开所有层级目录
问题：目录树是单独接口，叶子节点是点击目录异步获取，且只有父级目录Id，如何匹配所有层级？
解决方法：

• 遍历目录树集合
• 广度优先搜索铺平目录树
• 根据叶子节点的parentId生成层级目录数组

谢谢大家