【优化】日志显示内容

【优化】表格背景显示颜色

frontend/apps/allin-ssl/src/components/logViewer/index.tsx

@@ -1,6 +1,8 @@
-import { NCard, NText, NSpin, NScrollbar, NButton, NSpace, NIcon } from 'naive-ui'
+import { NCard, NSpin, NButton, NSpace, NIcon, NLog, NConfigProvider } from 'naive-ui'
+import hljs from 'highlight.js/lib/core'
 import { $t } from '@locales/index'
-import { DownloadOutline } from '@vicons/ionicons5'
+import { DownloadOutline, RefreshOutline } from '@vicons/ionicons5'
+import { useThemeCssVar } from '@baota/naive-ui/theme'
 
 export default defineComponent({
 	name: 'LogViewer',
@@ -39,7 +41,7 @@ export default defineComponent({
 	setup(props) {
 		const logs = ref(props.content || '')
 		const isLoading = ref(props.loading)
-		const logContainerRef = ref<HTMLDivElement | null>(null)
+		const logRef = ref<any>(null)
 
 		// 监听内容变化
 		watch(
@@ -57,20 +59,28 @@ export default defineComponent({
 				isLoading.value = newValue
 			},
 		)
+		hljs.registerLanguage('custom-logs', () => ({
+			contains: [
+				{
+					className: 'info-text',
+					begin: /\[INFO\]/,
+				},
+				{
+					className: 'error-text',
+					begin: /\[ERROR\]/,
+				},
+				{
+					className: 'warning-text',
+					begin: /\[WARNING\]/,
+				},
+				{
+					className: 'date-text',
+					begin: /\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/,
+				},
+			],
+		}))
 
-		watch(
-			() => props.fetchLogs,
-			(newValue) => {
-				console.log('fetchLogs', props.fetchLogs)
-			},
-		)
-
-		onMounted(() => {
-			// 如果有传入获取日志的方法，则调用
-			// 这里可以根据需要设置一个定时器来定时获取日志
-			loadLogs()
-			scrollToBottom()
-		})
+		const cssVar = useThemeCssVar(['successColor', 'errorColor', 'warningColor', 'successColorPressed'])
 
 		// 加载日志
 		const loadLogs = async () => {
@@ -103,14 +113,9 @@ export default defineComponent({
 
 		// 滚动到底部
 		const scrollToBottom = () => {
-			setTimeout(() => {
-				if (logContainerRef.value) {
-					const scrollElement = logContainerRef.value.querySelector('.n-scrollbar-container')
-					if (scrollElement) {
-						scrollElement.scrollTop = scrollElement.scrollHeight
-					}
-				}
-			}, 100)
+			nextTick(() => {
+				logRef.value?.scrollTo({ top: Number.MAX_SAFE_INTEGER })
+			})
 		}
 
 		// 刷新日志
@@ -118,31 +123,64 @@ export default defineComponent({
 			loadLogs()
 		}
 
+		type LogLine = { type: string; content: string }
+
+		// 将日志内容转换为NLog需要的格式
+		const logContent = computed((): LogLine[] => {
+			if (!logs.value) return []
+			return logs.value.split('\n').map(
+				(line): LogLine => ({
+					type: 'default',
+					content: line,
+				}),
+			)
+		})
+
+		onMounted(() => {
+			// 如果有传入获取日志的方法，则调用
+			loadLogs()
+		})
+
 		return () => (
-			<NCard bordered={false} class="w-full h-full" contentClass="!p-0">
-				<NSpin show={isLoading.value}>
-					<div class="mb-2.5 flex justify-start items-center">
-						<NSpace>
-							<NButton onClick={refreshLogs} size="small">
-								{$t('t_0_1746497662220')}
+			<NCard bordered={false} class="w-full h-full" contentClass="!p-3" style={cssVar.value}>
+				<div class="mb-2.5 flex justify-start items-center">
+					<NSpace>
+						<NButton onClick={refreshLogs} size="small" type="primary">
+							<NIcon class="mr-1">
+								<RefreshOutline />
+							</NIcon>
+							{$t('t_0_1746497662220')}
+						</NButton>
+						{props.enableDownload && (
+							<NButton onClick={downloadLogs} size="small">
+								<NIcon class="mr-1">
+									<DownloadOutline />
+								</NIcon>
+								{$t('t_2_1746776194263')}
 							</NButton>
-							{props.enableDownload && (
-								<NButton onClick={downloadLogs} size="small">
-									<NIcon>
-										<DownloadOutline />
-									</NIcon>
-									<span>{$t('t_2_1746776194263')}</span>
-								</NButton>
-							)}
-						</NSpace>
-					</div>
-					<div class="border border-gray-200 rounded bg-gray-50" ref={logContainerRef}>
-						<NScrollbar class="h-max-[500px]">
-							<NText class="block p-3 h-[500px] font-mono whitespace-pre-wrap break-all text-[1.2rem] leading-normal">
-								{logs.value ? logs.value : $t('t_3_1746776195004')}
-							</NText>
-						</NScrollbar>
-					</div>
+						)}
+					</NSpace>
+				</div>
+
+				<NSpin show={isLoading.value}>
+					<NConfigProvider hljs={hljs}>
+						<NLog
+							ref={logRef}
+							log={logs.value}
+							rows={logContent.value.length}
+							language="custom-logs"
+							loading={isLoading.value}
+							fontSize={14}
+							trim={false}
+							lineHeight={1.5}
+							style={{
+								height: '500px',
+								border: '1px solid var(--n-border-color)',
+								padding: '10px',
+								borderRadius: '10px',
+							}}
+						/>
+					</NConfigProvider>
 				</NSpin>
 			</NCard>
 		)

frontend/apps/allin-ssl/src/styles/variable.css

@@ -13,3 +13,26 @@
 :root.dark {
 	--n-layout-content-background-color: transparent; /* 内容区背景颜色 */
 }
+
+
+/* 日志颜色 */
+
+.hljs-info-text{
+	color: var(--n-success-color) !important;
+}
+.hljs-date-text{
+	color: var(--n-success-color-pressed) !important;
+}
+.hljs-error-text{
+	color: var(--n-error-color) !important;
+}
+.hljs-warning-text{
+	color: var(--n-warning-color) !important;
+}
+
+
+/* 表格数据显示 */
+
+.n-data-table .n-data-table-empty{
+	background-color: var(--n-merged-td-color);
+}

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

@@ -165,6 +165,8 @@ export const useController = () => {
 		},
 	})
 
+	// 定时执行，
+
 	/**
 	 * @description 打开添加授权API弹窗
 	 */

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

@@ -122,6 +122,7 @@ export const useAuthApiManageStore = defineStore('auth-api-manage-store', () =>
 
 	return {
 		// 状态
+		times,
 		apiFormProps,
 		accessTypeMap,
 

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

@@ -23,6 +23,7 @@ import type { DataTableColumn } from 'naive-ui'
 import { TableColumn } from 'naive-ui/es/data-table/src/interface'
 
 const {
+	refreshTable,
 	fetchWorkflowList,
 	fetchWorkflowHistory,
 	workflowFormData,
@@ -54,6 +55,7 @@ const statusCol = <T,>(key: string, title: string): TableColumn<T> => ({
 			type: 'default',
 			text: $t('t_1_1746773348701'),
 		}
+		if (row[key] === 'running') refreshTable.value = true
 		return (
 			<NTag type={status.type as any} size="small">
 				{status.text}
@@ -107,24 +109,6 @@ export const useController = () => {
 				</NSpace>
 			),
 		},
-		// {
-		// 	title: $t('t_4_1745215914951'),
-		// 	key: 'active',
-		// 	width: 100,
-		// 	render: (row: WorkflowItem) => (
-		// 		<NSwitch
-		// 			size="small"
-		// 			v-model:value={row.active}
-		// 			onUpdate:value={() => {
-		// 				handleChangeActive(row)
-		// 			}}
-		// 			checkedValue={1}
-		// 			uncheckedValue={0}
-		// 			checked-text={$t('t_0_1745457486299')}
-		// 			unchecked-text={$t('t_1_1745457484314')}
-		// 		/>
-		// 	),
-		// },
 		{
 			title: $t('t_7_1745215914189'),
 			key: 'created_at',
@@ -192,6 +176,21 @@ export const useController = () => {
 		},
 	})
 
+	// 节流渲染
+	const throttleFn = useThrottleFn(() => {
+		setTimeout(() => {
+			fetch()
+			refreshTable.value = false
+		}, 1000)
+	}, 100)
+
+	watch(
+		() => refreshTable.value,
+		(val) => {
+			if (val) throttleFn()
+		},
+	)
+
 	/**
 	 * @description 打开添加工作流弹窗
 	 */

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

@@ -1,6 +1,5 @@
 import {
 	getWorkflowList,
-	addWorkflow,
 	deleteWorkflow,
 	getWorkflowHistory,
 	executeWorkflow,
@@ -11,7 +10,6 @@ import { useError } from '@baota/hooks/error'
 // import { useMessage } from '@baota/naive-ui/hooks'
 import { $t } from '@locales/index'
 import type {
-	AddWorkflowParams,
 	WorkflowListParams,
 	WorkflowHistoryParams,
 	WorkflowHistoryItem,
@@ -27,6 +25,8 @@ const { handleError } = useError()
  * @description 用于管理工作流相关的状态和操作，包括工作流列表、历史记录、分页等
  */
 export const useWorkflowStore = defineStore('workflow-store', () => {
+	// 刷新表格
+	const refreshTable = ref(false)
 	const isEditWorkFlow = ref(false) // 是否编辑工作流
 	// 表单数据
 	const workflowFormData = ref({
@@ -138,6 +138,7 @@ export const useWorkflowStore = defineStore('workflow-store', () => {
 
 	return {
 		// 状态
+		refreshTable,
 		isEditWorkFlow,
 		workflowFormData,
 		workflowTemplateOptions,