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

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;