@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/FileManager/MoveCopyToProjectModal.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Modal, message, Alert } from 'antd';
+import ProjectSelector from '../ProjectSelector/index';
+import { API } from '../../api/index';
+import { ResponseCode } from '../../api/_base';
+
+interface MoveCopyFileInfo {
+  fileName: string;
+  fileType: string;
+}
+
+interface MoveCopyToProjectModalProps {
+  visible: boolean;
+  fileIds: string[];
+  /** 当前操作的文件/文件夹信息（用于文件夹场景的文案展示） */
+  files?: MoveCopyFileInfo[];
+  currentProjectId: string;
+  mode: 'move' | 'copy';
+  onCancel: () => void;
+  onSuccess: () => void;
+}
+
+export const MoveCopyToProjectModal: React.FC<MoveCopyToProjectModalProps> = ({
+  visible,
+  fileIds,
+  files,
+  currentProjectId,
+  mode,
+  onCancel,
+  onSuccess,
+}) => {
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState<string | undefined>(undefined);
+
+  // 当前仅文件夹入口为单选操作
+  const isFolder = files?.length === 1 && files[0].fileType === 'folder';
+  const actionText = mode === 'move' ? '移动' : '复制';
+
+  const handleSubmit = async () => {
+    if (!selectedProjectId) {
+      message.warning('请选择目标项目');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const apiMethod = mode === 'move'
+        ? API.project.file.moveFileToProject
+        : API.project.file.copyFileToProject;
+
+      // 处理多个文件
+      const results = await Promise.all(
+        fileIds.map((fileId) =>
+          apiMethod({ projectId: selectedProjectId, fileId })
+        )
+      );
+
+      const failedCount = results.filter((r) => r.code !== ResponseCode.SUCCESS).length;
+      if (failedCount === 0) {
+        if (isFolder) {
+          message.success(`文件夹复制成功，目标项目中的文件夹名为：${results[0].data}`);
+        } else {
+          message.success(`${actionText}成功, 文件名为：${results[0].data}`);
+        }
+        onSuccess();
+      } else if (failedCount < fileIds.length) {
+        message.warning(`部分${isFolder ? '文件夹' : '文件'}${actionText}成功`);
+        onSuccess();
+      } else {
+        message.error(`${actionText}失败`);
+      }
+    } catch (error) {
+      message.error(`${actionText}失败`);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const modalTitle = isFolder
+    ? '复制文件夹到其他项目'
+    : mode === 'move' ? '移动到其他项目' : '复制到其他项目';
+
+  return (
+    <Modal
+      title={modalTitle}
+      className='ant-modal-nofull'
+      open={visible}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+      okText="确定"
+      cancelText="取消"
+      confirmLoading={submitting}
+      okButtonProps={{ disabled: !selectedProjectId }}
+      width={480}
+    >
+      {isFolder && (
+        <Alert
+          className="mb-3"
+          type="info"
+          showIcon
+          message="文件夹内的全部子文件夹和文件将一并复制到目标项目的根目录，重名时会自动追加数字后缀。"
+        />
+      )}
+      <div className="w-full flex items-center justify-center">
+        <ProjectSelector
+          value={selectedProjectId ? [selectedProjectId] : undefined}
+          onChange={(projectIds) => {
+            setSelectedProjectId(projectIds[0]);
+          }}
+          className='w-[100%]'
+          excludeProjectIds={[currentProjectId]}
+          placeholder="请选择目标项目"
+          multiple={false}
+          allowClear={true}
+        />
+      </div>
+    </Modal>
+  );
+};

package/src/ui/FileManager/ShareToWechatModal.tsx

@@ -0,0 +1,419 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, message, Button } from 'antd';
+import { CopyOutlined, ShareAltOutlined } from '@ant-design/icons';
+import { ProjectFile } from './types';
+import { downloadFile, getFileUrl } from '../UIFilePreview/previewUtils';
+import { AuthorizationHandler } from '../../api/_base';
+import { CacheFileContent } from '../../utils/CacheFileContent';
+import { copyToClipboard } from '../../utils/clipboard';
+
+interface ShareToWechatModalProps {
+  visible: boolean;
+  file: ProjectFile | null;
+  onClose: () => void;
+  onFileCached?: (fileId: string) => void;
+}
+
+// 根据文件名扩展名推断 MIME 类型。
+// 服务端对这些文件资源常返回 application/octet-stream 或不返回 Content-Type，
+// 此时需推断出正确 MIME 供 navigator.share({ files }) 使用。
+const MIME_BY_EXT: Record<string, string> = {
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  pdf: 'application/pdf',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  txt: 'text/plain',
+  csv: 'text/csv',
+  mp4: 'video/mp4',
+  mp3: 'audio/mpeg',
+  zip: 'application/zip',
+};
+const getMimeFromFilename = (fileName: string): string => {
+  const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
+  return MIME_BY_EXT[ext] ?? '';
+};
+
+export const ShareToWechatModal: React.FC<ShareToWechatModalProps> = ({
+  visible,
+  file,
+  onClose,
+  onFileCached,
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [downloaded, setDownloaded] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [hasNativeShare, setHasNativeShare] = useState(false);
+  // PWA standalone 模式（从主屏幕打开）。iOS standalone PWA 不支持 navigator.share（iOS < 16.4），
+  // 需引导用户在系统浏览器中打开
+  const [isWechatBrowser, setIsWechatBrowser] = useState(false);
+  const [isStandalone, setIsStandalone] = useState(false);
+
+  // 预取的文件 blob。移动端有 navigator.share 时，需在用户手势内同步调用它，
+  // 因此在弹窗打开时提前拉取，避免点击分享时 await 网络请求导致手势失效（iOS 抛 NotAllowedError）
+  const blobRef = useRef<Blob | null>(null);
+
+  const shareLink = useMemo(() => {
+    if (!file) return '';
+    return `${window.location.origin}/filepreview?fileid=${file.id}&path=${encodeURIComponent(file.fileResourcePath)}&name=${encodeURIComponent(file.fileName)}`;
+  }, [file]);
+
+  useEffect(() => {
+    if (!visible) {
+      blobRef.current = null;
+      return;
+    }
+    const ua = navigator.userAgent || '';
+    const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+    // 微信内置浏览器检测：部分微信版本会限制 navigator.share，需在不支持时回退到复制链接
+    const isWechatBrowser = /MicroMessenger/i.test(ua);
+    // standalone 检测：PWA 从主屏幕打开时 display-mode 为 standalone（iOS 也可用 navigator.standalone）
+    const standalone = window.matchMedia('(display-mode: standalone)').matches || Boolean((navigator as any).standalone);
+    const nativeShare = !!navigator.share;
+
+    console.log('[ShareToWechat] 环境检测:', {
+      userAgent: ua,
+      isMobile: mobile,
+      isWechatBrowser,
+      hasNativeShare: nativeShare,
+      protocol: window.location.protocol,
+      hostname: window.location.hostname,
+      standalone,
+    });
+
+    setIsMobile(mobile);
+    setIsWechatBrowser(isWechatBrowser);
+    // 只要浏览器支持 navigator.share 就启用：微信内置浏览器中也先尝试调用系统分享面板，
+    // 失败时由 handleShare 内部回退到下载（恢复早期可对 word 等文件触发 navigator.share 的行为）
+    setHasNativeShare(nativeShare);
+    setIsStandalone(standalone);
+    setDownloaded(false);
+    setIsProcessing(false);
+    blobRef.current = null;
+
+    // 只有移动端且支持分享 API 时才预取 blob（文件分享需要 blob，链接分享不需要）。
+    // 预取不阻塞分享按钮：即使未就绪，点击时也会回退到链接分享（无需 blob），
+    // 避免 prefetch 卡住时按钮被 loading 永久禁用、navigator.share 永不触发。
+    if (mobile && nativeShare) {
+      getFileBlob()
+        .then((blob) => { blobRef.current = blob; })
+        .catch((err) => { console.error('[ShareToWechat] 预取文件失败:', err); });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  const getFileBlob = async (): Promise<Blob> => {
+    if (!file) throw new Error('文件不存在');
+
+    if (file.hasLocalCache && file.id) {
+      try {
+        const cached = await CacheFileContent.getCachedContent(file.id);
+        if (cached) {
+          console.log('[ShareToWechat] 使用本地缓存的文件');
+          return cached.content;
+        }
+      } catch (error) {
+        console.error('[ShareToWechat] 读取缓存失败，将从网络获取:', error);
+      }
+    }
+
+    console.log('[ShareToWechat] 从网络获取文件');
+    const url = getFileUrl(file.fileResourcePath);
+    if (!url) {
+      throw new Error('文件资源路径不可用');
+    }
+
+    const headers: Record<string, string> = {} as any;
+    (headers as any).set = (key: string, value: string) => {
+      headers[key] = value;
+    };
+    AuthorizationHandler.requestHandleSid({ headers });
+
+    const response = await fetch(url, {
+      headers: { Authorization: headers.Authorization || '' },
+      credentials: 'include',
+      mode: 'cors',
+    });
+
+    if (!response.ok) {
+      throw new Error(`文件加载失败，状态码 ${response.status}`);
+    }
+
+    const blob = await response.blob();
+
+    if (file.id) {
+      try {
+        await CacheFileContent.saveToCache(file.id, blob, file.crc32);
+        console.log('[ShareToWechat] 已保存到本地缓存');
+        onFileCached?.(file.id);
+      } catch (error) {
+        console.error('[ShareToWechat] 保存到缓存失败:', error);
+      }
+    }
+
+    return blob;
+  };
+
+  const handleShare = async () => {
+    if (!file) return;
+
+    // 移动端且有 navigator.share：真正调用系统分享面板（内含微信选项）
+    if (isMobile && hasNativeShare) {
+      // 注意：不在此处调用 setIsProcessing(true)，
+      // 因为 React 重渲染会破坏 iOS Safari 的用户手势上下文，
+      // 导致 navigator.share() 抛出 NotAllowedError，系统分享面板不弹出。
+      try {
+        const blob = blobRef.current;
+        // 不在此处 await 拉取 blob：任何 await 都可能消耗 Android 的 transient activation，
+        // 导致 navigator.share 抛 "NotAllowedError: Permission denied"。
+        // blob 由弹窗打开时预取；若未就绪则跳过文件分享，直接走链接分享（无需 blob）。
+        let shareCalled = false;
+        // 1) 优先文件分享（需 blob 就绪且浏览器支持 canShare files）
+        if (blob && !!navigator.canShare) {
+          // MIME 类型处理：
+          // - 'application/octet-stream' 会被 Android 以 "NotAllowedError: Permission denied" 拒绝；
+          // - 空类型在 Android 上对 office 文档也不可靠（浏览器推断可能不触发系统分享）；
+          // - 正确做法：blob.type 有效时直接用，否则按文件名扩展名推断正确 MIME。
+          //   Android 系统分享菜单本身支持 office 文档，只要 MIME 正确即可分享。
+          //   之前的 "Permission denied" 实为 await getFileBlob() 消耗了 transient activation 所致，
+          //   现已移除该 await（blob 仅靠预取），手势完好，MIME 正确即可成功。
+          const fileType = blob.type && blob.type !== 'application/octet-stream'
+            ? blob.type
+            : getMimeFromFilename(file.fileName);
+          const fileObj = new File([blob], file.fileName, { type: fileType });
+          console.log('[ShareToWechat] 准备文件分享:', {
+            fileName: file.fileName,
+            blobType: blob.type,
+            fileType,
+            blobSize: blob.size,
+            canShare: navigator.canShare({ files: [fileObj] }),
+          });
+          if (navigator.canShare({ files: [fileObj] })) {
+            shareCalled = true;
+            try {
+              await navigator.share({
+                files: [fileObj],
+                title: file.fileName,
+                text: `请查看文件：${file.fileName}`,
+              });
+              message.success('分享成功');
+              onClose();
+              return;
+            } catch (err) {
+              if ((err as Error).name === 'AbortError') {
+                message.info('分享已取消');
+                return;
+              }
+              // navigator.share 调用（即使失败）会消耗用户手势，
+              // 后续 navigator.share 必然抛 "Must be handling a user gesture"，因此直接回退下载。
+              console.warn('[ShareToWechat] 文件分享失败，回退下载:', err);
+            }
+          }
+        }
+        // 2) 链接分享（仅在未调用过 navigator.share 时尝试，手势仍有效）
+        if (!shareCalled) {
+          try {
+            await navigator.share({
+              title: file.fileName,
+              text: `请查看文件：${file.fileName}`,
+              url: shareLink,
+            });
+            message.success('分享成功');
+            onClose();
+            return;
+          } catch (err) {
+            if ((err as Error).name === 'AbortError') {
+              message.info('分享已取消');
+              return;
+            }
+            console.warn('[ShareToWechat] 链接分享失败，回退下载:', err);
+          }
+        }
+      } catch (err) {
+        console.error('[ShareToWechat] 分享过程异常:', err);
+      }
+    }
+
+    // 桌面端或移动端无 navigator.share：下载文件
+    setIsProcessing(true);
+    try {
+      await downloadFile(file.fileResourcePath, file.fileName, file.id, file.crc32);
+      setDownloaded(true);
+      onFileCached?.(file.id);
+    } catch (error) {
+      console.error('下载失败:', error);
+      // downloadFile 内部已统一提示下载失败，此处不重复提示
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleOpenWechat = async () => {
+    if (!file) return;
+    // 先复制链接到剪贴板，再尝试通过 URL scheme 打开微信
+    try {
+      await copyToClipboard(shareLink);
+    } catch (err) {
+      console.warn('[ShareToWechat] 复制链接失败:', err);
+    }
+    // 通过 weixin:// URL scheme 打开微信
+    window.location.href = 'weixin://';
+    message.info('链接已复制，请在微信聊天中粘贴发送');
+  };
+
+  const handleCopyLink = async () => {
+    if (!file) return;
+    try {
+      await copyToClipboard(shareLink);
+      message.success('分享链接已复制');
+    } catch (error) {
+      message.error('复制链接失败');
+      console.error('复制失败:', error);
+    }
+  };
+
+  // standalone PWA 且无 navigator.share：需引导用户在系统浏览器中打开
+  const needOpenInBrowser = isStandalone && !hasNativeShare;
+
+  // 主按钮文字：按环境区分
+  const mainButtonText = (): string => {
+    if (isProcessing) return '处理中...';
+    if (needOpenInBrowser) return '在浏览器中打开';
+    if (isMobile && hasNativeShare) return '分享到微信';
+    if (isWechatBrowser) return '复制链接';
+    if (isMobile) return '打开微信';
+    return '下载文件';
+  };
+
+  // 顶部提示文字
+  const tipText = (): string => {
+    if (needOpenInBrowser) {
+      return '当前为桌面应用模式，不支持直接分享。请点击下方按钮在浏览器中打开后分享';
+    }
+    if (isMobile && hasNativeShare) {
+      return '点击下方按钮，在系统分享面板中选择微信发送';
+    }
+    if (isWechatBrowser) {
+      return '点击下方按钮复制链接，然后点击右上角「···」→「发送给朋友」即可分享';
+    }
+    if (isMobile) {
+      return '点击下方按钮打开微信，链接已自动复制，请在聊天中粘贴发送';
+    }
+    return '请下载文件后，在微信中发送给好友';
+  };
+
+  if (!file) return null;
+
+  return (
+    <Modal
+      open={visible}
+      onCancel={onClose}
+      title="分享到微信"
+      footer={null}
+      width={320}
+      className="ant-modal-nofull"
+    >
+      <div className="flex flex-col items-center">
+        <div className="mb-4 text-center">
+          <p className="text-sm text-gray-600">{tipText()}</p>
+        </div>
+
+        <div className="w-full mb-4">
+          <div className="bg-gray-50 rounded-lg p-3">
+            <p className="text-sm font-medium text-gray-700 truncate">
+              {file.fileName}
+            </p>
+            <p className="text-xs text-gray-400 mt-1">
+              {(file.fileSize / 1024 / 1024).toFixed(2)} MB
+            </p>
+            {file.hasLocalCache && (
+              <p className="text-xs text-green-500 mt-1">
+                📁 已缓存，可离线使用
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="w-full space-y-2">
+          {needOpenInBrowser ? (
+            // standalone PWA 无 navigator.share：用 <a target="_blank"> 在系统浏览器中打开
+            <Button
+              type="primary"
+              block
+              icon={<ShareAltOutlined />}
+              href={window.location.href}
+              // @ts-ignore antd Button href 模式下 target 透传到 <a>
+              target="_blank"
+              rel="noopener"
+            >
+              {mainButtonText()}
+            </Button>
+          ) : isWechatBrowser && !hasNativeShare ? (
+            // 微信内置浏览器且 navigator.share 不可用：weixin:// 也无意义（已在微信内）
+            // 引导用户复制链接后通过微信右上角菜单分享
+            <Button
+              type="primary"
+              block
+              icon={<CopyOutlined />}
+              onClick={handleCopyLink}
+            >
+              {mainButtonText()}
+            </Button>
+          ) : isMobile && !hasNativeShare ? (
+            // 移动端非微信浏览器但无 navigator.share：通过 URL scheme 打开微信
+            <Button
+              type="primary"
+              block
+              icon={<ShareAltOutlined />}
+              onClick={handleOpenWechat}
+            >
+              {mainButtonText()}
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              block
+              icon={<ShareAltOutlined />}
+              loading={isProcessing}
+              onClick={handleShare}
+            >
+              {mainButtonText()}
+            </Button>
+          )}
+
+          {/* 辅助按钮：非微信浏览器且不支持原生分享时显示复制链接，桌面端也显示 */}
+          {!isWechatBrowser && !(isMobile && hasNativeShare) && (
+            <Button
+              block
+              icon={<CopyOutlined />}
+              onClick={handleCopyLink}
+            >
+              复制分享链接
+            </Button>
+          )}
+        </div>
+
+        {downloaded && (
+          <div className="mt-4 pt-4 border-t border-gray-100 w-full">
+            <div className="space-y-2">
+              <p className="text-xs text-gray-400 text-center">
+                💡 分享方式：打开微信 → 进入聊天窗口
+              </p>
+              <p className="text-xs text-gray-400 text-center">
+                点击右下角「+」→「文件」→ 选择刚下载的文件
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};