feat: 添加评论、反应、离线编辑及主题定制功能

- 实现评论系统，包括评论输入、列表展示和集成指南
- 添加反应功能组件（ReactionBar、ReactionButton、ReactionPicker）
- 实现离线编辑支持，包括同步状态管理和冲突解决
- 添加主题定制功能，支持多种配色方案和主题预览
- 新增多视图布局选项（时间线、分组、砌体视图）
- 实现个人资料编辑器，支持头像、简介和自定义字段编辑
- 添加统计页面，展示存储使用情况和上传趋势
- 新增相册管理功能，支持相册创建、编辑和照片管理
- 实现响应式设计和加载骨架屏组件
- 扩展国际化支持，新增孟加拉语、波斯语、印尼语、日语、葡萄牙语等语言
- 添加错误边界组件和离线指示器
- 更新配置文件、路由和依赖项
- 新增完整的文档、测试用例和集成指南

src/pages/story/components/TimelineItemDrawer.tsx

@@ -1,5 +1,9 @@
 // src/pages/story/components/TimelineItemDrawer.tsx
 import TimelineImage from '@/components/TimelineImage';
+import { Comments } from '@/components/Comments';
+import { ReactionBar } from '@/components/Reactions';
+import useComments from '@/hooks/useComments';
+import useReactions from '@/hooks/useReactions';
 import { StoryItem } from '@/pages/story/data';
 import { queryStoryItemImages } from '@/pages/story/service';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
@@ -44,6 +48,36 @@ const TimelineItemDrawer: React.FC<Props> = (props) => {
     },
   );
 
+  // Initialize comments for this story item
+  const {
+    comments,
+    loading: commentsLoading,
+    createLoading,
+    updateLoading,
+    deleteLoading,
+    addComment,
+    updateComment,
+    deleteComment,
+  } = useComments({
+    entityType: 'story',
+    entityId: storyItem.instanceId || '',
+    autoFetch: open,
+    autoSubscribe: open,
+  });
+
+  // Initialize reactions for this story item
+  const {
+    reactions,
+    userReaction,
+    addReaction,
+    updateReaction,
+    removeReaction,
+    actionLoading: reactionLoading,
+  } = useReactions('story', storyItem.instanceId || '', {
+    autoFetch: open,
+    autoSubscribe: open,
+  });
+
   useEffect(() => {
     if (open) {
       run(storyItem.instanceId);
@@ -209,6 +243,43 @@ const TimelineItemDrawer: React.FC<Props> = (props) => {
               </div>
             </div>
           </div>
+
+          <Divider style={{ borderColor: token.colorBorder }} />
+
+          {/* Reactions Section */}
+          <div style={{ marginBottom: '24px' }}>
+            <h3 style={{ color: token.colorText }}>互动</h3>
+            <ReactionBar
+              entityType="story"
+              entityId={storyItem.instanceId || ''}
+              reactionSummary={reactions || undefined}
+              onAdd={addReaction}
+              onRemove={removeReaction}
+              onChange={updateReaction}
+              loading={reactionLoading}
+              size="large"
+            />
+          </div>
+
+          <Divider style={{ borderColor: token.colorBorder }} />
+
+          {/* Comments Section */}
+          <div style={{ marginBottom: '24px' }}>
+            <Comments
+              entityType="story"
+              entityId={storyItem.instanceId || ''}
+              comments={comments}
+              loading={commentsLoading}
+              onCreate={addComment}
+              onEdit={updateComment}
+              onDelete={deleteComment}
+              createLoading={createLoading}
+              editLoading={updateLoading}
+              deleteLoading={deleteLoading}
+              showCard={false}
+              title="评论"
+            />
+          </div>
         </div>
       </Drawer>
     </>