格式化代码，websocket功能完善

resources/admin/src/pages/system/tasks/index.vue

@@ -3,13 +3,28 @@
 		<div class="tool-bar">
 			<div class="left-panel">
 				<a-space>
-					<a-input v-model:value="searchForm.keyword" placeholder="任务名称/命令" allow-clear style="width: 180px" />
-					<a-select v-model:value="searchForm.type" placeholder="任务类型" allow-clear style="width: 120px">
+					<a-input
+						v-model:value="searchForm.keyword"
+						placeholder="任务名称/命令"
+						allow-clear
+						style="width: 180px"
+					/>
+					<a-select
+						v-model:value="searchForm.type"
+						placeholder="任务类型"
+						allow-clear
+						style="width: 120px"
+					>
 						<a-select-option value="command">命令</a-select-option>
 						<a-select-option value="job">任务</a-select-option>
 						<a-select-option value="closure">闭包</a-select-option>
 					</a-select>
-					<a-select v-model:value="searchForm.is_active" placeholder="状态" allow-clear style="width: 100px">
+					<a-select
+						v-model:value="searchForm.is_active"
+						placeholder="状态"
+						allow-clear
+						style="width: 100px"
+					>
 						<a-select-option :value="true">启用</a-select-option>
 						<a-select-option :value="false">禁用</a-select-option>
 					</a-select>
@@ -52,15 +67,29 @@
 		</div>
 
 		<div class="table-content">
-			<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
-				:pagination="pagination" :row-selection="rowSelection" :row-key="rowKey" @refresh="refreshTable"
-				@paginationChange="handlePaginationChange">
+			<scTable
+				ref="tableRef"
+				:columns="columns"
+				:data-source="tableData"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				:row-key="rowKey"
+				@refresh="refreshTable"
+				@paginationChange="handlePaginationChange"
+			>
 				<template #type="{ record }">
-					<a-tag :color="getTypeColor(record.type)">{{ getTypeText(record.type) }}</a-tag>
+					<a-tag :color="getTypeColor(record.type)">{{
+						getTypeText(record.type)
+					}}</a-tag>
 				</template>
 
 				<template #is_active="{ record }">
-					<a-switch :checked="record.is_active" :disabled="!canEdit" @change="handleToggleStatus(record)" />
+					<a-switch
+						:checked="record.is_active"
+						:disabled="!canEdit"
+						@change="handleToggleStatus(record)"
+					/>
 				</template>
 
 				<template #expression="{ record }">
@@ -68,7 +97,11 @@
 				</template>
 
 				<template #last_run_at="{ record }">
-					{{ record.last_run_at ? formatDate(record.last_run_at) : '-' }}
+					{{
+						record.last_run_at
+							? formatDate(record.last_run_at)
+							: "-"
+					}}
 				</template>
 
 				<template #next_run_at="{ record }">
@@ -83,12 +116,20 @@
 					<a-space>
 						<a-tooltip title="成功次数">
 							<a-tag color="success">
-								<CheckCircleOutlined /> {{ record.run_count || 0 }}
+								<CheckCircleOutlined />
+								{{ record.run_count || 0 }}
 							</a-tag>
 						</a-tooltip>
 						<a-tooltip title="失败次数">
-							<a-tag :color="record.failed_count > 0 ? 'error' : 'default'">
-								<CloseCircleOutlined /> {{ record.failed_count || 0 }}
+							<a-tag
+								:color="
+									record.failed_count > 0
+										? 'error'
+										: 'default'
+								"
+							>
+								<CloseCircleOutlined />
+								{{ record.failed_count || 0 }}
 							</a-tag>
 						</a-tooltip>
 					</a-space>
@@ -96,18 +137,32 @@
 
 				<template #action="{ record }">
 					<a-space>
-						<a-button type="link" size="small" @click="handleView(record)">
+						<a-button
+							type="link"
+							size="small"
+							@click="handleView(record)"
+						>
 							<EyeOutlined />查看
 						</a-button>
-						<a-button type="link" size="small" @click="handleEdit(record)">
+						<a-button
+							type="link"
+							size="small"
+							@click="handleEdit(record)"
+						>
 							<EditOutlined />编辑
 						</a-button>
-						<a-popconfirm title="确定立即执行该任务吗？" @confirm="handleRun(record)">
+						<a-popconfirm
+							title="确定立即执行该任务吗？"
+							@confirm="handleRun(record)"
+						>
 							<a-button type="link" size="small">
 								<PlayCircleOutlined />执行
 							</a-button>
 						</a-popconfirm>
-						<a-popconfirm title="确定删除该任务吗？" @confirm="handleDelete(record)">
+						<a-popconfirm
+							title="确定删除该任务吗？"
+							@confirm="handleDelete(record)"
+						>
 							<a-button type="link" size="small" danger>
 								<DeleteOutlined />删除
 							</a-button>
@@ -119,15 +174,24 @@
 	</div>
 
 	<!-- 新增/编辑弹窗 -->
-	<TaskDialog v-if="dialog.save" v-model:visible="dialog.save" :record="currentRecord" @success="handleSaveSuccess" />
+	<TaskDialog
+		v-if="dialog.save"
+		v-model:visible="dialog.save"
+		:record="currentRecord"
+		@success="handleSaveSuccess"
+	/>
 
 	<!-- 查看详情弹窗 -->
-	<TaskDetailDialog v-if="dialog.detail" v-model:visible="dialog.detail" :record="currentRecord" />
+	<TaskDetailDialog
+		v-if="dialog.detail"
+		v-model:visible="dialog.detail"
+		:record="currentRecord"
+	/>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
-import { message, Modal } from 'ant-design-vue'
+import { ref, reactive } from "vue";
+import { message, Modal } from "ant-design-vue";
 import {
 	SearchOutlined,
 	RedoOutlined,
@@ -140,13 +204,13 @@ import {
 	EyeOutlined,
 	PlayCircleOutlined,
 	ClockCircleOutlined,
-	CloseCircleOutlined
-} from '@ant-design/icons-vue'
-import { useTable } from '@/hooks/useTable'
-import systemApi from '@/api/system'
-import scTable from '@/components/scTable/index.vue'
-import TaskDialog from './components/TaskDialog.vue'
-import TaskDetailDialog from './components/TaskDetailDialog.vue'
+	CloseCircleOutlined,
+} from "@ant-design/icons-vue";
+import { useTable } from "@/hooks/useTable";
+import systemApi from "@/api/system";
+import scTable from "@/components/scTable/index.vue";
+import TaskDialog from "./components/TaskDialog.vue";
+import TaskDetailDialog from "./components/TaskDetailDialog.vue";
 
 // ===== useTable Hook =====
 const {
@@ -160,202 +224,261 @@ const {
 	handleSearch,
 	handleReset,
 	handlePaginationChange,
-	refreshTable
+	refreshTable,
 } = useTable({
 	api: systemApi.tasks.list.get,
 	searchForm: {
-		keyword: '',
+		keyword: "",
 		type: undefined,
-		is_active: undefined
+		is_active: undefined,
 	},
 	columns: [],
 	needPagination: true,
-	needSelection: true
-})
+	needSelection: true,
+});
 
 // ===== 表格列配置 =====
-const rowKey = 'id'
+const rowKey = "id";
 
 const columns = [
-	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
-	{ title: '任务名称', dataIndex: 'name', key: 'name', width: 150, ellipsis: true },
-	{ title: '任务类型', dataIndex: 'type', key: 'type', width: 100, align: 'center', slot: 'type' },
-	{ title: '命令/类', dataIndex: 'command', key: 'command', ellipsis: true },
-	{ title: 'Cron表达式', dataIndex: 'expression', key: 'expression', width: 120, align: 'center', slot: 'expression' },
-	{ title: '状态', dataIndex: 'is_active', key: 'is_active', width: 80, align: 'center', slot: 'is_active' },
-	{ title: '上次运行', dataIndex: 'last_run_at', key: 'last_run_at', width: 160, align: 'center', slot: 'last_run_at' },
-	{ title: '下次运行', dataIndex: 'next_run_at', key: 'next_run_at', width: 160, align: 'center', slot: 'next_run_at' },
-	{ title: '统计', dataIndex: 'statistics', key: 'statistics', width: 120, align: 'center', slot: 'statistics' },
-	{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', fixed: 'right', slot: 'action' }
-]
+	{ title: "ID", dataIndex: "id", key: "id", width: 80, align: "center" },
+	{
+		title: "任务名称",
+		dataIndex: "name",
+		key: "name",
+		width: 150,
+		ellipsis: true,
+	},
+	{
+		title: "任务类型",
+		dataIndex: "type",
+		key: "type",
+		width: 100,
+		align: "center",
+		slot: "type",
+	},
+	{ title: "命令/类", dataIndex: "command", key: "command", ellipsis: true },
+	{
+		title: "Cron表达式",
+		dataIndex: "expression",
+		key: "expression",
+		width: 120,
+		align: "center",
+		slot: "expression",
+	},
+	{
+		title: "状态",
+		dataIndex: "is_active",
+		key: "is_active",
+		width: 80,
+		align: "center",
+		slot: "is_active",
+	},
+	{
+		title: "上次运行",
+		dataIndex: "last_run_at",
+		key: "last_run_at",
+		width: 160,
+		align: "center",
+		slot: "last_run_at",
+	},
+	{
+		title: "下次运行",
+		dataIndex: "next_run_at",
+		key: "next_run_at",
+		width: 160,
+		align: "center",
+		slot: "next_run_at",
+	},
+	{
+		title: "统计",
+		dataIndex: "statistics",
+		key: "statistics",
+		width: 120,
+		align: "center",
+		slot: "statistics",
+	},
+	{
+		title: "操作",
+		dataIndex: "action",
+		key: "action",
+		width: 200,
+		align: "center",
+		fixed: "right",
+		slot: "action",
+	},
+];
 
 // ===== 弹窗状态 =====
 const dialog = reactive({
 	save: false,
-	detail: false
-})
+	detail: false,
+});
 
-const currentRecord = ref(null)
+const currentRecord = ref(null);
 
 // ===== 权限控制 =====
-const canEdit = ref(true)
+const canEdit = ref(true);
 
 // ===== 方法：获取任务类型文本 =====
 const getTypeText = (type) => {
 	const typeMap = {
-		command: '命令',
-		job: '任务',
-		closure: '闭包'
-	}
-	return typeMap[type] || type
-}
+		command: "命令",
+		job: "任务",
+		closure: "闭包",
+	};
+	return typeMap[type] || type;
+};
 
 // ===== 方法：获取任务类型颜色 =====
 const getTypeColor = (type) => {
 	const colorMap = {
-		command: 'blue',
-		job: 'green',
-		closure: 'orange'
-	}
-	return colorMap[type] || 'default'
-}
+		command: "blue",
+		job: "green",
+		closure: "orange",
+	};
+	return colorMap[type] || "default";
+};
 
 // ===== 方法：格式化日期 =====
 const formatDate = (dateStr) => {
-	if (!dateStr) return '-'
-	const date = new Date(dateStr)
-	return date.toLocaleString('zh-CN')
-}
+	if (!dateStr) return "-";
+	const date = new Date(dateStr);
+	return date.toLocaleString("zh-CN");
+};
 
 // ===== 方法：切换状态 =====
 const handleToggleStatus = async (record) => {
 	try {
 		const res = await systemApi.tasks.batchStatus.post({
 			ids: [record.id],
-			status: record.is_active
-		})
+			status: record.is_active,
+		});
 		if (res.code === 200) {
-			message.success(record.is_active ? '已启用' : '已禁用')
-			refreshTable()
+			message.success(record.is_active ? "已启用" : "已禁用");
+			refreshTable();
 		} else {
-			message.error(res.message || '操作失败')
+			message.error(res.message || "操作失败");
 		}
 	} catch (error) {
-		message.error('操作失败')
+		message.error("操作失败");
 	}
-}
+};
 
 // ===== 方法：新增 =====
 const handleAdd = () => {
-	currentRecord.value = null
-	dialog.save = true
-}
+	currentRecord.value = null;
+	dialog.save = true;
+};
 
 // ===== 方法：编辑 =====
 const handleEdit = (record) => {
-	currentRecord.value = { ...record }
-	dialog.save = true
-}
+	currentRecord.value = { ...record };
+	dialog.save = true;
+};
 
 // ===== 方法：查看 =====
 const handleView = (record) => {
-	currentRecord.value = { ...record }
-	dialog.detail = true
-}
+	currentRecord.value = { ...record };
+	dialog.detail = true;
+};
 
 // ===== 方法：删除 =====
 const handleDelete = async (record) => {
 	try {
-		const res = await systemApi.tasks.delete.delete(record.id)
+		const res = await systemApi.tasks.delete.delete(record.id);
 		if (res.code === 200) {
-			message.success('删除成功')
-			refreshTable()
+			message.success("删除成功");
+			refreshTable();
 		} else {
-			message.error(res.message || '删除失败')
+			message.error(res.message || "删除失败");
 		}
 	} catch (error) {
-		message.error('删除失败')
+		message.error("删除失败");
 	}
-}
+};
 
 // ===== 方法：执行任务 =====
 const handleRun = async (record) => {
 	try {
-		const res = await systemApi.tasks.run.post(record.id)
+		const res = await systemApi.tasks.run.post(record.id);
 		if (res.code === 200) {
-			message.success('任务执行成功')
-			refreshTable()
+			message.success("任务执行成功");
+			refreshTable();
 		} else {
-			message.error(res.message || '任务执行失败')
+			message.error(res.message || "任务执行失败");
 		}
 	} catch (error) {
-		message.error('任务执行失败')
+		message.error("任务执行失败");
 	}
-}
+};
 
 // ===== 方法：批量删除 =====
 const handleBatchDelete = () => {
 	if (selectedRows.value.length === 0) {
-		message.warning('请选择要删除的任务')
-		return
+		message.warning("请选择要删除的任务");
+		return;
 	}
 
 	Modal.confirm({
-		title: '确认删除',
+		title: "确认删除",
 		content: `确定删除选中的 ${selectedRows.value.length} 个任务吗？`,
 		onOk: async () => {
 			try {
-				const ids = selectedRows.value.map(item => item.id)
-				const res = await systemApi.tasks.batchDelete.post({ ids })
+				const ids = selectedRows.value.map((item) => item.id);
+				const res = await systemApi.tasks.batchDelete.post({ ids });
 				if (res.code === 200) {
-					message.success('删除成功')
-					selectedRows.value = []
-					refreshTable()
+					message.success("删除成功");
+					selectedRows.value = [];
+					refreshTable();
 				} else {
-					message.error(res.message || '删除失败')
+					message.error(res.message || "删除失败");
 				}
 			} catch (error) {
-				message.error('删除失败')
+				message.error("删除失败");
 			}
-		}
-	})
-}
+		},
+	});
+};
 
 // ===== 方法：批量更新状态 =====
 const handleBatchStatus = (status) => {
 	if (selectedRows.value.length === 0) {
-		message.warning('请选择要操作的任务')
-		return
+		message.warning("请选择要操作的任务");
+		return;
 	}
 
-	const statusText = status ? '启用' : '禁用'
+	const statusText = status ? "启用" : "禁用";
 
 	Modal.confirm({
 		title: `确认${statusText}`,
 		content: `确定要${statusText}选中的 ${selectedRows.value.length} 个任务吗？`,
 		onOk: async () => {
 			try {
-				const ids = selectedRows.value.map(item => item.id)
-				const res = await systemApi.tasks.batchStatus.post({ ids, status })
+				const ids = selectedRows.value.map((item) => item.id);
+				const res = await systemApi.tasks.batchStatus.post({
+					ids,
+					status,
+				});
 				if (res.code === 200) {
-					message.success(`${statusText}成功`)
-					selectedRows.value = []
-					refreshTable()
+					message.success(`${statusText}成功`);
+					selectedRows.value = [];
+					refreshTable();
 				} else {
-					message.error(res.message || '操作失败')
+					message.error(res.message || "操作失败");
 				}
 			} catch (error) {
-				message.error('操作失败')
+				message.error("操作失败");
 			}
-		}
-	})
-}
+		},
+	});
+};
 
 // ===== 方法：保存成功回调 =====
 const handleSaveSuccess = () => {
-	dialog.save = false
-	refreshTable()
-}
+	dialog.save = false;
+	refreshTable();
+};
 </script>
 
 <style scoped lang="scss">
@@ -364,7 +487,7 @@ const handleSaveSuccess = () => {
 		padding: 2px 6px;
 		background: #f5f5f5;
 		border-radius: 3px;
-		font-family: 'Consolas', 'Monaco', monospace;
+		font-family: "Consolas", "Monaco", monospace;
 		font-size: 12px;
 	}