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

【新增】解析类型godaddy
【新增】自定义CA授权管理
【调整】优化部署流程，减少代码冗余，提升类型添加效率

frontend/apps/allin-ssl/src/views/home/index.module.css

@@ -1,85 +1,119 @@
-/* 状态文本颜色 */
+/* 状态文本颜色定义 */
 .stateText {
-  &.success { color: #22c55e; }
-  &.warning { color: #eab308; }
-  &.error { color: #ef4444; }
-  &.info { color: #3b82f6; }
-  &.default { color: #6b7280; }
+  &.success { color: var(--n-success-color); }
+  &.warning { color: var(--n-warning-color); }
+  &.error { color: var(--n-error-color); }
+  &.info { color: var(--n-info-color); }
+  &.default { color: var(--n-text-color3); } /* 使用 Naive UI 较浅的文本颜色 */
 }
 
-/* 卡片样式 */
+/* 卡片悬停效果 */
 .cardHover {
   transition: all 0.3s ease;
   &:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--n-box-shadow2); /* 使用 Naive UI 阴影变量 */
   }
 }
 
 /* 快捷入口卡片基础样式 */
 .quickEntryCard {
+	height: 100%	;
   transition: all 0.3s ease;
-  border-radius: 0.6rem;
+  border-radius: 0.6rem; /* 圆角 */
 }
 
 .quickEntryCard:hover {
-  transform: translateY(-4px);
+  transform: translateY(-4px); /* 悬停时上移效果更明显 */
 }
 
-/* 工作流入口样式 */
+/* 工作流快捷入口特定样式 */
 .workflow {
-  background: rgba(16, 185, 129, 0.08);
+  background: var(--color-workflow-bg); /* 使用 variable.css 中定义的变量 */
 }
 
 .workflow .iconWrapper {
-  background: rgba(16, 185, 129, 0.15);
-  color: #10B981;
+  background: var(--color-workflow-icon-wrapper-bg); /* 使用 variable.css 中定义的变量 */
+  color: var(--n-success-color); /* 使用 Naive UI 主题色 */
 }
 
 .workflow .title {
-  color: #10B981;
+  color: var(--n-success-color); /* 使用 Naive UI 主题色 */
 }
 
-/* 证书入口样式 */
+/* 证书快捷入口特定样式 */
 .cert {
-  background: rgba(245, 158, 11, 0.08);
+  background: var(--color-cert-bg); /* 使用 variable.css 中定义的变量 */
 }
 
 .cert .iconWrapper {
-  background: rgba(245, 158, 11, 0.15);
-  color: #F59E0B;
+  background: var(--color-cert-icon-wrapper-bg); /* 使用 variable.css 中定义的变量 */
+  color: var(--n-warning-color); /* 使用 Naive UI 主题色 */
 }
 
 .cert .title {
-  color: #F59E0B;
+  color: var(--n-warning-color); /* 使用 Naive UI 主题色 */
 }
 
-/* 监控入口样式 */
+/* 监控快捷入口特定样式 */
 .monitor {
-  background: rgba(139, 92, 246, 0.08);
+  background: var(--color-monitor-bg); /* 使用 variable.css 中定义的变量 */
 }
 
 .monitor .iconWrapper {
-  background: rgba(139, 92, 246, 0.15);
-  color: #8B5CF6;
+  background: var(--color-monitor-icon-wrapper-bg); /* 使用 variable.css 中定义的变量 */
+  color: var(--color-monitor-text); /* 使用 variable.css 中定义的变量 */
 }
 
 .monitor .title {
-  color: #8B5CF6;
+  color: var(--color-monitor-text); /* 使用 variable.css 中定义的变量 */
 }
 
-/* 图标包装器样式 */
+/* 图标包装器通用样式 */
 .iconWrapper {
-  border-radius: 50%;
-  padding: 1rem;
+  border-radius: 50%; /* 圆形 */
+  padding: 1rem; /* 内边距 */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* 标题样式 */
+/* 快捷入口卡片内标题样式 */
 .title {
-  font-size: 1.8rem;
-  font-weight: 500;
+  font-size: 2rem;
+  font-weight: 500; /* 中等字重 */
   margin-bottom: 0.75rem;
 }
+
+/* 表格内文本、卡片内描述文本等通用文本样式 */
+.tableText {
+  font-size: 1.4rem; /* 14px */
+  color: var(--n-text-color2); /* Naive UI secondary text color */
+  line-height: 1.6; /* Improved readability */
+}
+
+
+
+/* 概览卡片中的图标区域样式 */
+.workflowIcon,
+.certIcon,
+.monitorIcon {
+  /* 若有特定于这些图标容器的样式，可在此定义 */
+  /* 例如：padding: 0.5rem; background-color: #f0f0f0; border-radius: 8px; */
+}
+
+/* Utility classes for background colors from index.tsx */
+.bgUtilSuccess {
+  background-color: var(--n-success-color); }
+
+.bgUtilError {
+  background-color: var(--n-error-color); 
+}
+
+.bgUtilWarning {
+  background-color: var(--n-warning-color); 
+}
+
+.bgUtilDecorative {
+  background-color: var(--n-primary-color); /* 修改：使用 Naive UI 标准变量 (假设 primaryColor 是期望的装饰色) */
+}

frontend/apps/allin-ssl/src/views/home/index.tsx

@@ -1,13 +1,24 @@
-import { NCard, NSpin, NIcon, NEmpty, NDataTable, NButton } from 'naive-ui'
-import { CloudMonitoring, Flow, ArrowRight } from '@vicons/carbon'
-import { Certificate20Regular } from '@vicons/fluent'
-import { $t } from '@locales/index'
+import { defineComponent } from 'vue'; // 修改：移除 computed
+import { NCard, NSpin, NIcon, NEmpty, NDataTable, NButton } from 'naive-ui';
+import { CloudMonitoring, Flow, ArrowRight } from '@vicons/carbon';
+import { Certificate20Regular } from '@vicons/fluent';
+import { useThemeCssVar } from '@baota/naive-ui/theme';
 
-import { useController } from './useController'
-import { useStore } from './useStore'
+// Absolute Internal Imports - Utilities
+import { $t } from '@locales/index';
 
-import styles from './index.module.css'
+// Relative Internal Imports
+import { useController } from './useController';
+import { useStore } from './useStore';
 
+// Side-effect Imports
+import styles from './index.module.css';
+
+/**
+ * @component HomeView
+ * @description 首页视图组件。
+ * 负责展示应用概览信息、工作流历史以及快捷入口。
+ */
 export default defineComponent({
 	name: 'HomeView',
 	setup() {
@@ -15,33 +26,42 @@ export default defineComponent({
 		const { overviewData, pushToWorkflow, pushToCert, pushToMonitor, pushToCertManage, createColumns } = useController()
 		const columns = createColumns()
 
+		// 参考 layout/index.tsx 的用法，直接获取需要的 Naive UI 主题变量
+		// useThemeCssVar 会将这些 camelCase 变量名转换为 kebab-case CSS 变量 (e.g., successColor -> --n-success-color)
+		// 并将它们应用到绑定 style 的元素上。
+		const cssVars = useThemeCssVar(['successColor', 'errorColor', 'warningColor', 'primaryColor']);
+
 		return () => (
-			<div class="mx-auto max-w-[1600px] w-full p-6">
+			<div class="mx-auto max-w-[1600px] w-full p-6" style={cssVars.value}>
 				<NSpin show={loading.value}>
-					<div class="flex flex-col h-full gap-8 overflow-auto">
+					<div class="flex flex-col h-full gap-8">
 						{/* 概览模块 */}
 						<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 							{/* 自动化工作流概览卡片 */}
 							<div onClick={() => pushToWorkflow()} class="cursor-pointer relative">
-								<div class="absolute right-0 top-0 w-24 h-24 rounded-full bg-blue-50 opacity-70 -z-10"></div>
+								<div
+									class={`absolute right-0 top-0 w-24 h-24 rounded-full opacity-70 -z-10 ${styles.bgUtilDecorative}`}
+								></div>
 								<NCard class="transition-all duration-300 rounded-[0.6rem]" hoverable={true} bordered={false}>
 									<div class="flex items-center justify-center">
 										<div class="flex-1">
 											<div class={styles.tableText}>{$t('t_2_1746773350970')}</div>
-											<div class="flex items-center space-x-5">
+											<div class="flex items-center xl:space-x-5 lg:space-x-4 md:space-x-3 space-x-3">
 												<div>
-													<span class="text-[2.4rem] font-bold">{overviewData.value.workflow.count}</span>
+													<span class="xl:text-[2.4rem] lg:text-[2.2rem] md:text-[2rem] text-[1.8rem] font-bold">
+														{overviewData.value.workflow.count}
+													</span>
 													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
 												</div>
-												<div class="border-l-2 pl-[2rem] ml-[3rem] h-[5rem] lining-[5rem]">
+												<div class="border-l-2 xl:pl-[2rem] xl:ml-[3rem] lg:pl-[1.5rem] lg:ml-[2.5rem] md:pl-[1.5rem] md:ml-[2rem] pl-[1rem] ml-[1.5rem] min-h-[5rem] flex flex-col justify-center">
 													<div class="flex items-center space-x-1">
-														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-green-500"></span>
+														<span class={`w-4 h-4 rounded-full mr-[.6rem] ${styles.bgUtilSuccess}`}></span>
 														<span class={styles.tableText}>
 															{$t('t_0_1746782379424')}: {overviewData.value.workflow.active}
 														</span>
 													</div>
 													<div class="flex items-center space-x-1 mt-3">
-														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-red-500"></span>
+														<span class={`w-4 h-4 rounded-full mr-[.6rem] ${styles.bgUtilError}`}></span>
 														<span class={styles.tableText}>
 															{$t('t_4_1746773348957')}: {overviewData.value.workflow.failure}
 														</span>
@@ -60,25 +80,29 @@ export default defineComponent({
 
 							{/* 证书管理概览卡片 */}
 							<div onClick={() => pushToCertManage()} class="cursor-pointer relative">
-								<div class="absolute right-0 top-0 w-24 h-24 rounded-full bg-blue-50 opacity-70 -z-10"></div>
+								<div
+									class={`absolute right-0 top-0 w-24 h-24 rounded-full opacity-70 -z-10 ${styles.bgUtilDecorative}`}
+								></div>
 								<NCard class="transition-all duration-300 rounded-[0.6rem]" hoverable={true} bordered={false}>
 									<div class="flex items-center justify-center">
 										<div class="flex-1">
 											<div class={styles.tableText}>{$t('t_2_1744258111238')}</div>
-											<div class="flex items-center space-x-5">
+											<div class="flex items-center xl:space-x-5 lg:space-x-4 md:space-x-3 space-x-3">
 												<div>
-													<span class="text-[2.4rem] font-bold">{overviewData.value.cert.count}</span>
+													<span class="xl:text-[2.4rem] lg:text-[2.2rem] md:text-[2rem] text-[1.8rem] font-bold">
+														{overviewData.value.cert.count}
+													</span>
 													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
 												</div>
-												<div class="border-l-2 pl-[2rem] ml-[3rem] h-[5rem] lining-[5rem]">
+												<div class="border-l-2 xl:pl-[2rem] xl:ml-[3rem] lg:pl-[1.5rem] lg:ml-[2.5rem] md:pl-[1.5rem] md:ml-[2rem] pl-[1rem] ml-[1.5rem] min-h-[5rem] flex flex-col justify-center">
 													<div class="flex items-center space-x-1">
-														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-yellow-500"></span>
+														<span class={`w-4 h-4 rounded-full mr-[.6rem] ${styles.bgUtilWarning}`}></span>
 														<span class={styles.tableText}>
 															{$t('t_5_1746773349141')}: {overviewData.value.cert.will}
 														</span>
 													</div>
 													<div class="flex items-center space-x-1 mt-3">
-														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-red-500"></span>
+														<span class={`w-4 h-4 rounded-full mr-[.6rem] ${styles.bgUtilError}`}></span>
 														<span class={styles.tableText}>
 															{$t('t_0_1746001199409')}: {overviewData.value.cert.end}
 														</span>
@@ -97,19 +121,23 @@ export default defineComponent({
 
 							{/* 实时监控概览卡片 */}
 							<div onClick={() => pushToMonitor()} class="cursor-pointer relative">
-								<div class="absolute right-0 top-0 w-24 h-24 rounded-full bg-blue-50 opacity-70 -z-10"></div>
+								<div
+									class={`absolute right-0 top-0 w-24 h-24 rounded-full opacity-70 -z-10 ${styles.bgUtilDecorative}`}
+								></div>
 								<NCard class="transition-all duration-300 rounded-[0.6rem]" hoverable={true} bordered={false}>
 									<div class="flex items-center justify-center">
 										<div class="flex-1">
 											<div class={styles.tableText}>{$t('t_6_1746773349980')}</div>
-											<div class="flex items-center space-x-5">
+											<div class="flex items-center xl:space-x-5 lg:space-x-4 md:space-x-3 space-x-3">
 												<div>
-													<span class="text-[2.4rem] font-bold">{overviewData.value.site_monitor.count}</span>
+													<span class="xl:text-[2.4rem] lg:text-[2.2rem] md:text-[2rem] text-[1.8rem] font-bold">
+														{overviewData.value.site_monitor.count}
+													</span>
 													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
 												</div>
-												<div class="border-l-2 pl-[2rem] ml-[3rem]  h-[5rem] lining-[5rem]">
+												<div class="border-l-2 xl:pl-[2rem] xl:ml-[3rem] lg:pl-[1.5rem] lg:ml-[2.5rem] md:pl-[1.5rem] md:ml-[2rem] pl-[1rem] ml-[1.5rem] min-h-[5rem] flex flex-col justify-center">
 													<div class="flex items-center space-x-1">
-														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-red-500"></span>
+														<span class={`w-4 h-4 rounded-full mr-[.6rem] ${styles.bgUtilError}`}></span>
 														<span class={styles.tableText}>
 															{$t('t_7_1746773349302')}: {overviewData.value.site_monitor.exception}
 														</span>
@@ -226,5 +254,5 @@ export default defineComponent({
 				</NSpin>
 			</div>
 		)
-	},
+	}
 })

frontend/apps/allin-ssl/src/views/home/useController.tsx

@@ -1,140 +1,182 @@
-import { useRouter } from 'vue-router'
-import { useStore } from './useStore'
+import { useRouter } from 'vue-router';
+import { onMounted } from 'vue'; // 新增：导入 onMounted
+import { NTag } from 'naive-ui';
 
-import { NTag, type DataTableColumns } from 'naive-ui'
-import type { WorkflowHistoryItem } from '@/types/public'
-import styles from './index.module.css'
-import { $t } from '@locales/index'
+// Type Imports
+import type { Ref } from 'vue'; // 新增：导入 Ref 类型
+import type { DataTableColumns } from 'naive-ui';
+import type { OverviewData, WorkflowHistoryItem } from '@/types/public'; // 新增：导入 OverviewData 类型
 
-const { overviewData, fetchOverviewData } = useStore()
+// Absolute Internal Imports - Utilities
+import { $t } from '@locales/index';
+
+// Relative Internal Imports
+import { useStore } from './useStore';
+
+// Side-effect Imports
+import styles from './index.module.css';
 
 /**
- * 首页控制器
- *
- * @description 处理首页视图的业务逻辑，包括状态转换、数据格式化等功能
- * @returns {object} 返回首页视图所需的状态和方法
+ * @interface HomeControllerExposes
+ * @description 首页 Controller 暴露给视图的接口定义。
+ * @property {Ref<OverviewData>} overviewData - 概览数据。
+ * @property {(type?: string) => void} pushToWorkflow - 跳转到工作流页面。
+ * @property {(type?: string) => void} pushToCert - 跳转到证书申请页面。
+ * @property {(type?: string) => void} pushToMonitor - 跳转到监控页面。
+ * @property {() => void} pushToCertManage - 跳转到证书管理页面。
+ * @property {(state: number) => 'success' | 'error' | 'warning' | 'default'} getWorkflowStateType - 获取工作流状态对应的标签类型。
+ * @property {(state: number) => string} getWorkflowStateText - 获取工作流状态对应的文本。
+ * @property {(time: string) => string} formatExecTime - 格式化执行时间。
+ * @property {() => DataTableColumns<WorkflowHistoryItem>} createColumns - 创建表格列配置。
  */
-export const useController = () => {
+interface HomeControllerExposes {
+	overviewData: Ref<OverviewData>;
+	pushToWorkflow: (type?: string) => void;
+	pushToCert: (type?: string) => void;
+	pushToMonitor: (type?: string) => void;
+	pushToCertManage: () => void;
+	getWorkflowStateType: (state: number) => 'success' | 'error' | 'warning' | 'default';
+	getWorkflowStateText: (state: number) => string;
+	formatExecTime: (time: string) => string;
+	createColumns: () => DataTableColumns<WorkflowHistoryItem>;
+}
+
+/**
+ * 首页控制器 (Composable Function)
+ *
+ * @description 处理首页视图的业务逻辑，包括状态转换、数据格式化、页面导航等功能。
+ * @returns {HomeControllerExposes} 返回首页视图所需的状态和方法。
+ */
+export function useController(): HomeControllerExposes {
 	// 路由实例
-	const router = useRouter()
+	const router = useRouter();
+	// 从 Store 中获取状态和方法
+	const { overviewData, fetchOverviewData } = useStore();
 
 	// -------------------- 业务逻辑处理 --------------------
 	/**
-	 * @description 获取工作流状态对应的标签类型
-	 * @param {number} state - 工作流状态值
-	 * @returns {string} NTag组件的type属性值
+	 * 获取工作流状态对应的标签类型。
+	 * @function getWorkflowStateType
+	 * @param {number} state - 工作流状态值。
+	 * @returns {'success' | 'error' | 'warning' | 'default'} NTag 组件的 type 属性值。
 	 */
-	const getWorkflowStateType = (state: number): 'success' | 'error' | 'warning' | 'default' => {
+	function getWorkflowStateType(state: number): 'success' | 'error' | 'warning' | 'default' {
 		switch (state) {
 			case 1:
-				return 'success' // 成功状态
+				return 'success'; // 成功状态
 			case 0:
-				return 'warning' // 失败状态
+				return 'warning'; // 正在运行状态 (根据原代码逻辑，0是warning，-1是error)
 			case -1:
-				return 'error' // 执行中状态
+				return 'error'; // 失败状态
 			default:
-				return 'default' // 未知状态
+				return 'default'; // 未知状态
 		}
 	}
 
 	/**
-	 * @description 获取工作流状态对应的文本说明
-	 * @param {number} state - 工作流状态值
-	 * @returns {string} 状态的中文描述
+	 * 获取工作流状态对应的文本说明。
+	 * @function getWorkflowStateText
+	 * @param {number} state - 工作流状态值。
+	 * @returns {string} 状态的中文描述。
 	 */
-	const getWorkflowStateText = (state: number): string => {
+	function getWorkflowStateText(state: number): string {
 		switch (state) {
 			case 1:
-				return '成功'
+				return  $t('t_8_1745227838023');
 			case 0:
-				return '正在运行'
+				return $t('t_0_1747795605426');
 			case -1:
-				return '失败'
+				return $t('t_9_1745227838305');
 			default:
-				return '未知'
+				return $t('t_11_1745227838422');
 		}
 	}
 
 	/**
-	 * @description 格式化执行时间为本地化的日期时间字符串
-	 * @param {string} time - ISO格式的时间字符串
-	 * @returns {string} 格式化后的本地时间字符串
+	 * 格式化执行时间为本地化的日期时间字符串。
+	 * @function formatExecTime
+	 * @param {string} time - ISO 格式的时间字符串。
+	 * @returns {string} 格式化后的本地时间字符串。
 	 */
-	const formatExecTime = (time: string): string => {
-		return new Date(time).toLocaleString()
+	function formatExecTime(time: string): string {
+		return new Date(time).toLocaleString();
 	}
 
 	/**
-	 * @description 创建工作流历史表格列配置
-	 * @returns {DataTableColumns<WorkflowHistoryItem>} 工作流历史表格列配置
+	 * 创建工作流历史表格列配置。
+	 * @function createColumns
+	 * @returns {DataTableColumns<WorkflowHistoryItem>} 工作流历史表格列配置。
 	 */
-	const createColumns = (): DataTableColumns<WorkflowHistoryItem> => {
+	function createColumns(): DataTableColumns<WorkflowHistoryItem> {
 		return [
 			{
-				title: $t('t_2_1745289353944'),
+				title: $t('t_2_1745289353944'), // 名称
 				key: 'name',
 			},
 			{
-				title: $t('t_0_1746590054456'),
+				title: $t('t_0_1746590054456'), // 状态
 				key: 'state',
 				render: (row: WorkflowHistoryItem) => {
-					const stateType = getWorkflowStateType(row.state)
-					const stateText = getWorkflowStateText(row.state)
+					const stateType = getWorkflowStateType(row.state);
+					const stateText = getWorkflowStateText(row.state);
 					return (
 						<NTag type={stateType} size="small" class={`${styles.stateText} ${styles[stateType]}`}>
 							{stateText}
 						</NTag>
-					)
+					);
 				},
 			},
 			{
-				title: $t('t_1_1746590060448'),
+				title: $t('t_1_1746590060448'), // 模式
 				key: 'mode',
 				render: (row: WorkflowHistoryItem) => {
-					return <span class={styles.tableText}>{row.mode || '未知'}</span>
+					return <span class={styles.tableText}>{row.mode || $t('t_11_1745227838422')}</span>;
 				},
 			},
 			{
-				title: $t('t_4_1745227838558'),
+				title: $t('t_4_1745227838558'), // 执行时间
 				key: 'exec_time',
 				render: (row: WorkflowHistoryItem) => <span class={styles.tableText}>{formatExecTime(row.exec_time)}</span>,
 			},
-		]
+		];
 	}
 
 	/**
-	 * @description 跳转至工作流构建页面
-	 * @param {string} type - 类型
+	 * 跳转至工作流构建页面。
+	 * @function pushToWorkflow
+	 * @param {string} [type=''] - 类型参数，可选。
 	 */
-	const pushToWorkflow = (type: string = ''): void => {
-		router.push(`/auto-deploy${type ? `?type=${type}` : ''}`)
+	function pushToWorkflow(type: string = ''): void {
+		router.push(`/auto-deploy${type ? `?type=${type}` : ''}`);
 	}
 
 	/**
-	 * @description 跳转至申请证书页面
-	 * @param {string} type - 类型
+	 * 跳转至申请证书页面。
+	 * @function pushToCert
+	 * @param {string} [type=''] - 类型参数，可选。
 	 */
-	const pushToCert = (type: string = ''): void => {
-		router.push(`/cert-apply${type ? `?type=${type}` : ''}`)
+	function pushToCert(type: string = ''): void {
+		router.push(`/cert-apply${type ? `?type=${type}` : ''}`);
 	}
 
 	/**
-	 * @description 跳转至证书管理
-	 * @param {string} type - 类型
+	 * 跳转至证书管理页面。
+	 * @function pushToCertManage
 	 */
-	const pushToCertManage = (): void => {
-		router.push(`/cert-manage`)
+	function pushToCertManage(): void {
+		router.push(`/cert-manage`);
 	}
 
 	/**
-	 * @description 跳转至添加监控页面
-	 * @param {string} type - 类型
+	 * 跳转至添加监控页面。
+	 * @function pushToMonitor
+	 * @param {string} [type=''] - 类型参数，可选。
 	 */
-	const pushToMonitor = (type: string = ''): void => {
-		router.push(`/monitor${type ? `?type=${type}` : ''}`)
+	function pushToMonitor(type: string = ''): void {
+		router.push(`/monitor${type ? `?type=${type}` : ''}`);
 	}
 
-	onMounted(fetchOverviewData)
+	onMounted(fetchOverviewData);
 
 	// 暴露状态和方法给视图使用
 	return {
@@ -147,5 +189,5 @@ export const useController = () => {
 		getWorkflowStateText,
 		formatExecTime,
 		createColumns,
-	}
+	};
 }

frontend/apps/allin-ssl/src/views/home/useStore.tsx

@@ -1,42 +1,69 @@
-import { getOverviews } from '@/api/public'
-import { $t } from '@locales/index'
-import { useError } from '@baota/hooks/error'
-import type { OverviewData } from '@/types/public'
+import { defineStore, storeToRefs } from 'pinia';
+import { ref } from 'vue';
+
+// Type Imports
+import type { OverviewData } from '@/types/public';
+
+// Absolute Internal Imports - API
+import { getOverviews } from '@/api/public';
+
+// Absolute Internal Imports - Hooks
+import { useError } from '@baota/hooks/error';
+
+// Absolute Internal Imports - Utilities
+import { $t } from '@locales/index';
 
 /**
- * 首页数据存储
- *
- * 使用Pinia管理首页相关的状态和操作，包括：
- * - 概览数据的获取和存储
- * - 页面导航功能
- * - 加载状态管理
+ * Home Store 暴露的类型接口
+ * @interface HomeStoreExposes
+ * @property {Ref<boolean>} loading - 数据加载状态。
+ * @property {Ref<OverviewData>} overviewData - 首页概览数据。
+ * @property {() => Promise<void>} fetchOverviewData - 获取首页概览数据的方法。
  */
-export const useHomeStore = defineStore('home-store', () => {
+export interface HomeStoreExposes {
+	loading: Ref<boolean>;
+	overviewData: Ref<OverviewData>;
+	fetchOverviewData: () => Promise<void>;
+}
+
+/**
+ * 首页数据存储 (Pinia Store)
+ *
+ * @description 使用Pinia管理首页相关的状态和操作，包括：
+ * - 概览数据的获取和存储
+ * - 加载状态管理
+ * @returns {HomeStoreExposes} 包含状态和方法的 Store 实例。
+ */
+export const useHomeStore = defineStore('home-store', (): HomeStoreExposes => {
 	// -------------------- 状态定义 --------------------
 	/**
 	 * 数据加载状态
-	 * 用于控制页面加载指示器的显示
+	 * @type {Ref<boolean>}
+	 * @description 用于控制页面加载指示器的显示。
 	 */
-	const loading = ref(false)
+	const loading = ref(false);
 
 	/**
 	 * 首页概览数据
-	 * 包含工作流、证书和监控的统计信息以及工作流历史记录
+	 * @type {Ref<OverviewData>}
+	 * @description 包含工作流、证书和监控的统计信息以及工作流历史记录。
 	 */
 	const overviewData = ref<OverviewData>({
 		workflow: { count: 0, active: 0, failure: 0 },
 		cert: { count: 0, will: 0, end: 0 },
 		site_monitor: { count: 0, exception: 0 },
 		workflow_history: [],
-	})
+	});
 
 	// 错误处理
-	const { handleError } = useError()
+	const { handleError } = useError();
 
 	// -------------------- 请求方法 --------------------
 	/**
-	 * @description 获取首页概览数据
-	 * @returns {Promise<void>} 返回Promise对象
+	 * 获取首页概览数据
+	 * @async
+	 * @function fetchOverviewData
+	 * @returns {Promise<void>} 返回Promise对象，在数据获取完成后解析。
 	 */
 	const fetchOverviewData = async (): Promise<void> => {
 		try {
@@ -68,18 +95,24 @@ export const useHomeStore = defineStore('home-store', () => {
 		loading,
 		overviewData,
 		fetchOverviewData,
-	}
-})
+	};
+});
 
 /**
- * 首页状态管理钩子
+ * 首页状态管理钩子 (Composable Function)
  *
- * 将Store包装为组合式API风格，便于在视图组件中使用
- * 自动处理响应式引用，简化状态的访问和修改
+ * @description 将 Store 包装为组合式 API 风格，便于在视图组件中使用。
+ * 自动处理响应式引用，简化状态的访问和修改。
  *
- * @returns {object} 包含状态和方法的对象，支持解构使用
+ * @returns {HomeStoreExposes & ReturnType<typeof storeToRefs<HomeStoreExposes>>} 包含状态和方法的对象，所有状态都已转换为 Ref，支持解构使用。
  */
 export const useStore = () => {
-	const store = useHomeStore()
-	return { ...store, ...storeToRefs(store) }
-}
+	const store = useHomeStore();
+	// 结合 storeToRefs 以便从 store 中提取 ref 同时保持响应性
+	// 注意：直接扩展 storeToRefs 的返回类型可能比较复杂，
+	// 实践中通常直接使用 store 和 storeToRefs 返回的对象。
+	// 这里为了更精确的类型提示，可以考虑更复杂的类型体操或接受一定的类型宽松。
+	// 一个简化的方式是让调用者自行处理类型，或者返回一个结构更清晰的对象。
+	// 为简化，此处返回展开后的 store 和 refs。
+	return { ...store, ...storeToRefs(store) };
+};