支持缩略图加载，故事项新建调整

src/pages/story/components/TimelineItem/TimelineItem.tsx

@@ -1,12 +1,17 @@
-import {DeleteOutlined, DownOutlined, EditOutlined, PlusOutlined, UpOutlined} from '@ant-design/icons';
-import {useIntl, useRequest} from '@umijs/max';
-import { Button, Card, Popconfirm, message } from 'antd';
-import React, {useState} from 'react';
-import {queryStoryItemImages, removeStoryItem} from '../../service';
-import useStyles from './index.style';
-import {StoryItem} from "@/pages/story/data";
-import TimelineImage from "@/components/TimelineImage";
+import TimelineImage from '@/components/TimelineImage';
+import { StoryItem } from '@/pages/story/data';
+import {
+  DeleteOutlined,
+  DownOutlined,
+  EditOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+import { useIntl, useRequest } from '@umijs/max';
+import { Button, Card, message, Popconfirm } from 'antd';
+import React, { useState } from 'react';
+import { queryStoryItemImages, removeStoryItem } from '../../service';
 import TimelineItemDrawer from '../TimelineItemDrawer';
+import useStyles from './index.style';
 
 const TimelineItem: React.FC<{
   item: StoryItem;
@@ -18,12 +23,10 @@ const TimelineItem: React.FC<{
   const [expanded, setExpanded] = useState(false);
   const [showActions, setShowActions] = useState(false);
   const [subItemsExpanded, setSubItemsExpanded] = useState(false);
-  const [openDetail, setOpenDetail] = useState(false)
-  const { data: imagesList } = useRequest(
-    async () => {
-      return await queryStoryItemImages(item.instanceId);
-    },
-  );
+  const [openDetail, setOpenDetail] = useState(false);
+  const { data: imagesList } = useRequest(async () => {
+    return await queryStoryItemImages(item.instanceId);
+  });
   const handleDelete = async () => {
     try {
       if (!item.instanceId) return;
@@ -48,7 +51,8 @@ const TimelineItem: React.FC<{
 
   const displayedDescription = expanded
     ? item.description
-    : item.description?.substring(0, 100) + (item.description && item.description.length > 100 ? '...' : '');
+    : item.description?.substring(0, 100) +
+      (item.description && item.description.length > 100 ? '...' : '');
 
   return (
     <Card
@@ -56,11 +60,8 @@ const TimelineItem: React.FC<{
       title={item.title}
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => setShowActions(false)}
-      onClick={() => setOpenDetail(true)}
       extra={
-        <div
-          className={styles.actions}
-        >
+        <div className={styles.actions}>
           {showActions && (
             <>
               <Button
@@ -68,11 +69,11 @@ const TimelineItem: React.FC<{
                 icon={<EditOutlined />}
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleOption(item, 'editSubItem');
+                  handleOption(item, 'edit');
                 }}
                 aria-label={intl.formatMessage({ id: 'story.edit' })}
               />
-              <Button
+              {/*<Button
                 type="text"
                 icon={<PlusOutlined />}
                 onClick={(e) => {
@@ -80,13 +81,13 @@ const TimelineItem: React.FC<{
                   handleOption(item, 'addSubItem');
                 }}
                 aria-label={intl.formatMessage({ id: 'story.addSubItem' })}
-              />
+              />*/}
               <Popconfirm
                 title={intl.formatMessage({ id: 'story.deleteConfirm' })}
                 description={intl.formatMessage({ id: 'story.deleteConfirmDescription' })}
                 onConfirm={(e) => {
                   e?.stopPropagation();
-                  handleDelete()
+                  handleDelete();
                 }}
                 okText={intl.formatMessage({ id: 'story.yes' })}
                 cancelText={intl.formatMessage({ id: 'story.no' })}
@@ -107,10 +108,10 @@ const TimelineItem: React.FC<{
       hoverable
     >
       <div className={styles.content}>
-        <div className={styles.date}>
+        <div className={styles.date} onClick={() => setOpenDetail(true)}>
           {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
         </div>
-        <div className={styles.description}>
+        <div className={styles.description} onClick={() => setOpenDetail(true)}>
           {displayedDescription}
           {item.description && item.description.length > 100 && (
             <Button
@@ -160,9 +161,7 @@ const TimelineItem: React.FC<{
                     <div className={styles.subItemDate}>
                       {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
                     </div>
-                    <div className={styles.subItemContent}>
-                      {subItem.description}
-                    </div>
+                    <div className={styles.subItemContent}>{subItem.description}</div>
                   </div>
                 ))}
               </div>
@@ -170,11 +169,7 @@ const TimelineItem: React.FC<{
           </div>
         )}
       </div>
-      <TimelineItemDrawer
-        storyItem={item}
-        open={openDetail}
-        setOpen={setOpenDetail}
-      />
+      <TimelineItemDrawer storyItem={item} open={openDetail} setOpen={setOpenDetail} />
     </Card>
   );
 };