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

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

@@ -2,9 +2,6 @@ import {
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
-  ExportOutlined,
-  ImportOutlined,
-  PlusOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
 import { useDelete, useList } from '@refinedev/core';
@@ -12,16 +9,15 @@ import {
   App,
   Button,
   Card,
-  DatePicker,
+  Empty,
   Input,
-  InputNumber,
   Popconfirm,
-  Result,
   Select,
   Space,
+  Spin,
   Table,
   Tag,
-  Tooltip,
+  Typography,
   type TableColumnsType,
 } from 'antd';
 import { useMemo, useState } from 'react';
@@ -30,34 +26,62 @@ import {
   AuthoritativeSelector,
   ResolvedValueText,
 } from './AuthoritativeSelector';
-import { PlatformDirectoryPicker } from './components/platform-fields/PlatformDirectoryPicker';
-import { Shell } from './Shell';
+import {
+  listSurfaceFields,
+  SurfaceFilterControl,
+  SurfaceFieldValue,
+  type SurfaceField,
+} from './components/resource/SurfaceFields';
+import {
+  MobileResourceListPage,
+  ResourceListPage,
+} from './components/resource/StandardResourcePages';
 import {
   INSTRUMENT_CAPABILITIES,
   type InstrumentListQuery,
   type InstrumentRecord,
 } from './instrument';
+import { instrumentSurface } from '../../../platform/data/instrument-surface.js';
 import { useRuntime } from './runtime';
 
-const statuses = [
-  { label: '正常', value: 'normal' },
-  { label: '维修', value: 'maintenance' },
-  { label: '停用', value: 'disabled' },
-  { label: '报废', value: 'scrapped' },
-];
+const defaultSort = instrumentSurface.list?.defaultSort || {
+  field: 'instrumentCode',
+  order: 'asc' as const,
+};
+const listFields = listSurfaceFields(instrumentSurface.fields);
+const searchableFields = (instrumentSurface.list?.searchableFields || []).map(
+  key => ({ label: instrumentSurface.fields[key]?.label || key, value: key })
+);
+const listWidths: Record<string, number> = {
+  image: 84,
+  chineseName: 210,
+  specModel: 160,
+  instrumentCode: 140,
+  assetCode: 140,
+  collegeId: 140,
+  instrumentAdminIds: 130,
+  instrumentStatus: 100,
+  openToOutside: 90,
+};
+
+export function InstrumentListPage({ variant = 'desktop' }: { variant?: 'desktop' | 'mobile' }) {
+  return variant === 'mobile' ? <MobileInstrumentListPage /> : <DesktopInstrumentListPage />;
+}
 
-export function InstrumentListPage() {
+function DesktopInstrumentListPage() {
   const navigate = useNavigate();
   const { hasCapability } = useRuntime();
   const { message } = App.useApp();
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
+  const [pageSize, setPageSize] = useState(
+    instrumentSurface.list?.defaultPageSize || 20
+  );
   const [draft, setDraft] = useState<Partial<InstrumentListQuery>>({});
   const [query, setQuery] = useState<Partial<InstrumentListQuery>>({});
   const [sort, setSort] = useState<{
     field: string;
     order: 'asc' | 'desc';
-  }>({ field: 'instrumentCode', order: 'asc' });
+  }>({ field: defaultSort.field, order: defaultSort.order || 'asc' });
   const list = useList<InstrumentRecord>({
     resource: 'instruments',
     pagination: { currentPage: page, pageSize },
@@ -67,70 +91,20 @@ export function InstrumentListPage() {
   const remove = useDelete();
   const data = (list.result.data || []) as InstrumentRecord[];
   const total = list.result.total || 0;
-  const canCreate = hasCapability(INSTRUMENT_CAPABILITIES.create);
   const canUpdate = hasCapability(INSTRUMENT_CAPABILITIES.update);
   const canDelete = hasCapability(INSTRUMENT_CAPABILITIES.delete);
-  const columns = useMemo<TableColumnsType<InstrumentRecord>>(
-    () => [
-      {
-        title: '图片',
-        dataIndex: 'image',
-        width: 84,
-        render: value =>
-          value?.name ? <Tag>{String(value.name)}</Tag> : <span className="oxa-muted">无图</span>,
-      },
-      {
-        title: '仪器名称',
-        dataIndex: 'chineseName',
-        width: 210,
-        sorter: true,
-        render: (value, record) => (
-          <a onClick={() => navigate(`/instruments/${record.id}`)}>{value}</a>
-        ),
-      },
-      { title: '规格型号', dataIndex: 'specModel', width: 160 },
-      { title: '仪器编码', dataIndex: 'instrumentCode', width: 140 },
-      { title: '资产编码', dataIndex: 'assetCode', width: 140 },
-      {
-        title: '所属学院',
-        dataIndex: 'collegeId',
-        width: 140,
-        render: value => <ResolvedValueText source="college" value={value} />,
-      },
-      {
-        title: '仪器管理员',
-        dataIndex: 'instrumentAdminIds',
-        width: 130,
-        render: values => (
-          <ResolvedValueText source="user" value={values as string[]} />
-        ),
-      },
-      {
-        title: '仪器状态',
-        dataIndex: 'instrumentStatus',
-        width: 100,
-        render: value => (
-          <Tag
-            color={
-              value === 'normal'
-                ? 'green'
-                : value === 'maintenance'
-                  ? 'orange'
-                  : 'default'
-            }
-          >
-            {statuses.find(item => item.value === value)?.label || value}
-          </Tag>
-        ),
-      },
-      {
-        title: '对外开放',
-        dataIndex: 'openToOutside',
-        width: 90,
-        render: value => (
-          <Tag color={value ? 'green' : 'default'}>{value ? '是' : '否'}</Tag>
-        ),
-      },
+  const columns = useMemo<TableColumnsType<InstrumentRecord>>(() => {
+    const standardColumns = listFields.map(field => ({
+      title: field.label,
+      dataIndex: field.key,
+      key: field.key,
+      width: listWidths[field.key] || 140,
+      sorter: Boolean(field.sortable),
+      render: (value: unknown, record: InstrumentRecord) =>
+        renderListValue(field, value, record, navigate),
+    }));
+    return [
+      ...standardColumns,
       {
         title: '更新时间',
         dataIndex: 'updated_at',
@@ -188,53 +162,30 @@ export function InstrumentListPage() {
           </Space>
         ),
       },
-    ],
-    [canDelete, canUpdate, list.query, message, navigate, remove]
-  );
-  if (!hasCapability(INSTRUMENT_CAPABILITIES.read)) {
-    return (
-      <Shell>
-        <Result status="403" title="当前平台用户无仪器页面权限" />
-      </Shell>
-    );
-  }
+    ];
+  }, [canDelete, canUpdate, list.query, message, navigate, remove]);
   return (
-    <Shell>
-      <Card className="oxa-list-card">
-        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
-          <div className="oxa-page-heading">
-            <div>
-              <h2 className="oxa-title">
-                仪器资源
-              </h2>
-              <div className="oxa-muted">
-                统一管理仪器档案、归属、管理员与开放状态
-              </div>
-            </div>
-            <Space>
-              <Tooltip title="批量事务合同落地后启用，不用自定义接口绕过 Data API">
-                <Button disabled icon={<ImportOutlined />}>
-                  导入
-                </Button>
-              </Tooltip>
-              <Button
-                icon={<ExportOutlined />}
-                onClick={() => message.info('导出将使用当前 Data API 查询条件')}
-              >
-                导出
-              </Button>
-              {canCreate && (
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() => navigate('/instruments/new')}
-                >
-                  新增仪器
-                </Button>
-              )}
-            </Space>
-          </div>
+    <ResourceListPage
+      createCapability={INSTRUMENT_CAPABILITIES.create}
+      createPath="/instruments/new"
+      description="统一管理仪器档案、归属、管理员与开放状态"
+      importDisabledReason="批量事务合同落地后启用，不用自定义接口绕过 Data API"
+      onExport={() => message.info('导出将使用当前 Data API 查询条件')}
+      readCapability={INSTRUMENT_CAPABILITIES.read}
+      resource="instruments"
+      surface={instrumentSurface}
+      title="仪器资源"
+    >
           <div className="oxa-filter-grid">
+            <Select
+              allowClear
+              options={searchableFields}
+              placeholder="搜索字段"
+              value={draft.searchField}
+              onChange={value =>
+                setDraft(item => ({ ...item, searchField: value }))
+              }
+            />
             <Input
               allowClear
               prefix={<SearchOutlined />}
@@ -244,92 +195,67 @@ export function InstrumentListPage() {
                 setDraft(value => ({ ...value, keyword: event.target.value }))
               }
             />
-            <AuthoritativeSelector
-              operation="update"
-              placeholder="所属学院"
-              source="college"
-              value={draft.collegeId}
+            <SurfaceFilterControl
+              field={surfaceField('collegeId')}
+              renderers={{
+                renderFilter: context => (
+                  <AuthoritativeSelector
+                    operation="update"
+                    placeholder="所属学院"
+                    source="college"
+                    value={context.value as string | undefined}
+                    onChange={value => context.onChange(typeof value === 'string' ? value : undefined)}
+                  />
+                ),
+              }}
               onChange={value =>
                 setDraft(item => ({
                   ...item,
                   collegeId: typeof value === 'string' ? value : undefined,
                 }))
               }
+              value={draft.collegeId}
             />
-            <PlatformDirectoryPicker
-              kind="user"
-              placeholder="仪器管理员"
-              value={draft.instrumentAdminId}
+            <SurfaceFilterControl
+              field={surfaceField('instrumentAdminIds')}
               onChange={value =>
                 setDraft(item => ({
                   ...item,
-                  instrumentAdminId:
-                    typeof value === 'string' ? value : undefined,
+                  instrumentAdminId: typeof value === 'string' ? value : undefined,
                 }))
               }
+              value={draft.instrumentAdminId}
             />
-            <Select
-              allowClear
-              options={statuses}
-              placeholder="仪器状态"
-              value={draft.instrumentStatus}
+            <SurfaceFilterControl
+              field={surfaceField('instrumentStatus')}
               onChange={value =>
-                setDraft(item => ({ ...item, instrumentStatus: value }))
+                setDraft(item => ({ ...item, instrumentStatus: value as string | undefined }))
               }
+              value={draft.instrumentStatus}
             />
-            <Select
-              allowClear
-              options={[
-                { label: '对外开放', value: true },
-                { label: '未开放', value: false },
-              ]}
-              placeholder="是否对外开放"
+            <SurfaceFilterControl
+              field={surfaceField('openToOutside')}
+              onChange={value =>
+                setDraft(item => ({ ...item, openToOutside: value as boolean | undefined }))
+              }
               value={draft.openToOutside}
+            />
+            <SurfaceFilterControl
+              field={surfaceField('enabledDate')}
               onChange={value =>
-                setDraft(item => ({ ...item, openToOutside: value }))
+                setDraft(item => ({ ...item, enabledDate: value as [string, string] | undefined }))
               }
+              range
+              value={draft.enabledDate}
             />
-            <DatePicker.RangePicker
-              onChange={(_, values) =>
-                setDraft(item => ({
-                  ...item,
-                  enabledDate:
-                    values[0] && values[1]
-                      ? [values[0], values[1]]
-                      : undefined,
-                }))
+            <SurfaceFilterControl
+              field={surfaceField('assetValue')}
+              onChange={value =>
+                setDraft(item => ({ ...item, assetValue: value as [number | undefined, number | undefined] | undefined }))
               }
+              range
+              value={draft.assetValue}
             />
-            <Space.Compact>
-              <InputNumber
-                min={0}
-                placeholder="最低资产价值"
-                value={draft.assetValue?.[0]}
-                onChange={value =>
-                  setDraft(item => ({
-                    ...item,
-                    assetValue: [
-                      value === null ? undefined : Number(value),
-                      item.assetValue?.[1],
-                    ],
-                  }))
-                }
-              />
-              <InputNumber
-                min={0}
-                placeholder="最高资产价值"
-                value={draft.assetValue?.[1]}
-                onChange={value =>
-                  setDraft(item => ({
-                    ...item,
-                    assetValue: [
-                      item.assetValue?.[0],
-                      value === null ? undefined : Number(value),
-                    ],
-                  }))
-                }
-              />
-            </Space.Compact>
             <Space>
               <Button
                 type="primary"
@@ -378,8 +304,154 @@ export function InstrumentListPage() {
               },
             }}
           />
-        </Space>
-      </Card>
-    </Shell>
+    </ResourceListPage>
   );
 }
+
+function MobileInstrumentListPage() {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  const { message } = App.useApp();
+  const [page, setPage] = useState(1);
+  const [keyword, setKeyword] = useState('');
+  const [query, setQuery] = useState<Partial<InstrumentListQuery>>({});
+  const list = useList<InstrumentRecord>({
+    resource: 'instruments',
+    pagination: { currentPage: page, pageSize: instrumentSurface.list?.defaultPageSize || 20 },
+    sorters: [{ field: defaultSort.field, order: defaultSort.order || 'asc' }],
+    meta: { query },
+  });
+  const records = (list.result.data || []) as unknown as InstrumentRecord[];
+  const canCreate = hasCapability(INSTRUMENT_CAPABILITIES.create);
+  const canUpdate = hasCapability(INSTRUMENT_CAPABILITIES.update);
+  const listFieldsForCard = listFields.filter(field =>
+    ['instrumentCode', 'specModel', 'instrumentStatus', 'collegeId'].includes(field.key)
+  );
+  return (
+    <MobileResourceListPage
+      createCapability={INSTRUMENT_CAPABILITIES.create}
+      createPath="/m/instruments/new"
+      description="仪器档案、归属与开放状态"
+      onExport={() => message.info('导出将使用当前 Data API 查询条件')}
+      readCapability={INSTRUMENT_CAPABILITIES.read}
+      resource="instruments"
+      surface={instrumentSurface}
+      title="仪器资源"
+    >
+      <div className="oxa-mobile-filter">
+        <Select
+          options={searchableFields}
+          value={query.searchField || searchableFields[0]?.value}
+          onChange={value => setQuery(item => ({ ...item, searchField: value }))}
+        />
+        <Input
+          allowClear
+          placeholder="搜索仪器名称、编号或资产编号"
+          value={keyword}
+          onChange={event => setKeyword(event.target.value)}
+          onPressEnter={() => {
+            setPage(1);
+            setQuery(item => ({ ...item, keyword: keyword || undefined }));
+          }}
+        />
+        <Button
+          icon={<SearchOutlined />}
+          onClick={() => {
+            setPage(1);
+            setQuery(item => ({ ...item, keyword: keyword || undefined }));
+          }}
+          type="primary"
+        >
+          查询
+        </Button>
+      </div>
+      {list.query.isLoading ? (
+        <div className="oxa-page-loading"><Spin /></div>
+      ) : list.query.isError ? (
+        <Card><Typography.Text type="danger">{list.query.error?.message || '列表读取失败'}</Typography.Text></Card>
+      ) : records.length ? (
+        <div className="oxa-mobile-record-list">
+          {records.map(record => (
+            <Card className="oxa-mobile-record-card" key={record.id} size="small">
+              <div className="oxa-mobile-record-heading">
+                <a onClick={() => navigate(`/m/instruments/${record.id}`)}>{record.chineseName || '-'}</a>
+                <SurfaceFieldValue
+                  field={surfaceField('instrumentStatus')}
+                  value={record.instrumentStatus}
+                  renderers={{
+                    renderValue: ({ field, value }) => <Tag color={value === 'normal' ? 'green' : 'default'}>{field.options?.find(option => option.value === value)?.label || String(value)}</Tag>,
+                  }}
+                />
+              </div>
+              <div className="oxa-mobile-record-fields">
+                {listFieldsForCard.map(field => (
+                  <div key={field.key}>
+                    <Typography.Text type="secondary">{field.label}</Typography.Text>
+                    <div><SurfaceFieldValue field={field} value={record[field.key]} /></div>
+                  </div>
+                ))}
+              </div>
+              <Space>
+                <Button onClick={() => navigate(`/m/instruments/${record.id}`)} size="small">查看</Button>
+                {canUpdate && <Button onClick={() => navigate(`/m/instruments/${record.id}/edit`)} size="small">编辑</Button>}
+              </Space>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <Card><Empty description="暂无仪器资源" /></Card>
+      )}
+      <div className="oxa-mobile-pagination">
+        <Button disabled={page <= 1} onClick={() => setPage(current => current - 1)}>上一页</Button>
+        <Typography.Text>第 {page} 页</Typography.Text>
+        <Button disabled={records.length < (instrumentSurface.list?.defaultPageSize || 20)} onClick={() => setPage(current => current + 1)}>下一页</Button>
+      </div>
+      {!canCreate && <Typography.Text type="secondary">当前角色无新增权限</Typography.Text>}
+    </MobileResourceListPage>
+  );
+}
+
+function renderListValue(
+  field: SurfaceField,
+  value: unknown,
+  record: InstrumentRecord,
+  navigate: ReturnType<typeof useNavigate>
+) {
+  if (field.key === 'image') {
+    return value && typeof value === 'object' && 'name' in value ? (
+      <Tag>{String((value as { name?: unknown }).name)}</Tag>
+    ) : (
+      <span className="oxa-muted">无图</span>
+    );
+  }
+  if (field.key === 'chineseName') {
+    return <a onClick={() => navigate(`/instruments/${record.id}`)}>{String(value || '-')}</a>;
+  }
+  return (
+    <SurfaceFieldValue
+      field={field}
+      renderers={{
+        renderValue: ({ field: current, value: currentValue }) => {
+          if (current.key === 'collegeId') {
+            return <ResolvedValueText source="college" value={String(currentValue)} />;
+          }
+          if (current.key === 'instrumentStatus') {
+            const label = current.options?.find(option => option.value === currentValue)?.label || String(currentValue);
+            return (
+              <Tag color={currentValue === 'normal' ? 'green' : currentValue === 'maintenance' ? 'orange' : 'default'}>
+                {label}
+              </Tag>
+            );
+          }
+          return undefined;
+        },
+      }}
+      value={value}
+    />
+  );
+}
+
+function surfaceField(key: string): SurfaceField {
+  const field = instrumentSurface.fields[key];
+  return field ? { key, ...field } : { key, label: key, widget: 'text' };
+}