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

src/pages/gallery/components/GalleryTable.tsx

@@ -5,6 +5,7 @@ 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';
 
 interface GalleryTableProps {
   imageList: ImageItem[];
@@ -43,7 +44,7 @@ const GalleryTable: FC<GalleryTableProps> = ({
           style={{
             width: 100,
             height: 100,
-            backgroundImage: `url(/file/image-low-res/${record.instanceId})`,
+            backgroundImage: `url(/file/image-low-res/${record.instanceId}?Authorization=${getAuthization()})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',

src/pages/gallery/components/GridView.tsx

@@ -1,9 +1,12 @@
-// src/pages/gallery/components/GridView.tsx
+// src/pages/gallery\components\GridView.tsx
 import { ImageItem } from '@/pages/gallery/typings';
-import { DeleteOutlined, DownloadOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
+import { DeleteOutlined, DownloadOutlined, EyeOutlined, MoreOutlined, LoadingOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Dropdown, Menu, Spin } from 'antd';
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useState, useEffect } from 'react';
+import useAuthImageUrls from '@/components/Hooks/useAuthImageUrls';
+import { fetchImage } from '@/services/file/api';
 import '../index.css';
+import { getAuthization } from '@/utils/userUtils';
 
 interface GridViewProps {
   imageList: ImageItem[];
@@ -78,13 +81,13 @@ const GridView: FC<GridViewProps> = ({
   );
 
   // 根据视图模式确定图像 URL
-  const getImageUrl = (instanceId: string) => {
-    // 小图模式使用低分辨率图像
-    if (viewMode === 'small') {
-      return `/file/image-low-res/${instanceId}`;
+  const getImageUrl = (instanceId: string, isHighRes?: boolean) => {
+    // 小图模式使用低分辨率图像，除非明确要求高清
+    if (viewMode === 'small' && !isHighRes) {
+      return `/file/image-low-res/${instanceId}?Authorization=${getAuthization()}`;
     }
     // 其他模式使用原图
-    return `/file/image/${instanceId}`;
+    return `/file/image/${instanceId}?Authorization=${getAuthization()}`;
   };
 
   return (
@@ -106,10 +109,14 @@ const GridView: FC<GridViewProps> = ({
             style={{
               width: imageSize.width,
               height: imageSize.height,
-              backgroundImage: `url(${getImageUrl(item.instanceId)})`,
+              backgroundImage: `url(${getImageUrl(item.instanceId, false)})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               backgroundRepeat: 'no-repeat',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              position: 'relative',
             }}
             onClick={() => !batchMode && onPreview(index)}
           />
@@ -132,4 +139,4 @@ const GridView: FC<GridViewProps> = ({
   );
 };
 
-export default GridView;
+export default GridView;

src/pages/gallery/components/ListView.tsx

@@ -4,6 +4,7 @@ import { DeleteOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons
 import { Button, Card, Checkbox, Spin } from 'antd';
 import React, { FC } from 'react';
 import '../index.css';
+import { getAuthization } from '@/utils/userUtils';
 
 interface ListViewProps {
   imageList: ImageItem[];
@@ -50,10 +51,11 @@ const ListView: FC<ListViewProps> = ({
               style={{
                 width: imageSize.width,
                 height: imageSize.height,
-                backgroundImage: `url(/file/image/${item.instanceId})`,
+                backgroundImage: `url(/file/image/${item.instanceId}?Authorization=${getAuthization()})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
                 backgroundRepeat: 'no-repeat',
+                position: 'relative',
               }}
               onClick={() => !batchMode && onPreview(index)}
             />
@@ -94,4 +96,4 @@ const ListView: FC<ListViewProps> = ({
   );
 };
 
-export default ListView;
+export default ListView;

src/pages/gallery/index.tsx

@@ -1,6 +1,6 @@
 // src/pages/gallery/index.tsx
 import { ImageItem } from '@/pages/gallery/typings';
-import { deleteImage, getImagesList, uploadImage } from '@/services/file/api';
+import { deleteImage, getImagesList, uploadImage, fetchImage } from '@/services/file/api';
 import { PageContainer } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
 import type { RadioChangeEvent } from 'antd';
@@ -12,6 +12,7 @@ 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');
@@ -125,11 +126,29 @@ const Gallery: FC = () => {
   }, []);
 
   // 下载图片
-  const handleDownload = useCallback((instanceId: string, imageName?: string) => {
-    const link = document.createElement('a');
-    link.href = `/file/image/${instanceId}`;
-    link.download = imageName ?? 'default';
-    link.click();
+  const handleDownload = useCallback(async (instanceId: string, imageName?: string) => {
+    try {
+      // 使用项目中已有的fetchImage API，它会自动通过请求拦截器添加认证token
+      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);
+      }
+    } catch (error) {
+      console.error('Failed to download image:', error);
+      message.error('下载失败，请重试');
+    }
   }, []);
 
   // 上传图片
@@ -249,10 +268,10 @@ const Gallery: FC = () => {
 
     selectedRowKeys.forEach((id, index) => {
       // 添加延迟避免浏览器限制
-      setTimeout(() => {
+      setTimeout(async () => {
         const item = imageList.find((img) => img.instanceId === id);
         if (item) {
-          handleDownload(id, item.imageName);
+          await handleDownload(id, item.imageName);
         }
       }, index * 100);
     });
@@ -384,7 +403,7 @@ const Gallery: FC = () => {
           renderView()
         )}
 
-        {/* 预览组件 - 根据视图模式决定使用哪种图像 */}
+        {/* 预览组件 - 使用认证后的图像URL */}
         <Image.PreviewGroup
           preview={{
             visible: previewVisible,
@@ -398,8 +417,8 @@ const Gallery: FC = () => {
               key={item.instanceId}
               src={
                 viewMode === 'small'
-                  ? `/file/image/${item.instanceId}`
-                  : `/file/image-low-res/${item.instanceId}`
+                  ? `/file/image/${item.instanceId}?Authorization=${getAuthization()}`
+                  : `/file/image-low-res/${item.instanceId}?Authorization=${getAuthization()}`
               }
               style={{ display: 'none' }}
               alt={item.imageName}
@@ -411,4 +430,4 @@ const Gallery: FC = () => {
   );
 };
 
-export default Gallery;
+export default Gallery;