

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