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

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

@@ -1,5 +1,6 @@
+import { ArrowLeftOutlined, EyeOutlined } from '@ant-design/icons';
 import { useCreate, useOne, useUpdate } from '@refinedev/core';
-import { App, Result, Spin, Typography } from 'antd';
+import { Alert, App, Button, Card, Result, Space, Spin, Typography } from 'antd';
 import { useNavigate, useParams } from 'react-router-dom';
 import { InstrumentForm } from './InstrumentForm';
 import { Shell } from './Shell';
@@ -23,32 +24,70 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
     mode === 'create'
       ? hasCapability(INSTRUMENT_CAPABILITIES.create)
       : hasCapability(INSTRUMENT_CAPABILITIES.update);
-  if (!allowed)
+  if (!allowed) {
     return (
       <Shell>
         <Result status="403" title="当前平台用户无此操作权限" />
       </Shell>
     );
-  if (mode === 'edit' && query.query.isLoading)
+  }
+  if (mode === 'edit' && query.query.isLoading) {
     return (
       <Shell>
-        <Spin />
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
       </Shell>
     );
-  if (mode === 'edit' && !record)
+  }
+  if (mode === 'edit' && !record) {
     return (
       <Shell>
         <Result status="404" title="仪器不存在或不在数据范围内" />
       </Shell>
     );
+  }
   return (
     <Shell>
-      <Typography.Title level={3}>
-        {mode === 'create' ? '新增仪器' : '编辑仪器'}
-      </Typography.Title>
+      <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>
       <InstrumentForm
         mode={mode}
-        record={record}
         onCancel={() =>
           navigate(mode === 'edit' ? `/instruments/${id}` : '/instruments')
         }
@@ -71,6 +110,7 @@ export function InstrumentFormPage({ mode }: { mode: 'create' | 'edit' }) {
             navigate(`/instruments/${result.data.id}`);
           }
         }}
+        record={record}
       />
     </Shell>
   );

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

@@ -26,6 +26,11 @@ import {
 } from 'antd';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import {
+  AuthoritativeSelector,
+  ResolvedValueText,
+} from './AuthoritativeSelector';
+import { PlatformDirectoryPicker } from './components/platform-fields/PlatformDirectoryPicker';
 import { Shell } from './Shell';
 import {
   INSTRUMENT_CAPABILITIES,
@@ -34,16 +39,6 @@ import {
 } from './instrument';
 import { useRuntime } from './runtime';
 
-const colleges = [
-  { label: '先进材料学院', value: 'college-am' },
-  { label: '生命健康学院', value: 'college-lh' },
-  { label: '公共测试中心', value: 'college-pt' },
-];
-const admins = [
-  { label: '王老师', value: 'user-wang' },
-  { label: '李老师', value: 'user-li' },
-  { label: '陈老师', value: 'user-chen' },
-];
 const statuses = [
   { label: '正常', value: 'normal' },
   { label: '维修', value: 'maintenance' },
@@ -62,7 +57,7 @@ export function InstrumentListPage() {
   const [sort, setSort] = useState<{
     field: string;
     order: 'asc' | 'desc';
-  }>({ field: 'updatedAt', order: 'desc' });
+  }>({ field: 'instrumentCode', order: 'asc' });
   const list = useList<InstrumentRecord>({
     resource: 'instruments',
     pagination: { currentPage: page, pageSize },
@@ -100,20 +95,15 @@ export function InstrumentListPage() {
         title: '所属学院',
         dataIndex: 'collegeId',
         width: 140,
-        render: value =>
-          colleges.find(item => item.value === value)?.label || value,
+        render: value => <ResolvedValueText source="college" value={value} />,
       },
       {
         title: '仪器管理员',
         dataIndex: 'instrumentAdminIds',
         width: 130,
-        render: values =>
-          (values as string[])
-            .map(
-              value =>
-                admins.find(item => item.value === value)?.label || value
-            )
-            .join('、'),
+        render: values => (
+          <ResolvedValueText source="user" value={values as string[]} />
+        ),
       },
       {
         title: '仪器状态',
@@ -143,9 +133,8 @@ export function InstrumentListPage() {
       },
       {
         title: '更新时间',
-        dataIndex: 'updatedAt',
+        dataIndex: 'updated_at',
         width: 160,
-        sorter: true,
         render: value => (value ? new Date(value).toLocaleString() : '-'),
       },
       {
@@ -211,15 +200,15 @@ export function InstrumentListPage() {
   }
   return (
     <Shell>
-      <Card>
-        <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Card className="oxa-list-card">
+        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
           <div className="oxa-page-heading">
             <div>
-              <h1 className="oxa-title" data-testid="instrument-title">
+              <h2 className="oxa-title">
                 仪器资源
-              </h1>
+              </h2>
               <div className="oxa-muted">
-                Refine 管理查询状态；CRUD 只经过平台 Data API adapter
+                统一管理仪器档案、归属、管理员与开放状态
               </div>
             </div>
             <Space>
@@ -255,22 +244,28 @@ export function InstrumentListPage() {
                 setDraft(value => ({ ...value, keyword: event.target.value }))
               }
             />
-            <Select
-              allowClear
-              options={colleges}
+            <AuthoritativeSelector
+              operation="update"
               placeholder="所属学院"
+              source="college"
               value={draft.collegeId}
               onChange={value =>
-                setDraft(item => ({ ...item, collegeId: value }))
+                setDraft(item => ({
+                  ...item,
+                  collegeId: typeof value === 'string' ? value : undefined,
+                }))
               }
             />
-            <Select
-              allowClear
-              options={admins}
+            <PlatformDirectoryPicker
+              kind="user"
               placeholder="仪器管理员"
               value={draft.instrumentAdminId}
               onChange={value =>
-                setDraft(item => ({ ...item, instrumentAdminId: value }))
+                setDraft(item => ({
+                  ...item,
+                  instrumentAdminId:
+                    typeof value === 'string' ? value : undefined,
+                }))
               }
             />
             <Select

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

@@ -1,52 +1,240 @@
-import { DatabaseOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
-import { App, Button, Space, Tag } from 'antd';
+import {
+  ApartmentOutlined,
+  AppstoreOutlined,
+  BookOutlined,
+  DownOutlined,
+  ExperimentOutlined,
+  HomeOutlined,
+  LeftOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
+import {
+  Avatar,
+  Breadcrumb,
+  Button,
+  Layout,
+  Menu,
+  Space,
+  Typography,
+  type MenuProps,
+} from 'antd';
 import type { ReactNode } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { resolveDirectory } from './platform-client';
 import { useRuntime } from './runtime';
-import { applicationApiPath } from './runtime-meta';
 
-export function Shell({ children }: { children: ReactNode }) {
-  const { identity } = useRuntime();
-  const { message } = App.useApp();
-  const inspectContext = async () => {
-    const response = await fetch(applicationApiPath('api/instruments/context'), {
-      credentials: 'include',
-      headers: { accept: 'application/json' },
-    });
-    if (!response.ok) throw new Error(`HTTP_${response.status}`);
-    const body = (await response.json()) as {
-      userId?: string;
-      data?: { userId?: string };
+const { Content, Header, Sider } = Layout;
+
+type PageMeta = { title: string; breadcrumbs: string[]; selectedKey: string };
+
+function pageMeta(pathname: string): PageMeta {
+  if (pathname === '/colleges') {
+    return {
+      title: '学院字典',
+      breadcrumbs: ['首页', '基础数据', '学院字典'],
+      selectedKey: '/colleges',
+    };
+  }
+  if (pathname.endsWith('/new')) {
+    return {
+      title: '新增仪器',
+      breadcrumbs: ['首页', '仪器管理', '仪器资源', '新增仪器'],
+      selectedKey: '/instruments',
     };
-    message.success(
-      `本地 Nest 已读取平台用户：${body.data?.userId || body.userId || identity.userId}`
-    );
+  }
+  if (pathname.endsWith('/edit')) {
+    return {
+      title: '编辑仪器',
+      breadcrumbs: ['首页', '仪器管理', '仪器资源', '编辑仪器'],
+      selectedKey: '/instruments',
+    };
+  }
+  if (/^\/instruments\/[^/]+$/.test(pathname)) {
+    return {
+      title: '仪器详情',
+      breadcrumbs: ['首页', '仪器管理', '仪器资源', '仪器详情'],
+      selectedKey: '/instruments',
+    };
+  }
+  return {
+    title: '仪器资源',
+    breadcrumbs: ['首页', '仪器管理', '仪器资源'],
+    selectedKey: '/instruments',
   };
+}
+
+export function Shell({ children }: { children: ReactNode }) {
+  const { identity, hasCapability } = useRuntime();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [collapsed, setCollapsed] = useState(false);
+  const [user, setUser] = useState({ label: '当前用户', description: '平台用户' });
+  const meta = pageMeta(location.pathname);
+
+  useEffect(() => {
+    let active = true;
+    void resolveDirectory('user', [identity.userId])
+      .then(page => {
+        const entry = page.items[0];
+        if (active && entry) {
+          setUser({
+            label: entry.label || '当前用户',
+            description: entry.description || '平台用户',
+          });
+        }
+      })
+      .catch(() => {
+        if (active) setUser({ label: '当前用户', description: '平台用户' });
+      });
+    return () => {
+      active = false;
+    };
+  }, [identity.userId]);
+
+  const menuItems = useMemo<MenuProps['items']>(
+    () => [
+      {
+        key: 'overview',
+        icon: <AppstoreOutlined />,
+        label: '总览',
+        children: [
+          { key: 'workbench', icon: <HomeOutlined />, label: '工作台' },
+        ],
+      },
+      {
+        key: 'instrument-management',
+        icon: <ExperimentOutlined />,
+        label: '仪器管理',
+        children: [
+          {
+            key: '/instruments',
+            icon: <ExperimentOutlined />,
+            label: '仪器资源',
+          },
+          {
+            key: 'open-records',
+            icon: <BookOutlined />,
+            label: '开放记录',
+            disabled: true,
+          },
+        ],
+      },
+      {
+        key: 'base-data',
+        icon: <ApartmentOutlined />,
+        label: '基础数据',
+        children: hasCapability('app:instrument-center:data:colleges:read')
+          ? [
+              {
+                key: '/colleges',
+                icon: <ApartmentOutlined />,
+                label: '学院字典',
+              },
+            ]
+          : [],
+      },
+      {
+        key: 'system-settings',
+        icon: <SettingOutlined />,
+        label: '系统设置',
+        children: [
+          {
+            key: 'application-admins',
+            icon: <TeamOutlined />,
+            label: '应用管理员',
+            disabled: true,
+          },
+        ],
+      },
+    ],
+    [hasCapability]
+  );
+
   return (
-    <div className="oxa-shell">
-      <header className="oxa-header">
-        <Space>
-          <DatabaseOutlined />
-          <strong>仪器资源管理</strong>
-          <Tag color="blue">{identity.environment.key}</Tag>
-        </Space>
-        <Space wrap>
-          <span>{identity.userId}</span>
-          <span className="oxa-header-roles">
-            {identity.roleCodes.join('、') || '无应用角色'}
-          </span>
-          <Button
-            ghost
-            size="small"
-            icon={<SafetyCertificateOutlined />}
-            onClick={() =>
-              void inspectContext().catch(error => message.error(error.message))
+    <Layout className="oxa-app-layout">
+      <Sider
+        className="oxa-sider"
+        breakpoint="lg"
+        collapsed={collapsed}
+        collapsedWidth={76}
+        collapsible
+        onBreakpoint={setCollapsed}
+        theme="light"
+        trigger={null}
+        width={240}
+      >
+        <div className="oxa-brand">
+          <div aria-hidden className="oxa-brand-mark">
+            <span />
+          </div>
+          {!collapsed && (
+            <div className="oxa-brand-copy">
+              <strong>仪器资源管理</strong>
+              <span>仪器、学院与开放管理</span>
+            </div>
+          )}
+        </div>
+        <Menu
+          className="oxa-menu"
+          defaultOpenKeys={[
+            'overview',
+            'instrument-management',
+            'base-data',
+            'system-settings',
+          ]}
+          inlineCollapsed={collapsed}
+          items={menuItems}
+          mode="inline"
+          onClick={({ key }) => {
+            if (key === 'workbench' || key === '/instruments') {
+              navigate('/instruments');
+            } else if (key === '/colleges') {
+              navigate('/colleges');
             }
+          }}
+          selectedKeys={[meta.selectedKey]}
+        />
+        <div className="oxa-sider-footer">
+          <Button
+            aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
+            block
+            icon={collapsed ? <MenuUnfoldOutlined /> : <LeftOutlined />}
+            onClick={() => setCollapsed(value => !value)}
+            type="text"
           >
-            验证本地 Nest
+            {!collapsed && '收起侧边栏'}
           </Button>
-        </Space>
-      </header>
-      <main className="oxa-main">{children}</main>
-    </div>
+        </div>
+      </Sider>
+      <Layout className="oxa-workspace">
+        <Header className="oxa-topbar">
+          <div className="oxa-topbar-page">
+            <Breadcrumb items={meta.breadcrumbs.map(title => ({ title }))} />
+            <Typography.Title
+              data-testid={meta.title === '仪器资源' ? 'instrument-title' : undefined}
+              level={3}
+            >
+              {meta.title}
+            </Typography.Title>
+          </div>
+          <Space className="oxa-current-user" size={12}>
+            <Avatar className="oxa-current-user-avatar" size={42}>
+              {user.label.slice(0, 1)}
+            </Avatar>
+            <div className="oxa-current-user-copy">
+              <strong>{user.label}</strong>
+              <span>{user.description}</span>
+            </div>
+            <DownOutlined className="oxa-current-user-chevron" />
+          </Space>
+        </Header>
+        <Content className="oxa-content">
+          <main className="oxa-main">{children}</main>
+        </Content>
+      </Layout>
+    </Layout>
   );
 }