feat:完成了添加编辑任务接口，删除任务接口，获取任务列表接口

src/api/apiPaths.ts

 // API路径配置文件
 // 这个文件确保所有API路径在一处统一管理，方便修改
 
+import { pauseJob } from "./schedule"
+
 export const authApi = {
   login: '/auth/login',
   logout: '/auth/logout'
@@ -88,4 +90,9 @@ export const spiderTaskApi = {
   // 爬虫任务相关接口
   taskList: '/schedule/getJobs',
   taskRecord: '/schedule/scheduleLogs',
+  addTask: '/schedule/addJob',
+  deleteTask: '/schedule/removeJob',
+  pauseJob: '/schedule/pauseJob',
+  resumeJob: '/schedule/resumeJob',
+  jobDetail: '/schedule/jobDetail',
 } as const
\ No newline at end of file

src/api/spiderTask.ts

@@ -18,4 +18,49 @@ export function getSpiderTaskList(data: UserQueryParams) {
     method: POST,
     data
   }) as unknown as Promise<ApiResponse>
+}
+
+// 新增/更新爬虫任务
+export function addSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.addTask,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 删除爬虫任务
+export function deleteSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.deleteTask,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 暂停爬虫任务
+export function pauseSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.pauseJob,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 继续爬虫任务
+export function resumeSpiderTask(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.resumeJob,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
+}
+
+// 获取爬虫任务数据
+export function getTaskData(data: UserQueryParams) {
+  return request({
+    url: spiderTaskApi.jobDetail,
+    method: POST,
+    data
+  }) as unknown as Promise<ApiResponse>
 }
\ No newline at end of file

src/components/Crontab/index.ts

+import Crontab from './src/Crontab.vue'
+export { Crontab }

src/components/Delete/enum.ts

@@ -3,5 +3,6 @@
 export enum DeleteMode {
   BATCH_DELETE = 0,
   SINGLE_DELETE = 1,
+  JOB_DELETE = 2,
 }
 

src/components/Delete/index.vue

@@ -23,7 +23,7 @@ interface deleteDialogPropType {
 	dialogVisible: boolean,
 	deleteMode: DeleteMode,
 	id: number,
-	ids: number[]
+	ids: number[],
 }
 const props = defineProps<deleteDialogPropType>()
 const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
@@ -35,7 +35,6 @@ const handleDelelte = async () => {
 		await deleteUser({ id: props.id })
 		emit('getUserList')
 		deleteDialogVisible.value = false
-
 	}
 	else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
 		console.log(props.ids);

src/main.ts

@@ -5,22 +5,22 @@ import router from './router'
 import pinia from './store'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import { 
-  UserFilled, 
-  Lock, 
-  View, 
-  Hide, 
-  CaretBottom, 
-  HomeFilled, 
-  Menu, 
-  Document, 
-  Tickets, 
-  List, 
-  Folder, 
-  Files, 
-  Loading, 
-  VideoPlay, 
-  Refresh, 
+import {
+  UserFilled,
+  Lock,
+  View,
+  Hide,
+  CaretBottom,
+  HomeFilled,
+  Menu,
+  Document,
+  Tickets,
+  List,
+  Folder,
+  Files,
+  Loading,
+  VideoPlay,
+  Refresh,
   Back,
   Upload,
   Plus,

src/utils/request.ts

@@ -111,6 +111,12 @@ export interface UserQueryParams {
   ids?: any
   scrapydServerId?: string
   project?: string
-  spiders?:any
-  times?:any
+  spiders?: any
+  times?: any
+  job_id?: string
+  scrapyd_server_id?: string
+  schedule_type?: string
+  spider?: string
+  cron?: string
+  options?: string
 }
\ No newline at end of file

src/views/os-system/components/addUserDialog.vue

@@ -157,12 +157,11 @@ const handleConfirm = async () => {
 			if (!firstRuleFormRef.value) {
 				return;
 			}
-			// 3. 使用Promise形式的validate（不传入回调），确保await生效
+			// 使用Promise形式的validate（不传入回调），确保await生效
 			const valid = await firstRuleFormRef.value.validate();
 			if (valid) {
-				// 进入这里即197行附近逻辑
 				await addUser({
-					nickname: firstForm.value.userName, // 注意：根据实际接口字段调整
+					nickname: firstForm.value.userName, 
 					username: firstForm.value.userAccount,
 					password: firstForm.value.userPassword,
 					role: userRoleValue.value,

src/views/os-system/index.vue

@@ -37,7 +37,6 @@
 		<deleteDialog v-model:dialogVisible="showDeleteDialog"  @get-user-list="getUserListData"
 			:ids="userIds" :deleteMode="deleteMode" :id="userId" />
 		<!-- 创建用户弹窗组件 -->
-		 <!-- todo -->
 		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nickName="nickName" :userName="userName"
 			:id="userId" :userRole="userRole" :userStatus="userStatus" :userPassword="userPassword"
 			@get-user-list="getUserListData" />

src/views/os-taskInformation/components/addTaskDialog.vue

 <template>
-	<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增' : '修改'" width="610" center align-center
-		@close="handleClose" draggable>
-		<el-form :inline="true" v-if="currentMode === '1'">
+	<el-dialog v-model="currentVisible" :title="currentMode === AddMode.ADD_TASK ? '新增' : '修改'" width="610" center
+		align-center @close="handleClose" draggable>
+		<el-form :inline="true" v-if="currentMode === AddMode.ADD_TASK">
 			<el-form-item label="任务名称:">
 				<el-input v-model="taskName" placeholder="请输入任务名称" />
 			</el-form-item>
-			<el-form-item label="执行时间:">
-				<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
-			</el-form-item>
-		</el-form>
-		<div class="m-t-4" />
-		<el-form :inline="true">
 			<el-form-item label="所属爬虫:">
-				<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 181px">
+				<el-select v-model="spiderTypeValue" placeholder="请选择所属爬虫" style="width: 181px">
 					<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
 				</el-select>
 			</el-form-item>
-			<el-form-item label="执行频率:">
-				<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
+			<el-form-item label="执行频率(秒/次):">
+				<Crontab v-model="cronExpression"  style="width: 250px;" />
 			</el-form-item>
 		</el-form>
-		<div class="m-t-4" />
-		<el-form :inline="true">
-			<el-form-item label="启用/停止:">
+		<el-form v-if="currentMode === AddMode.UPDATE_TASK">
+			<el-form-item label="执行频率(秒/次):">
+				<Crontab v-model="cronExpression"  />
+			</el-form-item>
+			<!-- <el-form-item label="启用/停止:" v-if="currentMode === AddMode.UPDATE_TASK">
 				<el-switch v-model="taskSwitchValue" class="ml-2"
 					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
-			</el-form-item>
+			</el-form-item> -->
 		</el-form>
 		<template #footer>
 			<div class="dialog-footer">
@@ -35,69 +31,96 @@
 				</el-button>
 			</div>
 		</template>
+
 	</el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { defineProps } from 'vue';
 import { watch } from 'vue'
+import { addSpiderTask } from '@/api/spiderTask'
+import { AddMode } from './enum'
+import { Crontab } from '@/components/Crontab/index'
+interface addDialogPropType {
+	dialogVisible: boolean,
+	mode: AddMode,
+	jobId: string,
+	cron: string,
+	spiderType: string,
+	options: string,
+	// frequency: string,
+	// taskStatus: boolean
+}
+const props = defineProps<addDialogPropType>()
 
-const props = defineProps({
-	dialogVisible: {
-		type: Boolean,
-		default: false
-	},
-	mode: {
-		type: String,
-		default: '1'
-	},
-	spiderType: {
-		type: String,
-		default: ''
-	},
-	frequency: {
-		type: String,
-		default: ''
-	},
-	taskStatus: {
-		type: Boolean,
-		default: false
-	}
-})
 // 向父组件传递dialog值
-const emit = defineEmits(['update:dialogVisible', 'confirm'])
+const emit = defineEmits(['update:dialogVisible', 'confirm', 'update:mode', 'getTaskList'])
 // 组件的状态
 const currentVisible = ref(props.dialogVisible)
 const currentMode = ref(props.mode)
 const taskName = ref('')
 const taskFrequency = ref('')
+const taskTime = ref('')
 const taskSwitchValue = ref(false)
 const spiderTypeValue = ref('')
 const spiderTypeOptions = ref([
 	{
-		value: '选项1',
-		label: 'DSN爬虫'
+		value: 'api_spider',
+		label: 'api_spider'
 	},
 	{
-		value: '选项2',
-		label: 'ITU爬虫'
+		value: 'dsn_now',
+		label: 'dsn_now'
 	},
 	{
-		value: '选项3',
-		label: 'ST爬虫'
+		value: 'itu_space_explorer',
+		label: 'itu_space_explorer'
 	},
 ])
-
-
+const taskParams = ref({
+	scrapyd_server_id: '1',
+	schedule_type: '0',
+	project: 'spiders'
+})
+const cronExpression = ref('')
+// const shortcuts = [
+// 	{ text: '每工作日9点', value: '0 0 9 ? * MON-FRI' },
+// 	{ text: '每季度第一天', value: '0 0 0 1 1/3 ?' }
+// ]
 // 关闭的方法
 const handleClose = () => {
+	taskName.value = ''
+	taskFrequency.value = ''
+	cronExpression.value = ''
 	currentVisible.value = false
 }
 // 确定的方法
-const handleConfirm = () => {
-	emit('confirm')
-	currentVisible.value = false
+const handleConfirm = async () => {
+	if (currentMode.value === AddMode.ADD_TASK) {
+		await addSpiderTask({
+			scrapyd_server_id: taskParams.value.scrapyd_server_id,
+			schedule_type: taskParams.value.schedule_type,
+			project: taskParams.value.project,
+			spider: spiderTypeValue.value,
+			cron: cronExpression.value,
+			options: JSON.stringify({ jobName: taskName.value })
+		})
+		currentVisible.value = false
+		emit('getTaskList')
+	}else if (currentMode.value === AddMode.UPDATE_TASK) {
+		await addSpiderTask({
+			scrapyd_server_id: taskParams.value.scrapyd_server_id,
+			schedule_type: taskParams.value.schedule_type,
+			project: taskParams.value.project,
+			spider: props.spiderType,
+			job_id: props.jobId,
+			cron: cronExpression.value,
+			options: props.options
+		})
+		currentVisible.value = false
+		emit('getTaskList')
+	}
 }
 
 // 监听props变化，同步给组件内部
@@ -119,6 +142,28 @@ watch(() => props.mode,
 		currentMode.value = newVal
 	}
 )
+
+watch(() => currentMode.value,
+	(newVal) => {
+		emit('update:mode', newVal)
+	}
+)
+watch(
+	[() => props.dialogVisible, () => props.mode, () => props.cron],
+	([newVisible, newMode,newCron]) => {
+		if (newVisible && newMode === AddMode.UPDATE_TASK) {
+			cronExpression.value = newCron;
+		}
+		if (!newVisible) {
+			// 清空表单
+			cronExpression.value =  '' 
+		}
+	},
+	{ immediate: true }
+);
+onMounted(() => {
+
+})
 </script>
 
 <style>
@@ -133,6 +178,10 @@ watch(() => props.mode,
 	.el-dialog__title {
 		color: #ffffff;
 	}
+
+	.el-input__inner {
+		color: #ffffff;
+	}
 }
 
 /* 修改表单样式 */

src/views/os-taskInformation/components/deleteDialog.vue

+<template>
+	<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
+		<div class="text-center">
+			<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
+		</div>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="close">取消</el-button>
+				<el-button type="primary" @click="handleDelelte">
+					确定
+				</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { defineProps } from 'vue';
+import { deleteSpiderTask } from '@/api/spiderTask.ts'
+interface deleteDialogPropType {
+	dialogVisible: boolean,
+	jobId: string
+}
+const props = defineProps<deleteDialogPropType>()
+const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
+const deleteDialogVisible = ref(props.dialogVisible)
+// 删除方法
+const handleDelelte = async () => {
+    await deleteSpiderTask({job_id: props.jobId})
+    emit('getUserList')
+    deleteDialogVisible.value = false
+}
+
+// 关闭弹窗的方法
+const close = () => {
+	deleteDialogVisible.value = false
+}
+// 监听父组件传过来的值
+watch(() => props.dialogVisible,
+	(newVal) => {
+		deleteDialogVisible.value = newVal
+	}
+)
+// 监听组件内的值并向父组件更新
+watch(() => deleteDialogVisible.value,
+	(newVal) => {
+		emit('update:dialogVisible', newVal)
+	}
+)
+
+</script>
\ No newline at end of file

src/views/os-taskInformation/components/enum.ts

+/// @ts-ignore
+export enum AddMode {
+  ADD_TASK = 0,
+  UPDATE_TASK = 1,
+}
\ No newline at end of file

src/views/os-taskInformation/components/taskCard.vue

 <!-- 任务执行统计卡片组件 -->
 <template>
-	<div class="taskCard  p-6" v-for="task in taskList" :key="task.taskId">
-		<div class="flex justify-center">
-			<el-form-item>
-				<span class="titleStyle">任务名称</span>
-			</el-form-item>
+	<div class="text-left p-4 toolbarStyle ">
+		<div class="formStyle">
+			<el-form inline>
+				<el-form-item>
+					<el-text class="mx-1" style="color: #fff;">所属爬虫:</el-text>
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-select v-model="searchCondition.spiders" placeholder="请选择" style="width: 220px">
+							<el-option v-for="item in taskSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+					</div>
+				</el-form-item>
+				<el-form-item>
+					<el-text class="mx-1" style="color: #fff;">任务名称:</el-text>
+				</el-form-item>
+				<el-form-item>
+					<el-input v-model="taskName" placeholder="请输入" style="width: 220px" />
+				</el-form-item>
+				<el-form-item>
+					<el-space>
+						<el-button type="primary" @Click="getData">查询</el-button>
+					</el-space>
+				</el-form-item>
+				<el-form-item>
+					<el-space>
+						<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
+					</el-space>
+				</el-form-item>
+			</el-form>
 		</div>
-		<div class="flex justify-center ">
-			<el-form-item>
-				<el-button type="primary" @click="editTask" class="editButton">编辑</el-button>
-				<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
-				<el-button type="danger" @click="deleteTask" class="deleteButton">删除</el-button>
-			</el-form-item>
-		</div>
-		<div class="wordStyle flex justify-center">
-			<el-form-item>
-				<el-space>
-					<span class="wordStyle">启用/停止: </span>
-					<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
-					<span class="wordStyle">执行频率: {{ task.frequency }} </span>
-				</el-space>
-			</el-form-item>
-		</div>
-		<div class="wordStyle flex justify-center">
-			<el-form-item>
-				<el-space>
-					<span class="wordStyle">执行次数: {{ task.executeCount }} 个; </span>
-					<span class="wordStyle">成功次数: {{ task.successCount }} 个</span>
-				</el-space>
-			</el-form-item>
-		</div>
-		<div class="wordStyle flex justify-center">
-			<el-form-item>
-				<el-space>
-					<span class="wordStyle">失败次数: {{ task.failCount }} 个; </span>
-					<span class="wordStyle">异常记录: {{ task.unusualCount }} 个</span>
-				</el-space>
-			</el-form-item>
+	</div>
+	<div class="cardStyle">
+		<div class="taskCard  p-6 " v-for="task in taskList" :key="task.taskId">
+			<div class="taskContent">
+				<div>
+					<el-form-item>
+						<span class="titleStyle">{{ task.kwargs.options === '' ? '无名称' : JSON.parse(task.kwargs.options).jobName
+							}}</span>
+					</el-form-item>
+				</div>
+				<div>
+					<el-form-item>
+						<el-button type="primary" @click="editTask(task)" class="editButton">编辑</el-button>
+						<el-button type="success" @click="goToTaskRecord" class="recordButton">执行记录 </el-button>
+						<el-button type="danger" @click="deleteTask(task)" class="deleteButton">删除</el-button>
+					</el-form-item>
+				</div>
+				<div class="wordStyle">
+					<el-form-item>
+						<el-space>
+							<span class="wordStyle">启用/停止: </span>
+							<el-switch v-model="task.status" :active-value="1" :inactive-value="0" @change="changeStatus(task)" />
+							<span class="wordStyle">执行频率: {{ task.frequency }} </span>
+						</el-space>
+					</el-form-item>
+				</div>
+				<div class="wordStyle">
+					<el-form-item>
+						<el-space>
+							<span class="wordStyle">执行次数: 个; </span>
+							<span class="wordStyle">成功次数: 个</span>
+						</el-space>
+					</el-form-item>
+				</div>
+				<div class="wordStyle ">
+					<el-form-item>
+						<el-space>
+							<span class="wordStyle">失败次数: 个; </span>
+							<span class="wordStyle">异常记录: 个</span>
+						</el-space>
+					</el-form-item>
+				</div>
+			</div>
 		</div>
 	</div>
 
-	<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
-	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
+	<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" @getTaskList="getData"
+		:jobId="jobId" :cron="frequency" :spiderType="spiderType" :options="taskOptions" />
+
+	<deleteDialog v-model:dialogVisible="showDeleteDialog" @get-user-list="getData" :jobId="jobId" />
 
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import deleteDialog from '@/components/Delete/index.vue'
 import addTaskDialog from './addTaskDialog.vue'
 import { getSpiderTaskList } from '@/api/spiderTask'
+import { DeleteMode } from '@/components/Delete/enum.ts'
+import { AddMode } from './enum'
+import deleteDialog from './deleteDialog.vue'
 defineProps({
 	successTask: {
 		type: String,
@@ -65,82 +106,63 @@ defineProps({
 		default: ''
 	}
 })
-const router = useRouter()
-const editMode = ref('')
-const deleteMode = ref('1')
-const showDeleteDialog = ref(false)
-const showTaskDialog = ref(false)
-const taskSwitch = ref(false)
-const taskList = ref([
+const taskSelectOptions = [
 	{
-		taskId: '1',
-		taskName: '任务1',
-		status: 1,
-		frequency: '1',
-		executeCount: '2',
-		successCount: '3',
-		failCount: '4',
-		unusualCount: '5'
+		value: 'api_spider',
+		label: 'api_spider',
 	},
 	{
-		taskId: '2',
-		taskName: '任务2',
-		status: 0,
-		frequency: '6',
-		executeCount: '7',
-		successCount: '8',
-		failCount: '9',
-		unusualCount: '10'
+		value: 'dsn_now',
+		label: 'dsn_now',
 	},
 	{
-		taskId: '3',
-		taskName: '任务3',
-		status: 1,
-		frequency: '11',
-		executeCount: '12',
-		successCount: '13',
-		failCount: '14',
-		unusualCount: '15'
-	},
-	{
-		taskId: '4',
-		taskName: '任务4',
-		status: 0,
-		frequency: '16',
-		executeCount: '17',
-		successCount: '18',
-		failCount: '19',
-		unusualCount: '20'
+		value: 'itu_space_explorer',
+		label: 'itu_space_explorer',
 	},
+]
+const searchCondition = ref({
+	spiders: '',
+	options: ''
+})
+const taskName = ref('')
+const taskValue = ref('')
+const spiderType = ref('')
+const router = useRouter()
+const frequency = ref('')
+const editMode = ref(AddMode.UPDATE_TASK)
+const deleteMode = ref(DeleteMode.SINGLE_DELETE)
+const showDeleteDialog = ref(false)
+const showTaskDialog = ref(false)
+const taskSwitch = ref(false)
+const taskOptions = ref('')
+const jobId = ref('')
+const taskList = ref([
 	{
-		taskId: '5',
-		taskName: '任务5',
+		taskId: 1,
+		name: '任务1',
 		status: 1,
-		frequency: '21',
-		executeCount: '22',
-		successCount: '23',
-		failCount: '24',
-		unusualCount: '25'
-	},
-	{
-		taskId: '6',
-		taskName: '任务6',
-		status: 0,
-		frequency: '26',
-		executeCount: '27',
-		successCount: '28',
-		failCount: '29',
-		unusualCount: '30'
-	},
+		frequency: '每天',
+		kwargs: {
+			options: ''
+		}
+	}
 ])
 
-const deleteTask = () => {
-	deleteMode.value = '1'
+const deleteTask = (task: any) => {
+	console.log(task);
+	jobId.value = task.id
+	deleteMode.value = DeleteMode.SINGLE_DELETE
 	showDeleteDialog.value = true
 }
-const editTask = () => {
-	editMode.value = '2'
+const editTask = (task: any) => {
+	jobId.value = task.id
+	taskOptions.value = JSON.stringify(JSON.parse(task.kwargs.options))
+	spiderType.value = task.kwargs.spider
+	frequency.value = task.kwargs.cron
+	editMode.value = AddMode.UPDATE_TASK
 	showTaskDialog.value = true
+	// console.log(JSON.stringify(JSON.parse(task.kwargs.options)));
+
 }
 const goToTaskRecord = () => {
 	router.push({
@@ -157,23 +179,32 @@ const changeStatus = (task: any) => {
 const handleEdit = () => {
 
 }
-const handleDeleteConfirm = () => {
-
+const openTaskDialog = () => {
+	editMode.value = AddMode.ADD_TASK
+	showTaskDialog.value = true
 }
 const getData = async () => {
-  console.log('getData');
-  const res = await getSpiderTaskList({spiders:['api_spider']})
-//   taskList.value = res.data
-  console.log(res);
-  
+	const res = await getSpiderTaskList({ spiders: searchCondition.value.spiders ? [searchCondition.value.spiders] : [] , options: JSON.stringify({ jobName: taskName.value }) })
+	taskList.value = res.data
 }
 
 onMounted(() => {
-  getData()
+	getData()
+
 })
 </script>
 
 <style lang="scss" scoped>
+.taskContent {
+	display: flex;
+	flex-direction: column; // 垂直排列
+	align-items: center; // 水平居中
+	justify-content: center; // 垂直居中
+	height: 100%;
+	gap: -15px;
+	padding: 10px 0;
+}
+
 // .editButton{
 // 	background: none;
 //     background-image: url("@/assets/picture/button1.png");
@@ -192,6 +223,15 @@ onMounted(() => {
 //     background-size: 100% 100%;
 //     background-repeat: no-repeat;
 // }
+.cardStyle {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	margin-top: 1.5%;
+	padding: 8px;
+	height: 26vh;
+}
+
 // 任务卡片样式
 .taskCard {
 	background-image: url("@/assets/picture/box2.png");
@@ -202,6 +242,8 @@ onMounted(() => {
 	font-size: 20px;
 	height: 100%;
 	border-radius: 7px;
+	display: flex;
+	flex-direction: column;
 
 	.titleStyle {
 		font-size: 22px;
@@ -216,6 +258,21 @@ onMounted(() => {
 	}
 }
 
+/* 工具栏样式 */
+.toolbarStyle {
+	background-image: url("@/assets/picture/box3.png");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+}
+
+/* 表单样式 */
+.formStyle {
+	display: flex;
+	justify-content: space-around;
+	margin-top: 0.5%;
+	padding: 2px;
+}
+
 // 去除按钮边框
 .el-button:focus {
 	outline: none;
@@ -229,4 +286,8 @@ onMounted(() => {
 	color: #ffffff;
 	border: none;
 } */
+
+ .el-input {
+	color: #FFFFFF;
+}
 </style>
\ No newline at end of file

src/views/os-taskInformation/index.vue

@@ -2,63 +2,27 @@
   <div>
     <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToTaskInformation" />
     <div class="m-t-10" />
-    <div class="text-left p-4 toolbarStyle">
-      <div class="formStyle">
-        <el-form inline>
-          <el-form-item>
-            <el-text class="mx-1">所属爬虫:</el-text>
-          </el-form-item>
-          <el-form-item>
-            <div>
-              <el-select v-model="taskValue" placeholder="请选择" style="width: 220px">
-                <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-text class="mx-1">任务名称:</el-text>
-          </el-form-item>
-          <el-form-item>
-            <el-input v-model="taskValue" placeholder="请输入" style="width: 220px" />
-          </el-form-item>
-          <el-form-item>
-            <el-space>
-              <el-button type="primary">查询</el-button>
-            </el-space>
-          </el-form-item>
-          <el-form-item>
-            <el-space>
-              <el-button type="primary" @click="openTaskDialog">新建任务</el-button>
-            </el-space>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <div class="cardStyle">
+    <div >
       <taskCard successTask="100" failTask="10" unusualTask="1" />
       <!-- <div class="pagination w-full flex flex-row-reverse pr-18 m-t-0">
         <Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
           @pagination="getData" />
       </div> -->
     </div>
-    <!-- 添加任务对话框组件 -->
-    <addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
   </div>
-
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import Pagination from '@/components/pagination/index.vue'
 import taskCard from './components/taskCard.vue'
-import addTaskDialog from './components/addTaskDialog.vue'
 import { useRouter } from 'vue-router'
 import { useRoute } from 'vue-router'
-import { getSpiderTaskList } from '@/api/spiderTask'
+import { getSpiderTaskList,getTaskData } from '@/api/spiderTask'
+import { AddMode } from './components/enum'
 
 const route = useRoute()
 const router = useRouter()
-const editMode = ref('1')
 const taskValue = ref('')
 const taskList = ref([])
 const taskOptions = [
@@ -81,23 +45,9 @@ const pageObj = ref({
   pageNo: 1
 })
 
-// 控制对话框显示/隐藏的状态变量
-const showDialog = ref(false)
-
-// 处理删除确认
-const handleDeleteConfirm = () => {
-  console.log('用户确认删除')
-
-}
-
-const openTaskDialog = () => {
-  showDialog.value = true
-}
 const goToTaskInformation = () => {
   router.push({ path: '/osSpiderManager/list' })
 }
-onMounted(() => {
-})
 </script>
 
 <style scoped>

vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
     proxy: {
       // 代理API请求，使用更精确的路径匹配
       '/api': {
-        target: 'http://192.168.0.200:5001/',
+        target: 'http://127.0.0.1:5001/',
         changeOrigin: true,
       },
     }