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

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

@@ -0,0 +1,500 @@
+import {
+  PictureOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+  Tag,
+  Upload,
+} from 'antd';
+import type {
+  DataFieldSurface,
+  DataFileRef,
+} from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { AuthoritativeSelector, ResolvedValueText } from '../../AuthoritativeSelector';
+import { AttachmentFileList } from '../platform-fields/AttachmentFileList';
+import { PlatformDirectoryPicker } from '../platform-fields/PlatformDirectoryPicker';
+
+export type SurfaceField = DataFieldSurface & { key: string };
+
+export function listSurfaceFields(fields: Record<string, DataFieldSurface>) {
+  return Object.entries(fields)
+    .filter(([, field]) => field.list)
+    .map(([key, field]) => ({ key, ...field }));
+}
+
+export interface SurfaceFieldEditContext {
+  field: SurfaceField;
+  disabled: boolean;
+  operation: 'create' | 'update';
+  recordId?: string;
+}
+
+export interface SurfaceFieldValueContext {
+  field: SurfaceField;
+  value: unknown;
+}
+
+export interface SurfaceFieldRenderers {
+  renderExtra?: (context: SurfaceFieldEditContext) => ReactNode;
+  renderScope?: (context: SurfaceFieldEditContext) => ReactNode;
+  renderFilter?: (context: SurfaceFilterContext) => ReactNode;
+  upload?: (
+    field: SurfaceField,
+    file: File,
+    recordId?: string
+  ) => Promise<DataFileRef>;
+  renderValue?: (context: SurfaceFieldValueContext) => ReactNode | undefined;
+}
+
+export interface SurfaceFilterContext {
+  field: SurfaceField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}
+
+/** Render a standard filter control from the same field surface used by forms. */
+export function SurfaceFilterControl({
+  field,
+  value,
+  onChange,
+  range = false,
+  renderers,
+}: SurfaceFilterContext & { range?: boolean; renderers?: Pick<SurfaceFieldRenderers, 'renderScope' | 'renderFilter'> }) {
+  const custom = renderers?.renderFilter?.({ field, value, onChange });
+  if (custom !== undefined) return custom;
+  const placeholder = `筛选${field.label}`;
+  switch (field.widget) {
+    case 'boolean':
+      return (
+        <Select
+          allowClear
+          options={[{ label: '是', value: true }, { label: '否', value: false }]}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    case 'select':
+    case 'multi':
+      return (
+        <Select
+          allowClear
+          mode={field.widget === 'multi' ? 'multiple' : undefined}
+          options={field.options}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    case 'date':
+    case 'datetime':
+      return range ? (
+        <DatePicker.RangePicker
+          placeholder={[`起始${field.label}`, `结束${field.label}`]}
+          showTime={field.widget === 'datetime'}
+          onChange={(_, values) => onChange(values[0] && values[1] ? [values[0], values[1]] : undefined)}
+        />
+      ) : <DatePicker showTime={field.widget === 'datetime'} onChange={onChange} placeholder={placeholder} />;
+    case 'number':
+    case 'money':
+    case 'percent':
+      if (range) {
+        const values = Array.isArray(value) ? value as [number | undefined, number | undefined] : [];
+        return (
+          <Space.Compact>
+            <InputNumber min={0} onChange={next => onChange([next === null ? undefined : Number(next), values[1]])} placeholder={`最低${field.label}`} value={values[0]} />
+            <InputNumber min={0} onChange={next => onChange([values[0], next === null ? undefined : Number(next)])} placeholder={`最高${field.label}`} value={values[1]} />
+          </Space.Compact>
+        );
+      }
+      return <InputNumber min={0} onChange={onChange} placeholder={placeholder} value={value as number | null | undefined} />;
+    case 'scope':
+      return renderers?.renderScope?.({ field, disabled: false, operation: 'update' }) || <Input allowClear value={value as string | undefined} onChange={event => onChange(event.target.value)} placeholder={placeholder} />;
+    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} />;
+  }
+}
+
+export function SurfaceFieldControl({
+  field,
+  disabled,
+  operation,
+  recordId,
+  renderers,
+}: SurfaceFieldEditContext & { renderers?: SurfaceFieldRenderers }) {
+  const rules = [
+    ...(field.requiredHint
+      ? [{ required: true, message: `请填写或选择${field.label}` }]
+      : []),
+    ...(field.widget === 'email'
+      ? [{ type: 'email' as const, message: '邮箱格式不正确' }]
+      : []),
+    ...(field.widget === 'phone'
+      ? [{ pattern: /^1\d{10}$/, message: '请输入 11 位手机号' }]
+      : []),
+  ];
+  const common = { disabled, placeholder: `请输入${field.label}` };
+  let control: ReactNode = <Input {...common} />;
+  switch (field.widget) {
+    case 'textarea':
+      control = <Input.TextArea {...common} rows={3} />;
+      break;
+    case 'number':
+    case 'money':
+    case 'percent':
+      control = <InputNumber {...common} min={0} style={{ width: '100%' }} />;
+      break;
+    case 'date':
+    case 'datetime':
+      control = <DatePicker disabled={disabled} showTime={field.widget === 'datetime'} style={{ width: '100%' }} />;
+      break;
+    case 'boolean':
+      control = <Switch checkedChildren="是" disabled={disabled} unCheckedChildren="否" />;
+      break;
+    case 'select':
+      control = <Select disabled={disabled} options={field.options} placeholder={`请选择${field.label}`} />;
+      break;
+    case 'multi':
+      control = <Select disabled={disabled} mode="multiple" options={field.options} placeholder={`请选择${field.label}`} />;
+      break;
+    case 'email':
+      control = <Input {...common} type="email" />;
+      break;
+    case 'phone':
+      control = <Input {...common} type="tel" />;
+      break;
+    case 'scope':
+      control = renderers?.renderScope?.({ field, disabled, operation, recordId }) || (
+        <Input {...common} />
+      );
+      break;
+    case 'directory-user':
+    case 'directory-department':
+      control = (
+        <PlatformDirectoryPicker
+          disabled={disabled}
+          kind={field.widget === 'directory-user' ? 'user' : 'department'}
+          multiple={field.multiple}
+          placeholder={`搜索并选择${field.label}`}
+        />
+      );
+      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
+          accept={field.accept}
+          disabled={disabled}
+          field={field}
+          maxCount={field.maxCount}
+          multiple={field.multiple}
+          onUpload={renderers?.upload}
+          recordId={recordId}
+        />
+      );
+      break;
+    case 'json':
+      control = <Input.TextArea {...common} rows={4} />;
+      break;
+    case 'readonly':
+      control = <Input {...common} readOnly />;
+      break;
+    case 'text':
+    default:
+      break;
+  }
+  const extra =
+    renderers?.renderExtra?.({ field, disabled, operation, recordId }) ||
+    (disabled ? '当前角色不可修改此字段' : undefined);
+  const wide = field.widget === 'textarea' || field.widget === 'file' || field.widget === 'json';
+  return (
+    <Form.Item
+      className={wide ? 'oxa-field-wide' : undefined}
+      extra={extra}
+      label={field.label}
+      name={field.key}
+      rules={rules}
+      valuePropName={field.widget === 'boolean' ? 'checked' : 'value'}
+    >
+      {control}
+    </Form.Item>
+  );
+}
+
+/** Mobile keeps the same field values and validation but uses native controls. */
+export function MobileSurfaceFieldControl({
+  field,
+  disabled,
+  operation,
+  recordId,
+  renderers,
+}: SurfaceFieldEditContext & { renderers?: SurfaceFieldRenderers }) {
+  const rules = field.requiredHint
+    ? [{ required: true, message: `请填写或选择${field.label}` }]
+    : [];
+  const inputProps = { disabled, className: 'oxa-mobile-input', placeholder: `请输入${field.label}` };
+  let control: ReactNode = <input {...inputProps} />;
+  switch (field.widget) {
+    case 'textarea':
+    case 'json':
+      control = <textarea {...inputProps} rows={4} />;
+      break;
+    case 'number':
+    case 'money':
+    case 'percent':
+      control = <input {...inputProps} min={0} type="number" />;
+      break;
+    case 'date':
+      control = <input {...inputProps} type="date" />;
+      break;
+    case 'datetime':
+      control = <input {...inputProps} type="datetime-local" />;
+      break;
+    case 'boolean':
+      control = <input disabled={disabled} type="checkbox" />;
+      break;
+    case 'select':
+    case 'multi':
+      control = (
+        <select
+          className="oxa-mobile-input"
+          disabled={disabled}
+          multiple={field.widget === 'multi'}
+        >
+          {field.options?.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+      break;
+    case 'email':
+      control = <input {...inputProps} type="email" />;
+      break;
+    case 'phone':
+      control = <input {...inputProps} type="tel" />;
+      break;
+    case 'scope':
+      control = renderers?.renderScope?.({ field, disabled, operation, recordId }) || (
+        <input {...inputProps} />
+      );
+      break;
+    case 'directory-user':
+    case 'directory-department':
+      control = (
+        <PlatformDirectoryPicker
+          disabled={disabled}
+          kind={field.widget === 'directory-user' ? 'user' : 'department'}
+          multiple={field.multiple}
+          placeholder={`搜索并选择${field.label}`}
+        />
+      );
+      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
+          accept={field.accept}
+          disabled={disabled}
+          field={field}
+          maxCount={field.maxCount}
+          multiple={field.multiple}
+          onUpload={renderers?.upload}
+          recordId={recordId}
+        />
+      );
+      break;
+    case 'readonly':
+      control = <input {...inputProps} readOnly />;
+      break;
+  }
+  return (
+    <Form.Item
+      className="oxa-mobile-field"
+      extra={renderers?.renderExtra?.({ field, disabled, operation, recordId })}
+      label={field.label}
+      name={field.key}
+      rules={rules}
+      valuePropName={field.widget === 'boolean' ? 'checked' : 'value'}
+    >
+      {control}
+    </Form.Item>
+  );
+}
+
+export function SurfaceFieldValue({
+  field,
+  value,
+  renderers,
+}: SurfaceFieldValueContext & { renderers?: SurfaceFieldRenderers }) {
+  if (value === undefined || value === null || value === '') return <>-</>;
+  const custom = renderers?.renderValue?.({ field, value });
+  if (custom !== undefined) return <>{custom}</>;
+  if (field.widget === 'directory-user' || field.widget === 'directory-department') {
+    return (
+      <ResolvedValueText
+        source={field.widget === 'directory-user' ? 'user' : 'department'}
+        value={Array.isArray(value) ? value.map(String) : String(value)}
+      />
+    );
+  }
+  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} /> : <>-</>;
+  }
+  if (field.widget === 'boolean') {
+    return <Tag color={value ? 'green' : 'default'}>{value ? '是' : '否'}</Tag>;
+  }
+  if (Array.isArray(value)) {
+    return <>{value.map(item => optionLabel(field, item)).join('、') || '-'}</>;
+  }
+  if (field.widget === 'date' || field.widget === 'datetime') {
+    const parsed = new Date(String(value));
+    return <>{Number.isNaN(parsed.getTime()) ? String(value) : parsed.toLocaleString('zh-CN', { hour12: false })}</>;
+  }
+  return <>{optionLabel(field, value)}</>;
+}
+
+function optionLabel(field: SurfaceField, value: unknown) {
+  return field.options?.find(option => option.value === value)?.label || String(value);
+}
+
+function isFileRef(value: unknown): value is DataFileRef {
+  return Boolean(value && typeof value === 'object' && 'id' in value);
+}
+
+function ManagedFileField({
+  field,
+  value,
+  onChange,
+  recordId,
+  disabled,
+  multiple,
+  maxCount = 1,
+  accept,
+  onUpload,
+}: {
+  field: SurfaceField;
+  value?: DataFileRef | DataFileRef[];
+  onChange?: (value: DataFileRef | DataFileRef[] | undefined) => void;
+  recordId?: string;
+  disabled?: boolean;
+  multiple?: boolean;
+  maxCount?: number;
+  accept?: string | string[];
+  onUpload?: SurfaceFieldRenderers['upload'];
+}) {
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState('');
+  const refs = useMemo(() => (Array.isArray(value) ? value : value ? [value] : []), [value]);
+  const refsRef = useRef(refs);
+  useEffect(() => {
+    refsRef.current = refs;
+  }, [refs]);
+  if (!onUpload) {
+    return <Alert type="info" showIcon message="该文件字段尚未配置上传能力" />;
+  }
+  const uploadProps = {
+    accept: Array.isArray(accept) ? accept.join(',') : 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 onUpload(field, 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={field.accept?.toString().startsWith('image/') ? <PictureOutlined /> : <UploadOutlined />} loading={uploading}>
+          {field.accept?.toString().startsWith('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>
+  );
+}

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

@@ -1,42 +1,47 @@
 import type { DataProvider } from '@refinedev/core';
-import type { InstrumentListQuery, InstrumentRecord } from './instrument';
-import { instrumentDataApi } from './platform-client';
+import { createNativeResourceClient, type GenericResourceQuery } from './platform-client';
 import { applicationCode } from './runtime-meta';
+import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
 
-export const instrumentProvider = {
-  getApiUrl: () =>
-    `/service/openxiangda-api/v2/applications/${applicationCode()}/native/data`,
-  getList: async ({ pagination, sorters, meta }) => {
-    const filters = (meta?.query || {}) as Partial<InstrumentListQuery>;
+type GeneratedDefinition = {
+  code: string;
+  name: string;
+  capabilities: { read: string; create: string; update: string; delete: string };
+  surface: import('openxiangda-contracts/browser').DataResourceSurface;
+};
+
+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 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 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 instrumentDataApi.list({
-      ...filters,
+    const result = await clientFor(resource).list({
       page: pagination?.currentPage || 1,
       pageSize: pagination?.pageSize || 20,
-      sort: sorter
-        ? {
-            field: String(sorter.field),
-            order: sorter.order,
-          }
-        : { field: 'instrumentCode', order: 'asc' },
+      ...query,
+      ...(sorter ? { sort: { field: String(sorter.field), order: (sorter.order || 'asc') as 'asc' | 'desc' } } : {}),
     });
     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>
-    ),
+  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>),
   }),
-  deleteOne: async ({ id, meta }) => ({
-    data: await instrumentDataApi.remove(
-      String(id),
-      Number(meta?.expectedRevision)
-    ),
+  deleteOne: async ({ resource, id, meta }: DeleteParams) => ({
+    data: await clientFor(resource).remove(String(id), Number(meta?.expectedRevision)),
   }),
-} as DataProvider;
+} as unknown as DataProvider;

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

@@ -4,75 +4,45 @@ 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 { instrumentProvider } from './data-provider';
-import { CollegePage } from './CollegePage';
+import { resourceDefinitions } from '../../../packages/contracts/src/generated.js';
+import { applicationProvider } from './data-provider';
+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 './styles.css';
 
+const codes = Object.keys(resourceDefinitions);
+const firstPath = codes[0] ? `/${codes[0]}` : '/';
+
+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>
         <RuntimeBoundary>
           <BrowserRouter basename={applicationBasename()}>
-            <Refine
-              dataProvider={instrumentProvider}
-              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="/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="/" 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>,
 );