基本功能完成，下一步开始美化UI

src/pages/UserTaskPage.tsx

@@ -4,6 +4,7 @@ import { ClockCircleOutlined, BookOutlined, CalendarOutlined, CheckCircleOutline
 import { useNavigate } from 'react-router-dom';
 import { request } from '../utils/request';
 import { useUserStore } from '../stores/userStore';
+import { UserLayout } from '../layouts/UserLayout';
 
 const { Title, Text } = Typography;
 
@@ -73,7 +74,7 @@ export const UserTaskPage: React.FC = () => {
     
     if (now < startAt) return 'blue';
     if (now > endAt) return 'red';
-    return 'green';
+    return 'cyan'; // Using cyan to match Mars Green family better than pure green
   };
 
   const getStatusText = (task: ExamTask) => {
@@ -99,7 +100,7 @@ export const UserTaskPage: React.FC = () => {
       key: 'subjectName',
       render: (text: string) => (
         <Space>
-          <BookOutlined className="text-blue-600" />
+          <BookOutlined className="text-mars-600" />
           <Text>{text}</Text>
         </Space>
       )
@@ -116,7 +117,7 @@ export const UserTaskPage: React.FC = () => {
       key: 'timeLimitMinutes',
       render: (minutes: number) => (
         <Space>
-          <ClockCircleOutlined className="text-gray-600" />
+          <ClockCircleOutlined className="text-gray-500" />
           <Text>{minutes}分钟</Text>
         </Space>
       )
@@ -127,13 +128,13 @@ export const UserTaskPage: React.FC = () => {
       render: (record: ExamTask) => (
         <Space direction="vertical" size={0}>
           <Space>
-            <CalendarOutlined className="text-gray-600" />
+            <CalendarOutlined className="text-gray-500" />
             <Text type="secondary" style={{ fontSize: '12px' }}>
               {new Date(record.startAt).toLocaleDateString()}
             </Text>
           </Space>
           <Space>
-            <CalendarOutlined className="text-gray-600" />
+            <CalendarOutlined className="text-gray-500" />
             <Text type="secondary" style={{ fontSize: '12px' }}>
               {new Date(record.endAt).toLocaleDateString()}
             </Text>
@@ -145,7 +146,7 @@ export const UserTaskPage: React.FC = () => {
       title: '状态',
       key: 'status',
       render: (record: ExamTask) => (
-        <Tag color={getStatusColor(record)}>
+        <Tag color={getStatusColor(record)} className="rounded-full px-3">
           {getStatusText(record)}
         </Tag>
       )
@@ -167,6 +168,7 @@ export const UserTaskPage: React.FC = () => {
               onClick={() => startTask(record)}
               disabled={!canStart}
               icon={<CheckCircleOutlined />}
+              className={canStart ? "bg-mars-500 hover:bg-mars-600 border-none" : ""}
             >
               {canStart ? '开始考试' : '不可用'}
             </Button>
@@ -178,48 +180,54 @@ export const UserTaskPage: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center min-h-screen">
-        <Spin size="large" />
-      </div>
+      <UserLayout>
+        <div className="flex justify-center items-center h-full min-h-[500px]">
+          <Spin size="large" />
+        </div>
+      </UserLayout>
     );
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-6xl">
-      <div className="mb-8">
-        <Title level={2} className="text-center mb-2">
-          我的考试任务
-        </Title>
-        <Text type="secondary" className="text-center block">
-          查看您被分派的所有考试任务
-        </Text>
-      </div>
+    <UserLayout>
+      <div className="container mx-auto max-w-6xl">
+        <div className="mb-8 text-center">
+          <Title level={2} className="!text-mars-600 mb-2">
+            我的考试任务
+          </Title>
+          <Text type="secondary" className="block text-lg">
+            查看您被分派的所有考试任务
+          </Text>
+        </div>
 
-      <Card className="shadow-sm">
-        <Table
-          columns={columns}
-          dataSource={tasks}
-          rowKey="id"
-          pagination={{
-            pageSize: 10,
-            showSizeChanger: true,
-            showTotal: (total) => `共 ${total} 条记录`
-          }}
-          locale={{
-            emptyText: '暂无考试任务'
-          }}
-        />
-      </Card>
+        <Card className="shadow-md border-t-4 border-t-mars-500 rounded-xl">
+          <Table
+            columns={columns}
+            dataSource={tasks}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showSizeChanger: true,
+              showTotal: (total) => `共 ${total} 条记录`
+            }}
+            locale={{
+              emptyText: '暂无考试任务'
+            }}
+          />
+        </Card>
 
-      <div className="mt-6 text-center">
-        <Button
-          type="default"
-          onClick={() => navigate('/subjects')}
-          icon={<BookOutlined />}
-        >
-          返回科目选择
-        </Button>
+        <div className="mt-8 text-center">
+          <Button
+            type="default"
+            size="large"
+            onClick={() => navigate('/subjects')}
+            icon={<BookOutlined />}
+            className="px-8 h-12 hover:border-mars-500 hover:text-mars-500"
+          >
+            返回科目选择
+          </Button>
+        </div>
       </div>
-    </div>
+    </UserLayout>
   );
-};
+};