diff --git a/leopard-web/src/index.tsx b/leopard-web/src/index.tsx
index b5ea14e..aabfa12 100644
--- a/leopard-web/src/index.tsx
+++ b/leopard-web/src/index.tsx
@@ -13,6 +13,7 @@ import TaskTemplateSave from './pages/task/TaskTemplateSave.tsx'
 import TaskScheduleList from './pages/task/TaskScheduleList.tsx'
 import TaskScheduleSave from './pages/task/TaskScheduleSave.tsx'
 import StockCollectionList from './pages/stock/StockCollectionList.tsx'
+import TaskDetail from './pages/task/TaskDetail.tsx'
 
 const routes: RouteObject[] = [
   {
@@ -56,6 +57,10 @@ const routes: RouteObject[] = [
             path: 'list',
             Component: TaskList,
           },
+          {
+            path: 'detail/:id',
+            Component: TaskDetail,
+          },
           {
             path: 'template',
             children: [
diff --git a/leopard-web/src/pages/task/TaskDetail.tsx b/leopard-web/src/pages/task/TaskDetail.tsx
new file mode 100644
index 0000000..ed2476a
--- /dev/null
+++ b/leopard-web/src/pages/task/TaskDetail.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import {useParams} from 'react-router'
+import {amisRender, commonInfo, remoteMappings, time} from '../../util/amis.tsx'
+
+function TaskDetail() {
+  const {id} = useParams()
+  return (
+    <div className="task-detail">
+      {amisRender(
+        {
+          type: 'page',
+          title: '任务详情',
+          initApi: `get:${commonInfo.baseUrl}/task/detail/${id}`,
+          body: [
+            {
+              type: 'property',
+              items: [
+                {label: '名称', content: '${name}'},
+                {label: '描述', content: '${description}', span: 2},
+                {
+                  label: '状态',
+                  content: {
+                    value: '${status}',
+                    ...remoteMappings('task_status', 'status'),
+                  },
+                },
+                {
+                  label: '进度',
+                  content: {
+                    type: 'tpl',
+                    tpl: "${step}%",
+                  },
+                  span: 2,
+                },
+                {
+                  label: '耗时',
+                  content: {
+                    type: 'tpl',
+                    tpl: "${IF(costText, costText, '/')}",
+                  },
+                },
+                {label: '启动时间', content: time('launchedTime')},
+                {label: '结束时间', content: time('finishedTime')},
+              ],
+            },
+            {type: 'divider'},
+            {
+              type: 'form',
+              wrapWithPanel: false,
+              body: [
+                {
+                  visibleOn: 'error',
+                  type: 'editor',
+                  name: 'error',
+                  label: '错误信息',
+                },
+                {
+                  visibleOn: 'result',
+                  type: 'editor',
+                  name: 'result',
+                  label: '结果',
+                },
+              ],
+            },
+          ],
+        },
+      )}
+    </div>
+  )
+}
+
+export default React.memo(TaskDetail)
\ No newline at end of file