时间线详情展示重构

src/pages/story/components/TimelineItemDrawer.tsx

@@ -4,7 +4,7 @@ import { StoryItem } from '@/pages/story/data';
 import { queryStoryItemImages } from '@/pages/story/service';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useIntl, useRequest } from '@umijs/max';
-import { Button, Divider, Drawer, Popconfirm, Space, Tag } from 'antd';
+import { Button, Divider, Drawer, Popconfirm, Space, Tag, theme } from 'antd';
 import React, { useEffect } from 'react';
 
 // 格式化时间数组为易读格式
@@ -33,6 +33,7 @@ interface Props {
 const TimelineItemDrawer: React.FC<Props> = (props) => {
   const { storyItem, open, setOpen, handleDelete, handOption, disableEdit } = props;
   const intl = useIntl();
+  const { token } = theme.useToken();
 
   const { data: imagesList, run } = useRequest(
     async (itemId) => {
@@ -70,8 +71,8 @@ const TimelineItemDrawer: React.FC<Props> = (props) => {
   };
 
   return (
-    <div>
-      {/* 主时间点详情抽屉 */}
+    <>
+      {/* 只在打开时渲染抽屉 */}
       <Drawer
         width={800}
         placement="right"
@@ -134,18 +135,28 @@ const TimelineItemDrawer: React.FC<Props> = (props) => {
             </Space>
           </div>
         }>
-        <div style={{ padding: '0 24px' }}>
+        <div style={{ 
+          padding: '0 24px',
+          backgroundColor: token.colorBgContainer,
+          color: token.colorText 
+        }}>
           <div style={{ marginBottom: '24px' }}>
-            <h3>描述</h3>
-            <p style={{ fontSize: '16px', lineHeight: '1.6' }}>{storyItem.description}</p>
+            <h3 style={{ color: token.colorText }}>描述</h3>
+            <p style={{ 
+              fontSize: '16px', 
+              lineHeight: '1.6',
+              color: token.colorTextSecondary 
+            }}>
+              {storyItem.description}
+            </p>
           </div>
 
-          <Divider />
+          <Divider style={{ borderColor: token.colorBorder }} />
 
           {/* 时刻图库 */}
           {imagesList && imagesList.length > 0 && (
             <div style={{ marginBottom: '24px' }}>
-              <h3>时刻图库</h3>
+              <h3 style={{ color: token.colorText }}>时刻图库</h3>
               <div
                 style={{
                   display: 'grid',
@@ -200,7 +211,7 @@ const TimelineItemDrawer: React.FC<Props> = (props) => {
           </div>
         </div>
       </Drawer>
-    </div>
+    </>
   );
 };