前端开发
系统核心前端模块设计
通用基础组件，Libra平台前端，页面看板组件，策略组件 工作台
前端工程规范实践
前端工程包含应用前端工程，页面看板组件前端工程，策略扩展前端工程，流程画布节点扩展前端工程； 前端工程整体采用微服务的形式提供
开发框架
Innospot前端工程是基于可扩展的企业级前端应用框架 Umi 做为应用框架，使用 Ant Design 做为UI组件库进行扩展开发。
依赖引入
在项目中引入依赖时，应遵循以下原则以保持代码的可维护性和可扩展性：
- 明确指定版本：在 package.json 文件中，为每个依赖项指定明确的版本号。这可以确保您的代码在不同环境中的一致性，并避免由于依赖项的更新而导致的潜在问题。
- 仅引入必要的依赖项：只引入您的项目所需的依赖项。避免引入过多的依赖项，以减少项目的复杂性和潜在的冲突。
- 考虑依赖项的大小：在引入依赖项时，考虑其大小对项目性能的影响。尽量选择轻量级的依赖项，以减少加载时间和资源消耗。
- 查看依赖项的维护状态：在选择依赖项时，查看其维护状态和活跃程度。选择那些有活跃社区支持和更新频率较高的依赖项，以确保您的项目能够得到持续的支持和改进。
- 遵循最佳实践和安全性：确保所引入的依赖项符合最佳实践和安全性要求。查看依赖项的文档和社区反馈，了解其安全性和最佳实践的建议。
- 定期更新依赖项：定期检查和更新您的依赖项，以获取最新的功能和修复的漏洞。使用工具如 npm-check 或 yarn upgrade-interactive 可以帮助您管理依赖项的更新。
在一个模块中导入依赖模块时，应按以下顺序导入：
- 外部依赖库，如React、loadsh等；
- 内部公共组件，如
src/components中的公共组件； - 公共配置对象或工具类，如
src/common中的公共模块； - 当前页面中的特定组件；
- 静态依赖，如图片、字体等；
- 样式文件，如less；
工程结构
目录划分
├── package.json
├── .env //环境变量
├── dist
├── config
├── config.ts //umi配置文件
├── routes.ts //路由配置文件
└── proxy.ts //本地开发接口代理配置
├── public //此目录下所有文件会被 copy 到输出路径
└── src
├── assets //静态资源目录
├── font //字体
├── images //公共图片
└── less //公共样式
├── common //公共模块
├── constants //常量
├── hooks //自定义hooks
├── useI18n.ts //处理国际化的hook
└── useModal.ts //处理弹层的hook
├── request //接口请求
├── index.ts //基于umi-request做数据交互
└── header.ts //发送请求时的header处理
├── types //ts类型
└── utils //工具类
├── Blowfish.js //Blowfish加密工具
├── Dom.js //dom操作工具
├── i18n.ts //国际化处理
├── I18nMap.ts //国际化数据转换工具
├── LocalStorage.ts //本地存储工具
├── module.ts //微应用注册模块工具
├── Blowfish.js //Blowfish加密工具Dom.js
└── QiankunMasterState.ts //向微应用中注入的数据
├── layouts //页面布局
├── BasicLayout //标准布局
├── index.tsx
└── style.less
└── FullScreenLayout //全屏布局
├── index.tsx
└── style.less
├── components //公共组件
├── CategoriesPane //页面通用分类组件
├── HttpApiModal //新建/编辑HttpApi弹层组件
├── HeaderDropdown //页头下拉组件
├── IconButton //一个扩展的按钮组件
├── Icons
├── FlagIcon //Flag自定义图标
├── InnoIcon //Inno自定义图标
└── MenuIcon //菜单图标组件
├── KafkaTableModal //Kafka数据集管理组件
├── LanguageSelector //语言下拉选择组件
├── ListTable //通用表格组件
├── PageHelmet //页面title设置组件
├── PageLoading //页面加载组件
├── PageTitle //页面标题组件
├── PermissionSection //权限组件
├── RightContent
├── RightContent //页头右侧组件
└── AvatarDropdown //页头用户下拉组件
├── PageLoading //页面加载组件
├── RootConfigProvider //antd全局化配置
├── StatusTag //状态标签组件
├── UserAvatar //用户头像组件
└── DataSourceModal //新建/编辑数据源弹层组件
├── models //项目定义的 model
├── services //项目定义的 service
├── pages //所有路由页面
├── 404.tsx //404页
├── 403.tsx //403页
├── App //应用管理
├── index.tsx //应用列表
├── Builder //应用配置
├── BaseConfig.tsx //连接&输入输出
├── ParameterConfig.tsx //配置参数
├── CodeConfig //处理代码
├── index.tsx
├── components //处理代码模块中的组件
├── CodeEditor //代码编辑器组件
├── ExecutionResult //执行结果组件
└── ParamConfig //配置参数
├── index.tsx //配置参数组件
└── InputData.tsx //输入数据组件
├── index.tsx
└── components //应用配置模块中的组件
├── ConfigBoard //控件配置组件
├── defaultSchema.ts //默认控件
└── settings //可配置控件
├── ConnectorConfig //连接设置组件
├── DataInteraction //输入输出设置组件
├── Header //页头组件
├── LinkForm //连接类型表单设置组件
├── NodeConfigPreview //配置预览组件
└── NodeSnapshot //节点快照组件
└── components //应用管理相关组件
├── AppCategoryModal //应用分类组件
└── AppModal //应用新建/编辑组件
├── Config //配置中心
├── Currencies //货币管理
├── index.tsx
└── components //组件
└── CurrencyModal //新建/编辑货币弹层
├── Languages //语言管理
├── index.tsx
└── components //组件
└── LanguageModal //新建/编辑语言弹层
├── Menus //菜单管理
├── index.tsx
└── components //组件
├── SortableMenuList //可拖拽菜单列表
└── MenuModal //新建/编辑菜单弹层
├── RBAC //权限管理
├── index.tsx
└── components //组件
├── contexts
└── AuthConfigContext.ts //权限管理数据上下文
├── MenuConfigTable //菜单权限
└── ApplicationConfigTable //操作权限
├── System //系统设置
├── index.tsx
└── components //组件
├── BasicConfig //组织信息
└── EmailConfig //邮件服务器设置
└── Translations //翻译管理
├── index.tsx
└── components //组件
└── TransModal //编辑翻译弹层
├── Login/index.tsx //用户登录
├── Metadata //元数据管理
├── Dataset //数据集管理
├── index.tsx
└── components //组件
├── DatasetModal //新建/编辑数据集弹层
├── VariableModal //添加/编辑变量配置弹层
└── CategoryModal //新建/编辑分类弹层
├── DataSource //数据源管理
├── index.tsx //数据源管理
├── Schema.tsx //注册表
└── components //组件
├── Header //页头组件
└── DataPreview //数据预览
└── HttpApi/index.tsx //HTTP API管理
├── Pages //页面管理
├── index.tsx
└── components
├── PageModal //新建/编辑页面弹层
└── PageCategoryModal //新建/编辑页面分类弹层
├── Workflow //工作流管理
├── Builder //工作流配置页
├── index.tsx
├── common //一些公共数据
├── components //组件目录
├── Canvas //工作流画布组件
├── ConfigPanel //节点配置组件
├── CustomFormRender //节点配置表单组件
├── ExecutePreview //节点执行预览组件
├── Header //页头组件
├── Node //节点组件
├── NodeConfig //节点配置组件
├── NodeConfigModal //节点配置弹层组件
├── NodeDataConfig //节点数据配置
├── ExecutionItems //工作流执行数据的展示项
├── WebhookExecution //Webhook节点执行组件
├── Attachment.tsx //附件类型展示组件
├── Json.tsx //JSON展示组件
├── Logger.tsx //日志展示组件
└── Result.tsx //执行结果列表展示组件
└── Widgets //节点配置控件目录
├──AggregateVariables //聚合变量
├──BranchConfig //分支条件设置
├──Cascader //多级下拉框
├──CodeEditor //代码编辑器
├──HttpRequest //Http请求配置
├──JoinFields //连接字段
├──JsonEditor //JSON编辑器
├──RuleEditor //规则配置器
├──VariableConfig //变量配置
├──Webhook //Webhook配置
├──WidgetRules //表单规则配置
├──AuthSelect //鉴权方式
├──CredentialSelect.tsx //凭据下拉框
├──DataSourceSelect.tsx //数据源下拉框
├──DataTableSelect.tsx //数据表下拉框
├──FieldMapping.tsx //映射字段
├──FieldMappingTable.tsx //字段映射
├──HttpApiSelect.tsx //HttpApi下拉框
├──HttpURLInput.tsx //请求地址
├──InputFieldSelect.tsx //输入字段
├──InputFieldSelect2.tsx //聚合字段
├──InputFieldTable.tsx //输入字段表格
├──QueryParams.tsx //参数映射
├──ReadOnlyWidget.tsx //通用只读状态控件
└──TableFields.tsx //表格字段
├── NodeIcon //节点图标组件
├── NodeName //节点名称组件
├── NodeParam //节点参数组件
├── NodePreview //节点预览组件
└── StencilNode //模板节点组件
└── Graph
├── shape
├── edge.js //工作流中连接节点的边
└── node.js //工作流中的节点
└── index.js //画布图形类
├── Index //工作流列表
├── index.tsx
└── components //组件目录
├── CategoryModal //分类组件
├── FlowPreview //工作流预览组件
└── WorkflowModal //新建/编辑工作流弹层
├── Preview //工作流详情
├── index.tsx
└── Record.tsx //Webhook执行日志
└── System //系统管理
├── Channel //消息渠道设置
├── index.tsx
└── components
└── ChannelModal //新建/编辑渠道弹层
├── ChannelAssignment //消息接收设置
├── index.tsx
└── components
├── contexts
└── ReceivingConfigContext.ts //消息接收设置数据上下文
└── ReceivingSettingTable //消息接收数据列表
├── LoginLogs/index.tsx //登录日志
├── OperationLogs/index.tsx //操作日志
├── Roles //角色管理
├── index.tsx
└── components
├── RoleModal //新建/编辑角色弹层
└── AddMemberModal //添加角色弹层
└── Users //成员管理
├── index.tsx
└── components
├── contexts
└── UserConfigContext.ts //成员管理数据上下文
├── MemberModal //新建/编辑成员弹层
├── UpdatePasswordModal //修改密码弹层
└── MemberDetailModal //查看成员详情弹层
└── app.tsx
注释规范
在Innostpots前端项目中，我们应遵循以下注释规范：
- 单行注释：使用 // 开始，适用于短小的注释或对代码行的解释。
// 这是一个单行注释
const name = 'John'; // 定义一个名字变量
- 多行注释：使用 /* */ 包裹，适用于多行注释或对代码块的解释。
/*
* 这是一个多行注释
* 可以跨越多行
*/
const age = 25; // 定义一个年龄变量
- 函数注释：在函数定义之前使用多行注释，描述函数的功能、参数和返回值。
/**
* 计算两个数字的和
* @param {number} a - 第一个数字
* @param {number} b - 第二个数字
* @returns {number} - 两个数字的和
*/
function add(a, b) {
return a + b;
}
- 类或组件注释：在类定义之前使用多行注释，描述类的功能、属性和方法。
/**
* 表示一个人的类
*/
class Person {
/**
* 创建一个人的实例
* @param {string} name - 人的名字
* @param {number} age - 人的年龄
*/
constructor(name, age) {
this.name = name;
this.age = age;
}
/**
* 获取人的名字
* @returns {string} - 人的名字
*/
getName() {
return this.name;
}
}
- TODO 注释：使用 // TODO: 标记需要完成或修复的任务。
// TODO: 添加错误处理逻辑
function fetchData() {
// ...
}
命名规范
目录
- 普通目录尽量以小写单词命名（尽量以单一单词命名，多个单词时以驼峰形式命名），如 pages、common、components；
- 页面目录和组件目录以大写字母开头（尽量以单一单词命名，多个单词时首字母大写）；
文件
- 普通模块、less文件、图片等以小写单词命名（尽量以单一单词命名，多个单词时以驼峰形式命名），如 useModal.ts、useI18n.ts；
- 组件、类、对象文件，以大写字母开头，如 AvatarDropdown.tsx、RightContent.tsx；
less
1、组件中使用less，scss时，会自动识别 CSS Modules 的使用。
// CSS Modules
import styles from './foo.css';
// 非 CSS Modules
import './foo.css';
2、做为 CSS Modules 使用时，less的样式名称应该遵循javascript变量的命名规则。
/* 好的示例 */
.errorMessage {
color: red;
}
/* 不好的示例 */
.error-message {
color: red;
}
css
- 使用有意义的类名：选择描述性的类名，以便能够清晰地表达元素的用途或功能。避免使用无意义的类名或缩写，以提高代码的可读性和可维护性。
/* 不好的示例 */
.red {
color: red;
}
/* 好的示例 */
.error-message {
color: red;
}
- 使用连字符分隔单词：在类名中使用连字符（-）来分隔单词，以提高可读性。避免使用驼峰命名法或下划线命名法。
/* 不好的示例 */
.errorMessage {
color: red;
}
error_message {
color: red;
}
/* 好的示例 */
.error-message {
color: red;
}
- 避免全局选择器：尽量避免使用全局选择器，如 body、div 等，以减少样式的冲突和副作用。使用更具体的选择器，以限定样式的作用范围。
/* 不好的示例 */
body {
font-family: Arial, sans-serif;
}
/* 好的示例 */
.container {
font-family: Arial, sans-serif;
}
- 使用模块化的命名空间：在组件开发中，使用模块化的命名空间可以避免样式冲突和命名重复的问题。为每个模块或组件添加唯一的命名空间前缀
/* 模块化的命名空间示例 */
.user-profile .avatar {
/* 样式规则 */
}
.user-profile .name {
/* 样式规则 */
}
函数命名
- 使用有意义的函数名：选择描述性的函数名，以便能够清晰地表达函数的功能和用途。避免使用无意义的函数名或缩写，以提高代码的可读性。
// 不好的示例
function fn() {
// 函数体
}
// 好的示例
function calculateSum() {
// 函数体
}
- 使用动词开头：在函数名中使用动词开头，以明确函数的操作或行为。这有助于提供一致的命名约定，并使函数用途更加明确。
// 不好的示例
function value() {
// 函数体
}
// 好的示例
function calculateValue() {
// 函数体
}
- 使用驼峰命名法：在函数名中使用驼峰命名法，将单词连接起来，首字母小写，后续单词首字母大写。这有助于提高函数名的可读性。
// 不好的示例
function calculate_sum() {
// 函数体
}
// 好的示例
function calculateSum() {
// 函数体
}
- 使用下划线作为私有函数的前缀：如果函数是私有的，只在内部使用，可以使用下划线作为函数名的前缀，以表示其私有性。
function _privateFunction() {
// 函数体
}
- 使用一致的命名约定：在整个项目中保持一致的命名约定，以便开发人员能够轻松理解和识别函数的用途。这有助于提高代码的可读性和可维护性。
function calculateSum() {
// 函数体
}
function validateInput() {
// 函数体
}
React组件命名
- 使用大驼峰命名法：在组件名中使用大驼峰命名法，将每个单词的首字母大写，并将它们连接在一起。这有助于区分组件和普通的 JavaScript 函数或变量。
// 不好的示例
function mycomponent() {
// 组件代码
}
// 好的示例
function MyComponent() {
// 组件代码
}
- 使用描述性的名称：选择描述性的组件名称，以便能够清晰地表达组件的用途或功能。避免使用无意义的名称或缩写，以提高代码的可读性。
// 不好的示例
function Card() {
// 组件代码
}
// 好的示例
function UserProfileCard() {
// 组件代码
}
- 使用文件名与组件名保持一致：在组件的文件名中使用与组件名相同的命名约定，以提高代码的一致性和可读性。
// 文件名：MyComponent.js
function MyComponent() {
// 组件代码
}
- 使用特定的前缀或后缀：根据您的项目约定，可以使用特定的前缀或后缀来标识组件的类型或作用。
// 使用前缀示例
function AppHeader() {
// 组件代码
}
// 使用后缀示例
function HeaderContainer() {
// 组件代码
}
- 使用复合组件命名：对于复合组件，可以使用父组件名称作为前缀，以提高组件的层次结构和可读性。
function UserProfileCard() {
// 组件代码
}
function UserProfilePage() {
return (
<div>
<UserProfileCard />
{/* 其他组件 */}
</div>
);
}
静态资源
公共的静态资源放到 src/assets 目录中：
font字体images图片less样式
开发调试
开发调试前端功能之前，需要首先获取后端服务接口地址，将后端服务接口地址添加到代理文件 config/proxy.ts dev配置项中，替换 http://your.dev.url，启动本地代理。
前端工程通过 npm start 命令启动，如果需要调试页面看板前端组件相关功能，需要启动该项目工程地址，
此项目以微应用的形式嵌入主工程。
编译构建
前端项目能过 npm run build 命令构建编译，编译成功后，可将产出物放至服务容器即可访问。