目前接口返回格式 ```ts export interface AxiosResponseData { 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、接口设计包含 * 获取基础设置信息 * 保存基础设置信息 * 获取告警通用模板配置 * 设置告警通用模板配置 * 获取告警渠道列表 * 设置告警渠道 * 获取更新信息 * 更新版本版本