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

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

@@ -0,0 +1,431 @@
+import {
+  ArrowLeftOutlined,
+  EditOutlined,
+  ExportOutlined,
+  EyeOutlined,
+  HistoryOutlined,
+  ImportOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  App,
+  Button,
+  Card,
+  Result,
+  Space,
+  Spin,
+  Typography,
+} from 'antd';
+import type { DataResourceSurface } from 'openxiangda-contracts/browser';
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Shell } from '../../Shell';
+import { useRuntime } from '../../runtime';
+
+export interface StandardResourcePageProps {
+  resource: string;
+  surface?: DataResourceSurface;
+  title: string;
+  description?: string;
+}
+
+interface ResourceListPageProps extends StandardResourcePageProps {
+  readCapability: string;
+  createCapability?: string;
+  createPath?: string;
+  onExport?: () => void;
+  importDisabledReason?: string;
+  children: ReactNode;
+}
+
+/**
+ * The standard admin list shell. Data fetching stays in the app's Refine
+ * provider; this component owns the stable page chrome and CRUD actions.
+ */
+export function ResourceListPage({
+  resource,
+  surface,
+  title,
+  description,
+  readCapability,
+  createCapability,
+  createPath,
+  onExport,
+  importDisabledReason = '导入能力将在批量事务合同落地后启用',
+  children,
+}: ResourceListPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  const { message } = App.useApp();
+  if (!hasCapability(readCapability)) {
+    return (
+      <Shell>
+        <Result status="403" title={`当前平台用户无${title}页面权限`} />
+      </Shell>
+    );
+  }
+  const canCreate = createCapability ? hasCapability(createCapability) : false;
+  return (
+    <Shell>
+      <Card
+        className="oxa-list-card"
+        data-resource={resource}
+        data-surface-layout={surface?.list ? 'standard' : undefined}
+      >
+        <Space orientation="vertical" size={16} style={{ width: '100%' }}>
+          <div className="oxa-page-heading">
+            <div>
+              <h2 className="oxa-title">{title}</h2>
+              {description && <div className="oxa-muted">{description}</div>}
+            </div>
+            <Space>
+              <Button
+                disabled
+                icon={<ImportOutlined />}
+                title={importDisabledReason}
+              >
+                导入
+              </Button>
+              <Button
+                icon={<ExportOutlined />}
+                onClick={() => {
+                  if (onExport) onExport();
+                  else message.info('导出将使用当前 Data API 查询条件');
+                }}
+              >
+                导出
+              </Button>
+              {canCreate && createPath && (
+                <Button
+                  icon={<PlusOutlined />}
+                  onClick={() => navigate(createPath)}
+                  type="primary"
+                >
+                  新增
+                </Button>
+              )}
+            </Space>
+          </div>
+          {children}
+        </Space>
+      </Card>
+    </Shell>
+  );
+}
+
+/** Mobile list shell: the same capability gate with a compact, app-owned list. */
+export function MobileResourceListPage({
+  resource,
+  surface,
+  title,
+  description,
+  readCapability,
+  createCapability,
+  createPath,
+  onExport,
+  children,
+}: ResourceListPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  if (!hasCapability(readCapability)) {
+    return <div className="oxa-mobile-page"><Result status="403" title={`当前平台用户无${title}页面权限`} /></div>;
+  }
+  return (
+    <div className="oxa-mobile-page" data-resource={resource} data-surface-layout={surface?.list ? 'standard' : undefined}>
+      <header className="oxa-mobile-header">
+        <div>
+          <Typography.Title level={3}>{title}</Typography.Title>
+          {description && <Typography.Text type="secondary">{description}</Typography.Text>}
+        </div>
+        <Space>
+          {onExport && <Button icon={<ExportOutlined />} onClick={onExport}>导出</Button>}
+          {createCapability && createPath && hasCapability(createCapability) && (
+            <Button icon={<PlusOutlined />} onClick={() => navigate(createPath)} type="primary">新增</Button>
+          )}
+        </Space>
+      </header>
+      <Alert title="移动端使用独立列表交互；数据查询、权限和 PC 端保持一致。" showIcon type="info" />
+      {children}
+    </div>
+  );
+}
+
+interface ResourceFormPageProps extends StandardResourcePageProps {
+  mode: 'create' | 'edit';
+  capability: string;
+  loading?: boolean;
+  notFound?: boolean;
+  backPath: string;
+  backLabel: string;
+  detailPath?: string;
+  recordSummary?: ReactNode;
+  children: ReactNode;
+}
+
+/** The standard create/edit lifecycle: capability, loading, not-found, hero. */
+export function ResourceFormPage({
+  resource,
+  surface,
+  title,
+  mode,
+  capability,
+  loading = false,
+  notFound = false,
+  backPath,
+  backLabel,
+  detailPath,
+  recordSummary,
+  children,
+}: ResourceFormPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  if (!hasCapability(capability)) {
+    return (
+      <Shell>
+        <Result status="403" title="当前平台用户无此操作权限" />
+      </Shell>
+    );
+  }
+  if (loading) {
+    return (
+      <Shell>
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
+      </Shell>
+    );
+  }
+  if (notFound) {
+    return (
+      <Shell>
+        <Result status="404" title="记录不存在或不在数据范围内" />
+      </Shell>
+    );
+  }
+  return (
+    <Shell>
+      <Card
+        className="oxa-edit-hero"
+        data-resource={resource}
+        data-surface-layout={surface?.form?.layout || 'flat'}
+      >
+        <div className="oxa-edit-hero-title">
+          <div>
+            <Button icon={<ArrowLeftOutlined />} onClick={() => navigate(backPath)} type="link">
+              {backLabel}
+            </Button>
+            <Typography.Title level={2}>
+              {mode === 'create' ? `新增${title}` : `编辑${title}`}
+            </Typography.Title>
+            {recordSummary && <Typography.Text type="secondary">{recordSummary}</Typography.Text>}
+          </div>
+          {detailPath && (
+            <Button icon={<EyeOutlined />} onClick={() => navigate(detailPath)}>
+              查看详情
+            </Button>
+          )}
+        </div>
+        <Alert
+          title="仅显示当前角色可编辑的字段；保存时将校验数据版本与权限范围。"
+          showIcon
+          type="info"
+        />
+      </Card>
+      {children}
+    </Shell>
+  );
+}
+
+export function MobileResourceFormPage({
+  resource,
+  surface,
+  title,
+  mode,
+  capability,
+  loading = false,
+  notFound = false,
+  backPath,
+  backLabel,
+  recordSummary,
+  children,
+}: ResourceFormPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  if (!hasCapability(capability)) {
+    return <div className="oxa-mobile-page"><Result status="403" title="当前平台用户无此操作权限" /></div>;
+  }
+  if (loading) {
+    return <div className="oxa-mobile-page"><Spin /></div>;
+  }
+  if (notFound) {
+    return <div className="oxa-mobile-page"><Result status="404" title="记录不存在或不在数据范围内" /></div>;
+  }
+  return (
+    <div
+      className="oxa-mobile-page"
+      data-resource={resource}
+      data-surface-layout={surface?.form?.layout || 'flat'}
+    >
+      <header className="oxa-mobile-header">
+        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate(backPath)} type="link">
+          {backLabel}
+        </Button>
+        <Typography.Title level={3}>{mode === 'create' ? `新增${title}` : `编辑${title}`}</Typography.Title>
+        {recordSummary && <Typography.Text type="secondary">{recordSummary}</Typography.Text>}
+      </header>
+      <Alert title="移动端使用独立控件，提交值与 PC 端保持一致。" showIcon type="info" />
+      {children}
+    </div>
+  );
+}
+
+interface ResourceDetailPageProps extends StandardResourcePageProps {
+  readCapability: string;
+  loading?: boolean;
+  error?: string;
+  backPath: string;
+  backLabel: string;
+  editCapability?: string;
+  editPath?: string;
+  auditTargetId?: string;
+  hero: ReactNode;
+  meta?: ReactNode;
+  children: ReactNode;
+}
+
+/** The standard detail lifecycle and audit/edit navigation. */
+export function ResourceDetailPage({
+  resource,
+  surface,
+  title,
+  readCapability,
+  loading = false,
+  error,
+  backPath,
+  backLabel,
+  editCapability,
+  editPath,
+  auditTargetId,
+  hero,
+  meta,
+  children,
+}: ResourceDetailPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  if (!hasCapability(readCapability)) {
+    return (
+      <Shell>
+        <Result status="403" title={`当前平台用户无${title}页面权限`} />
+      </Shell>
+    );
+  }
+  if (loading) {
+    return (
+      <Shell>
+        <div className="oxa-page-loading">
+          <Spin />
+        </div>
+      </Shell>
+    );
+  }
+  if (error) {
+    return (
+      <Shell>
+        <Result status="403" subTitle={error} title="无法访问" />
+      </Shell>
+    );
+  }
+  return (
+    <Shell>
+      <Card
+        className="oxa-detail-hero"
+        data-resource={resource}
+        data-surface-layout={surface?.detail?.layout || 'flat'}
+      >
+        <div className="oxa-detail-hero-top">
+          <Button
+            aria-label="返回列表"
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate(backPath)}
+            type="link"
+          >
+            {backLabel}
+          </Button>
+          <Space>
+            {auditTargetId && (
+              <Button
+                icon={<HistoryOutlined />}
+                onClick={() =>
+                  document
+                    .getElementById(auditTargetId)
+                    ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                }
+              >
+                操作记录
+              </Button>
+            )}
+            {editCapability && editPath && hasCapability(editCapability) && (
+              <Button
+                icon={<EditOutlined />}
+                onClick={() => navigate(editPath)}
+                type="primary"
+              >
+                编辑
+              </Button>
+            )}
+          </Space>
+        </div>
+        <div className="oxa-detail-hero-main">
+          {hero}
+          {meta && <Space className="oxa-record-meta" separator={<span>·</span>}>{meta}</Space>}
+        </div>
+      </Card>
+      {children}
+    </Shell>
+  );
+}
+
+/** Mobile detail shell: keeps the resource lifecycle and audit/edit actions stable. */
+export function MobileResourceDetailPage({
+  resource,
+  surface,
+  title,
+  readCapability,
+  loading = false,
+  error,
+  backPath,
+  backLabel,
+  editCapability,
+  editPath,
+  auditTargetId,
+  hero,
+  meta,
+  children,
+}: ResourceDetailPageProps) {
+  const navigate = useNavigate();
+  const { hasCapability } = useRuntime();
+  if (!hasCapability(readCapability)) {
+    return <div className="oxa-mobile-page"><Result status="403" title={`当前平台用户无${title}页面权限`} /></div>;
+  }
+  if (loading) return <div className="oxa-mobile-page"><Spin /></div>;
+  if (error) return <div className="oxa-mobile-page"><Result status="403" subTitle={error} title="无法访问" /></div>;
+  return (
+    <div className="oxa-mobile-page" data-resource={resource} data-surface-layout={surface?.detail?.layout || 'flat'}>
+      <header className="oxa-mobile-header">
+        <Button aria-label="返回列表" icon={<ArrowLeftOutlined />} onClick={() => navigate(backPath)} type="link">
+          {backLabel}
+        </Button>
+        <Space>
+          {auditTargetId && <Button icon={<HistoryOutlined />} onClick={() => document.getElementById(auditTargetId)?.scrollIntoView({ behavior: 'smooth', block: 'center' })}>操作记录</Button>}
+          {editCapability && editPath && hasCapability(editCapability) && <Button icon={<EditOutlined />} onClick={() => navigate(editPath)} type="primary">编辑</Button>}
+        </Space>
+      </header>
+      <Card className="oxa-detail-hero" data-resource-hero="mobile">
+        {hero}
+        {meta && <Space className="oxa-record-meta" separator={<span>·</span>}>{meta}</Space>}
+      </Card>
+      {children}
+    </div>
+  );
+}