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

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

@@ -1,4 +1,10 @@
 import {
+  PictureOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import {
+  App,
   Button,
   Card,
   DatePicker,
@@ -8,19 +14,31 @@ import {
   InputNumber,
   Select,
   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, 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 } 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 +71,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 +93,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 +118,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 +168,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 +187,12 @@ export function InstrumentForm({
 function FieldControl({
   field,
   disabled,
+  operation,
   recordId,
 }: {
   field: InstrumentField;
   disabled: boolean;
+  operation: 'create' | 'update';
   recordId?: string;
 }) {
   const rules = [
@@ -159,21 +208,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 +234,8 @@ function FieldControl({
         placeholder={`请选择${field.label}`}
       />
     );
-  if (field.kind === 'multi')
+  }
+  if (field.kind === 'multi') {
     control = (
       <Select
         disabled={disabled}
@@ -190,7 +244,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 +279,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,80 +324,226 @@ 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,
-    status: 'done',
-  }));
+  const refsRef = useRef(refs);
+  useEffect(() => {
+    refsRef.current = refs;
+  }, [refs]);
+  const uploadProps = {
+    accept,
+    disabled,
+    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 });
+        const next = multiple ? [...refsRef.current, uploaded] : uploaded;
+        refsRef.current = Array.isArray(next) ? next : [next];
+        onChange?.(next);
+        options.onSuccess?.(uploaded);
+      } catch (error) {
+        const failure =
+          error instanceof Error ? error : new Error(String(error));
+        setUploadError(failure.message);
+        options.onError?.(failure);
+      } finally {
+        setUploading(false);
+      }
+    },
+    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>
+      )}
+      {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>
+      )}
+    </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 <AttachmentFileList files={values} />;
+}
+
 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 +553,23 @@ 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 }) : '-';
 }

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

@@ -1,5 +1,6 @@
+import { ArrowLeftOutlined, EyeOutlined } from '@ant-design/icons';
 import { useCreate, useOne, useUpdate } from '@refinedev/core';
-import { App, Result, Spin, Typography } from 'antd';
+import { Alert, App, Button, Card, Result, Space, Spin, Typography } from 'antd';
 import { useNavigate, useParams } from 'react-router-dom';
 import { InstrumentForm } from './InstrumentForm';
 import { Shell } from './Shell';
@@ -23,32 +24,70 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
     mode === 'create'
       ? hasCapability(INSTRUMENT_CAPABILITIES.create)
       : hasCapability(INSTRUMENT_CAPABILITIES.update);
-  if (!allowed)
+  if (!allowed) {
     return (
       <Shell>
         <Result status="403" title="当前平台用户无此操作权限" />
       </Shell>
     );
-  if (mode === 'edit' && query.query.isLoading)
+  }
+  if (mode === 'edit' && query.query.isLoading) {
     return (
       <Shell>
-        <Spin />
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
       </Shell>
     );
-  if (mode === 'edit' && !record)
+  }
+  if (mode === 'edit' && !record) {
     return (
       <Shell>
         <Result status="404" title="仪器不存在或不在数据范围内" />
       </Shell>
     );
+  }
   return (
     <Shell>
-      <Typography.Title level={3}>
-        {mode === 'create' ? '新增仪器' : '编辑仪器'}
-      </Typography.Title>
+      <Card className="oxa-edit-hero">
+        <div className="oxa-edit-hero-title">
+          <div>
+            <Button
+              icon={<ArrowLeftOutlined />}
+              onClick={() =>
+                navigate(mode === 'edit' ? `/instruments/${id}` : '/instruments')
+              }
+              type="link"
+            >
+              {mode === 'edit' ? '返回仪器详情' : '返回仪器资源'}
+            </Button>
+            <Typography.Title level={2}>
+              {mode === 'create' ? '新增仪器' : '编辑仪器'}
+            </Typography.Title>
+            {record && (
+              <Typography.Text type="secondary">
+                {record.chineseName} · {record.instrumentCode} · 当前版本{' '}
+                {record.revision}
+              </Typography.Text>
+            )}
+          </div>
+          {record && (
+            <Button
+              icon={<EyeOutlined />}
+              onClick={() => navigate(`/instruments/${id}`)}
+            >
+              查看详情
+            </Button>
+          )}
+        </div>
+        <Alert
+          title="仅显示当前角色可编辑的字段；保存时将校验数据版本与权限范围。"
+          showIcon
+          type="info"
+        />
+      </Card>
       <InstrumentForm
         mode={mode}
-        record={record}
         onCancel={() =>
           navigate(mode === 'edit' ? `/instruments/${id}` : '/instruments')
         }
@@ -71,6 +110,7 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
             navigate(`/instruments/${result.data.id}`);
           }
         }}
+        record={record}
       />
     </Shell>
   );