@gadmin2n/schematics 0.0.69 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/show.tsx

@@ -0,0 +1,74 @@
+import { ModelType, getColumns, produceModel } from '@gadmin2n/react-common';
+import {
+  CloneButton,
+  DeleteButton,
+  EditButton,
+  ListButton,
+  RefreshButton,
+  Show,
+} from '@refinedev/antd';
+import {
+  IResourceComponentsProps,
+  useShow,
+  useTranslate,
+} from '@refinedev/core';
+import React, { useState } from 'react';
+import { getShowField } from '../../helpers';
+import type { Audit } from '../../generated/types/prisma.types'; //'.prisma/client/index';
+import {
+  auditShowConfig as showConfig,
+  auditShowPrismaSelect as showPrismaSelect,
+} from '../../generated/props/audit/config';
+import { auditModel } from '../../generated/props/audit/model';
+import { modelsMap } from 'generated/models.index';
+import { agentAttrs } from '../../components/agentPanel/agentAttributes';
+
+export const AuditShow: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'audit';
+  const t = useTranslate();
+
+  const { queryResult } = useShow<Audit>({
+    meta: { select: showPrismaSelect },
+  });
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(auditModel, {
+      // status: { render: xxxxx }
+    });
+
+    // getColumns is a function that returns an array of fields
+    const fields = getColumns('Audit', showConfig.fields, {
+      ...modelsMap,
+      Audit: { model, meta: modelsMap['Audit'].meta },
+    });
+
+    return [fields, model] as const;
+  });
+
+  return (
+    <Show
+      isLoading={isLoading}
+      headerButtons={
+        <div
+          style={{ display: 'inline-flex', gap: 8 }}
+          {...agentAttrs({ type: 'show-header', resource: resourceName })}
+        >
+          <ListButton />
+          <EditButton recordItemId={record?.id} />
+          <CloneButton recordItemId={record?.id} />
+          <DeleteButton recordItemId={record?.id} />
+          <RefreshButton
+            recordItemId={record?.id}
+            meta={{ select: showPrismaSelect }}
+          />
+        </div>
+      }
+    >
+      {fields.map((field: any) => {
+        return getShowField(field, resourceName, record, t, model, modelsMap);
+      })}
+    </Show>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CanvasCell.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import IsolatedLivePreview from './IsolatedLivePreview';
+
+interface CanvasCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  code: string;
+  selected: boolean;
+  componentType?: string;
+  isPreview?: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onDoubleClick: (e: React.MouseEvent) => void;
+  onContextMenu: (e: React.MouseEvent) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode; // react-grid-layout injects resize handles here
+  [key: string]: any; // Forward any other props react-grid-layout injects (data-grid-id, etc.)
+}
+
+const CanvasCell = React.forwardRef<HTMLDivElement, CanvasCellProps>(
+  (
+    {
+      code,
+      selected,
+      componentType,
+      isPreview,
+      onClick,
+      onDoubleClick,
+      onContextMenu,
+      className,
+      style,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const isSection = componentType === 'Section';
+
+    return (
+      <div
+        ref={ref}
+        className={className}
+        style={{
+          background: isSection ? 'transparent' : '#fff',
+          borderRadius: isSection ? 0 : 8,
+          overflow: 'hidden',
+          outline: !isPreview && selected ? '2px solid #087ea4' : 'none',
+          outlineOffset: 2,
+          cursor: isPreview ? 'default' : 'pointer',
+          ...style,
+        }}
+        onClick={(e) => {
+          if (isPreview) return;
+          e.stopPropagation();
+          onClick(e);
+        }}
+        onDoubleClick={(e) => {
+          if (isPreview) return;
+          e.stopPropagation();
+          onDoubleClick(e);
+        }}
+        onContextMenu={(e) => {
+          if (isPreview) return;
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu(e);
+        }}
+        {...rest}
+      >
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            pointerEvents: isPreview ? 'auto' : 'none',
+            overflow: 'hidden',
+          }}
+        >
+          <IsolatedLivePreview code={code} />
+        </div>
+        {/* Resize handles injected by react-grid-layout */}
+        {children}
+      </div>
+    );
+  },
+);
+
+CanvasCell.displayName = 'CanvasCell';
+
+export default CanvasCell;

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CanvasEditPage.tsx

@@ -0,0 +1,192 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { message, Modal, Spin } from 'antd';
+import CanvasPageView from './CanvasPage';
+import PublishModal from './PublishModal';
+import type { SavedCanvas, CanvasItem } from './types';
+import type { LayoutItem } from 'react-grid-layout';
+import { fetchCanvas, updateCanvas, unpublishCanvas } from './canvasApi';
+import { useTranslation } from 'react-i18next';
+
+const CanvasEditPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [canvas, setCanvas] = useState<SavedCanvas | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const [canvasItems, setCanvasItems] = useState<CanvasItem[]>([]);
+  const [canvasLayout, setCanvasLayout] = useState<LayoutItem[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [publishModalOpen, setPublishModalOpen] = useState(false);
+  const [unpublishModalOpen, setUnpublishModalOpen] = useState(false);
+  const [unpublishing, setUnpublishing] = useState(false);
+
+  const liveRef = useRef({
+    canvas,
+    isDirty,
+    canvasItems,
+    canvasLayout,
+  });
+  liveRef.current = {
+    canvas,
+    isDirty,
+    canvasItems,
+    canvasLayout,
+  };
+
+  // ── Load canvas by ID ──
+  useEffect(() => {
+    if (!id) return;
+    console.log('[CanvasEditPage] loading canvas id:', id);
+    setLoading(true);
+    fetchCanvas(id)
+      .then((data) => {
+        console.log('[CanvasEditPage] fetchCanvas result:', data);
+        if (!data) {
+          message.error('Canvas 不存在');
+          navigate('/admin/canvas');
+          return;
+        }
+        setCanvas(data);
+        setCanvasItems(data.items ?? []);
+        setCanvasLayout(data.layout ?? []);
+      })
+      .catch((err) => {
+        console.error('[CanvasEditPage] load failed:', err);
+        message.error('加载 Canvas 失败');
+        navigate('/admin/canvas');
+      })
+      .finally(() => setLoading(false));
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Change handlers ──
+  const handleItemsChange = useCallback((items: CanvasItem[]) => {
+    setCanvasItems(items);
+    setIsDirty(true);
+  }, []);
+
+  const handleLayoutChange = useCallback((layout: LayoutItem[]) => {
+    setCanvasLayout(layout);
+    setIsDirty(true);
+  }, []);
+
+  const handleBothChange = useCallback(
+    (items: CanvasItem[], layout: LayoutItem[]) => {
+      setCanvasItems(items);
+      setCanvasLayout(layout);
+      setIsDirty(true);
+    },
+    [],
+  );
+
+  // ── Save ──
+  const handleSave = useCallback(async () => {
+    const { canvas, canvasItems, canvasLayout } = liveRef.current;
+    if (!canvas) return;
+    try {
+      await updateCanvas(canvas.id, {
+        items: canvasItems,
+        layout: canvasLayout,
+      });
+      setIsDirty(false);
+      message.success(t('canvas.edit.saved'));
+    } catch {
+      message.error(t('canvas.edit.saveFailed'));
+    }
+  }, []);
+
+  // ── Back to list ──
+  const handleBack = useCallback(() => {
+    navigate('/admin/canvas');
+  }, [navigate]);
+
+  // ── Unpublish ──
+  const handleUnpublish = useCallback(async () => {
+    const { canvas } = liveRef.current;
+    if (!canvas) return;
+    setUnpublishing(true);
+    try {
+      await unpublishCanvas(canvas.id);
+      setCanvas((prev) =>
+        prev ? { ...prev, publishedPageCode: null, publishedAt: null } : prev,
+      );
+      message.success(t('canvas.unpublishSuccess'));
+      setUnpublishModalOpen(false);
+    } catch {
+      message.error(t('canvas.unpublishFailed'));
+    } finally {
+      setUnpublishing(false);
+    }
+  }, [t]);
+
+  if (loading || !canvas) {
+    console.log(
+      '[CanvasEditPage] rendering loading state, loading=',
+      loading,
+      'canvas=',
+      canvas,
+    );
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: 400,
+        }}
+      >
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  console.log('[CanvasEditPage] rendering editor for:', canvas.name);
+
+  return (
+    <>
+      <CanvasPageView
+        items={canvasItems}
+        layout={canvasLayout}
+        isDirty={isDirty}
+        canvasName={canvas.name}
+        isPublished={!!canvas.publishedPageCode}
+        onItemsChange={handleItemsChange}
+        onLayoutChange={handleLayoutChange}
+        onBothChange={handleBothChange}
+        onSave={handleSave}
+        onBack={handleBack}
+        onPublish={() => setPublishModalOpen(true)}
+        onUnpublish={() => setUnpublishModalOpen(true)}
+      />
+      <PublishModal
+        open={publishModalOpen}
+        onClose={() => setPublishModalOpen(false)}
+        activeCanvas={canvas}
+        onPublishSuccess={() => {
+          if (id) {
+            fetchCanvas(id)
+              .then((data) => {
+                if (data) setCanvas(data);
+              })
+              .catch(() => {});
+          }
+        }}
+      />
+      <Modal
+        title={t('canvas.unpublish')}
+        open={unpublishModalOpen}
+        onOk={handleUnpublish}
+        onCancel={() => setUnpublishModalOpen(false)}
+        okText={t('canvas.unpublish')}
+        okButtonProps={{ danger: true }}
+        cancelText={t('canvas.publishModal.cancel')}
+        confirmLoading={unpublishing}
+      >
+        <p>{t('canvas.unpublishConfirm')}</p>
+      </Modal>
+    </>
+  );
+};
+
+export default CanvasEditPage;