openxiangda-cli 2.0.0-alpha.86 → 2.0.0-alpha.90

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

@@ -1,392 +0,0 @@
-import {
-  ArrowLeftOutlined,
-  EditOutlined,
-  ExportOutlined,
-  EyeOutlined,
-  HistoryOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
-import {
-  Alert,
-  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,
-  readCapability,
-  children,
-}: ResourceListPageProps) {
-  const { hasCapability } = useRuntime();
-  if (!hasCapability(readCapability)) {
-    return (
-      <Shell>
-        <Result status="403" title={`当前平台用户无${title}页面权限`} />
-      </Shell>
-    );
-  }
-  return (
-    <Shell>
-      <Card
-        className="oxa-list-card"
-        data-resource={resource}
-        data-surface-layout={surface?.list ? 'standard' : undefined}
-      >
-        <div className="oxa-list-surface">{children}</div>
-      </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;
-  onAuditOpen?: () => void;
-  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,
-  onAuditOpen,
-  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={() => {
-                  onAuditOpen?.();
-                  window.requestAnimationFrame(() =>
-                    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,
-  onAuditOpen,
-  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={() => { onAuditOpen?.(); window.requestAnimationFrame(() => 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>
-  );
-}