【同步】前端项目源码

【修复】工作流兼容问题

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

@@ -0,0 +1,159 @@
+/* 主题颜色变量 */
+:root {
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --text-success: #22c55e;
+  --text-warning: #eab308;
+  --text-error: #ef4444;
+  --text-info: #3b82f6;
+  --text-default: #6b7280;
+  
+  --bg-primary: #ffffff;
+  --bg-secondary: #f3f4f6;
+  --bg-success-light: #dcfce7;
+  --bg-warning-light: #fef9c3;
+  --bg-error-light: #fee2e2;
+  --bg-info-light: #dbeafe;
+
+  /* 快捷入口卡片颜色 */
+  --workflow-bg: rgba(16, 185, 129, 0.08);
+  --workflow-icon-bg: rgba(16, 185, 129, 0.15);
+  --workflow-color: #10B981;
+
+  --cert-bg: rgba(245, 158, 11, 0.08);
+  --cert-icon-bg: rgba(245, 158, 11, 0.15);
+  --cert-color: #F59E0B;
+
+  --monitor-bg: rgba(139, 92, 246, 0.08);
+  --monitor-icon-bg: rgba(139, 92, 246, 0.15);
+  --monitor-color: #8B5CF6;
+}
+
+/* 暗色模式 */
+:root[data-theme='dark'] {
+  --text-primary: #ffffff;
+  --text-secondary: #9ca3af;
+  --text-success: #4ade80;
+  --text-warning: #facc15;
+  --text-error: #f87171;
+  --text-info: #60a5fa;
+  --text-default: #9ca3af;
+  
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #262626;
+  --bg-success-light: rgba(34, 197, 94, 0.2);
+  --bg-warning-light: rgba(234, 179, 8, 0.2);
+  --bg-error-light: rgba(239, 68, 68, 0.2);
+  --bg-info-light: rgba(59, 130, 246, 0.2);
+
+  /* 暗色模式下的快捷入口卡片颜色 */
+  --workflow-bg: rgba(16, 185, 129, 0.12);
+  --workflow-icon-bg: rgba(16, 185, 129, 0.2);
+  --workflow-color: #34D399;
+
+  --cert-bg: rgba(245, 158, 11, 0.12);
+  --cert-icon-bg: rgba(245, 158, 11, 0.2);
+  --cert-color: #FCD34D;
+
+  --monitor-bg: rgba(139, 92, 246, 0.12);
+  --monitor-icon-bg: rgba(139, 92, 246, 0.2);
+  --monitor-color: #A78BFA;
+}
+
+/* 状态文本颜色 */
+.stateText {
+  &.success { color: var(--text-success); }
+  &.warning { color: var(--text-warning); }
+  &.error { color: var(--text-error); }
+  &.info { color: var(--text-info); }
+  &.default { color: var(--text-default); }
+}
+
+/* 卡片样式 */
+.cardHover {
+  transition: all 0.3s ease;
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* 快捷入口卡片基础样式 */
+.quickEntryCard {
+  transition: all 0.3s ease;
+  border-radius: 0.6rem;
+}
+
+.quickEntryCard:hover {
+  transform: translateY(-4px);
+}
+
+/* 工作流入口样式 */
+.workflow {
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.workflow .iconWrapper {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10B981;
+}
+
+.workflow .title {
+  color: #10B981;
+}
+
+/* 证书入口样式 */
+.cert {
+  background: rgba(245, 158, 11, 0.08);
+}
+
+.cert .iconWrapper {
+  background: rgba(245, 158, 11, 0.15);
+  color: #F59E0B;
+}
+
+.cert .title {
+  color: #F59E0B;
+}
+
+/* 监控入口样式 */
+.monitor {
+  background: rgba(139, 92, 246, 0.08);
+}
+
+.monitor .iconWrapper {
+  background: rgba(139, 92, 246, 0.15);
+  color: #8B5CF6;
+}
+
+.monitor .title {
+  color: #8B5CF6;
+}
+
+/* 图标包装器样式 */
+.iconWrapper {
+  border-radius: 50%;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 标题样式 */
+.title {
+  font-size: 1.8rem;
+  font-weight: 500;
+  margin-bottom: 0.75rem;
+}
+
+/* 表格样式 */
+.tableText {
+  color: var(--text-secondary);
+}
+
+.viewAllButton {
+  color: var(--text-info);
+  &:hover {
+    color: var(--text-primary);
+  }
+} 

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

@@ -0,0 +1,230 @@
+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 { useController } from './useController'
+import { useStore } from './useStore'
+
+import styles from './index.module.css'
+
+export default defineComponent({
+	name: 'HomeView',
+	setup() {
+		const { loading } = useStore()
+		const { overviewData, pushToWorkflow, pushToCert, pushToMonitor, pushToCertManage, createColumns } = useController()
+		const columns = createColumns()
+
+		return () => (
+			<div class="mx-auto max-w-[1600px] w-full p-6">
+				<NSpin show={loading.value}>
+					<div class="flex flex-col h-full gap-8 overflow-auto">
+						{/* 概览模块 */}
+						<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 dark:bg-blue-900/30 opacity-70 -z-10"></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>
+													<span class="text-[2.4rem] font-bold">{overviewData.value.workflow.count}</span>
+													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
+												</div>
+												<div class="border-l-2 dark:border-gray-600 pl-[2rem] ml-[3rem]">
+													<div class="flex items-center space-x-1">
+														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-green-500"></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={styles.tableText}>
+															{$t('t_4_1746773348957')}: {overviewData.value.workflow.failure}
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div class={styles.workflowIcon}>
+											<NIcon size="28">
+												<Flow />
+											</NIcon>
+										</div>
+									</div>
+								</NCard>
+							</div>
+
+							{/* 证书管理概览卡片 */}
+							<div onClick={() => pushToCertManage()} class="cursor-pointer relative">
+								<div class="absolute right-0 top-0 w-24 h-24 rounded-full bg-blue-50 dark:bg-blue-900/30 opacity-70 -z-10"></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>
+													<span class="text-[2.4rem] font-bold">{overviewData.value.cert.count}</span>
+													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
+												</div>
+												<div class="border-l-2 dark:border-gray-600 pl-[2rem] ml-[3rem]">
+													<div class="flex items-center space-x-1">
+														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-yellow-500"></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={styles.tableText}>
+															{$t('t_0_1746001199409')}: {overviewData.value.cert.end}
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div class={styles.certIcon}>
+											<NIcon size="28">
+												<Certificate20Regular />
+											</NIcon>
+										</div>
+									</div>
+								</NCard>
+							</div>
+
+							{/* 实时监控概览卡片 */}
+							<div onClick={() => pushToMonitor()} class="cursor-pointer relative">
+								<div class="absolute right-0 top-0 w-24 h-24 rounded-full bg-blue-50 dark:bg-blue-900/30 opacity-70 -z-10"></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>
+													<span class="text-[2.4rem] font-bold">{overviewData.value.site_monitor.count}</span>
+													<p class={styles.tableText}>{$t('t_3_1746773348798')}</p>
+												</div>
+												<div class="border-l-2 dark:border-gray-600 pl-[2rem] ml-[3rem]">
+													<div class="flex items-center space-x-1">
+														<span class="w-4 h-4 rounded-full mr-[.6rem] bg-red-500"></span>
+														<span class={styles.tableText}>
+															{$t('t_7_1746773349302')}: {overviewData.value.site_monitor.exception}
+														</span>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div class={styles.monitorIcon}>
+											<NIcon size="28">
+												<CloudMonitoring />
+											</NIcon>
+										</div>
+									</div>
+								</NCard>
+							</div>
+						</div>
+
+						{/* 工作流执行列表 */}
+						<NCard class="rounded-[0.6rem] transition-all duration-300" hoverable={true} bordered={false}>
+							<div class="flex justify-between items-center mb-4">
+								<div class={styles.tableText}>{$t('t_8_1746773351524')}</div>
+								<NButton text onClick={() => pushToWorkflow()} class={styles.viewAllButton}>
+									{$t('t_9_1746773348221')}
+									<NIcon class="ml-1">
+										<ArrowRight />
+									</NIcon>
+								</NButton>
+							</div>
+							{overviewData.value.workflow_history.length > 0 ? (
+								<NDataTable
+									columns={columns}
+									data={overviewData.value.workflow_history}
+									bordered={false}
+									size="small"
+									singleLine={false}
+									rowClassName={() => 'border-none'}
+									class="border-none"
+									style={{
+										'--n-border-color': 'transparent',
+										'--n-border-radius': '0',
+									}}
+								/>
+							) : (
+								<NEmpty description={$t('t_10_1746773351576')} />
+							)}
+						</NCard>
+
+						{/* 快捷入口区域 */}
+						<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+							{/* 工作流构建入口 */}
+							<div onClick={() => pushToWorkflow('create')} class="cursor-pointer">
+								<NCard
+									class={`${styles.quickEntryCard} ${styles.workflow} transition-all duration-300`}
+									hoverable={true}
+									bordered={false}
+								>
+									<div class="flex items-center p-6">
+										<div class={`${styles.iconWrapper} mr-6`}>
+											<NIcon size="32">
+												<Flow />
+											</NIcon>
+										</div>
+										<div class="flex-1">
+											<div class={`${styles.title} text-[1.8rem] font-medium mb-3`}>{$t('t_11_1746773349054')}</div>
+											<div class={styles.tableText}>{$t('t_12_1746773355641')}</div>
+										</div>
+									</div>
+								</NCard>
+							</div>
+
+							{/* 申请证书入口 */}
+							<div onClick={() => pushToCert()} class="cursor-pointer">
+								<NCard
+									class={`${styles.quickEntryCard} ${styles.cert} transition-all duration-300 rounded-[0.6rem]`}
+									hoverable={true}
+									bordered={false}
+								>
+									<div class="flex items-center p-6">
+										<div class={`${styles.iconWrapper} mr-6`}>
+											<NIcon size="32">
+												<Certificate20Regular />
+											</NIcon>
+										</div>
+										<div class="flex-1">
+											<div class={`${styles.title} text-[1.8rem] font-medium mb-3`}>{$t('t_13_1746773349526')}</div>
+											<div class={styles.tableText}>{$t('t_14_1746773355081')}</div>
+										</div>
+									</div>
+								</NCard>
+							</div>
+
+							{/* 添加监控入口 */}
+							<div onClick={() => pushToMonitor('create')} class="cursor-pointer">
+								<NCard
+									class={`${styles.quickEntryCard} ${styles.monitor} transition-all duration-300 rounded-[0.6rem]`}
+									hoverable={true}
+									bordered={false}
+								>
+									<div class="flex items-center p-6">
+										<div class={`${styles.iconWrapper} mr-6`}>
+											<NIcon size="32">
+												<CloudMonitoring />
+											</NIcon>
+										</div>
+										<div class="flex-1">
+											<div class={`${styles.title} text-[1.8rem] font-medium mb-3`}>{$t('t_11_1745289354516')}</div>
+											<div class={styles.tableText}>{$t('t_15_1746773358151')}</div>
+										</div>
+									</div>
+								</NCard>
+							</div>
+						</div>
+					</div>
+				</NSpin>
+			</div>
+		)
+	},
+})

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

@@ -0,0 +1,151 @@
+import { useRouter } from 'vue-router'
+import { useStore } from './useStore'
+
+import { NTag, type DataTableColumns } from 'naive-ui'
+import type { WorkflowHistoryItem } from '@/types/public'
+import styles from './index.module.css'
+import { $t } from '@locales/index'
+
+const { overviewData, fetchOverviewData } = useStore()
+
+/**
+ * 首页控制器
+ *
+ * @description 处理首页视图的业务逻辑，包括状态转换、数据格式化等功能
+ * @returns {object} 返回首页视图所需的状态和方法
+ */
+export const useController = () => {
+	// 路由实例
+	const router = useRouter()
+
+	// -------------------- 业务逻辑处理 --------------------
+	/**
+	 * @description 获取工作流状态对应的标签类型
+	 * @param {number} state - 工作流状态值
+	 * @returns {string} NTag组件的type属性值
+	 */
+	const getWorkflowStateType = (state: number): 'success' | 'error' | 'warning' | 'default' => {
+		switch (state) {
+			case 1:
+				return 'success' // 成功状态
+			case 0:
+				return 'warning' // 失败状态
+			case -1:
+				return 'error' // 执行中状态
+			default:
+				return 'default' // 未知状态
+		}
+	}
+
+	/**
+	 * @description 获取工作流状态对应的文本说明
+	 * @param {number} state - 工作流状态值
+	 * @returns {string} 状态的中文描述
+	 */
+	const getWorkflowStateText = (state: number): string => {
+		switch (state) {
+			case 1:
+				return '成功'
+			case 0:
+				return '正在运行'
+			case -1:
+				return '失败'
+			default:
+				return '未知'
+		}
+	}
+
+	/**
+	 * @description 格式化执行时间为本地化的日期时间字符串
+	 * @param {string} time - ISO格式的时间字符串
+	 * @returns {string} 格式化后的本地时间字符串
+	 */
+	const formatExecTime = (time: string): string => {
+		return new Date(time).toLocaleString()
+	}
+
+	/**
+	 * @description 创建工作流历史表格列配置
+	 * @returns {DataTableColumns<WorkflowHistoryItem>} 工作流历史表格列配置
+	 */
+	const createColumns = (): DataTableColumns<WorkflowHistoryItem> => {
+		return [
+			{
+				title: $t('t_2_1745289353944'),
+				key: 'name',
+			},
+			{
+				title: $t('t_0_1746590054456'),
+				key: 'state',
+				render: (row: WorkflowHistoryItem) => {
+					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'),
+				key: 'mode',
+				render: (row: WorkflowHistoryItem) => {
+					return <span class={styles.tableText}>{row.mode || '未知'}</span>
+				},
+			},
+			{
+				title: $t('t_4_1745227838558'),
+				key: 'exec_time',
+				render: (row: WorkflowHistoryItem) => <span class={styles.tableText}>{formatExecTime(row.exec_time)}</span>,
+			},
+		]
+	}
+
+	/**
+	 * @description 跳转至工作流构建页面
+	 * @param {string} type - 类型
+	 */
+	const pushToWorkflow = (type: string = ''): void => {
+		router.push(`/auto-deploy${type ? `?type=${type}` : ''}`)
+	}
+
+	/**
+	 * @description 跳转至申请证书页面
+	 * @param {string} type - 类型
+	 */
+	const pushToCert = (type: string = ''): void => {
+		router.push(`/cert-apply${type ? `?type=${type}` : ''}`)
+	}
+
+	/**
+	 * @description 跳转至证书管理
+	 * @param {string} type - 类型
+	 */
+	const pushToCertManage = (): void => {
+		router.push(`/cert-manage`)
+	}
+
+	/**
+	 * @description 跳转至添加监控页面
+	 * @param {string} type - 类型
+	 */
+	const pushToMonitor = (type: string = ''): void => {
+		router.push(`/monitor${type ? `?type=${type}` : ''}`)
+	}
+
+	onMounted(fetchOverviewData)
+
+	// 暴露状态和方法给视图使用
+	return {
+		overviewData,
+		pushToWorkflow,
+		pushToCert,
+		pushToMonitor,
+		pushToCertManage,
+		getWorkflowStateType,
+		getWorkflowStateText,
+		formatExecTime,
+		createColumns,
+	}
+}

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

@@ -0,0 +1,85 @@
+import { getOverviews } from '@/api/public'
+import { $t } from '@locales/index'
+import { useError } from '@baota/hooks/error'
+import type { OverviewData } from '@/types/public'
+
+/**
+ * 首页数据存储
+ *
+ * 使用Pinia管理首页相关的状态和操作，包括：
+ * - 概览数据的获取和存储
+ * - 页面导航功能
+ * - 加载状态管理
+ */
+export const useHomeStore = defineStore('home-store', () => {
+	// -------------------- 状态定义 --------------------
+	/**
+	 * 数据加载状态
+	 * 用于控制页面加载指示器的显示
+	 */
+	const loading = ref(false)
+
+	/**
+	 * 首页概览数据
+	 * 包含工作流、证书和监控的统计信息以及工作流历史记录
+	 */
+	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()
+
+	// -------------------- 请求方法 --------------------
+	/**
+	 * @description 获取首页概览数据
+	 * @returns {Promise<void>} 返回Promise对象
+	 */
+	const fetchOverviewData = async (): Promise<void> => {
+		try {
+			loading.value = true
+			const { data, status } = await getOverviews().fetch()
+			if (status) {
+				const { workflow, cert, site_monitor, workflow_history } = data
+				overviewData.value = {
+					workflow: {
+						count: workflow?.count || 0,
+						active: workflow?.active || 0,
+						failure: workflow?.failure || 0,
+					},
+					cert: { count: cert?.count || 0, will: cert?.will || 0, end: cert?.end || 0 },
+					site_monitor: { count: site_monitor?.count || 0, exception: site_monitor?.exception || 0 },
+					workflow_history: workflow_history || [],
+				}
+			}
+		} catch (error) {
+			console.error('获取首页概览数据失败', error)
+			handleError(error).default($t('t_3_1745833936770'))
+		} finally {
+			loading.value = false
+		}
+	}
+
+	// 返回状态和方法
+	return {
+		loading,
+		overviewData,
+		fetchOverviewData,
+	}
+})
+
+/**
+ * 首页状态管理钩子
+ *
+ * 将Store包装为组合式API风格，便于在视图组件中使用
+ * 自动处理响应式引用，简化状态的访问和修改
+ *
+ * @returns {object} 包含状态和方法的对象，支持解构使用
+ */
+export const useStore = () => {
+	const store = useHomeStore()
+	return { ...store, ...storeToRefs(store) }
+}