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

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

@@ -1,4 +1,14 @@
 import {
+  DownloadOutlined,
+  EyeOutlined,
+  PaperClipOutlined,
+  PictureOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import {
+  App,
   Button,
   Card,
   DatePicker,
@@ -7,20 +17,36 @@ import {
   Input,
   InputNumber,
   Select,
+  Space,
   Switch,
+  Tag,
+  Timeline,
+  Typography,
   Upload,
   type UploadFile,
 } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
-import { useEffect } from 'react';
-import type { DataFileRef } from 'openxiangda-contracts/browser';
+import { useEffect, useState } from 'react';
+import type { DataAuditEntry, DataFileRef } from 'openxiangda-contracts/browser';
+import {
+  AuthoritativeSelector,
+  ResolvedValueText,
+} from './AuthoritativeSelector';
+import { PlatformDirectoryPicker } from './components/platform-fields/PlatformDirectoryPicker';
 import { instrumentFields, sectionTitles, type InstrumentField } from './fields';
 import type { InstrumentRecord } from './instrument';
-import { instrumentDataApi } from './platform-client';
+import {
+  instrumentDataApi,
+  instrumentFileContentUrl,
+} from './platform-client';
 import { useRuntime } from './runtime';
 
 type Values = Record<string, unknown>;
+const createDefaults = {
+  openToOutside: false,
+  instrumentStatus: 'normal',
+  usageStatus: 'active',
+} as const;
 
 export function instrumentFieldAllowed(
   field: InstrumentField,
@@ -53,14 +79,20 @@ export function InstrumentForm({
   record,
   onCancel,
   onSubmit,
+  auditEntries = [],
+  auditError,
 }: {
   mode: 'create' | 'edit' | 'detail';
   record?: InstrumentRecord;
   onCancel: () => void;
   onSubmit?: (values: Values) => Promise<void>;
+  auditEntries?: DataAuditEntry[];
+  auditError?: string;
 }) {
   const [form] = Form.useForm();
+  const { message } = App.useApp();
   const { hasCapability } = useRuntime();
+  const [submitting, setSubmitting] = useState(false);
   useEffect(() => {
     if (record) {
       form.setFieldsValue({
@@ -69,12 +101,21 @@ export function InstrumentForm({
       });
     }
   }, [form, record]);
-  if (mode === 'detail' && record) return <Detail record={record} />;
+  if (mode === 'detail' && record) {
+    return (
+      <Detail
+        auditEntries={auditEntries}
+        auditError={auditError}
+        record={record}
+      />
+    );
+  }
   const isCreate = mode === 'create';
   const writeMode = isCreate ? 'create' : 'edit';
-  const submit = async () => {
-    const values = await form.validateFields();
+  const submit = async (values: Values) => {
+    if (submitting) return;
     const normalized = {
+      ...(isCreate ? createDefaults : {}),
       ...values,
       enabledDate:
         values.enabledDate &&
@@ -85,37 +126,48 @@ export function InstrumentForm({
             )
           : values.enabledDate,
     };
-    await onSubmit?.(
-      sanitizeInstrumentValues(normalized, writeMode, hasCapability)
-    );
+    setSubmitting(true);
+    try {
+      await onSubmit?.(
+        sanitizeInstrumentValues(normalized, writeMode, hasCapability)
+      );
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      setSubmitting(false);
+    }
   };
+  const groups = Object.entries(sectionTitles).map(([key, title]) => ({
+    key,
+    title,
+    fields: instrumentFields
+      .filter(field => field.section === key && !field.system)
+      .map(field => field.key),
+  }));
   return (
     <Form
+      className="oxa-instrument-form oxa-form-full"
       form={form}
+      initialValues={isCreate ? createDefaults : undefined}
       layout="vertical"
-      initialValues={
-        isCreate
-          ? {
-              openToOutside: false,
-              instrumentStatus: 'normal',
-              usageStatus: 'active',
-            }
-          : undefined
-      }
+      onFinish={values => void submit(values)}
+      scrollToFirstError={{ block: 'center' }}
     >
       <div className="oxa-sections">
-        {Object.entries(sectionTitles).map(([section, title]) => (
-          <Card key={section} title={title}>
+        {groups.map(group => (
+          <Card className="oxa-section-card" key={group.key} title={group.title}>
             <div className="oxa-grid">
-              {instrumentFields
-                .filter(field => field.section === section && !field.system)
+              {group.fields
+                .map(key => instrumentFields.find(field => field.key === key))
+                .filter((field): field is InstrumentField => Boolean(field))
                 .map(field => (
                   <FieldControl
-                    field={field}
-                    key={field.key}
                     disabled={
                       !instrumentFieldAllowed(field, writeMode, hasCapability)
                     }
+                    field={field}
+                    key={field.key}
+                    operation={isCreate ? 'create' : 'update'}
                     recordId={record?.id}
                   />
                 ))}
@@ -124,13 +176,16 @@ export function InstrumentForm({
         ))}
       </div>
       <div className="oxa-actions">
-        <Button onClick={onCancel}>取消</Button>
+        <Button disabled={submitting} onClick={onCancel}>
+          取消
+        </Button>
         <Button
           data-testid="save-instrument"
+          htmlType="submit"
+          loading={submitting}
           type="primary"
-          onClick={() => void submit()}
         >
-          {isCreate ? '创建仪器' : '保存修改'}
+          {isCreate ? '保存' : '保存修改'}
         </Button>
       </div>
     </Form>
@@ -140,10 +195,12 @@ export function InstrumentForm({
 function FieldControl({
   field,
   disabled,
+  operation,
   recordId,
 }: {
   field: InstrumentField;
   disabled: boolean;
+  operation: 'create' | 'update';
   recordId?: string;
 }) {
   const rules = [
@@ -159,21 +216,25 @@ function FieldControl({
   ];
   const common = { disabled, placeholder: `请输入${field.label}` };
   let control = <Input {...common} />;
-  if (field.kind === 'textarea')
+  if (field.kind === 'textarea') {
     control = <Input.TextArea {...common} rows={3} />;
-  if (field.kind === 'number')
+  }
+  if (field.kind === 'number') {
     control = <InputNumber {...common} min={0} style={{ width: '100%' }} />;
-  if (field.kind === 'date')
+  }
+  if (field.kind === 'date') {
     control = <DatePicker disabled={disabled} style={{ width: '100%' }} />;
-  if (field.kind === 'boolean')
+  }
+  if (field.kind === 'boolean') {
     control = (
       <Switch
-        disabled={disabled}
         checkedChildren="是"
+        disabled={disabled}
         unCheckedChildren="否"
       />
     );
-  if (field.kind === 'select')
+  }
+  if (field.kind === 'select') {
     control = (
       <Select
         disabled={disabled}
@@ -181,7 +242,8 @@ function FieldControl({
         placeholder={`请选择${field.label}`}
       />
     );
-  if (field.kind === 'multi')
+  }
+  if (field.kind === 'multi') {
     control = (
       <Select
         disabled={disabled}
@@ -190,7 +252,31 @@ function FieldControl({
         placeholder={`请选择${field.label}`}
       />
     );
-  if (field.kind === 'file')
+  }
+  if (field.kind === 'scope') {
+    control = (
+      <AuthoritativeSelector
+        disabled={disabled}
+        operation={operation}
+        placeholder={`请选择${field.label}`}
+        source="college"
+      />
+    );
+  }
+  if (
+    field.kind === 'directory-user' ||
+    field.kind === 'directory-department'
+  ) {
+    control = (
+      <PlatformDirectoryPicker
+        disabled={disabled}
+        kind={field.kind === 'directory-user' ? 'user' : 'department'}
+        multiple={field.multiple}
+        placeholder={`搜索并选择${field.label}`}
+      />
+    );
+  }
+  if (field.kind === 'file') {
     control = (
       <FileValue
         accept={field.accept}
@@ -201,8 +287,22 @@ function FieldControl({
         recordId={recordId}
       />
     );
+  }
+  const extra = disabled
+    ? '当前角色不可修改此字段'
+    : field.kind === 'scope'
+      ? '仅显示当前角色可管理的学院'
+      : field.key === 'instrumentAdminIds'
+        ? '管理员选择结果将参与仪器数据权限判断'
+        : undefined;
   return (
     <Form.Item
+      className={
+        field.kind === 'textarea' || field.kind === 'file'
+          ? 'oxa-field-wide'
+          : undefined
+      }
+      extra={extra}
       label={field.label}
       name={field.key}
       rules={rules}
@@ -232,61 +332,289 @@ function FileValue({
   maxCount?: number;
   accept?: string;
 }) {
+  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 uploadProps = {
+    accept,
+    disabled,
+    fileList: files,
+    maxCount,
+    multiple,
+    customRequest: async (options: {
+      file: string | Blob;
+      onError?: (error: Error) => void;
+      onProgress?: (event: { percent: number }) => void;
+      onSuccess?: (body: unknown) => void;
+    }) => {
+      setUploading(true);
+      setUploadError('');
+      try {
+        options.onProgress?.({ percent: 15 });
+        const uploaded = await instrumentDataApi.upload(
+          fieldCode,
+          options.file as File,
+          recordId
+        );
+        options.onProgress?.({ percent: 100 });
+        onChange?.(multiple ? [...refs, uploaded] : uploaded);
+        options.onSuccess?.(uploaded);
+      } catch (error) {
+        const failure =
+          error instanceof Error ? error : new Error(String(error));
+        setUploadError(failure.message);
+        options.onError?.(failure);
+      } finally {
+        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 (
-    <Upload
-      accept={accept}
-      disabled={disabled}
-      fileList={files}
-      maxCount={maxCount}
-      multiple={multiple}
-      customRequest={async options => {
-        try {
-          const uploaded = await instrumentDataApi.upload(
-            fieldCode,
-            options.file as File,
-            recordId
-          );
-          onChange?.(multiple ? [...refs, uploaded] : uploaded);
-          options.onSuccess?.(uploaded);
-        } catch (error) {
-          options.onError?.(
-            error instanceof Error ? error : new Error(String(error))
-          );
-        }
-      }}
-      onRemove={file => {
-        const next = refs.filter(item => item.id !== file.uid);
-        onChange?.(multiple ? next : undefined);
-        return true;
-      }}
-    >
-      <Button icon={<UploadOutlined />}>上传</Button>
-    </Upload>
+    <div className="oxa-file-field">
+      <Upload {...uploadProps} pastable>
+        <Button
+          disabled={disabled || uploading || refs.length >= maxCount}
+          icon={fieldCode === 'image' ? <PictureOutlined /> : <UploadOutlined />}
+          loading={uploading}
+        >
+          {fieldCode === 'image' ? '上传图片' : '上传文件'}
+        </Button>
+      </Upload>
+      <Upload.Dragger
+        {...uploadProps}
+        className="oxa-file-dropzone"
+        openFileDialogOnClick={false}
+        pastable
+      >
+        <span>
+          可将文件拖到这里，或在此区域按 <kbd>⌘ V</kbd> 粘贴
+        </span>
+        <small>
+          {multiple
+            ? `最多 ${maxCount} 个文件，单个不超过 50MB`
+            : '仅保留一个文件，新上传会替换当前文件'}
+        </small>
+      </Upload.Dragger>
+      {uploadError && (
+        <div className="oxa-file-error">
+          <span>{uploadError}</span>
+          <Button
+            icon={<ReloadOutlined />}
+            onClick={() => setUploadError('')}
+            size="small"
+            type="text"
+          >
+            关闭
+          </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>
+      ) : (
+        <div className="oxa-file-empty">尚未上传文件</div>
+      )}
+    </div>
   );
 }
 
-function Detail({ record }: { record: InstrumentRecord }) {
+function Detail({
+  record,
+  auditEntries,
+  auditError,
+}: {
+  record: InstrumentRecord;
+  auditEntries: DataAuditEntry[];
+  auditError?: string;
+}) {
+  const groups = Object.entries(sectionTitles)
+    .map(([section, title]) => ({
+      section,
+      title,
+      fields: instrumentFields.filter(
+        field =>
+          field.section === section &&
+          !field.system &&
+          Object.prototype.hasOwnProperty.call(record, field.key)
+      ),
+    }))
+    .filter(group => group.fields.length > 0);
   return (
-    <div className="oxa-sections">
-      {Object.entries(sectionTitles).map(([section, title]) => (
-        <Card key={section} title={title}>
-          <Descriptions
-            column={2}
-            items={instrumentFields
-              .filter(field => field.section === section)
-              .map(field => ({
+    <div className="oxa-detail-layout">
+      <div className="oxa-detail-main">
+        {groups.map(group => (
+          <Card className="oxa-section-card" key={group.section} title={group.title}>
+            <Descriptions
+              column={{ xs: 1, sm: 2, lg: 3 }}
+              items={group.fields.map(field => ({
                 key: field.key,
                 label: field.label,
+                span:
+                  field.kind === 'textarea' || field.kind === 'file' ? 3 : 1,
                 children: displayValue(field, record[field.key]),
               }))}
+            />
+          </Card>
+        ))}
+      </div>
+      <aside className="oxa-detail-aside">
+        <Card className="oxa-section-card" title="记录信息">
+          <Descriptions
+            column={1}
+            items={[
+              { key: 'revision', label: '数据版本', children: record.revision },
+              {
+                key: 'updatedAt',
+                label: '更新时间',
+                children: formatDateTime(record.updated_at),
+              },
+              {
+                key: 'status',
+                label: '仪器状态',
+                children: displayValue(
+                  instrumentFields.find(
+                    field => field.key === 'instrumentStatus'
+                  )!,
+                  record.instrumentStatus
+                ),
+              },
+            ]}
           />
         </Card>
+        <Card className="oxa-section-card" id="instrument-audit" title="最近变更">
+          {auditError ? (
+            <Typography.Text type="secondary">审计记录暂不可用</Typography.Text>
+          ) : auditEntries.length ? (
+            <Timeline
+              items={auditEntries.slice(0, 5).map(entry => ({
+                children: (
+                  <div className="oxa-audit-entry">
+                    <strong>{auditLabel(entry.operation)}</strong>
+                    <span>{formatDateTime(entry.occurredAt)}</span>
+                    {entry.actor.userId && (
+                      <ResolvedValueText source="user" value={entry.actor.userId} />
+                    )}
+                  </div>
+                ),
+              }))}
+            />
+          ) : (
+            <Typography.Text type="secondary">暂无变更记录</Typography.Text>
+          )}
+        </Card>
+      </aside>
+    </div>
+  );
+}
+
+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>
   );
@@ -294,18 +622,31 @@ function Detail({ record }: { record: InstrumentRecord }) {
 
 function displayValue(field: InstrumentField, value: unknown) {
   if (value === undefined || value === null || value === '') return '-';
-  if (field.kind === 'boolean') return value ? '是' : '否';
+  if (field.kind === 'scope') {
+    return <ResolvedValueText source="college" value={String(value)} />;
+  }
+  if (field.kind === 'directory-user') {
+    return (
+      <ResolvedValueText
+        source="user"
+        value={Array.isArray(value) ? value.map(String) : String(value)}
+      />
+    );
+  }
+  if (field.kind === 'directory-department') {
+    return <ResolvedValueText source="department" value={String(value)} />;
+  }
+  if (field.kind === 'boolean') {
+    return <Tag color={value ? 'green' : 'default'}>{value ? '是' : '否'}</Tag>;
+  }
   if (field.kind === 'file') {
-    const values = Array.isArray(value) ? value : [value];
-    return values
-      .map(item =>
-        item && typeof item === 'object' && 'name' in item
-          ? String(item.name)
-          : String(item)
-      )
-      .join('、');
+    const values = (Array.isArray(value) ? value : [value]).filter(
+      (item): item is DataFileRef =>
+        Boolean(item && typeof item === 'object' && 'id' in item)
+    );
+    return <AttachmentReadOnly values={values} />;
   }
-  if (Array.isArray(value))
+  if (Array.isArray(value)) {
     return (
       value
         .map(
@@ -315,8 +656,29 @@ function displayValue(field: InstrumentField, value: unknown) {
         )
         .join('、') || '-'
     );
-  return (
-    field.options?.find(option => option.value === value)?.label ||
-    String(value)
-  );
+  }
+  const label =
+    field.options?.find(option => option.value === value)?.label || String(value);
+  if (field.key === 'instrumentStatus' || field.key === 'usageStatus') {
+    return <Tag color={value === 'normal' || value === 'active' ? 'green' : 'default'}>{label}</Tag>;
+  }
+  return label;
+}
+
+function auditLabel(operation: DataAuditEntry['operation']) {
+  return {
+    created: '创建仪器档案',
+    updated: '更新仪器信息',
+    deleted: '删除仪器档案',
+  }[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`;
 }