diff --git a/frontend/src/Router.tsx b/frontend/src/Router.tsx
index 7e5666a..65f3b51 100644
--- a/frontend/src/Router.tsx
+++ b/frontend/src/Router.tsx
@@ -10,6 +10,7 @@ import { StaticData } from './pages/admin/StaticData';
 import { Users } from './pages/admin/Users';
 import { NASADownload } from './pages/admin/NASADownload';
 import { SystemSettings } from './pages/admin/SystemSettings';
+import { Tasks } from './pages/admin/Tasks';
 import { auth } from './utils/auth';
 import { ToastProvider } from './contexts/ToastContext';
 import App from './App';
@@ -48,6 +49,7 @@ export function Router() {
             <Route path="static-data" element={<StaticData />} />
             <Route path="users" element={<Users />} />
             <Route path="nasa-data" element={<NASADownload />} />
+            <Route path="tasks" element={<Tasks />} />
             <Route path="settings" element={<SystemSettings />} />
           </Route>
 
diff --git a/frontend/src/pages/admin/NASADownload.tsx b/frontend/src/pages/admin/NASADownload.tsx
index bba2ce0..fa3f26b 100644
--- a/frontend/src/pages/admin/NASADownload.tsx
+++ b/frontend/src/pages/admin/NASADownload.tsx
@@ -179,22 +179,31 @@ export function NASADownload() {
     setDownloadProgress({ current: 0, total: datesToDownload.length });
 
     try {
-      const { data } = await request.post('/celestial/positions/download', {
-        body_ids: selectedBodies,
-        dates: datesToDownload
-      });
+      if (selectedDate) {
+        // Sync download for single date
+        const { data } = await request.post('/celestial/positions/download', {
+          body_ids: selectedBodies,
+          dates: datesToDownload
+        });
 
-      setDownloadProgress({ current: datesToDownload.length, total: datesToDownload.length });
+        setDownloadProgress({ current: datesToDownload.length, total: datesToDownload.length });
 
-      if (data.total_success > 0) {
-        message.success(`成功下载 ${data.total_success} 条数据${data.total_failed > 0 ? `，${data.total_failed} 条失败` : ''}`);
-        // Reload available dates to show newly downloaded data
-        loadAvailableDates();
+        if (data.total_success > 0) {
+          message.success(`成功下载 ${data.total_success} 条数据${data.total_failed > 0 ? `，${data.total_failed} 条失败` : ''}`);
+          loadAvailableDates();
+        } else {
+          message.error('下载失败');
+        }
       } else {
-        message.error('下载失败');
+        // Async download for range
+        await request.post('/celestial/positions/download-async', {
+          body_ids: selectedBodies,
+          dates: datesToDownload
+        });
+        message.success('后台下载任务已启动，请前往“系统任务”查看进度');
       }
     } catch (error) {
-      message.error('下载请求失败');
+      message.error('请求失败');
     } finally {
       setDownloading(false);
       setDownloadProgress({ current: 0, total: 0 });
@@ -331,7 +340,7 @@ export function NASADownload() {
                   disabled={selectedBodies.length === 0}
                   loading={downloading}
                 >
-                  下载范围内所有日期
+                  下载范围内数据 (后台任务)
                 </Button>
               </Space>
             }
diff --git a/frontend/src/pages/admin/Tasks.tsx b/frontend/src/pages/admin/Tasks.tsx
new file mode 100644
index 0000000..19cb3b6
--- /dev/null
+++ b/frontend/src/pages/admin/Tasks.tsx
@@ -0,0 +1,176 @@
+import { useState, useEffect, useRef } from 'react';
+import { Tag, Progress, Button, Modal, Descriptions, Badge, Typography } from 'antd';
+import { ReloadOutlined, EyeOutlined } from '@ant-design/icons';
+import type { ColumnsType } from 'antd/es/table';
+import { DataTable } from '../../components/admin/DataTable';
+import { request } from '../../utils/request';
+
+const { Text } = Typography;
+
+interface Task {
+  id: number;
+  task_type: string;
+  status: string;
+  progress: number;
+  description: string;
+  created_at: string;
+  started_at?: string;
+  completed_at?: string;
+  error_message?: string;
+  result?: any;
+}
+
+export function Tasks() {
+  const [data, setData] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTask, setCurrentTask] = useState<Task | null>(null);
+  const [detailsVisible, setDetailsVisible] = useState(false);
+  
+  // Auto-refresh logic
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const res = await request.get('/celestial/tasks?limit=50');
+      setData(res.data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Polling for active tasks
+  useEffect(() => {
+    loadData();
+    
+    timerRef.current = setInterval(() => {
+      // Silent refresh to avoid table flickering
+      request.get('/celestial/tasks?limit=50').then(res => {
+        setData(res.data);
+      });
+    }, 3000);
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+
+  const columns: ColumnsType<Task> = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 80,
+    },
+    {
+      title: '任务类型',
+      dataIndex: 'task_type',
+      width: 150,
+      render: (type: string) => <Tag color="blue">{type}</Tag>
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      ellipsis: true,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      render: (status: string) => {
+        const colors: Record<string, string> = {
+          pending: 'default',
+          running: 'processing',
+          completed: 'success',
+          failed: 'error',
+          cancelled: 'warning'
+        };
+        return <Badge status={colors[status] as any} text={status.toUpperCase()} />;
+      }
+    },
+    {
+      title: '进度',
+      dataIndex: 'progress',
+      width: 200,
+      render: (progress: number, record: Task) => (
+        <Progress 
+          percent={progress} 
+          size="small" 
+          status={record.status === 'failed' ? 'exception' : record.status === 'completed' ? 'success' : 'active'} 
+        />
+      )
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      width: 180,
+      render: (time: string) => new Date(time).toLocaleString()
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      fixed: 'right',
+      render: (_, record) => (
+        <Button 
+          icon={<EyeOutlined />} 
+          size="small" 
+          onClick={() => {
+            setCurrentTask(record);
+            setDetailsVisible(true);
+          }}
+        >
+          详情
+        </Button>
+      )
+    }
+  ];
+
+  return (
+    <div className="p-0">
+      <div className="mb-4 flex justify-end">
+        <Button icon={<ReloadOutlined />} onClick={loadData}>刷新</Button>
+      </div>
+
+      <DataTable
+        title="系统任务列表"
+        columns={columns}
+        dataSource={data}
+        loading={loading}
+        rowKey="id"
+      />
+
+      <Modal
+        title="任务详情"
+        open={detailsVisible}
+        onCancel={() => setDetailsVisible(false)}
+        footer={null}
+        width={800}
+      >
+        {currentTask && (
+          <Descriptions bordered column={1}>
+            <Descriptions.Item label="任务ID">{currentTask.id}</Descriptions.Item>
+            <Descriptions.Item label="类型">{currentTask.task_type}</Descriptions.Item>
+            <Descriptions.Item label="状态">
+               <Badge status={currentTask.status === 'completed' ? 'success' : currentTask.status === 'running' ? 'processing' : 'default'} text={currentTask.status} />
+            </Descriptions.Item>
+            <Descriptions.Item label="描述">{currentTask.description}</Descriptions.Item>
+            {currentTask.error_message && (
+              <Descriptions.Item label="错误信息">
+                <Text type="danger">{currentTask.error_message}</Text>
+              </Descriptions.Item>
+            )}
+            <Descriptions.Item label="结果">
+              <div className="bg-gray-100 p-2 rounded max-h-60 overflow-auto text-xs font-mono">
+                {currentTask.result ? (
+                    <pre>{JSON.stringify(currentTask.result, null, 2)}</pre>
+                ) : (
+                    <span className="text-gray-400">暂无结果</span>
+                )}
+              </div>
+            </Descriptions.Item>
+          </Descriptions>
+        )}
+      </Modal>
+    </div>
+  );
+}