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

package/template/apps/web/src/components/resource/SurfaceFields.tsx

@@ -21,8 +21,12 @@ import type {
   DataFileRef,
 } from 'openxiangda-contracts/browser';
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { ResolvedValueText } from '../../AuthoritativeSelector';
-import { AttachmentFileList } from '../platform-fields/AttachmentFileList';
+import {
+  AuthoritativeSelector,
+  MobileAuthoritativeSelector,
+  ResolvedValueText,
+} from '../../AuthoritativeSelector';
+import { AttachmentFileList, formatManagedFileSize } from '../platform-fields/AttachmentFileList';
 import { PlatformDirectoryPicker } from '../platform-fields/PlatformDirectoryPicker';
 
 export type SurfaceField = DataFieldSurface & { key: string };
@@ -124,6 +128,8 @@ export function SurfaceFilterControl({
     case 'directory-user':
     case 'directory-department':
       return <PlatformDirectoryPicker kind={field.widget === 'directory-user' ? 'user' : 'department'} multiple={field.multiple} onChange={onChange as (value: string | string[] | undefined) => void} placeholder={placeholder} value={value as string | string[] | undefined} />;
+    case 'resource':
+      return <AuthoritativeSelector source="resource" resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined} labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined} multiple={field.multiple} onChange={onChange as (value: string | string[] | undefined) => void} placeholder={placeholder} value={value as string | string[] | undefined} operation="update" />;
     default:
       return <Input allowClear value={value as string | undefined} onChange={event => onChange(event.target.value)} placeholder={placeholder} />;
   }
@@ -193,6 +199,19 @@ export function SurfaceFieldControl({
         />
       );
       break;
+    case 'resource':
+      control = (
+        <AuthoritativeSelector
+          disabled={disabled}
+          labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined}
+          multiple={field.multiple}
+          operation={operation}
+          placeholder={`搜索并选择${field.label}`}
+          resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined}
+          source="resource"
+        />
+      );
+      break;
     case 'file':
       control = (
         <ManagedFileField
@@ -304,6 +323,19 @@ export function MobileSurfaceFieldControl({
         />
       );
       break;
+    case 'resource':
+      control = (
+        <MobileAuthoritativeSelector
+          disabled={disabled}
+          labelField={field.reference?.kind === 'resource' ? field.reference.labelField : undefined}
+          multiple={field.multiple}
+          operation={operation}
+          placeholder={`搜索并选择${field.label}`}
+          resourceCode={field.reference?.kind === 'resource' ? field.reference.resourceCode : undefined}
+          source="resource"
+        />
+      );
+      break;
     case 'file':
       control = (
         <ManagedFileField
@@ -312,6 +344,7 @@ export function MobileSurfaceFieldControl({
           field={field}
           maxCount={field.maxCount}
           multiple={field.multiple}
+          mobile
           onUpload={renderers?.upload}
           recordId={recordId}
         />
@@ -351,6 +384,9 @@ export function SurfaceFieldValue({
       />
     );
   }
+  if (field.widget === 'resource' && field.reference?.kind === 'resource') {
+    return <ResolvedValueText labelField={field.reference.labelField} resourceCode={field.reference.resourceCode} source="resource" value={Array.isArray(value) ? value.map(String) : String(value)} />;
+  }
   if (field.widget === 'file') {
     const values = (Array.isArray(value) ? value : [value]).filter(isFileRef);
     return values.length ? <AttachmentFileList files={values} /> : <>-</>;
@@ -376,6 +412,20 @@ function isFileRef(value: unknown): value is DataFileRef {
   return Boolean(value && typeof value === 'object' && 'id' in value);
 }
 
+type MobilePendingUpload = {
+  id: string;
+  file: File;
+  status: 'uploading' | 'error';
+  error?: string;
+};
+
+let mobileUploadSequence = 0;
+
+function createMobileUploadId() {
+  mobileUploadSequence += 1;
+  return `mobile-upload-${Date.now()}-${mobileUploadSequence}`;
+}
+
 function ManagedFileField({
   field,
   value,
@@ -386,6 +436,7 @@ function ManagedFileField({
   maxCount = 1,
   accept,
   onUpload,
+  mobile = false,
 }: {
   field: SurfaceField;
   value?: DataFileRef | DataFileRef[];
@@ -396,9 +447,13 @@ function ManagedFileField({
   maxCount?: number;
   accept?: string | string[];
   onUpload?: SurfaceFieldRenderers['upload'];
+  mobile?: boolean;
 }) {
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState('');
+  const [mobilePending, setMobilePending] = useState<MobilePendingUpload[]>([]);
+  const mobileInputRef = useRef<HTMLInputElement | null>(null);
+  const mobileActiveUploads = useRef(0);
   const refs = useMemo(() => (Array.isArray(value) ? value : value ? [value] : []), [value]);
   const refsRef = useRef(refs);
   useEffect(() => {
@@ -407,6 +462,91 @@ function ManagedFileField({
   if (!onUpload) {
     return <Alert type="info" showIcon message="该文件字段尚未配置上传能力" />;
   }
+  if (mobile) {
+    const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;
+    const uploadOne = async (item: MobilePendingUpload) => {
+      setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'uploading', error: undefined } : entry));
+      mobileActiveUploads.current += 1;
+      setUploading(true);
+      try {
+        const uploaded = await onUpload(field, item.file, recordId);
+        const next = multiple ? [...refsRef.current, uploaded].slice(0, maxCount) : uploaded;
+        refsRef.current = Array.isArray(next) ? next : next ? [next] : [];
+        onChange?.(next);
+        setMobilePending(current => current.filter(entry => entry.id !== item.id));
+      } catch (error) {
+        setMobilePending(current => current.map(entry => entry.id === item.id ? { ...entry, status: 'error', error: error instanceof Error ? error.message : String(error) } : entry));
+      } finally {
+        mobileActiveUploads.current = Math.max(0, mobileActiveUploads.current - 1);
+        setUploading(mobileActiveUploads.current > 0);
+      }
+    };
+    const selectFiles = (files: File[]) => {
+      const pendingCount = mobilePending.length;
+      const available = Math.max(0, maxCount - refsRef.current.length - pendingCount);
+      const selected = multiple ? files.slice(0, available) : files.slice(0, 1);
+      if (!selected.length) return;
+      const items = selected.map(file => ({ id: createMobileUploadId(), file, status: 'uploading' as const }));
+      setMobilePending(current => multiple ? [...current, ...items] : items);
+      items.forEach(item => void uploadOne(item));
+    };
+    return (
+      <div className="oxa-file-field oxa-mobile-file-field">
+        <input
+          ref={mobileInputRef}
+          accept={acceptValue}
+          disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading') || refs.length + mobilePending.length >= maxCount}
+          multiple={multiple}
+          onChange={event => {
+            selectFiles(Array.from(event.target.files || []));
+            event.currentTarget.value = '';
+          }}
+          style={{ display: 'none' }}
+          type="file"
+        />
+        {(!maxCount || refs.length + mobilePending.length < maxCount) && (
+          <Button
+            className="oxa-mobile-file-button"
+            disabled={disabled || uploading || mobilePending.some(item => item.status === 'uploading')}
+            icon={<UploadOutlined />}
+            onClick={() => mobileInputRef.current?.click()}
+          >
+            上传文件
+          </Button>
+        )}
+        {mobilePending.length > 0 && (
+          <div className="oxa-mobile-pending-files">
+            {mobilePending.map(item => (
+              <div className="oxa-mobile-pending-file" key={item.id}>
+                <span className="oxa-mobile-pending-file-copy">
+                  <strong className="oxa-mobile-pending-file-name" title={item.file.name}>{item.file.name}</strong>
+                  <small>{formatManagedFileSize(item.file.size)} · {item.status === 'error' ? '上传失败' : '上传中…'}</small>
+                </span>
+                {item.status === 'error' ? (
+                  <>
+                    <span className="oxa-mobile-pending-error">{item.error || '上传失败'}</span>
+                    <Button onClick={() => void uploadOne(item)} size="small" type="link">重试</Button>
+                    <Button onClick={() => setMobilePending(current => current.filter(entry => entry.id !== item.id))} size="small" type="link">移除</Button>
+                  </>
+                ) : (
+                  <span className="oxa-mobile-pending-status">上传中…</span>
+                )}
+              </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>
+        )}
+      </div>
+    );
+  }
   const uploadProps = {
     accept: Array.isArray(accept) ? accept.join(',') : accept,
     disabled,

package/template/apps/web/src/data-provider.ts

@@ -1,10 +1,5 @@
 import type { DataProvider } from '@refinedev/core';
-import type { InstrumentListQuery, InstrumentRecord } from './instrument';
-import {
-  createNativeResourceClient,
-  instrumentDataApi,
-  type GenericResourceQuery,
-} from './platform-client';
+import { createNativeResourceClient, type GenericResourceQuery } from './platform-client';
 import { applicationCode } from './runtime-meta';
 import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
 
@@ -15,112 +10,38 @@ type GeneratedDefinition = {
   surface: import('openxiangda-contracts/browser').DataResourceSurface;
 };
 
-const generatedDefinitions = resourceDefinitions as unknown as Record<string, GeneratedDefinition>;
+const definitions = resourceDefinitions as unknown as Record<string, GeneratedDefinition>;
+type ListParams = Parameters<NonNullable<DataProvider['getList']>>[0];
+type OneParams = Parameters<NonNullable<DataProvider['getOne']>>[0];
+type CreateParams = Parameters<NonNullable<DataProvider['create']>>[0];
+type UpdateParams = Parameters<NonNullable<DataProvider['update']>>[0];
+type DeleteParams = Parameters<NonNullable<DataProvider['deleteOne']>>[0];
 
-function generatedClient(resource: string) {
-  const definition = generatedDefinitions[resource];
-  if (!definition || definition.surface.generated === false) {
-    throw new Error(`OPENXIANGDA_GENERATED_RESOURCE_NOT_DECLARED:${resource}`);
-  }
+function clientFor(resource: string) {
+  const definition = definitions[resource];
+  if (!definition) throw new Error(`OPENXIANGDA_GENERATED_RESOURCE_NOT_DECLARED:${resource}`);
   return createNativeResourceClient(resource, definition.surface);
 }
 
-export const instrumentProvider = {
-  getApiUrl: () =>
-    `/service/openxiangda-api/v2/applications/${applicationCode()}/native/data`,
-  getList: async ({ pagination, sorters, meta }) => {
-    const filters = (meta?.query || {}) as Partial<InstrumentListQuery>;
-    const sorter = sorters?.[0];
-    const result = await instrumentDataApi.list({
-      ...filters,
-      page: pagination?.currentPage || 1,
-      pageSize: pagination?.pageSize || 20,
-      sort: sorter
-        ? {
-            field: String(sorter.field),
-            order: sorter.order,
-          }
-        : { field: 'instrumentCode', order: 'asc' },
-    });
-    return { data: result.rows, total: result.total };
-  },
-  getOne: async ({ id }) => ({ data: await instrumentDataApi.get(String(id)) }),
-  create: async ({ variables }) => ({
-    data: await instrumentDataApi.create(variables as Partial<InstrumentRecord>),
-  }),
-  update: async ({ id, variables, meta }) => ({
-    data: await instrumentDataApi.update(
-      String(id),
-      Number(meta?.expectedRevision),
-      variables as Partial<InstrumentRecord>
-    ),
-  }),
-  deleteOne: async ({ id, meta }) => ({
-    data: await instrumentDataApi.remove(
-      String(id),
-      Number(meta?.expectedRevision)
-    ),
-  }),
-} as DataProvider;
-
-const generatedProvider = {
-  getApiUrl: () =>
-    `/service/openxiangda-api/v2/applications/${applicationCode()}/native/data`,
-  getList: async ({ resource, pagination, sorters, meta }) => {
+export const applicationProvider = {
+  getApiUrl: () => `/service/openxiangda-api/v2/applications/${applicationCode()}/native/data`,
+  getList: async ({ resource, pagination, sorters, meta }: ListParams) => {
     const query = (meta?.query || {}) as Partial<GenericResourceQuery>;
     const sorter = sorters?.[0];
-    const result = await generatedClient(resource).list({
-      ...query,
+    const result = await clientFor(resource).list({
       page: pagination?.currentPage || 1,
       pageSize: pagination?.pageSize || 20,
-      sort: sorter
-        ? { field: String(sorter.field), order: sorter.order || 'asc' }
-        : query.sort,
+      ...query,
+      ...(sorter ? { sort: { field: String(sorter.field), order: (sorter.order || 'asc') as 'asc' | 'desc' } } : {}),
     });
     return { data: result.rows, total: result.total };
   },
-  getOne: async ({ resource, id }) => ({
-    data: await generatedClient(resource).get(String(id)),
+  getOne: async ({ resource, id }: OneParams) => ({ data: await clientFor(resource).get(String(id)) }),
+  create: async ({ resource, variables }: CreateParams) => ({ data: await clientFor(resource).create(variables as Record<string, unknown>) }),
+  update: async ({ resource, id, variables, meta }: UpdateParams) => ({
+    data: await clientFor(resource).update(String(id), Number(meta?.expectedRevision), variables as Record<string, unknown>),
   }),
-  create: async ({ resource, variables }) => ({
-    data: await generatedClient(resource).create(variables as Record<string, unknown>),
+  deleteOne: async ({ resource, id, meta }: DeleteParams) => ({
+    data: await clientFor(resource).remove(String(id), Number(meta?.expectedRevision)),
   }),
-  update: async ({ resource, id, variables, meta }) => ({
-    data: await generatedClient(resource).update(
-      String(id),
-      Number(meta?.expectedRevision),
-      variables as Record<string, unknown>
-    ),
-  }),
-  deleteOne: async ({ resource, id, meta }) => ({
-    data: await generatedClient(resource).remove(
-      String(id),
-      Number(meta?.expectedRevision)
-    ),
-  }),
-} as DataProvider;
-
-/** One Refine provider: golden modules may override a resource, simple resources use generated CRUD. */
-export const applicationProvider = {
-  getApiUrl: instrumentProvider.getApiUrl,
-  getList: (args: Parameters<NonNullable<DataProvider['getList']>>[0]) =>
-    args.resource === 'instruments'
-      ? instrumentProvider.getList!(args)
-      : generatedProvider.getList!(args),
-  getOne: (args: Parameters<NonNullable<DataProvider['getOne']>>[0]) =>
-    args.resource === 'instruments'
-      ? instrumentProvider.getOne!(args)
-      : generatedProvider.getOne!(args),
-  create: (args: Parameters<NonNullable<DataProvider['create']>>[0]) =>
-    args.resource === 'instruments'
-      ? instrumentProvider.create!(args)
-      : generatedProvider.create!(args),
-  update: (args: Parameters<NonNullable<DataProvider['update']>>[0]) =>
-    args.resource === 'instruments'
-      ? instrumentProvider.update!(args)
-      : generatedProvider.update!(args),
-  deleteOne: (args: Parameters<NonNullable<DataProvider['deleteOne']>>[0]) =>
-    args.resource === 'instruments'
-      ? instrumentProvider.deleteOne!(args)
-      : generatedProvider.deleteOne!(args),
-} as DataProvider;
+} as unknown as DataProvider;

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

@@ -1,108 +1,60 @@
 import { Refine } from '@refinedev/core';
-import { App as AntdApp, ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider, Spin } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
 import { applicationProvider } from './data-provider';
-import { CollegePage } from './CollegePage';
 import { GeneratedResourcePage } from './components/resource/GeneratedResourceCrud';
 import { FilePreviewPage } from './FilePreviewPage';
-import { InstrumentDetailPage } from './InstrumentDetailPage';
-import { InstrumentFormPage } from './InstrumentFormPage';
-import { InstrumentListPage } from './InstrumentListPage';
+import { EmptyApplicationPage } from './Shell';
 import { RuntimeBoundary } from './runtime';
 import { applicationBasename } from './runtime-meta';
+import { useGlobalRequestLoading } from './platform-client';
 import './styles.css';
-import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
+
+const codes = Object.keys(resourceDefinitions);
+const firstPath = codes[0] ? `/${codes[0]}` : '/';
+
+function GlobalRequestLoading() {
+  const loading = useGlobalRequestLoading();
+  return loading ? (
+    <div aria-live="polite" className="oxa-global-request-loading">
+      <Spin size="small" />
+      <span>正在加载…</span>
+    </div>
+  ) : null;
+}
+
+const resourceRoutes = codes.flatMap(resourceCode => [
+  <Route key={`${resourceCode}-list`} path={`/${resourceCode}`} element={<GeneratedResourcePage resourceCode={resourceCode} />} />,
+  <Route key={`${resourceCode}-new`} path={`/${resourceCode}/new`} element={<GeneratedResourcePage mode="create" resourceCode={resourceCode} />} />,
+  <Route key={`${resourceCode}-detail`} path={`/${resourceCode}/:id`} element={<GeneratedResourcePage mode="detail" resourceCode={resourceCode} />} />,
+  <Route key={`${resourceCode}-edit`} path={`/${resourceCode}/:id/edit`} element={<GeneratedResourcePage mode="edit" resourceCode={resourceCode} />} />,
+  <Route key={`${resourceCode}-mobile-list`} path={`/m/${resourceCode}`} element={<GeneratedResourcePage resourceCode={resourceCode} variant="mobile" />} />,
+  <Route key={`${resourceCode}-mobile-new`} path={`/m/${resourceCode}/new`} element={<GeneratedResourcePage mode="create" resourceCode={resourceCode} variant="mobile" />} />,
+  <Route key={`${resourceCode}-mobile-detail`} path={`/m/${resourceCode}/:id`} element={<GeneratedResourcePage mode="detail" resourceCode={resourceCode} variant="mobile" />} />,
+  <Route key={`${resourceCode}-mobile-edit`} path={`/m/${resourceCode}/:id/edit`} element={<GeneratedResourcePage mode="edit" resourceCode={resourceCode} variant="mobile" />} />,
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ConfigProvider
-      locale={zhCN}
-      theme={{
-        token: {
-          borderRadius: 8,
-          colorBgLayout: '#f3f7fd',
-          colorPrimary: '#1677ff',
-          colorText: '#172033',
-          fontSize: 14,
-        },
-        components: {
-          Card: { headerFontSize: 16 },
-          Layout: { bodyBg: '#f3f7fd', headerBg: '#ffffff', siderBg: '#ffffff' },
-          Menu: { itemBorderRadius: 8, itemSelectedBg: '#eaf3ff' },
-        },
-      }}
-    >
+    <ConfigProvider locale={zhCN} theme={{ token: { borderRadius: 8, colorBgLayout: '#f3f7fd', colorPrimary: '#1677ff', colorText: '#172033', fontSize: 14 }, components: { Card: { headerFontSize: 16 }, Layout: { bodyBg: '#f3f7fd', headerBg: '#ffffff', siderBg: '#ffffff' }, Menu: { itemBorderRadius: 8, itemSelectedBg: '#eaf3ff' } } }}>
       <AntdApp>
+        <GlobalRequestLoading />
         <RuntimeBoundary>
           <BrowserRouter basename={applicationBasename()}>
-            <Refine
-              dataProvider={applicationProvider}
-              resources={[
-                {
-                  name: 'instruments',
-                  list: '/instruments',
-                  create: '/instruments/new',
-                  edit: '/instruments/:id/edit',
-                  show: '/instruments/:id',
-                },
-              ]}
-            >
+            <Refine dataProvider={applicationProvider} resources={codes.map(code => ({ name: code, list: `/${code}`, create: `/${code}/new`, edit: `/${code}/:id/edit`, show: `/${code}/:id` }))}>
               <Routes>
-                <Route path="/" element={<Navigate replace to="/instruments" />} />
-                <Route path="/instruments" element={<InstrumentListPage />} />
-                <Route
-                  path="/m/instruments"
-                  element={<InstrumentListPage variant="mobile" />}
-                />
-                <Route path="/colleges" element={<CollegePage />} />
-                <Route
-                  path="/files/:resourceCode/:fileId/preview"
-                  element={<FilePreviewPage />}
-                />
-                <Route
-                  path="/instruments/new"
-                  element={<InstrumentFormPage mode="create" />}
-                />
-                <Route
-                  path="/instruments/:id/edit"
-                  element={<InstrumentFormPage mode="edit" />}
-                />
-                <Route
-                  path="/instruments/:id"
-                  element={<InstrumentDetailPage />}
-                />
-                <Route
-                  path="/m/instruments/:id"
-                  element={<InstrumentDetailPage variant="mobile" />}
-                />
-                <Route
-                  path="/m/instruments/new"
-                  element={<InstrumentFormPage mode="create" variant="mobile" />}
-                />
-                <Route
-                  path="/m/instruments/:id/edit"
-                  element={<InstrumentFormPage mode="edit" variant="mobile" />}
-                />
-                {Object.entries(resourceDefinitions)
-                  .filter(([, definition]) => definition.surface.generated !== false)
-                  .flatMap(([resourceCode]) => [
-                    <Route key={`${resourceCode}-list`} path={`/${resourceCode}`} element={<GeneratedResourcePage resourceCode={resourceCode} />} />,
-                    <Route key={`${resourceCode}-new`} path={`/${resourceCode}/new`} element={<GeneratedResourcePage mode="create" resourceCode={resourceCode} />} />,
-                    <Route key={`${resourceCode}-detail`} path={`/${resourceCode}/:id`} element={<GeneratedResourcePage mode="detail" resourceCode={resourceCode} />} />,
-                    <Route key={`${resourceCode}-edit`} path={`/${resourceCode}/:id/edit`} element={<GeneratedResourcePage mode="edit" resourceCode={resourceCode} />} />,
-                    <Route key={`${resourceCode}-mobile-list`} path={`/m/${resourceCode}`} element={<GeneratedResourcePage resourceCode={resourceCode} variant="mobile" />} />,
-                    <Route key={`${resourceCode}-mobile-new`} path={`/m/${resourceCode}/new`} element={<GeneratedResourcePage mode="create" resourceCode={resourceCode} variant="mobile" />} />,
-                    <Route key={`${resourceCode}-mobile-detail`} path={`/m/${resourceCode}/:id`} element={<GeneratedResourcePage mode="detail" resourceCode={resourceCode} variant="mobile" />} />,
-                    <Route key={`${resourceCode}-mobile-edit`} path={`/m/${resourceCode}/:id/edit`} element={<GeneratedResourcePage mode="edit" resourceCode={resourceCode} variant="mobile" />} />,
-                  ])}
+                <Route path="/" element={codes.length ? <Navigate replace to={firstPath} /> : <EmptyApplicationPage />} />
+                <Route path="/files/:resourceCode/:fileId/preview" element={<FilePreviewPage />} />
+                {resourceRoutes}
               </Routes>
             </Refine>
           </BrowserRouter>
         </RuntimeBoundary>
       </AntdApp>
     </ConfigProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );