openxiangda-cli 2.0.0-alpha.56 → 2.0.0-alpha.58

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

@@ -1,60 +1,134 @@
-import { useOne } from '@refinedev/core';
-import { Button, Result, Space, Spin, Typography } from 'antd';
+import {
+  ArrowLeftOutlined,
+  EditOutlined,
+  HistoryOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Result, Space, Spin, Tag, Typography } from 'antd';
+import { useEffect, useState } from 'react';
+import type { DataAuditEntry } from 'openxiangda-contracts/browser';
 import { useNavigate, useParams } from 'react-router-dom';
 import { InstrumentForm } from './InstrumentForm';
 import { Shell } from './Shell';
 import { INSTRUMENT_CAPABILITIES, type InstrumentRecord } from './instrument';
+import { instrumentDataApi } from './platform-client';
 import { useRuntime } from './runtime';
+import { useOne } from '@refinedev/core';
 
 export function InstrumentDetailPage() {
   const { id = '' } = useParams();
   const navigate = useNavigate();
   const { hasCapability } = useRuntime();
+  const [auditEntries, setAuditEntries] = useState<DataAuditEntry[]>([]);
+  const [auditError, setAuditError] = useState('');
   const query = useOne<InstrumentRecord>({
     resource: 'instruments',
     id,
     queryOptions: { retry: false },
   });
   const record = query.result;
-  if (query.query.isLoading)
+  useEffect(() => {
+    if (!record?.id) return;
+    let active = true;
+    setAuditError('');
+    void instrumentDataApi.audit(record.id).then(
+      page => {
+        if (active) setAuditEntries(page.items || []);
+      },
+      error => {
+        if (active)
+          setAuditError(error instanceof Error ? error.message : String(error));
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [record?.id, record?.revision]);
+  if (query.query.isLoading) {
     return (
       <Shell>
-        <Spin />
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
       </Shell>
     );
-  if (query.query.isError || !record)
+  }
+  if (query.query.isError || !record) {
     return (
       <Shell>
         <Result
           status="403"
-          title="无法访问"
           subTitle={query.query.error?.message || '记录不存在'}
+          title="无法访问"
         />
       </Shell>
     );
+  }
   return (
     <Shell>
-      <Space className="oxa-page-heading">
-        <Typography.Title level={3} style={{ margin: 0 }}>
-          仪器详情
-        </Typography.Title>
-        <Space>
-          <Button onClick={() => navigate('/instruments')}>返回列表</Button>
-          {hasCapability(INSTRUMENT_CAPABILITIES.update) && (
+      <Card className="oxa-detail-hero">
+        <div className="oxa-detail-hero-top">
+          <Button
+            aria-label="返回列表"
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate('/instruments')}
+            type="link"
+          >
+            返回仪器资源
+          </Button>
+          <Space>
             <Button
-              type="primary"
-              onClick={() => navigate(`/instruments/${id}/edit`)}
+              icon={<HistoryOutlined />}
+              onClick={() =>
+                document
+                  .getElementById('instrument-audit')
+                  ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+              }
             >
-              编辑
+              操作记录
             </Button>
-          )}
-        </Space>
-      </Space>
+            {hasCapability(INSTRUMENT_CAPABILITIES.update) && (
+              <Button
+                icon={<EditOutlined />}
+                onClick={() => navigate(`/instruments/${id}/edit`)}
+                type="primary"
+              >
+                编辑
+              </Button>
+            )}
+          </Space>
+        </div>
+        <div className="oxa-detail-hero-main">
+          <div>
+            <Space align="center" size={10}>
+              <Typography.Title level={2}>仪器详情</Typography.Title>
+              <Tag color={record.instrumentStatus === 'normal' ? 'green' : 'default'}>
+                {record.instrumentStatus === 'normal' ? '启用' : '非正常'}
+              </Tag>
+            </Space>
+            <Typography.Title className="oxa-instrument-name" level={3}>
+              {record.chineseName}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              {record.instrumentCode} · {record.specModel}
+            </Typography.Text>
+          </div>
+          <Space className="oxa-record-meta" separator={<span>·</span>}>
+            <span>最近更新 {formatDateTime(record.updated_at)}</span>
+            <span>版本 {record.revision}</span>
+          </Space>
+        </div>
+      </Card>
       <InstrumentForm
+        auditEntries={auditEntries}
+        auditError={auditError}
         mode="detail"
-        record={record}
         onCancel={() => navigate('/instruments')}
+        record={record}
       />
     </Shell>
   );
 }
+
+function formatDateTime(value?: string) {
+  return value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '-';
+}