【新增】部署类型七牛云oss、七牛云cdn、百度cdn、腾讯waf、腾讯edgeone、阿里云waf

【新增】解析类型godaddy 【新增】自定义CA授权管理【调整】优化部署流程，减少代码冗余，提升类型添加效率
2026-03-13 18:10:53 +08:00 · 2025-05-23 16:58:34 +08:00
parent 71de397e11
commit e5634d4992
263 changed files with 18348 additions and 14253 deletions
--- a/frontend/apps/allin-ssl/src/views/monitor/components/AddMonitorModel.tsx
+++ b/frontend/apps/allin-ssl/src/views/monitor/components/AddMonitorModel.tsx
@@ -1,24 +1,35 @@
+import { defineComponent, type PropType } from 'vue'
 import { useMonitorFormController } from '../useController'

 import type { UpdateSiteMonitorParams } from '@/types/monitor'

 /**
 * 监控表单组件
+ * @description 用于添加和编辑证书监控的表单界面
 */
 export default defineComponent({
 	name: 'MonitorForm',
 	props: {
+		/**
+		 * 是否为编辑模式
+		 */
 		isEdit: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * 编辑时的初始数据
+		 */
 		data: {
 			type: Object as PropType<UpdateSiteMonitorParams | null>,
 			default: () => null,
 		},
 	},
 	setup(props) {
+		// 使用表单控制器获取表单组件
 		const { component: MonitorForm } = useMonitorFormController(props.data)
+
+		// 返回渲染函数
 		return () => <MonitorForm labelPlacement="top" />
 	},
 })
--- a/frontend/apps/allin-ssl/src/views/monitor/index.tsx
+++ b/frontend/apps/allin-ssl/src/views/monitor/index.tsx
@@ -1,37 +1,49 @@
+import { defineComponent, onMounted } from 'vue'
 import { NButton, NInput } from 'naive-ui'
-import { PlusOutlined } from '@vicons/antd'
 import { Search } from '@vicons/carbon'
+
 import { $t } from '@locales/index'
 import { useThemeCssVar } from '@baota/naive-ui/theme'

 import { useController } from './useController'

-import BaseComponent from '@components/baseComponent'
-import EmptyState from '@components/emptyState'
+import BaseComponent from '@components/BaseLayout'
+import EmptyState from '@components/TableEmptyState'

 /**
 * 监控管理组件
+ * @description 提供证书监控的管理界面，包括列表展示、搜索、添加、编辑等功能
 */
 export default defineComponent({
 	name: 'MonitorManage',
 	setup() {
+		// 使用控制器获取数据和方法
 		const { MonitorTable, MonitorTablePage, param, fetch, data, openAddForm, isDetectionAddMonitor } = useController()
+
+		// 获取主题CSS变量
 		const cssVar = useThemeCssVar(['contentPadding', 'borderColor', 'headerHeight', 'iconColorHover'])
+
+		// 组件挂载时初始化数据
 		onMounted(() => {
+			// 获取监控列表数据
 			fetch()
+			// 检测是否需要自动打开添加表单（从其他页面跳转而来）
 			isDetectionAddMonitor()
 		})
+
+		// 返回渲染函数
 		return () => (
 			<div class="h-full flex flex-col" style={cssVar.value}>
 				<div class="mx-auto max-w-[1600px] w-full p-6">
 					<BaseComponent
 						v-slots={{
+							// 头部左侧区域 - 添加按钮
 							headerLeft: () => (
 								<NButton type="primary" size="large" class="px-5" onClick={openAddForm}>
-									<PlusOutlined class="text-[var(--text-color-3)] w-[1.6rem]" />
-									<span class="px-2">{$t('t_11_1745289354516')}</span>
+									{$t('t_11_1745289354516')}
 								</NButton>
 							),
+							// 头部右侧区域 - 搜索框
 							headerRight: () => (
 								<NInput
 									v-model:value={param.value.search}
@@ -52,6 +64,7 @@ export default defineComponent({
 									}}
 								></NInput>
 							),
+							// 内容区域 - 监控表格
 							content: () => (
 								<div class="rounded-lg">
 									<MonitorTable size="medium">
@@ -61,6 +74,7 @@ export default defineComponent({
 									</MonitorTable>
 								</div>
 							),
+							// 底部右侧区域 - 分页组件
 							footerRight: () => (
 								<div class="mt-4 flex justify-end">
 									<MonitorTablePage
--- a/frontend/apps/allin-ssl/src/views/monitor/useController.tsx
+++ b/frontend/apps/allin-ssl/src/views/monitor/useController.tsx
@@ -1,5 +1,8 @@
-import { FormRules, NButton, NSpace, NSwitch, type DataTableColumns } from 'naive-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { FormRules, NButton, NSpace, NSwitch, type DataTableColumns } from 'naive-ui'
+
+// 钩子和工具
 import {
 	useModal,
 	useTable,
@@ -13,11 +16,15 @@ import {
 import { useError } from '@baota/hooks/error'
 import { isDomain } from '@baota/utils/business'
 import { $t } from '@locales/index'
-import { useStore } from './useStore'
-import MonitorForm from './components/monitorForm'
-import NotifyProviderSelect from '@components/notifyProviderSelect'
-import TypeIcon from '@components/typeIcon'

+// Store和组件
+import { useStore } from './useStore'
+import MonitorForm from './components/AddMonitorModel'
+import NotifyProviderSelect from '@components/NotifyProviderSelect'
+import TypeIcon from '@components/TypeIcon'
+
+// 类型导入
+import type { Ref } from 'vue'
 import type {
 	AddSiteMonitorParams,
 	SiteMonitorItem,
@@ -25,31 +32,50 @@ import type {
 	UpdateSiteMonitorParams,
 } from '@/types/monitor'

-// 消息和对话框
+/**
+ * 监控管理控制器接口定义
+ */
+interface MonitorControllerExposes {
+	// 表格相关
+	MonitorTable: ReturnType<typeof useTable>['component']
+	MonitorTablePage: ReturnType<typeof useTablePage>['component']
+	loading: Ref<boolean>
+	param: Ref<SiteMonitorListParams>
+	data: Ref<{ list: SiteMonitorItem[]; total: number }>
+	fetch: () => Promise<void>
+
+	// 表单和操作相关
+	openAddForm: () => void
+	isDetectionAddMonitor: () => void
+}
+
+// 从Store中获取方法
 const {
 	fetchMonitorList,
 	deleteExistingMonitor,
 	setMonitorStatus,
 	monitorForm,
 	addNewMonitor,
-	updateMonitorForm,
-	resetMonitorForm,
 	updateExistingMonitor,
+	resetMonitorForm,
+	updateMonitorForm,
 } = useStore()

 // 错误处理
 const { handleError } = useError()

 /**
- * useController
- * @description 监控管理业务逻辑控制器
- * @returns {object} 返回controller对象
+ * 监控管理业务逻辑控制器
+ * @description 处理监控列表页面的业务逻辑，包括表格展示、添加、编辑、删除等操作
+ * @returns {MonitorControllerExposes} 返回controller对象
 */
-export const useController = () => {
+export const useController = (): MonitorControllerExposes => {
 	const route = useRoute()
 	const router = useRouter()
+
 	/**
-	 * @description 创建表格列配置
+	 * 创建表格列配置
+	 * @description 定义监控表格的列结构和渲染方式
 	 * @returns {DataTableColumns<SiteMonitorItem>} 返回表格列配置数组
 	 */
 	const createColumns = (): DataTableColumns<SiteMonitorItem> => [
@@ -142,7 +168,10 @@ export const useController = () => {
 		},
 	]

-	// 表格实例
+	/**
+	 * 表格实例
+	 * @description 创建表格实例并管理相关状态
+	 */
 	const {
 		component: MonitorTable,
 		loading,
@@ -161,7 +190,10 @@ export const useController = () => {
 		watchValue: ['p', 'limit'],
 	})

-	// 分页实例
+	/**
+	 * 分页实例
+	 * @description 创建表格分页组件
+	 */
 	const { component: MonitorTablePage } = useTablePage({
 		param,
 		total,
@@ -172,9 +204,10 @@ export const useController = () => {
 	})

 	/**
-	 * @description 打开添加监控弹窗
+	 * 打开添加监控弹窗
+	 * @description 显示添加监控的表单弹窗
 	 */
-	const openAddForm = () => {
+	const openAddForm = (): void => {
 		useModal({
 			title: $t('t_11_1745289354516'),
 			area: 500,
@@ -187,10 +220,11 @@ export const useController = () => {
 	}

 	/**
-	 * @description 打开编辑监控弹窗
-	 * @param {SiteMonitorItem} item - 监控项
+	 * 打开编辑监控弹窗
+	 * @description 显示编辑监控的表单弹窗
+	 * @param {SiteMonitorItem} data - 要编辑的监控项数据
 	 */
-	const openEditForm = (data: SiteMonitorItem) => {
+	const openEditForm = (data: SiteMonitorItem): void => {
 		useModal({
 			title: $t('t_20_1745289354598'),
 			area: 500,
@@ -204,10 +238,11 @@ export const useController = () => {
 	}

 	/**
-	 * @description 确认删除监控
-	 * @param {number} id - 监控ID
+	 * 确认删除监控
+	 * @description 显示删除确认对话框
+	 * @param {SiteMonitorItem} row - 要删除的监控项
 	 */
-	const confirmDelete = (row: SiteMonitorItem) => {
+	const confirmDelete = (row: SiteMonitorItem): void => {
 		useDialog({
 			title: $t('t_0_1745294710530'),
 			content: $t('t_22_1745289359036'),
@@ -221,18 +256,20 @@ export const useController = () => {
 	}

 	/**
-	 * @description 切换监控状态
-	 * @param {ExtendedSiteMonitorItem} row - 监控项
+	 * 切换监控状态
+	 * @description 启用或禁用监控
+	 * @param {SiteMonitorItem} row - 监控项
 	 */
-	const toggleStatus = async (row: SiteMonitorItem) => {
+	const toggleStatus = async (row: SiteMonitorItem): Promise<void> => {
 		await setMonitorStatus({ id: row.id, active: Number(row.active) ? 0 : 1 })
 		fetch()
 	}

 	/**
-	 * @description 检测是否需要添加工作流
+	 * 检测是否需要添加工作流
+	 * @description 从URL参数判断是否需要自动打开添加表单
 	 */
-	const isDetectionAddMonitor = () => {
+	const isDetectionAddMonitor = (): void => {
 		const { type } = route.query
 		if (type?.includes('create')) {
 			openAddForm()
@@ -253,11 +290,20 @@ export const useController = () => {
 }

 /**
- * @description 监控表单控制器
- * @returns {object} 返回controller对象
+ * 监控表单控制器接口定义
 */
-export const useMonitorFormController = (data: UpdateSiteMonitorParams | null = null) => {
-	// 消息和对话框
+interface MonitorFormControllerExposes {
+	component: ReturnType<typeof useForm>['component']
+}
+
+/**
+ * 监控表单控制器
+ * @description 处理监控添加/编辑表单的业务逻辑
+ * @param {UpdateSiteMonitorParams | null} data - 编辑时的初始数据
+ * @returns {MonitorFormControllerExposes} 返回控制器对象
+ */
+export const useMonitorFormController = (data: UpdateSiteMonitorParams | null = null): MonitorFormControllerExposes => {
+	// 表单工具
 	const { useFormInput, useFormCustom, useFormInputNumber } = useFormHooks()

 	// 加载遮罩
@@ -266,7 +312,10 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 	// 消息和对话框
 	const { confirm } = useModalHooks()

-	// 表单配置
+	/**
+	 * 表单配置
+	 * @description 定义表单字段和布局
+	 */
 	const config = computed(() => [
 		useFormInput('名称', 'name'),
 		useFormInput('域名', 'domain'),
@@ -279,17 +328,15 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 					value={monitorForm.value.report_type}
 					valueType="type"
 					onUpdate:value={(item) => {
-						console.log(item)
 						monitorForm.value.report_type = item.value
 					}}
 				/>
 			)
 		}),
-		// useFormSelect('类型', 'report_type', alarmList.value, { placeholder: '请选择类型，不能为空' }),
 	])

 	/**
-	 * @description 表单验证规则
+	 * 表单验证规则
 	 */
 	const rules = {
 		name: { required: true, message: '请输入名称', trigger: 'input' },
@@ -310,17 +357,16 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 	} as FormRules

 	/**
-	 * @description 提交表单
-	 * @param {AddSiteMonitorParams} params - 添加监控参数
-	 * @param {Ref<FormInst | null>} formRef - 表单实例
+	 * 表单提交处理
+	 * @description 根据当前模式处理表单提交
+	 * @param {AddSiteMonitorParams | UpdateSiteMonitorParams} params - 表单数据
 	 */
-	const request = async (params: AddSiteMonitorParams | UpdateSiteMonitorParams) => {
+	const request = async (params: AddSiteMonitorParams | UpdateSiteMonitorParams): Promise<void> => {
 		try {
 			if (data) {
 				await updateExistingMonitor({ ...params, id: data.id })
 			} else {
 				const { id, ...rest } = params
-				console.log(rest)
 				await addNewMonitor(rest)
 			}
 		} catch (error) {
@@ -328,7 +374,9 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 		}
 	}

-	// 使用表单hooks
+	/**
+	 * 使用表单hooks创建表单组件
+	 */
 	const { component, fetch } = useForm({
 		config,
 		defaultValue: monitorForm,
@@ -336,7 +384,10 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 		rules,
 	})

-	// 关联确认按钮
+	/**
+	 * 关联确认按钮
+	 * @description 处理表单提交逻辑
+	 */
 	confirm(async (close) => {
 		try {
 			openLoad()
@@ -349,10 +400,12 @@ export const useMonitorFormController = (data: UpdateSiteMonitorParams | null =
 		}
 	})

+	// 组件挂载时更新表单数据
 	onMounted(() => {
-		updateMonitorForm(data) // 更新监控表单
+		updateMonitorForm(data)
 	})

+	// 组件卸载时重置表单
 	onUnmounted(resetMonitorForm)

 	return {
--- a/frontend/apps/allin-ssl/src/views/monitor/useStore.tsx
+++ b/frontend/apps/allin-ssl/src/views/monitor/useStore.tsx
@@ -1,8 +1,11 @@
+import { defineStore, storeToRefs } from 'pinia'
+import { ref, computed } from 'vue'
 import { getSiteMonitorList, addSiteMonitor, updateSiteMonitor, deleteSiteMonitor, setSiteMonitor } from '@/api/monitor'
 import { useMessage } from '@baota/naive-ui/hooks'
 import { useError } from '@baota/hooks/error'
 import { $t } from '@locales/index'

+import type { Ref } from 'vue'
 import type {
 	SiteMonitorItem,
 	SiteMonitorListParams,
@@ -17,14 +20,34 @@ import type { TableResponse } from '@baota/naive-ui/types/table'
 const { handleError } = useError()
 const message = useMessage()

+/**
+ * 定义Store暴露的类型
+ */
+interface MonitorStoreExposes {
+	// 状态
+	monitorForm: Ref<AddSiteMonitorParams & UpdateSiteMonitorParams>
+
+	// 方法
+	fetchMonitorList: <T = SiteMonitorItem>(params: SiteMonitorListParams) => Promise<TableResponse<T>>
+	addNewMonitor: (params: AddSiteMonitorParams) => Promise<boolean>
+	updateExistingMonitor: (params: UpdateSiteMonitorParams) => Promise<boolean>
+	deleteExistingMonitor: (params: DeleteSiteMonitorParams) => Promise<boolean>
+	setMonitorStatus: (params: SetSiteMonitorParams) => Promise<boolean>
+	resetMonitorForm: () => void
+	updateMonitorForm: (params?: UpdateSiteMonitorParams | null) => void
+	submitForm: () => Promise<boolean>
+}
+
 /**
 * 监控管理状态 Store
 * @description 用于管理监控相关的状态和操作，包括监控列表、添加、编辑等
 */
-export const useMonitorStore = defineStore('monitor-store', () => {
+export const useMonitorStore = defineStore('monitor-store', (): MonitorStoreExposes => {
 	// -------------------- 状态定义 --------------------

-	// 添加/编辑监控表单
+	/**
+	 * 添加/编辑监控表单状态
+	 */
 	const monitorForm = ref<AddSiteMonitorParams & UpdateSiteMonitorParams>({
 		id: 0,
 		name: '',
@@ -33,7 +56,7 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 		report_type: '',
 	})

-	// -------------------- 工具方法 --------------------
+	// -------------------- 方法定义 --------------------
 	/**
 	 * 获取监控列表
 	 * @description 根据分页参数获取监控列表数据
@@ -59,7 +82,7 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 	 * @param {AddSiteMonitorParams} params - 添加监控参数
 	 * @returns {Promise<boolean>} 是否添加成功
 	 */
-	const addNewMonitor = async (params: AddSiteMonitorParams) => {
+	const addNewMonitor = async (params: AddSiteMonitorParams): Promise<boolean> => {
 		try {
 			const { fetch, message } = addSiteMonitor(params)
 			message.value = true
@@ -77,7 +100,7 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 	 * @param {UpdateSiteMonitorParams} params - 更新监控参数
 	 * @returns {Promise<boolean>} 是否更新成功
 	 */
-	const updateExistingMonitor = async (params: UpdateSiteMonitorParams) => {
+	const updateExistingMonitor = async (params: UpdateSiteMonitorParams): Promise<boolean> => {
 		try {
 			const { fetch, message } = updateSiteMonitor(params)
 			message.value = true
@@ -92,12 +115,12 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 	/**
 	 * 删除监控
 	 * @description 删除指定ID的监控
-	 * @param {number} id - 监控ID
+	 * @param {DeleteSiteMonitorParams} params - 删除监控参数
 	 * @returns {Promise<boolean>} 是否删除成功
 	 */
-	const deleteExistingMonitor = async ({ id }: DeleteSiteMonitorParams) => {
+	const deleteExistingMonitor = async (params: DeleteSiteMonitorParams): Promise<boolean> => {
 		try {
-			const { fetch, message } = deleteSiteMonitor({ id })
+			const { fetch, message } = deleteSiteMonitor(params)
 			message.value = true
 			await fetch()
 			return true
@@ -111,9 +134,9 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 	 * 设置监控状态
 	 * @description 设置指定ID的监控状态
 	 * @param {SetSiteMonitorParams} params - 设置监控状态参数
-	 * @returns {Promise<AxiosResponseData>} 返回响应数据
+	 * @returns {Promise<boolean>} 是否设置成功
 	 */
-	const setMonitorStatus = async (params: SetSiteMonitorParams) => {
+	const setMonitorStatus = async (params: SetSiteMonitorParams): Promise<boolean> => {
 		try {
 			const { fetch, message } = setSiteMonitor(params)
 			message.value = true
@@ -126,16 +149,20 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 	}

 	/**
-	 * @description 更新监控表单
-	 * @param {UpdateSiteMonitorParams} params - 更新监控参数
+	 * 更新监控表单
+	 * @description 用于编辑时填充表单数据
+	 * @param {UpdateSiteMonitorParams | null} params - 更新监控参数
 	 */
-	const updateMonitorForm = (params: UpdateSiteMonitorParams | null = monitorForm.value) => {
+	const updateMonitorForm = (params: UpdateSiteMonitorParams | null = monitorForm.value): void => {
 		const { id, name, domain, cycle, report_type } = params || monitorForm.value
 		monitorForm.value = { id, name, domain, cycle, report_type }
 	}

-	// 重置表单
-	const resetMonitorForm = () => {
+	/**
+	 * 重置表单
+	 * @description 清空表单数据
+	 */
+	const resetMonitorForm = (): void => {
 		monitorForm.value = {
 			id: 0,
 			name: '',
@@ -145,8 +172,12 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 		}
 	}

-	// 提交表单
-	const submitForm = async () => {
+	/**
+	 * 提交表单
+	 * @description 根据表单状态自动判断是添加还是更新操作
+	 * @returns {Promise<boolean>} 是否提交成功
+	 */
+	const submitForm = async (): Promise<boolean> => {
 		const { id, ...params } = monitorForm.value
 		if (id) {
 			return updateExistingMonitor({ id, ...params }) // 编辑模式
@@ -155,6 +186,7 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 		}
 	}

+	// 返回所有状态和方法
 	return {
 		monitorForm,
 		fetchMonitorList,
@@ -171,7 +203,7 @@ export const useMonitorStore = defineStore('monitor-store', () => {
 /**
 * 组合式 API 使用 Store
 * @description 提供对监控管理 Store 的访问，并返回响应式引用
- * @returns {Object} 包含所有 store 状态和方法的对象
+ * @returns {MonitorStoreExposes} 包含所有 store 状态和方法的对象
 */
 export const useStore = () => {
 	const store = useMonitorStore()