openxiangda-cli 2.0.0-alpha.58 → 2.0.0-alpha.59

package/template/apps/web/src/InstrumentForm.tsx

@@ -1,9 +1,5 @@
 import {
-  DownloadOutlined,
-  EyeOutlined,
-  PaperClipOutlined,
   PictureOutlined,
-  PlusOutlined,
   ReloadOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
@@ -17,28 +13,24 @@ import {
   Input,
   InputNumber,
   Select,
-  Space,
   Switch,
   Tag,
   Timeline,
   Typography,
   Upload,
-  type UploadFile,
 } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { DataAuditEntry, DataFileRef } from 'openxiangda-contracts/browser';
 import {
   AuthoritativeSelector,
   ResolvedValueText,
 } from './AuthoritativeSelector';
+import { AttachmentFileList } from './components/platform-fields/AttachmentFileList';
 import { PlatformDirectoryPicker } from './components/platform-fields/PlatformDirectoryPicker';
 import { instrumentFields, sectionTitles, type InstrumentField } from './fields';
 import type { InstrumentRecord } from './instrument';
-import {
-  instrumentDataApi,
-  instrumentFileContentUrl,
-} from './platform-client';
+import { instrumentDataApi } from './platform-client';
 import { useRuntime } from './runtime';
 
 type Values = Record<string, unknown>;
@@ -335,18 +327,13 @@ function FileValue({
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState('');
   const refs = Array.isArray(value) ? value : value ? [value] : [];
-  const files: UploadFile[] = refs.map(file => ({
-    uid: file.id,
-    name: file.name,
-    size: file.size,
-    type: file.contentType,
-    status: 'done',
-    url: instrumentFileContentUrl(file.id),
-  }));
+  const refsRef = useRef(refs);
+  useEffect(() => {
+    refsRef.current = refs;
+  }, [refs]);
   const uploadProps = {
     accept,
     disabled,
-    fileList: files,
     maxCount,
     multiple,
     customRequest: async (options: {
@@ -365,7 +352,9 @@ function FileValue({
           recordId
         );
         options.onProgress?.({ percent: 100 });
-        onChange?.(multiple ? [...refs, uploaded] : uploaded);
+        const next = multiple ? [...refsRef.current, uploaded] : uploaded;
+        refsRef.current = Array.isArray(next) ? next : [next];
+        onChange?.(next);
         options.onSuccess?.(uploaded);
       } catch (error) {
         const failure =
@@ -376,26 +365,6 @@ function FileValue({
         setUploading(false);
       }
     },
-    onDownload: (file: UploadFile) => {
-      window.open(
-        instrumentFileContentUrl(file.uid),
-        '_blank',
-        'noopener,noreferrer'
-      );
-    },
-    onPreview: (file: UploadFile) => {
-      window.open(
-        instrumentFileContentUrl(file.uid),
-        '_blank',
-        'noopener,noreferrer'
-      );
-    },
-    onRemove: (file: UploadFile) => {
-      if (disabled) return false;
-      const next = refs.filter(item => item.id !== file.uid);
-      onChange?.(multiple ? next : undefined);
-      return true;
-    },
     showUploadList: false,
   };
   return (
@@ -437,46 +406,16 @@ function FileValue({
           </Button>
         </div>
       )}
-      {files.length ? (
-        <div className="oxa-file-list">
-          {files.map(file => (
-            <div className="oxa-file-item" key={file.uid}>
-              <span className="oxa-file-kind">
-                {fieldCode === 'image' ? <PictureOutlined /> : <PaperClipOutlined />}
-              </span>
-              <span className="oxa-file-meta">
-                <strong>{file.name}</strong>
-                <small>{formatFileSize(file.size || 0)} · 已上传</small>
-              </span>
-              <Space size={2}>
-                <Button
-                  aria-label={`预览${file.name}`}
-                  icon={<EyeOutlined />}
-                  onClick={() => uploadProps.onPreview(file)}
-                  size="small"
-                  type="text"
-                />
-                <Button
-                  aria-label={`下载${file.name}`}
-                  icon={<DownloadOutlined />}
-                  onClick={() => uploadProps.onDownload(file)}
-                  size="small"
-                  type="text"
-                />
-                {!disabled && (
-                  <Button
-                    aria-label={`移除${file.name}`}
-                    danger
-                    icon={<PlusOutlined rotate={45} />}
-                    onClick={() => uploadProps.onRemove(file)}
-                    size="small"
-                    type="text"
-                  />
-                )}
-              </Space>
-            </div>
-          ))}
-        </div>
+      {refs.length ? (
+        <AttachmentFileList
+          files={refs}
+          onRemove={file => {
+            const next = refs.filter(item => item.id !== file.id);
+            refsRef.current = next;
+            onChange?.(multiple ? next : undefined);
+          }}
+          removable={!disabled}
+        />
       ) : (
         <div className="oxa-file-empty">尚未上传文件</div>
       )}
@@ -575,49 +514,7 @@ function Detail({
 
 function AttachmentReadOnly({ values }: { values: DataFileRef[] }) {
   if (!values.length) return <>-</>;
-  return (
-    <div className="oxa-attachment-readonly">
-      {values.map(file => (
-        <div className="oxa-attachment-row" key={file.id}>
-          <PaperClipOutlined />
-          <span className="oxa-attachment-name">{file.name}</span>
-          <span className="oxa-muted">{formatFileSize(file.size)}</span>
-          <Space size={4}>
-            {file.contentType.startsWith('image/') && (
-              <Button
-                aria-label={`预览${file.name}`}
-                icon={<EyeOutlined />}
-                onClick={() =>
-                  window.open(
-                    instrumentFileContentUrl(file.id),
-                    '_blank',
-                    'noopener,noreferrer'
-                  )
-                }
-                size="small"
-                type="text"
-              />
-            )}
-            <Button
-              aria-label={`下载${file.name}`}
-              icon={<DownloadOutlined />}
-              onClick={() =>
-                window.open(
-                  instrumentFileContentUrl(file.id),
-                  '_blank',
-                  'noopener,noreferrer'
-                )
-              }
-              size="small"
-              type="text"
-            >
-              下载
-            </Button>
-          </Space>
-        </div>
-      ))}
-    </div>
-  );
+  return <AttachmentFileList files={values} />;
 }
 
 function displayValue(field: InstrumentField, value: unknown) {
@@ -676,9 +573,3 @@ function auditLabel(operation: DataAuditEntry['operation']) {
 function formatDateTime(value?: string) {
   return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '-';
 }
-
-function formatFileSize(value: number) {
-  if (value < 1024) return `${value} B`;
-  if (value < 1024 * 1024) return `${Math.ceil(value / 1024)} KB`;
-  return `${(value / 1024 / 1024).toFixed(1)} MB`;
-}

package/template/apps/web/src/components/platform-fields/AttachmentFileList.tsx

@@ -0,0 +1,226 @@
+import {
+  CloseOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  FileExcelOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileTextOutlined,
+  FileWordOutlined,
+  PaperClipOutlined,
+} from '@ant-design/icons';
+import { App, Button, Image, Space } from 'antd';
+import type { DataFileRef } from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  dataFileContentUrl,
+  fetchDataFileBlob,
+  loadDataFilePreview,
+} from '../../platform-client';
+import { attachmentPreviewPath } from '../../runtime-meta';
+
+interface PreviewImage {
+  id: string;
+  name: string;
+  src: string;
+}
+
+const IMAGE_EXTENSIONS = new Set([
+  'avif',
+  'bmp',
+  'gif',
+  'ico',
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp',
+]);
+
+function extension(name: string) {
+  return name.toLowerCase().match(/\.([a-z0-9]+)$/)?.[1] || '';
+}
+
+function isImage(file: DataFileRef) {
+  return (
+    file.contentType.toLowerCase().startsWith('image/') ||
+    IMAGE_EXTENSIONS.has(extension(file.name))
+  );
+}
+
+function fileIcon(file: DataFileRef) {
+  const suffix = extension(file.name);
+  if (isImage(file)) return <FileImageOutlined />;
+  if (suffix === 'pdf') return <FilePdfOutlined />;
+  if (suffix === 'doc' || suffix === 'docx') return <FileWordOutlined />;
+  if (suffix === 'xls' || suffix === 'xlsx') return <FileExcelOutlined />;
+  if (suffix === 'txt' || suffix === 'csv') return <FileTextOutlined />;
+  return <PaperClipOutlined />;
+}
+
+export function formatManagedFileSize(value: number) {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${Math.ceil(value / 1024)} KB`;
+  return `${(value / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function revokeImages(images: PreviewImage[]) {
+  images.forEach(image => URL.revokeObjectURL(image.src));
+}
+
+function openIsolatedWindow(url: string) {
+  const target = window.open('about:blank', '_blank');
+  if (!target) return false;
+  target.opener = null;
+  target.location.replace(url);
+  return true;
+}
+
+export function AttachmentFileList({
+  files,
+  resourceCode = 'instruments',
+  removable = false,
+  onRemove,
+}: {
+  files: DataFileRef[];
+  resourceCode?: string;
+  removable?: boolean;
+  onRemove?: (file: DataFileRef) => void;
+}) {
+  const { message } = App.useApp();
+  const [openingId, setOpeningId] = useState('');
+  const [images, setImages] = useState<PreviewImage[]>([]);
+  const [imageOpen, setImageOpen] = useState(false);
+  const [currentImage, setCurrentImage] = useState(0);
+  const imageFiles = useMemo(() => files.filter(isImage), [files]);
+
+  useEffect(() => () => revokeImages(images), [images]);
+
+  const closeImages = () => {
+    setImageOpen(false);
+    setImages(current => {
+      revokeImages(current);
+      return [];
+    });
+  };
+
+  const previewImage = async (file: DataFileRef) => {
+    setOpeningId(file.id);
+    try {
+      const settled = await Promise.allSettled(
+        imageFiles.map(async candidate => {
+          const preview = await loadDataFilePreview(resourceCode, candidate.id);
+          if (!preview.canPreview || preview.previewType !== 'image') {
+            throw new Error(
+              preview.unsupportedReason || `${candidate.name} 暂不支持图片预览`
+            );
+          }
+          const blob = await fetchDataFileBlob(resourceCode, candidate.id);
+          return {
+            id: candidate.id,
+            name: candidate.name,
+            src: URL.createObjectURL(blob),
+          };
+        })
+      );
+      const resolved = settled.flatMap(result =>
+        result.status === 'fulfilled' ? [result.value] : []
+      );
+      const current = resolved.findIndex(image => image.id === file.id);
+      if (current < 0) {
+        const failure = settled.find(
+          result => result.status === 'rejected'
+        ) as PromiseRejectedResult | undefined;
+        throw failure?.reason || new Error('图片预览加载失败');
+      }
+      setImages(previous => {
+        revokeImages(previous);
+        return resolved;
+      });
+      setCurrentImage(current);
+      setImageOpen(true);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      setOpeningId('');
+    }
+  };
+
+  const openPreview = (file: DataFileRef) => {
+    if (isImage(file)) {
+      void previewImage(file);
+      return;
+    }
+    if (!openIsolatedWindow(attachmentPreviewPath(resourceCode, file.id))) {
+      void message.warning('浏览器阻止了预览窗口，请允许弹出窗口后重试');
+    }
+  };
+
+  const download = (file: DataFileRef) => {
+    if (!openIsolatedWindow(dataFileContentUrl(resourceCode, file.id))) {
+      void message.warning('浏览器阻止了下载窗口，请允许弹出窗口后重试');
+    }
+  };
+
+  return (
+    <>
+      <div className="oxa-file-list">
+        {files.map(file => (
+          <div className="oxa-file-item" key={file.id}>
+            <span className="oxa-file-kind">{fileIcon(file)}</span>
+            <button
+              className="oxa-file-meta oxa-file-name-button"
+              disabled={openingId === file.id}
+              onClick={() => openPreview(file)}
+              type="button"
+            >
+              <strong>{file.name}</strong>
+              <small>{formatManagedFileSize(file.size)} · 已上传</small>
+            </button>
+            <Space size={2}>
+              <Button
+                aria-label={`预览${file.name}`}
+                icon={<EyeOutlined />}
+                loading={openingId === file.id}
+                onClick={() => openPreview(file)}
+                size="small"
+                type="text"
+              />
+              <Button
+                aria-label={`下载${file.name}`}
+                icon={<DownloadOutlined />}
+                onClick={() => download(file)}
+                size="small"
+                type="text"
+              />
+              {removable && (
+                <Button
+                  aria-label={`移除${file.name}`}
+                  danger
+                  icon={<CloseOutlined />}
+                  onClick={() => onRemove?.(file)}
+                  size="small"
+                  type="text"
+                />
+              )}
+            </Space>
+          </div>
+        ))}
+      </div>
+      <Image.PreviewGroup
+        items={images.map(image => ({ src: image.src, alt: image.name }))}
+        preview={{
+          open: imageOpen,
+          current: currentImage,
+          countRender: (current, total) => `${current}/${total}`,
+          onChange: setCurrentImage,
+          onOpenChange: open => {
+            if (!open) closeImages();
+          },
+        }}
+      >
+        <span aria-hidden="true" style={{ display: 'none' }} />
+      </Image.PreviewGroup>
+    </>
+  );
+}

package/template/apps/web/src/main.tsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { instrumentProvider } from './data-provider';
 import { CollegePage } from './CollegePage';
+import { FilePreviewPage } from './FilePreviewPage';
 import { InstrumentDetailPage } from './InstrumentDetailPage';
 import { InstrumentFormPage } from './InstrumentFormPage';
 import { InstrumentListPage } from './InstrumentListPage';
@@ -51,6 +52,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
                 <Route path="/" element={<Navigate replace to="/instruments" />} />
                 <Route path="/instruments" element={<InstrumentListPage />} />
                 <Route path="/colleges" element={<CollegePage />} />
+                <Route
+                  path="/files/:resourceCode/:fileId/preview"
+                  element={<FilePreviewPage />}
+                />
                 <Route
                   path="/instruments/new"
                   element={<InstrumentFormPage mode="create" />}

package/template/apps/web/src/platform-client.ts

@@ -1,5 +1,6 @@
 import {
   SCHEMA_VERSIONS,
+  type DataFilePreview,
   type DataFileRef,
   type DataFileUploadPlan,
   type DataAuditPage,
@@ -377,10 +378,44 @@ export const instrumentDataApi: InstrumentDataApiAdapter = {
   },
 };
 
-export function instrumentFileContentUrl(fileId: string) {
-  return `${dataBase()}/files/${encodeURIComponent(
+export function dataFileContentUrl(
+  resource: string,
+  fileId: string,
+  disposition: 'attachment' | 'inline' = 'attachment'
+) {
+  const query = new URLSearchParams({
+    environmentKey: currentEnvironmentKey(),
+    disposition,
+  });
+  return `${dataBase(resource)}/files/${encodeURIComponent(
     fileId
-  )}/content?environmentKey=${encodeURIComponent(currentEnvironmentKey())}`;
+  )}/content?${query.toString()}`;
+}
+
+export async function loadDataFilePreview(
+  resource: string,
+  fileId: string
+) {
+  return await request<DataFilePreview>(
+    `${dataBase(resource)}/files/${encodeURIComponent(
+      fileId
+    )}/preview?environmentKey=${encodeURIComponent(currentEnvironmentKey())}`
+  );
+}
+
+export async function fetchDataFileBlob(resource: string, fileId: string) {
+  const response = await fetch(dataFileContentUrl(resource, fileId, 'inline'), {
+    credentials: 'include',
+    headers: { accept: 'application/octet-stream,*/*' },
+  });
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as
+      | PlatformEnvelope<null>
+      | null;
+    const code = payload?.errorCode || `HTTP_${response.status}`;
+    throw new Error(`${code}: ${payload?.message || '文件内容读取失败'}`);
+  }
+  return await response.blob();
 }
 
 export interface CollegeRecord extends Record<string, unknown> {

package/template/apps/web/src/runtime-meta.ts

@@ -45,6 +45,21 @@ export function applicationBasename() {
   return resolveApplicationBasename(runtimeMount());
 }
 
+export function attachmentPreviewPath(resourceCode: string, fileId: string) {
+  return resolveAttachmentPreviewPath(runtimeMount(), resourceCode, fileId);
+}
+
+export function resolveAttachmentPreviewPath(
+  mount: RuntimeMount | null,
+  resourceCode: string,
+  fileId: string
+) {
+  const base = resolveApplicationBasename(mount)?.replace(/\/+$/, '') || '';
+  return `${base}/files/${encodeURIComponent(resourceCode)}/${encodeURIComponent(
+    fileId
+  )}/preview`;
+}
+
 export function resolveApplicationApiPath(
   mount: RuntimeMount | null,
   path: string