openxiangda-cli 2.0.0-alpha.60 → 2.0.0-alpha.61

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

@@ -1,37 +1,31 @@
-import {
-  PictureOutlined,
-  ReloadOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
 import {
   App,
   Button,
   Card,
-  DatePicker,
   Descriptions,
   Form,
-  Input,
-  InputNumber,
-  Select,
-  Switch,
   Tag,
   Timeline,
   Typography,
-  Upload,
 } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect, useRef, useState } from 'react';
-import type { DataAuditEntry, DataFileRef } from 'openxiangda-contracts/browser';
+import { useEffect, useState } from 'react';
+import type { DataAuditEntry } from 'openxiangda-contracts/browser';
 import {
   AuthoritativeSelector,
   ResolvedValueText,
 } from './AuthoritativeSelector';
-import { AttachmentFileList } from './components/platform-fields/AttachmentFileList';
-import { PlatformDirectoryPicker } from './components/platform-fields/PlatformDirectoryPicker';
+import {
+  MobileSurfaceFieldControl,
+  SurfaceFieldControl,
+  SurfaceFieldValue,
+  type SurfaceField,
+} from './components/resource/SurfaceFields';
 import { instrumentFields, sectionTitles, type InstrumentField } from './fields';
 import type { InstrumentRecord } from './instrument';
 import { instrumentDataApi } from './platform-client';
 import { useRuntime } from './runtime';
+import { instrumentSurface } from '../../../platform/data/instrument-surface.js';
 
 type Values = Record<string, unknown>;
 const createDefaults = {
@@ -69,6 +63,7 @@ export function sanitizeInstrumentValues(
 export function InstrumentForm({
   mode,
   record,
+  variant = 'desktop',
   onCancel,
   onSubmit,
   auditEntries = [],
@@ -76,6 +71,7 @@ export function InstrumentForm({
 }: {
   mode: 'create' | 'edit' | 'detail';
   record?: InstrumentRecord;
+  variant?: 'desktop' | 'mobile';
   onCancel: () => void;
   onSubmit?: (values: Values) => Promise<void>;
   auditEntries?: DataAuditEntry[];
@@ -89,7 +85,11 @@ export function InstrumentForm({
     if (record) {
       form.setFieldsValue({
         ...record,
-        enabledDate: record.enabledDate ? dayjs(record.enabledDate) : undefined,
+        enabledDate: record.enabledDate
+          ? variant === 'mobile'
+            ? record.enabledDate
+            : dayjs(record.enabledDate)
+          : undefined,
       });
     }
   }, [form, record]);
@@ -99,6 +99,7 @@ export function InstrumentForm({
         auditEntries={auditEntries}
         auditError={auditError}
         record={record}
+        variant={variant}
       />
     );
   }
@@ -136,9 +137,11 @@ export function InstrumentForm({
       .filter(field => field.section === key && !field.system)
       .map(field => field.key),
   }));
+  const FieldControl =
+    variant === 'mobile' ? MobileSurfaceFieldControl : SurfaceFieldControl;
   return (
     <Form
-      className="oxa-instrument-form oxa-form-full"
+      className={`oxa-instrument-form oxa-form-full${variant === 'mobile' ? ' oxa-mobile-form' : ''}`}
       form={form}
       initialValues={isCreate ? createDefaults : undefined}
       layout="vertical"
@@ -153,14 +156,38 @@ export function InstrumentForm({
                 .map(key => instrumentFields.find(field => field.key === key))
                 .filter((field): field is InstrumentField => Boolean(field))
                 .map(field => (
-                  <FieldControl
+                  <SurfaceFieldControl
                     disabled={
                       !instrumentFieldAllowed(field, writeMode, hasCapability)
                     }
-                    field={field}
+                    field={surfaceField(field.key)}
                     key={field.key}
                     operation={isCreate ? 'create' : 'update'}
                     recordId={record?.id}
+                    renderers={{
+                      renderExtra: context =>
+                        context.disabled
+                          ? '当前角色不可修改此字段'
+                          : context.field.widget === 'scope'
+                            ? '仅显示当前角色可管理的学院'
+                            : context.field.key === 'instrumentAdminIds'
+                              ? '管理员选择结果将参与仪器数据权限判断'
+                              : undefined,
+                      renderScope: context => (
+                        <AuthoritativeSelector
+                          disabled={context.disabled}
+                          operation={context.operation}
+                          placeholder={`请选择${context.field.label}`}
+                          source="college"
+                        />
+                      ),
+                      upload: (field, file, recordId) =>
+                        instrumentDataApi.upload(
+                          field.key as 'image' | 'attachments',
+                          file,
+                          recordId
+                        ),
+                    }}
                   />
                 ))}
             </div>
@@ -184,253 +211,16 @@ export function InstrumentForm({
   );
 }
 
-function FieldControl({
-  field,
-  disabled,
-  operation,
-  recordId,
-}: {
-  field: InstrumentField;
-  disabled: boolean;
-  operation: 'create' | 'update';
-  recordId?: string;
-}) {
-  const rules = [
-    ...(field.required
-      ? [{ required: true, message: `请填写或选择${field.label}` }]
-      : []),
-    ...(field.kind === 'email'
-      ? [{ type: 'email' as const, message: '邮箱格式不正确' }]
-      : []),
-    ...(field.kind === 'phone'
-      ? [{ pattern: /^1\d{10}$/, message: '请输入 11 位手机号' }]
-      : []),
-  ];
-  const common = { disabled, placeholder: `请输入${field.label}` };
-  let control = <Input {...common} />;
-  if (field.kind === 'textarea') {
-    control = <Input.TextArea {...common} rows={3} />;
-  }
-  if (field.kind === 'number') {
-    control = <InputNumber {...common} min={0} style={{ width: '100%' }} />;
-  }
-  if (field.kind === 'date') {
-    control = <DatePicker disabled={disabled} style={{ width: '100%' }} />;
-  }
-  if (field.kind === 'boolean') {
-    control = (
-      <Switch
-        checkedChildren="是"
-        disabled={disabled}
-        unCheckedChildren="否"
-      />
-    );
-  }
-  if (field.kind === 'select') {
-    control = (
-      <Select
-        disabled={disabled}
-        options={field.options}
-        placeholder={`请选择${field.label}`}
-      />
-    );
-  }
-  if (field.kind === 'multi') {
-    control = (
-      <Select
-        disabled={disabled}
-        mode="multiple"
-        options={field.options}
-        placeholder={`请选择${field.label}`}
-      />
-    );
-  }
-  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}
-        disabled={disabled}
-        fieldCode={field.key as 'image' | 'attachments'}
-        maxCount={field.maxCount}
-        multiple={field.multiple}
-        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}
-      valuePropName={field.kind === 'boolean' ? 'checked' : 'value'}
-    >
-      {control}
-    </Form.Item>
-  );
-}
-
-function FileValue({
-  value,
-  onChange,
-  fieldCode,
-  recordId,
-  disabled,
-  multiple,
-  maxCount = 1,
-  accept,
-}: {
-  value?: DataFileRef | DataFileRef[];
-  onChange?: (value: DataFileRef | DataFileRef[] | undefined) => void;
-  fieldCode: 'image' | 'attachments';
-  recordId?: string;
-  disabled?: boolean;
-  multiple?: boolean;
-  maxCount?: number;
-  accept?: string;
-}) {
-  const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState('');
-  const refs = Array.isArray(value) ? value : value ? [value] : [];
-  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 (
-    <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,
   auditEntries,
   auditError,
+  variant = 'desktop',
 }: {
   record: InstrumentRecord;
   auditEntries: DataAuditEntry[];
   auditError?: string;
+  variant?: 'desktop' | 'mobile';
 }) {
   const groups = Object.entries(sectionTitles)
     .map(([section, title]) => ({
@@ -445,7 +235,7 @@ function Detail({
     }))
     .filter(group => group.fields.length > 0);
   return (
-    <div className="oxa-detail-layout">
+    <div className={`oxa-detail-layout${variant === 'mobile' ? ' oxa-mobile-detail' : ''}`}>
       <div className="oxa-detail-main">
         {groups.map(group => (
           <Card className="oxa-section-card" key={group.section} title={group.title}>
@@ -455,8 +245,49 @@ function Detail({
                 key: field.key,
                 label: field.label,
                 span:
-                  field.kind === 'textarea' || field.kind === 'file' ? 3 : 1,
-                children: displayValue(field, record[field.key]),
+                  surfaceField(field.key).widget === 'textarea' ||
+                  surfaceField(field.key).widget === 'file'
+                    ? 3
+                    : 1,
+                children: (
+                  <SurfaceFieldValue
+                    field={surfaceField(field.key)}
+                    renderers={{
+                      renderValue: ({ field: surface, value }) => {
+                        if (surface.widget === 'scope') {
+                          return (
+                            <ResolvedValueText
+                              source="college"
+                              value={String(value)}
+                            />
+                          );
+                        }
+                        if (
+                          surface.key === 'instrumentStatus' ||
+                          surface.key === 'usageStatus'
+                        ) {
+                          const label =
+                            surface.options?.find(
+                              option => option.value === value
+                            )?.label || String(value);
+                          return (
+                            <Tag
+                              color={
+                                value === 'normal' || value === 'active'
+                                  ? 'green'
+                                  : 'default'
+                              }
+                            >
+                              {label}
+                            </Tag>
+                          );
+                        }
+                        return undefined;
+                      },
+                    }}
+                    value={record[field.key]}
+                  />
+                ),
               }))}
             />
           </Card>
@@ -476,11 +307,30 @@ function Detail({
               {
                 key: 'status',
                 label: '仪器状态',
-                children: displayValue(
-                  instrumentFields.find(
-                    field => field.key === 'instrumentStatus'
-                  )!,
-                  record.instrumentStatus
+                children: (
+                  <SurfaceFieldValue
+                    field={surfaceField('instrumentStatus')}
+                    renderers={{
+                      renderValue: ({ field, value }) => {
+                        const label =
+                          field.options?.find(
+                            option => option.value === value
+                          )?.label || String(value);
+                        return (
+                          <Tag
+                            color={
+                              value === 'normal' || value === 'active'
+                                ? 'green'
+                                : 'default'
+                            }
+                          >
+                            {label}
+                          </Tag>
+                        );
+                      },
+                    }}
+                    value={record.instrumentStatus}
+                  />
                 ),
               },
             ]}
@@ -512,54 +362,9 @@ function Detail({
   );
 }
 
-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 === '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]).filter(
-      (item): item is DataFileRef =>
-        Boolean(item && typeof item === 'object' && 'id' in item)
-    );
-    return <AttachmentReadOnly values={values} />;
-  }
-  if (Array.isArray(value)) {
-    return (
-      value
-        .map(
-          item =>
-            field.options?.find(option => option.value === item)?.label ||
-            String(item)
-        )
-        .join('、') || '-'
-    );
-  }
-  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 surfaceField(key: string): SurfaceField {
+  const field = instrumentSurface.fields[key];
+  return field ? { key, ...field } : { key, label: key, widget: 'text' };
 }
 
 function auditLabel(operation: DataAuditEntry['operation']) {

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

@@ -1,16 +1,23 @@
-import { ArrowLeftOutlined, EyeOutlined } from '@ant-design/icons';
 import { useCreate, useOne, useUpdate } from '@refinedev/core';
-import { Alert, App, Button, Card, Result, Space, Spin, Typography } from 'antd';
+import { App } from 'antd';
 import { useNavigate, useParams } from 'react-router-dom';
+import {
+  MobileResourceFormPage,
+  ResourceFormPage,
+} from './components/resource/StandardResourcePages';
 import { InstrumentForm } from './InstrumentForm';
-import { Shell } from './Shell';
 import { INSTRUMENT_CAPABILITIES, type InstrumentRecord } from './instrument';
-import { useRuntime } from './runtime';
+import { instrumentSurface } from '../../../platform/data/instrument-surface.js';
 
-export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
+export function InstrumentFormPage({
+  mode,
+  variant = 'desktop',
+}: {
+  mode: 'create' | 'edit';
+  variant?: 'desktop' | 'mobile';
+}) {
   const { id = '' } = useParams();
   const navigate = useNavigate();
-  const { hasCapability } = useRuntime();
   const { message } = App.useApp();
   const create = useCreate();
   const update = useUpdate();
@@ -20,76 +27,34 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
     queryOptions: { enabled: mode === 'edit' },
   });
   const record = query.result;
-  const allowed =
-    mode === 'create'
-      ? hasCapability(INSTRUMENT_CAPABILITIES.create)
-      : hasCapability(INSTRUMENT_CAPABILITIES.update);
-  if (!allowed) {
-    return (
-      <Shell>
-        <Result status="403" title="当前平台用户无此操作权限" />
-      </Shell>
-    );
-  }
-  if (mode === 'edit' && query.query.isLoading) {
-    return (
-      <Shell>
-        <div className="oxa-page-loading">
-          <Spin />
-        </div>
-      </Shell>
-    );
-  }
-  if (mode === 'edit' && !record) {
-    return (
-      <Shell>
-        <Result status="404" title="仪器不存在或不在数据范围内" />
-      </Shell>
-    );
-  }
+  const Page = variant === 'mobile' ? MobileResourceFormPage : ResourceFormPage;
+  const listPath = variant === 'mobile' ? '/m/instruments' : '/instruments';
+  const detailPath = variant === 'mobile' ? `/m/instruments/${id}` : `/instruments/${id}`;
   return (
-    <Shell>
-      <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>
+    <Page
+      backLabel={mode === 'edit' ? '返回仪器详情' : '返回仪器资源'}
+      backPath={mode === 'edit' ? detailPath : listPath}
+      capability={
+        mode === 'create'
+          ? INSTRUMENT_CAPABILITIES.create
+          : INSTRUMENT_CAPABILITIES.update
+      }
+      detailPath={record ? detailPath : undefined}
+      loading={mode === 'edit' && query.query.isLoading}
+      mode={mode}
+      notFound={mode === 'edit' && !record}
+      recordSummary={
+        record && `${record.chineseName} · ${record.instrumentCode} · 当前版本 ${record.revision}`
+      }
+      resource="instruments"
+      surface={instrumentSurface}
+      title="仪器"
+    >
       <InstrumentForm
         mode={mode}
+        variant={variant}
         onCancel={() =>
-          navigate(mode === 'edit' ? `/instruments/${id}` : '/instruments')
+          navigate(mode === 'edit' ? detailPath : listPath)
         }
         onSubmit={async values => {
           if (mode === 'create') {
@@ -98,7 +63,7 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
               values,
             });
             message.success('仪器已创建');
-            navigate('/instruments');
+            navigate(listPath);
           } else {
             const result = await update.mutateAsync({
               resource: 'instruments',
@@ -107,11 +72,11 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
               meta: { expectedRevision: record!.revision },
             });
             message.success('修改已保存');
-            navigate(`/instruments/${result.data.id}`);
+            navigate(variant === 'mobile' ? `/m/instruments/${result.data.id}` : `/instruments/${result.data.id}`);
           }
         }}
         record={record}
       />
-    </Shell>
+    </Page>
   );
 }