增加用户中心、用户注册登录

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

@@ -3,12 +3,26 @@ 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 { Button, Card, message, Popconfirm, Tag, Space } from 'antd';
 import React, { useState } from 'react';
 import { queryStoryItemImages, removeStoryItem } from '../../service';
 import TimelineItemDrawer from '../TimelineItemDrawer';
 import useStyles from './index.style';
 
+// 格式化时间数组为易读格式
+const formatTimeArray = (time: string | number[] | undefined): string => {
+  if (!time) return '';
+  
+  // 如果是数组格式 [2025, 12, 23, 8, 55, 39]
+  if (Array.isArray(time)) {
+    const [year, month, day, hour, minute, second] = time;
+    return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
+  }
+  
+  // 如果已经是字符串格式，直接返回
+  return String(time);
+};
+
 const TimelineItem: React.FC<{
   item: StoryItem;
   handleOption: (item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => void;
@@ -20,8 +34,11 @@ const TimelineItem: React.FC<{
   const [showActions, setShowActions] = useState(false);
   const [subItemsExpanded, setSubItemsExpanded] = useState(false);
   const [openDetail, setOpenDetail] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const { data: imagesList } = useRequest(async () => {
     return await queryStoryItemImages(item.instanceId);
+  }, {
+    refreshDeps: [item.instanceId]
   });
   const handleDelete = async () => {
     try {
@@ -52,10 +69,32 @@ const TimelineItem: React.FC<{
 
   return (
     <Card
-      className={styles.timelineItem}
-      title={item.title}
-      onMouseEnter={() => setShowActions(true)}
-      onMouseLeave={() => setShowActions(false)}
+      className={`${styles.timelineItem} ${hovered ? styles.timelineItemHover : ''}`}
+      title={
+        <div className={styles.timelineItemTitle}>
+          <div className={styles.timelineItemTitleText}>{item.title}</div>
+          <Space className={styles.timelineItemTags}>
+            {item.createName && (
+              <Tag color="blue" className={styles.creatorTag}>
+                创建: {item.createName}
+              </Tag>
+            )}
+            {item.updateName && item.updateName !== item.createName && (
+              <Tag color="green" className={styles.updaterTag}>
+                更新: {item.updateName}
+              </Tag>
+            )}
+          </Space>
+        </div>
+      }
+      onMouseEnter={() => {
+        setShowActions(true);
+        setHovered(true);
+      }}
+      onMouseLeave={() => {
+        setShowActions(false);
+        setHovered(false);
+      }}
       extra={
         <div className={styles.actions}>
           {showActions && (
@@ -100,12 +139,14 @@ const TimelineItem: React.FC<{
           )}
         </div>
       }
-      // onClick={() => onDetail(item)}
       hoverable
     >
       <div className={styles.content}>
         <div className={styles.date} onClick={() => setOpenDetail(true)}>
-          {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
+          <Space size="small" className={styles.dateInfo}>
+            <span className={styles.time}>{formatTimeArray(item.storyItemTime)}</span>
+            {item.location && <span className={styles.location}>📍 {item.location}</span>}
+          </Space>
         </div>
         <div className={styles.description} onClick={() => setOpenDetail(true)}>
           {displayedDescription}
@@ -125,13 +166,13 @@ const TimelineItem: React.FC<{
         </div>
         {imagesList && imagesList.length > 0 && (
           <>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
+            <div className={styles.timelineItemImages}>
               {imagesList.map((imageInstanceId, index) => (
                 <TimelineImage
                   key={imageInstanceId + index}
                   title={imageInstanceId}
                   imageInstanceId={imageInstanceId}
-                  style={{ maxWidth: '100%', height: 'auto' }} // 添加响应式样式
+                  className={styles.timelineImage}
                 />
               ))}
             </div>
@@ -156,7 +197,7 @@ const TimelineItem: React.FC<{
                 {item.subItems.map((subItem) => (
                   <div key={subItem.id} className={styles.subItem}>
                     <div className={styles.subItemDate}>
-                      {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
+                      {formatTimeArray(item.storyItemTime)} {item.location ? `创建于${item.location}` : ''}
                     </div>
                     <div className={styles.subItemContent}>{subItem.description}</div>
                   </div>
@@ -177,4 +218,4 @@ const TimelineItem: React.FC<{
   );
 };
 
-export default TimelineItem;
+export default TimelineItem;