diff --git a/automation/web/src/api/jobs.ts b/automation/web/src/api/jobs.ts
index 3886e8708517db1f5bd538f477888931d069c8ee..57cbe8dd05a903ec79b630a146e63813e637a0d9 100644
--- a/automation/web/src/api/jobs.ts
+++ b/automation/web/src/api/jobs.ts
@@ -1,4 +1,4 @@
-import request from '@/utils/request';
+import { request } from '@/utils/request';
 export const getJobsList = (data: any) => {
   // 处理数组参数，将数组转换为字符串
   const processedData = { ...data };
@@ -29,3 +29,11 @@ export const reRunJob = (data: any) => {
     data,
   });
 };
+
+// 获取作业详情
+export const getJobDetail = (id: string) => {
+  return request({
+    url: `/jobs/list/${id}`,
+    method: 'get',
+  });
+};
diff --git a/automation/web/src/views/jobs/components/detail.vue b/automation/web/src/views/jobs/components/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..169fb31880473d2dec982cf904be938ef3e97670
--- /dev/null
+++ b/automation/web/src/views/jobs/components/detail.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <div class="drawer-content">
+      <!-- 基本信息卡片 -->
+      <el-card class="info-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span>基本信息</span>
+          </div>
+        </template>
+
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="任务ID">
+            {{ jobData?.job_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="任务名称">
+            {{ jobData?.job_name }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="任务状态">
+            <el-tag :type="getStatusType(jobData?.job_status)">
+              {{ jobData?.job_status }}
+            </el-tag>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="执行主机">
+            {{ jobData?.exec_hosts }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="操作类型">
+            {{ jobData?.operation_type }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="执行耗时">
+            {{ jobData?.total_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <!-- 脚本内容卡片 -->
+      <el-card class="script-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span>子任务组</span>
+          </div>
+        </template>
+
+        <div class="script-content" v-for="(sub, index) in subJobs">
+          <el-alert
+            v-if="sub.script_content"
+            :title="`子任务${index + 1}脚本`"
+            type="info"
+            :closable="false"
+          />
+
+          <el-input
+            v-model="sub.script_content"
+            type="textarea"
+            :rows="15"
+            readonly
+            resize="none"
+          />
+        </div>
+      </el-card>
+
+      <!-- 执行结果卡片 -->
+      <el-card class="result-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span>执行结果</span>
+          </div>
+        </template>
+
+        <el-descriptions :column="1" border>
+          <el-descriptions-item label="执行代码">
+            {{ jobData?.exec_code }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="重试次数">
+            {{ jobData?.retry_count }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="修改用户">
+            {{ jobData?.modify_user }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getJobDetail } from '@/api/jobs';
+import { JobItem } from '@/types/jobs';
+import { Result } from '@/utils/request';
+import { ref, watch } from 'vue';
+
+interface subJobs {
+  id: number;
+  job_id: string;
+  job_name: string;
+  job_status: string;
+  exec_hosts: string;
+  operation_type: string;
+  total_time: string;
+  script_content?: string;
+  exec_code?: string;
+  retry_count?: number;
+  modify_user?: string;
+}
+
+// 任务数据
+const jobData = ref<JobItem>();
+const subJobs = ref<subJobs[]>([]);
+
+let props = defineProps({
+  job_id: {
+    type: String,
+    required: true,
+    default: '',
+  },
+});
+
+// 获取状态对应的标签类型
+const getStatusType = (status?: string) => {
+  switch (status) {
+    case '执行成功':
+      return 'success';
+    case '执行失败':
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+// 获取详情
+const fetchJobDetail = async () => {
+  let res: Result<any> = await getJobDetail(props.job_id);
+  let jobs = res.data.data.sub_jobs;
+  jobData.value = res.data.data.job;
+  if (jobs && jobs.length > 0) {
+    subJobs.value = jobs;
+  }
+};
+
+// 监听抽屉打开，自动加载数据
+watch(
+  () => props.job_id,
+  (newVal) => {
+    if (newVal) {
+      fetchJobDetail();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.drawer-content {
+  padding: 20px;
+}
+
+.info-card,
+.script-card,
+.result-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.script-content {
+  margin-top: 10px;
+}
+
+:deep(.el-descriptions__label) {
+  font-weight: 600;
+}
+
+:deep(.el-descriptions__content) {
+  color: #606266;
+}
+</style>