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

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>
   );
 }

package/template/apps/web/src/components/platform-fields/AttachmentFileList.tsx

@@ -0,0 +1,226 @@
+import {
+  CloseOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  FileExcelOutlined,
+  FileImageOutlined,
+  FilePdfOutlined,
+  FileTextOutlined,
+  FileWordOutlined,
+  PaperClipOutlined,
+} from '@ant-design/icons';
+import { App, Button, Image, Space } from 'antd';
+import type { DataFileRef } from 'openxiangda-contracts/browser';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  dataFileContentUrl,
+  fetchDataFileBlob,
+  loadDataFilePreview,
+} from '../../platform-client';
+import { attachmentPreviewPath } from '../../runtime-meta';
+
+interface PreviewImage {
+  id: string;
+  name: string;
+  src: string;
+}
+
+const IMAGE_EXTENSIONS = new Set([
+  'avif',
+  'bmp',
+  'gif',
+  'ico',
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'webp',
+]);
+
+function extension(name: string) {
+  return name.toLowerCase().match(/\.([a-z0-9]+)$/)?.[1] || '';
+}
+
+function isImage(file: DataFileRef) {
+  return (
+    file.contentType.toLowerCase().startsWith('image/') ||
+    IMAGE_EXTENSIONS.has(extension(file.name))
+  );
+}
+
+function fileIcon(file: DataFileRef) {
+  const suffix = extension(file.name);
+  if (isImage(file)) return <FileImageOutlined />;
+  if (suffix === 'pdf') return <FilePdfOutlined />;
+  if (suffix === 'doc' || suffix === 'docx') return <FileWordOutlined />;
+  if (suffix === 'xls' || suffix === 'xlsx') return <FileExcelOutlined />;
+  if (suffix === 'txt' || suffix === 'csv') return <FileTextOutlined />;
+  return <PaperClipOutlined />;
+}
+
+export function formatManagedFileSize(value: number) {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${Math.ceil(value / 1024)} KB`;
+  return `${(value / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function revokeImages(images: PreviewImage[]) {
+  images.forEach(image => URL.revokeObjectURL(image.src));
+}
+
+function openIsolatedWindow(url: string) {
+  const target = window.open('about:blank', '_blank');
+  if (!target) return false;
+  target.opener = null;
+  target.location.replace(url);
+  return true;
+}
+
+export function AttachmentFileList({
+  files,
+  resourceCode = 'instruments',
+  removable = false,
+  onRemove,
+}: {
+  files: DataFileRef[];
+  resourceCode?: string;
+  removable?: boolean;
+  onRemove?: (file: DataFileRef) => void;
+}) {
+  const { message } = App.useApp();
+  const [openingId, setOpeningId] = useState('');
+  const [images, setImages] = useState<PreviewImage[]>([]);
+  const [imageOpen, setImageOpen] = useState(false);
+  const [currentImage, setCurrentImage] = useState(0);
+  const imageFiles = useMemo(() => files.filter(isImage), [files]);
+
+  useEffect(() => () => revokeImages(images), [images]);
+
+  const closeImages = () => {
+    setImageOpen(false);
+    setImages(current => {
+      revokeImages(current);
+      return [];
+    });
+  };
+
+  const previewImage = async (file: DataFileRef) => {
+    setOpeningId(file.id);
+    try {
+      const settled = await Promise.allSettled(
+        imageFiles.map(async candidate => {
+          const preview = await loadDataFilePreview(resourceCode, candidate.id);
+          if (!preview.canPreview || preview.previewType !== 'image') {
+            throw new Error(
+              preview.unsupportedReason || `${candidate.name} 暂不支持图片预览`
+            );
+          }
+          const blob = await fetchDataFileBlob(resourceCode, candidate.id);
+          return {
+            id: candidate.id,
+            name: candidate.name,
+            src: URL.createObjectURL(blob),
+          };
+        })
+      );
+      const resolved = settled.flatMap(result =>
+        result.status === 'fulfilled' ? [result.value] : []
+      );
+      const current = resolved.findIndex(image => image.id === file.id);
+      if (current < 0) {
+        const failure = settled.find(
+          result => result.status === 'rejected'
+        ) as PromiseRejectedResult | undefined;
+        throw failure?.reason || new Error('图片预览加载失败');
+      }
+      setImages(previous => {
+        revokeImages(previous);
+        return resolved;
+      });
+      setCurrentImage(current);
+      setImageOpen(true);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      setOpeningId('');
+    }
+  };
+
+  const openPreview = (file: DataFileRef) => {
+    if (isImage(file)) {
+      void previewImage(file);
+      return;
+    }
+    if (!openIsolatedWindow(attachmentPreviewPath(resourceCode, file.id))) {
+      void message.warning('浏览器阻止了预览窗口，请允许弹出窗口后重试');
+    }
+  };
+
+  const download = (file: DataFileRef) => {
+    if (!openIsolatedWindow(dataFileContentUrl(resourceCode, file.id))) {
+      void message.warning('浏览器阻止了下载窗口，请允许弹出窗口后重试');
+    }
+  };
+
+  return (
+    <>
+      <div className="oxa-file-list">
+        {files.map(file => (
+          <div className="oxa-file-item" key={file.id}>
+            <span className="oxa-file-kind">{fileIcon(file)}</span>
+            <button
+              className="oxa-file-meta oxa-file-name-button"
+              disabled={openingId === file.id}
+              onClick={() => openPreview(file)}
+              type="button"
+            >
+              <strong>{file.name}</strong>
+              <small>{formatManagedFileSize(file.size)} · 已上传</small>
+            </button>
+            <Space size={2}>
+              <Button
+                aria-label={`预览${file.name}`}
+                icon={<EyeOutlined />}
+                loading={openingId === file.id}
+                onClick={() => openPreview(file)}
+                size="small"
+                type="text"
+              />
+              <Button
+                aria-label={`下载${file.name}`}
+                icon={<DownloadOutlined />}
+                onClick={() => download(file)}
+                size="small"
+                type="text"
+              />
+              {removable && (
+                <Button
+                  aria-label={`移除${file.name}`}
+                  danger
+                  icon={<CloseOutlined />}
+                  onClick={() => onRemove?.(file)}
+                  size="small"
+                  type="text"
+                />
+              )}
+            </Space>
+          </div>
+        ))}
+      </div>
+      <Image.PreviewGroup
+        items={images.map(image => ({ src: image.src, alt: image.name }))}
+        preview={{
+          open: imageOpen,
+          current: currentImage,
+          countRender: (current, total) => `${current}/${total}`,
+          onChange: setCurrentImage,
+          onOpenChange: open => {
+            if (!open) closeImages();
+          },
+        }}
+      >
+        <span aria-hidden="true" style={{ display: 'none' }} />
+      </Image.PreviewGroup>
+    </>
+  );
+}