feat: 支持视频上传、预览及移动端适配

1. 功能增强：
- 支持视频文件的上传、存储及缩略图自动生成
- 新增视频播放组件，支持在画廊和时间线中预览视频
- 引入 STOMP 协议支持 WebSocket 实时通知功能
- 增加分享页面（SSR 友好），支持通过 shareId 访问公开内容

2. 移动端优化：
- 新增 BottomNav 底部导航组件，优化移动端交互体验
- 引入 useIsMobile 钩子，实现响应式布局切换
- 优化时间线卡片在小屏幕下的显示效果

3. 架构与组件：
- 新增 ClientOnly 组件解决 SSR 激活不一致问题
- 新增 ResponsiveGrid 响应式网格布局组件
- 完善 Nginx 配置，增加 MinIO 对象存储代理
- 优化图片懒加载组件 TimelineImage，支持低分辨率占位图

src/pages/gallery/components/GridView.tsx

@@ -1,12 +1,17 @@
 // src/pages/gallery\components\GridView.tsx
 import { ImageItem } from '@/pages/gallery/typings';
-import { DeleteOutlined, DownloadOutlined, EyeOutlined, MoreOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Dropdown, Menu, Spin } from 'antd';
-import React, { FC, useCallback, useState, useEffect } from 'react';
-import useAuthImageUrls from '@/components/Hooks/useAuthImageUrls';
-import { fetchImage } from '@/services/file/api';
-import '../index.css';
+import { formatDuration } from '@/utils/timelineUtils';
 import { getAuthization } from '@/utils/userUtils';
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  MoreOutlined,
+  PlayCircleOutlined,
+} from '@ant-design/icons';
+import { Button, Checkbox, Dropdown, Menu, Spin } from 'antd';
+import React, { FC, useCallback } from 'react';
+import '../index.css';
 
 interface GridViewProps {
   imageList: ImageItem[];
@@ -81,13 +86,17 @@ const GridView: FC<GridViewProps> = ({
   );
 
   // 根据视图模式确定图像 URL
-  const getImageUrl = (instanceId: string, isHighRes?: boolean) => {
+  const getImageUrl = (item: ImageItem, isHighRes?: boolean) => {
+    // 如果是视频，使用封面图
+    if (item.thumbnailInstanceId) {
+      return `/file/image-low-res/${item.thumbnailInstanceId}?Authorization=${getAuthization()}`;
+    }
     // 小图模式使用低分辨率图像，除非明确要求高清
     if (viewMode === 'small' && !isHighRes) {
-      return `/file/image-low-res/${instanceId}?Authorization=${getAuthization()}`;
+      return `/file/image-low-res/${item.instanceId}?Authorization=${getAuthization()}`;
     }
     // 其他模式使用原图
-    return `/file/image/${instanceId}?Authorization=${getAuthization()}`;
+    return `/file/image/${item.instanceId}?Authorization=${getAuthization()}`;
   };
 
   return (
@@ -109,7 +118,7 @@ const GridView: FC<GridViewProps> = ({
             style={{
               width: imageSize.width,
               height: imageSize.height,
-              backgroundImage: `url(${getImageUrl(item.instanceId, false)})`,
+              backgroundImage: `url(${getImageUrl(item, false)})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               backgroundRepeat: 'no-repeat',
@@ -119,7 +128,27 @@ const GridView: FC<GridViewProps> = ({
               position: 'relative',
             }}
             onClick={() => !batchMode && onPreview(index)}
-          />
+          >
+            {(item.duration || item.thumbnailInstanceId) && (
+              <PlayCircleOutlined style={{ fontSize: '32px', color: 'rgba(255,255,255,0.8)' }} />
+            )}
+            {item.duration && (
+              <span
+                style={{
+                  position: 'absolute',
+                  bottom: 4,
+                  right: 4,
+                  background: 'rgba(0,0,0,0.5)',
+                  color: '#fff',
+                  padding: '2px 4px',
+                  borderRadius: 2,
+                  fontSize: 10,
+                }}
+              >
+                {formatDuration(item.duration)}
+              </span>
+            )}
+          </div>
           <div className="image-info">
             <div className="image-title" title={item.imageName}>
               {item.imageName}
@@ -139,4 +168,4 @@ const GridView: FC<GridViewProps> = ({
   );
 };
 
-export default GridView;
+export default GridView;