mirror of https://github.com/allinssl/allinssl
273 lines
11 KiB
Markdown
273 lines
11 KiB
Markdown
|
||
|
||
目前接口返回格式
|
||
```ts
|
||
export interface AxiosResponseData<T = unknown> {
|
||
code: number
|
||
count: number
|
||
data: T
|
||
message: string
|
||
status: boolean
|
||
}
|
||
```
|
||
|
||
后端请求的协议方式，formdata 还是 json
|
||
|
||
登录的方式，使用那种方案jwt，以及加密方式
|
||
|
||
接口文档需要包含一下内容
|
||
接口类型、接口返回值、以及其他需要处理的内容需要说清楚，例如登录失效，以及状态的判断
|
||
|
||
|
||
|
||
|
||
基础要求
|
||
1、基于vue3 的 tsx文件编写，并将业务和数据、视图分离成 mvc 模式，如果代码中没有包含业务和数据，可以移除该文件，确保结构单一和可维护性。
|
||
2、视图文件文件入口为 index.tsx
|
||
3、业务代码文件入口为 useController.tsx
|
||
4、数据代码文件入口为 useStore.tsx
|
||
5、使用hooks编写，如果存在表单、表格使用配置生成。参考如下
|
||
|
||
|
||
视图文件内容要求
|
||
1、所有的视图style，使用css module 编写，基于tailwind 的@apply 实现，如果行内元素少，可以省略创建css module。
|
||
2、如果视图使用naiveui tsx 开发内容，如果没有相应的组件，则使用原生样式实现
|
||
|
||
业务代码内容要求
|
||
1、包含 hooks 配置的生成方法，需要导出
|
||
2、事件逻辑处理、dom 操作、生命周期、监听函数等，
|
||
3、数据代码转发，支持将 sotre 数据直接转发
|
||
|
||
数据代码内容要求
|
||
1、包含所有的数据内容，例如请求方法、表单数据处理
|
||
2、响应式数据存储、持久化数据存储
|
||
|
||
国际化内容要求
|
||
1、将文件中的中文文本未使用 $t 包裹的内容，使用 $t('中文内容') 包裹起来，如果存在则引入 $t，import { $t } from "@locales/index"
|
||
|
||
格式要求
|
||
1、注释采用jsdoc格式，使用中文作为注释语言
|
||
2、注释内容清晰，对同类的函数位置整理和功能使用注释分割线分
|
||
3、方法名称规范化，根据类型和作用定义。
|
||
|
||
|
||
|
||
|
||
基础视图参考：/Users/chudong/project/tools-monorepo/apps/allin-ssl/src/components/baseComponent/index.tsx
|
||
|
||
|
||
首页模块设计
|
||
1、界面设计
|
||
包含三个模块，采用上下结构
|
||
* 概览模块包含工作流、证书、监控模块，每个模块，都具备所有数量、启用/到期/异常数量、失败/到期数量，以及对应产品图标
|
||
* 最近工作流执行列表，包含字段：
|
||
* 名称
|
||
* 执行状态
|
||
* 执行时间
|
||
* 快捷入口模块，提供常用的三个模块入口，工作流构建、申请证书、添加监控
|
||
|
||
2、接口设计包含
|
||
* 概览数据接口
|
||
* 最近工作流列表
|
||
|
||
工作流列表模块设计
|
||
1、界面设计
|
||
采用基础视图组件设计该页面，传入相关内容，
|
||
* 添加按钮文本：新增工作流
|
||
* 搜索框提示内容：请输入工作流名称
|
||
* 表格包含字段：
|
||
* 工作流名称
|
||
* 触发方式（自动执行或手动可切换）
|
||
* 启用状态（启用/停用）
|
||
* 最后一次执行时间
|
||
* 创建时间
|
||
* 操作（包含日志、执行、编辑、删除）
|
||
* 添加工作流按钮触发弹窗内容
|
||
* 弹窗界面包含多个具备概览图的单选项
|
||
* 常用SSL部署工作流
|
||
* 自定义工作流
|
||
|
||
2、接口设计包含
|
||
* 工作流列表
|
||
* 获取指定工作流程数据
|
||
* 新建自定义工作流程数据
|
||
* 获取指定工作流执行日志
|
||
* 执行指定工作流
|
||
* 保存指定工作流程数据
|
||
* 删除指定工作流程数据
|
||
|
||
|
||
工作流设计模块设计
|
||
1、界面设计
|
||
采用流程图构建组建，设计页面，需要设计一下节点设计，所有节点采用
|
||
* 申请SSL（表单设计）
|
||
* 域名信息（input、必填）
|
||
* 邮箱信息（input、非必填）
|
||
* DNS 提供商（select，支持添加，添加调用 API 授权页面的添加表单）
|
||
* 高级选项折叠
|
||
* 数字证书算法（select，支持字段RSA2048\RSA3072\RSA4096\RSA8192\EC256\EC384，默认使用RSA2048\）
|
||
* 指定DNS解析服务器（input，非必填，提示：申请证书过程中优先使用它）
|
||
* DNS超时时间(input、非必填)
|
||
* DNS解析TTL时间(input、非必填)
|
||
* 关闭CNAME跟随（switch，默认关闭）
|
||
* 关闭ARI续期（switch，默认关闭）
|
||
* 续签间隔（input，当上次签发的证书距离到期时间超过xx天后，跳过续签，使用 ）
|
||
* 部署SSL到指定位置（表单设计，需要手动开发，使用 AI 生成消耗时间，而且基本上可用性低）
|
||
*
|
||
* 通知告警
|
||
* 通知主题（input、必填）
|
||
* 通知内容（textarea、必填）
|
||
* 选择通知渠道（select，右侧支持添加渠道）
|
||
*
|
||
* 并行分支
|
||
* 触发并行添加节点的功能
|
||
* 执行结果分支（只有节点是申请SSL、部署SSL到指定位置、通知告警节点后面才出现此分支提供选择）
|
||
* 触发条件判断分支，仅事件触发的节点支持添加该节点
|
||
* 节点执行成功后
|
||
* 节点执行失败后
|
||
|
||
2、接口设计包含
|
||
* 获取API服务商列表
|
||
* 获取证书列表
|
||
* 获取网站列表（宝塔面板）
|
||
* 获取 CDN 加速域名（仅腾讯、阿里相关密钥获取）
|
||
* 获取 WAF 包含域名（仅腾讯、阿里相关密钥获取）
|
||
|
||
|
||
证书管理列表模块设计
|
||
1、界面设计
|
||
采用基础视图组件设计该页面，传入相关内容，
|
||
* 添加按钮文本：上传证书
|
||
* 搜索框提示内容：请输入证书名称/类型
|
||
* 表格包含字段：
|
||
* 域名
|
||
* 品牌
|
||
* 剩余天数
|
||
* 到期时间
|
||
* 来源
|
||
* 添加时间
|
||
* 操作（下载、删除）
|
||
* 上传证书按钮触发弹窗内容
|
||
* 弹窗界面包含表单（支持证书压缩上传，识别腾讯、阿里下的证书压缩包文件）
|
||
* 证书名称
|
||
* 证书内容 (PEM 格式)
|
||
* 私钥内容 (KEY 格式)
|
||
|
||
2、接口设计包含
|
||
* 获取证书列表
|
||
* 下载指定证书
|
||
* 上传证书信息
|
||
* 删除指定证书信息
|
||
|
||
|
||
|
||
申请证书模块模块设计
|
||
1、界面设计
|
||
采用 tab 页面切换，分为商业证书页面和免费证书页面
|
||
* 商业证书采用，iframe 内嵌官网页面，官网页面需要新增一个界面作为兼容页面。
|
||
* 免费证书采用，卡片式设计界面，以便于后期支持其他渠道
|
||
* 证书申请表单
|
||
* 手动申请和自动部署的选项卡片（包含 icon 和文件描述）
|
||
* 手动申请，采用 DNS 验证自动认证的方式，参考面板的统一设计
|
||
* 自动化部署，直接调用工作流的界面。
|
||
|
||
2、接口设计包含
|
||
* 申请证书信息
|
||
* 证书验证接口
|
||
|
||
|
||
授权API管理列表模块设计
|
||
1、界面设计
|
||
采用基础视图组件设计该页面，传入相关内容，
|
||
* 添加按钮文本：上传授权 API 管理
|
||
* 搜索框提示内容：请输入授权api 名称或类型
|
||
* 表格包含字段：
|
||
* 名称
|
||
* 授权API类型（提供商，如腾讯云，宝塔面板）
|
||
* 创建时间
|
||
* 操作（编辑、删除）
|
||
* 上传证书按钮触发弹窗内容
|
||
* 弹窗界面包含表单
|
||
* 授权 API 类型（select，支持类型 SSH、宝塔、1panel、腾讯、阿里）
|
||
* 不同的类型显示不同的东西
|
||
* SSH
|
||
* 服务器IP（input）
|
||
* SSH端口（input，默认填充22）
|
||
* 用户名（input，默认填充root）
|
||
* 验证类型（radio-button）
|
||
1. 密码
|
||
2. SSH密钥
|
||
1. SSH密钥口令
|
||
* 宝塔
|
||
* 地址（input，包含协议和端口）
|
||
* api 密钥（input）
|
||
* 1panel
|
||
* 地址（input，包含协议和端口）
|
||
* api 密钥（input）
|
||
* 阿里云
|
||
* AccessKeyId（input）
|
||
* AccessKeySecret（input）
|
||
* 腾讯云
|
||
* SecretId（input）
|
||
* SecretKey（input）
|
||
|
||
2、接口设计包含
|
||
* 获取授权 api 列表
|
||
* 新建授权 api 信息
|
||
* 编辑指定授权 aai 信息
|
||
* 删除指定授权 api 信息
|
||
|
||
|
||
监控管理列表模块设计
|
||
1、界面设计
|
||
采用基础视图组件设计该页面，传入相关内容，
|
||
* 添加按钮文本：添加监控
|
||
* 搜索框提示内容：请输入监控名称和域名
|
||
* 表格包含字段：
|
||
* 名称
|
||
* 授权API类型（提供商，如腾讯云，宝塔面板）
|
||
* 创建时间
|
||
* 操作（编辑、删除）
|
||
* 上传证书按钮触发弹窗内容
|
||
* 弹窗界面包含表单
|
||
* 监控名称（input）
|
||
* 域名/IP（input）
|
||
* 检查周期（select，5/10/15/30/60分钟）
|
||
* 告警渠道（多选，右侧支持添加渠道）
|
||
2、接口设计包含
|
||
* 获取监控管理列表
|
||
* 设置指定监控启动状态
|
||
* 添加监控信息
|
||
* 编辑指定监控信息
|
||
* 删除指定监控信息
|
||
|
||
|
||
设置管理模块设置
|
||
1、界面设置
|
||
采用 tab 页面切换，分为三个界面常用设置、告警通知、更新版本，内容部分采用卡片设计
|
||
* 常用设置（采用1:1 分栏设计，支持表单元素行显示），包含一下具体模块，采用统一保存的方式，保存按钮固定在顶部，避免设置过长的导致问题
|
||
* 超时时间（input）
|
||
* 管理员账号（input）
|
||
* 管理员密码（input）
|
||
* SSL 配置（switch，关闭，提供粘贴 key，pem 文本域输入，默认折叠隐藏）
|
||
* 告警通知（采用上下结构），包含全局通知模块和通知渠道配置两个模块
|
||
* 全局通知模块（表单）
|
||
* 通知主题（input，默认文字）
|
||
* 通知内容（textarea，默认文字）
|
||
* 通知渠道（卡片列表，参考面板的设计）
|
||
* 左侧图标名称(包含已配置数量，点击可查看)+右侧操作
|
||
* 关于我们
|
||
* 版本信息，支持更新版本
|
||
* 客服二维码
|
||
* 微信公众好
|
||
* 关于产品介绍
|
||
|
||
2、接口设计包含
|
||
* 获取基础设置信息
|
||
* 保存基础设置信息
|
||
* 获取告警通用模板配置
|
||
* 设置告警通用模板配置
|
||
* 获取告警渠道列表
|
||
* 设置告警渠道
|
||
* 获取更新信息
|
||
* 更新版本版本 |