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

1. 功能增强： - 支持视频文件的上传、存储及缩略图自动生成 - 新增视频播放组件，支持在画廊和时间线中预览视频 - 引入 STOMP 协议支持 WebSocket 实时通知功能 - 增加分享页面（SSR 友好），支持通过 shareId 访问公开内容 2. 移动端优化： - 新增 BottomNav 底部导航组件，优化移动端交互体验 - 引入 useIsMobile 钩子，实现响应式布局切换 - 优化时间线卡片在小屏幕下的显示效果 3. 架构与组件： - 新增 ClientOnly 组件解决 SSR 激活不一致问题 - 新增 ResponsiveGrid 响应式网格布局组件 - 完善 Nginx 配置，增加 MinIO 对象存储代理 - 优化图片懒加载组件 TimelineImage，支持低分辨率占位图
2026-02-12 16:55:05 +08:00
parent 336208b7ce
commit cd752d97d8
39 changed files with 1729 additions and 537 deletions
--- a/src/pages/gallery/components/GalleryTable.tsx
+++ b/src/pages/gallery/components/GalleryTable.tsx
@@ -1,11 +1,12 @@
 // src/pages/gallery/components/GalleryTable.tsx
 import { ImageItem } from '@/pages/gallery/typings';
 import { formatBytes } from '@/utils/timelineUtils';
+import { getAuthization } from '@/utils/userUtils';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { FC } from 'react';
 import '../index.css';
-import { getAuthization } from '@/utils/userUtils';
+import { PlayCircleOutlined } from '@ant-design/icons';

 interface GalleryTableProps {
  imageList: ImageItem[];
@@ -39,19 +40,32 @@ const GalleryTable: FC<GalleryTableProps> = ({
      title: '图片',
      dataIndex: 'instanceId',
      width: 120,
-      render: (_, record) => (
-        <div
-          style={{
-            width: 100,
-            height: 100,
-            backgroundImage: `url(/file/image-low-res/${record.instanceId}?Authorization=${getAuthization()})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            borderRadius: 4,
-          }}
-        />
-      ),
+      render: (_, record) => {
+        const imageUrl = record.thumbnailInstanceId
+          ? `/file/image-low-res/${record.thumbnailInstanceId}?Authorization=${getAuthization()}`
+          : `/file/image-low-res/${record.instanceId}?Authorization=${getAuthization()}`;
+
+        return (
+          <div
+            style={{
+              width: 100,
+              height: 100,
+              backgroundImage: `url(${imageUrl})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+              borderRadius: 4,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {(record.duration || record.thumbnailInstanceId) && (
+              <PlayCircleOutlined style={{ fontSize: '24px', color: 'rgba(255,255,255,0.8)' }} />
+            )}
+          </div>
+        );
+      },
    },
    {
      title: '名称',
--- a/src/pages/gallery/components/GalleryToolbar.tsx
+++ b/src/pages/gallery/components/GalleryToolbar.tsx
@@ -37,10 +37,10 @@ const GalleryToolbar: FC<GalleryToolbarProps> = ({
                                                   uploading
                                                 }) => {
  const beforeUpload = (file: UploadFile) => {
-    // 只允许上传图片
-    const isImage = file.type?.startsWith('image/');
-    if (!isImage) {
-      console.error(`${file.name} 不是图片文件`);
+    // 允许上传图片和视频
+    const isImageOrVideo = file.type?.startsWith('image/') || file.type?.startsWith('video/');
+    if (!isImageOrVideo) {
+      console.error(`${file.name} 不是图片或视频文件`);
      return false;
    }
    return true;
@@ -75,12 +75,13 @@ const GalleryToolbar: FC<GalleryToolbarProps> = ({
            customRequest={({ file }) => onUpload(file as UploadFile)}
            showUploadList={false}
            multiple
+            accept="image/*,video/*"
          >
            <Button
              icon={<UploadOutlined />}
              loading={uploading}
            >
-              上传图片
+              上传
            </Button>
          </Upload>
          <Button onClick={onBatchModeToggle}>批量操作</Button>
--- a/src/pages/gallery/components/GridView.tsx
+++ b/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;
--- a/src/pages/gallery/components/ListView.tsx
+++ b/src/pages/gallery/components/ListView.tsx
@@ -1,6 +1,6 @@
 import { ImageItem } from '@/pages/gallery/typings';
 import { formatBytes } from '@/utils/timelineUtils';
-import { DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons';
+import { DeleteOutlined, DownloadOutlined, EyeOutlined, PlayCircleOutlined } from '@ant-design/icons';
 import { Button, Card, Checkbox, Spin } from 'antd';
 import React, { FC } from 'react';
 import '../index.css';
@@ -37,7 +37,12 @@ const ListView: FC<ListViewProps> = ({
      onScroll={onScroll}
      style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}
    >
-      {imageList.map((item: ImageItem, index: number) => (
+      {imageList.map((item: ImageItem, index: number) => {
+        const imageUrl = item.thumbnailInstanceId 
+            ? `/file/image/${item.thumbnailInstanceId}?Authorization=${getAuthization()}`
+            : `/file/image/${item.instanceId}?Authorization=${getAuthization()}`;
+
+        return (
        <Card key={item.instanceId} className="list-item-card" size="small">
          <div className="list-item">
            {batchMode && (
@@ -51,14 +56,21 @@ const ListView: FC<ListViewProps> = ({
              style={{
                width: imageSize.width,
                height: imageSize.height,
-                backgroundImage: `url(/file/image/${item.instanceId}?Authorization=${getAuthization()})`,
+                backgroundImage: `url(${imageUrl})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
              }}
              onClick={() => !batchMode && onPreview(index)}
-            />
+            >
+               {(item.duration || item.thumbnailInstanceId) && (
+                   <PlayCircleOutlined style={{ fontSize: '48px', color: 'rgba(255,255,255,0.8)' }} />
+               )}
+            </div>
            <div className="list-item-info">
              <div className="image-title" title={item.imageName}>
                {item.imageName}
@@ -86,7 +98,7 @@ const ListView: FC<ListViewProps> = ({
            </div>
          </div>
        </Card>
-      ))}
+      )})}
      {loadingMore && (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin />
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -1,6 +1,15 @@
 // src/pages/gallery/index.tsx
 import { ImageItem } from '@/pages/gallery/typings';
-import { deleteImage, getImagesList, uploadImage, fetchImage } from '@/services/file/api';
+import {
+  deleteImage,
+  fetchImage,
+  getImagesList,
+  getUploadUrl,
+  getVideoUrl,
+  saveFileMetadata,
+  uploadImage,
+} from '@/services/file/api';
+import { getAuthization } from '@/utils/userUtils';
 import { PageContainer } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
 import type { RadioChangeEvent } from 'antd';
@@ -12,7 +21,6 @@ import GalleryToolbar from './components/GalleryToolbar';
 import GridView from './components/GridView';
 import ListView from './components/ListView';
 import './index.css';
-import { getAuthization } from '@/utils/userUtils';

 const Gallery: FC = () => {
  const [viewMode, setViewMode] = useState<'small' | 'large' | 'list' | 'table'>('small');
@@ -22,6 +30,12 @@ const Gallery: FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const [batchMode, setBatchMode] = useState(false);
  const [uploading, setUploading] = useState(false);
+  const [videoPreviewVisible, setVideoPreviewVisible] = useState(false);
+  const [currentVideo, setCurrentVideo] = useState<{
+    videoUrl: string;
+    thumbnailUrl?: string;
+  } | null>(null);
+
  const pageSize = 50;
  const initPagination = { current: 1, pageSize: 5 };

@@ -110,10 +124,33 @@ const Gallery: FC = () => {
  );

  // 处理图片预览
-  const handlePreview = useCallback((index: number) => {
-    setPreviewCurrent(index);
-    setPreviewVisible(true);
-  }, []);
+  const handlePreview = useCallback(
+    async (index: number) => {
+      const item = imageList[index];
+      if (item.duration || item.thumbnailInstanceId) {
+        // Check if it's a video
+        try {
+          const res = await getVideoUrl(item.instanceId);
+          if (res.code === 200 && res.data) {
+            setCurrentVideo({
+              videoUrl: res.data,
+              thumbnailUrl: item.thumbnailInstanceId,
+            });
+            setVideoPreviewVisible(true);
+          } else {
+            message.error('获取视频地址失败');
+          }
+        } catch (e) {
+          console.error(e);
+          message.error('获取视频地址失败');
+        }
+      } else {
+        setPreviewCurrent(index);
+        setPreviewVisible(true);
+      }
+    },
+    [imageList],
+  );

  // 关闭预览
  const handlePreviewClose = useCallback(() => {
@@ -129,19 +166,19 @@ const Gallery: FC = () => {
  const handleDownload = useCallback(async (instanceId: string, imageName?: string) => {
    try {
      // 使用项目中已有的fetchImage API，它会自动通过请求拦截器添加认证token
-      const {data: response} = await fetchImage(instanceId);
-      
+      const { data: response } = await fetchImage(instanceId);
+
      if (response) {
        // 创建一个临时的URL用于下载
        const blob = response;
        const url = URL.createObjectURL(blob);
-        
+
        // 创建一个临时的下载链接
        const link = document.createElement('a');
        link.href = url;
        link.download = imageName ?? 'image';
        link.click();
-        
+
        // 清理临时URL
        URL.revokeObjectURL(url);
      }
@@ -151,12 +188,128 @@ const Gallery: FC = () => {
    }
  }, []);

-  // 上传图片
+  const handleVideoUpload = async (file: UploadFile) => {
+    setUploading(true);
+    const hide = message.loading('正在处理视频...', 0);
+
+    try {
+      // 1. 获取上传 URL
+      const fileName = `${Date.now()}-${file.name}`;
+      const uploadUrlRes = await getUploadUrl(fileName);
+      if (uploadUrlRes.code !== 200) throw new Error('获取上传链接失败');
+      const uploadUrl = uploadUrlRes.data;
+
+      // 2. 上传视频到 MinIO
+      await fetch(uploadUrl, {
+        method: 'PUT',
+        body: file as any,
+      });
+
+      // 3. 生成缩略图
+      let thumbnailInstanceId = '';
+      let duration = 0;
+
+      try {
+        const videoEl = document.createElement('video');
+        videoEl.preload = 'metadata';
+        videoEl.src = URL.createObjectURL(file as any);
+        videoEl.muted = true;
+        videoEl.playsInline = true;
+
+        await new Promise((resolve, reject) => {
+          videoEl.onloadedmetadata = () => {
+            // 尝试跳转到第1秒以获取更好的缩略图
+            videoEl.currentTime = Math.min(1, videoEl.duration);
+          };
+          videoEl.onseeked = () => resolve(true);
+          videoEl.onerror = reject;
+        });
+
+        duration = Math.floor(videoEl.duration);
+
+        const canvas = document.createElement('canvas');
+        canvas.width = videoEl.videoWidth;
+        canvas.height = videoEl.videoHeight;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
+          const thumbnailBlob = await new Promise<Blob | null>((r) =>
+            canvas.toBlob(r, 'image/jpeg', 0.7),
+          );
+
+          if (thumbnailBlob) {
+            const thumbName = `thumb-${Date.now()}.jpg`;
+            const thumbUrlRes = await getUploadUrl(thumbName);
+            if (thumbUrlRes.code === 200) {
+              await fetch(thumbUrlRes.data, { method: 'PUT', body: thumbnailBlob });
+              const thumbMetaRes = await saveFileMetadata({
+                imageName: thumbName,
+                objectKey: thumbName,
+                size: thumbnailBlob.size,
+                contentType: 'image/jpeg',
+              });
+              if (thumbMetaRes.code === 200) {
+                thumbnailInstanceId = thumbMetaRes.data;
+              }
+            }
+          }
+        }
+        URL.revokeObjectURL(videoEl.src);
+      } catch (e) {
+        console.warn('缩略图生成失败', e);
+      }
+
+      // 4. 保存视频元数据
+      await saveFileMetadata({
+        imageName: file.name,
+        objectKey: fileName,
+        size: file.size,
+        contentType: file.type || 'video/mp4',
+        thumbnailInstanceId: thumbnailInstanceId,
+        duration: duration,
+      });
+
+      message.success('视频上传成功');
+
+      // 刷新列表
+      if (viewMode === 'table') {
+        fetchTableData({
+          current: tablePagination.current,
+          pageSize: tablePagination.pageSize,
+        });
+      } else {
+        refresh();
+      }
+    } catch (error) {
+      console.error(error);
+      message.error('视频上传失败');
+    } finally {
+      hide();
+      setUploading(false);
+    }
+  };
+
+  // 上传图片/视频
  const handleUpload = useCallback(
    async (file: UploadFile) => {
      // 检查文件类型
+      // 优先检查 mime type
+      let isVideo = file.type?.startsWith('video/');
+
+      // 如果 mime type 不明确，检查扩展名
+      if (!isVideo && file.name) {
+        const ext = file.name.split('.').pop()?.toLowerCase();
+        if (ext && ['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv', 'wmv'].includes(ext)) {
+          isVideo = true;
+        }
+      }
+
+      if (isVideo) {
+        await handleVideoUpload(file);
+        return;
+      }
      if (!file.type?.startsWith('image/')) {
-        message.error('只能上传图片文件！');
+        message.error('只能上传图片或视频文件！');
        return;
      }

@@ -403,6 +556,28 @@ const Gallery: FC = () => {
          renderView()
        )}

+        {/* 视频预览 Modal */}
+        <Modal
+          open={videoPreviewVisible}
+          footer={null}
+          onCancel={() => {
+            setVideoPreviewVisible(false);
+            setCurrentVideo(null);
+          }}
+          width={800}
+          destroyOnClose
+          centered
+        >
+          {currentVideo && (
+            <video
+              src={currentVideo.videoUrl}
+              controls
+              autoPlay
+              style={{ width: '100%', maxHeight: '80vh' }}
+            />
+          )}
+        </Modal>
+
        {/* 预览组件 - 使用认证后的图像URL */}
        <Image.PreviewGroup
          preview={{
@@ -430,4 +605,4 @@ const Gallery: FC = () => {
  );
 };

-export default Gallery;
+export default Gallery;
--- a/src/pages/gallery/typings.d.ts
+++ b/src/pages/gallery/typings.d.ts
@@ -5,4 +5,6 @@ export interface ImageItem {
  createTime?: string;
  updateTime?: string;
  uploadTime?: string;
+  thumbnailInstanceId?: string;
+  duration?: number;
 }