init

src/pages/list/basic-list/components/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,155 @@
+import { Badge, Col, Drawer, Row, Timeline } from 'antd';
+import React from 'react';
+
+import TimelineImage from '@/components/TimelineImage';
+import TimelineItemDrawer from '@/pages/list/basic-list/components/TimelineItemDrawer';
+import { StoryItem, TimelineEvent } from '@/pages/list/basic-list/data';
+import './index.css';
+
+interface TimelineItemProps {
+  event: StoryItem;
+  onUpdate?: (updatedEvent: TimelineEvent) => void; // 数据更新回调
+}
+
+const TimelineItem = ({ event: initialEvent, onUpdate }: TimelineItemProps) => {
+  const [openMainDrawer, setOpenMainDrawer] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(false); // 控制子项展开状态
+
+  const [openSubDrawer, setOpenSubDrawer] = React.useState(false);
+  const [selectedSubItem, setSelectedSubItem] = React.useState<TimelineEvent | null>(null);
+
+  const showMainDrawer = () => {
+    setOpenMainDrawer(true);
+  };
+
+  return (
+    <div className={`timeline-item ${expanded ? 'expanded' : ''}`}>
+      {/* 主时间线容器 */}
+      <div className={`timeline-event-container ${expanded ? 'expanded' : ''}`}>
+        <div className={`timeline-event ${expanded ? 'minimized' : ''}`}>
+          <Row gutter={24} align="middle">
+            <Col span={6}>
+              <TimelineImage
+                width={200}
+                height={200}
+                title={initialEvent.title}
+                imageInstanceId={initialEvent.coverInstanceId}
+              />
+            </Col>
+            <Col span={16} offset={2}>
+              <div className="timeline-content-text" onClick={showMainDrawer}>
+                <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>{initialEvent.title}</h2>
+                <p style={{ marginBottom: '0.5rem' }}>{initialEvent.description}</p>
+                <div style={{ color: '#666', lineHeight: '1.6' }}>
+                  <span>故事时间：{initialEvent.storyItemTime}</span>
+                  <br />
+                  <span>创建时间：{initialEvent.createTime}</span>
+                  <br />
+                  <span>更新时间：{initialEvent.updateTime}</span>
+                </div>
+              </div>
+            </Col>
+          </Row>
+
+          {/* 子时间点徽章 */}
+          {initialEvent.subItems && initialEvent.subItems.length > 0 && (
+            <Badge
+              count={`${initialEvent.subItems.length} 个子时间点`}
+              style={{
+                backgroundColor: '#1890ff',
+                position: 'absolute',
+                top: 10,
+                right: 10,
+                transform: 'translate(50%, -50%)', // 修复超出边界
+                padding: '0 6px',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: 12,
+                height: 20,
+                lineHeight: '20px',
+                textAlign: 'center',
+                minWidth: 60,
+                boxSizing: 'border-box',
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpanded(!expanded);
+              }}
+            />
+          )}
+        </div>
+
+        {/* 子时间线列表 */}
+        {initialEvent.subItems && initialEvent.subItems.length > 0 && expanded && (
+          <div className="sub-timeline-wrapper">
+            <Timeline
+              mode="left"
+              items={initialEvent.subItems.map((sub) => ({
+                children: (
+                  <div
+                    className="sub-timeline-item"
+                    style={{
+                      fontSize: '12px',
+                      padding: '8px 0',
+                      cursor: 'pointer',
+                      transition: 'background-color 0.2s',
+                      ':hover': { backgroundColor: '#f5f5f5' }, // 添加 hover 效果
+                    }}
+                  >
+                    <Row>
+                      <Col span={4}>
+                        <TimelineImage title={sub.title} imageInstanceId={sub.coverInstanceId} />
+                      </Col>
+                      <Col span={18} offset={2}>
+                        <div className="timeline-content-text" onClick={showMainDrawer}>
+                          <h2 style={{ fontSize: '1.2rem', fontWeight: 'normal' }}>{sub.title}</h2>
+                          <p style={{ marginBottom: '0.5rem' }}>{sub.description}</p>
+                          <div style={{ color: '#999', lineHeight: '1.6' }}>
+                            <span>故事时间：{sub.storyItemTime}</span>
+                            <br />
+                            <span>创建时间：{sub.createTime}</span>
+                            <br />
+                            <span>更新时间：{sub.updateTime}</span>
+                          </div>
+                        </div>
+                      </Col>
+                    </Row>
+                  </div>
+                ),
+              }))}
+            />
+          </div>
+        )}
+
+        {/* 主时间点详情抽屉 */}
+        <TimelineItemDrawer
+          storyItem={initialEvent}
+          open={openMainDrawer}
+          setOpen={setOpenMainDrawer}
+        />
+
+        {/* 子时间点详情抽屉 */}
+        {selectedSubItem && (
+          <Drawer
+            width={640}
+            placement="right"
+            onClose={() => setOpenSubDrawer(false)}
+            open={openSubDrawer}
+            title={selectedSubItem.title}
+          >
+            <p style={{ marginBottom: 24 }}>
+              <strong>描述：</strong>
+              {selectedSubItem.description}
+            </p>
+            <p>
+              <strong>时间：</strong>
+              {selectedSubItem.time || '未设置'}
+            </p>
+          </Drawer>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TimelineItem;