@gadmin2n/schematics 0.0.69 → 0.0.70

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/index.ts

@@ -5,4 +5,4 @@ const EmptyComponent = () => null;
 export const AuditCreate = EmptyComponent;
 export const AuditEdit = EmptyComponent;
 export const AuditList = EmptyComponent;
-export const AuditShow = EmptyComponent;
+export const AuditShow = EmptyComponent;

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

@@ -1,6 +1,4 @@
-
-export * from "./list";
-export * from "./create";
-export * from "./edit";
-export * from "./show";
-  
+export * from './list';
+export * from './create';
+export * from './edit';
+export * from './show';

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

@@ -5,10 +5,10 @@ import {
   List,
   rangePickerFilterMapper,
   useTable,
-} from "@refinedev/antd";
-import { getDefaultFilter, HttpError } from "@refinedev/core";
+} from '@refinedev/antd';
+import { getDefaultFilter, HttpError } from '@refinedev/core';
 
-import { SearchOutlined } from "@ant-design/icons";
+import { SearchOutlined } from '@ant-design/icons';
 import {
   DatePicker,
   Input,
@@ -17,26 +17,25 @@ import {
   Table,
   Tag,
   type TagProps,
-} from "antd";
+} from 'antd';
 
-import { CustomAvatar, PaginationTotal } from "components";
-import { AuditLogActionEnum, auditLogActionOptions } from "enums";
-import { AuditLog } from "types";
+import { CustomAvatar, PaginationTotal } from 'components';
+import { AuditLogActionEnum, auditLogActionOptions } from 'enums';
+import { AuditLog } from 'types';
 
-import { ActionCell } from "./components/action-cell";
-import { LIST_CONTENT_PROPS } from "constants/layout";
+import { ActionCell } from './components/action-cell';
+import { LIST_CONTENT_PROPS } from 'constants/layout';
 
-
-const getActionColor = (action: string): TagProps["color"] => {
+const getActionColor = (action: string): TagProps['color'] => {
   switch (action) {
     case AuditLogActionEnum.create:
-      return "green";
+      return 'green';
     case AuditLogActionEnum.update:
-      return "cyan";
+      return 'cyan';
     case AuditLogActionEnum.delete:
-      return "red";
+      return 'red';
     default:
-      return "default";
+      return 'default';
   }
 };
 
@@ -46,32 +45,36 @@ export const AuditLogPage = () => {
     HttpError,
     Partial<AuditLog>
   >({
-    resource: "audit",
+    resource: 'audit',
     pagination: {
       pageSize: 20,
     },
     filters: {
       initial: [
-        { field: "authorName", operator: "contains", value: "" },
-        { field: "resource", operator: "contains", value: "" },
-        { field: "timestamp", value: undefined as any, operator: "between" },
+        { field: 'authorName', operator: 'contains', value: '' },
+        { field: 'resource', operator: 'contains', value: '' },
+        { field: 'timestamp', value: undefined as any, operator: 'between' },
       ],
     },
     sorters: {
-      initial: [{ field: "id", order: "desc" }],
+      initial: [{ field: 'id', order: 'desc' }],
     },
   });
 
   // fix for ant design filter dropdown contains operator
   filters.map((filter) => {
-    if (filter.operator === "contains" && Array.isArray(filter.value)) {
-      filter.value = filter.value.join(",");
+    if (filter.operator === 'contains' && Array.isArray(filter.value)) {
+      filter.value = filter.value.join(',');
     }
   });
 
   return (
     <div className="page-container">
-      <List breadcrumb={false} canCreate={false} contentProps={LIST_CONTENT_PROPS}>
+      <List
+        breadcrumb={false}
+        canCreate={false}
+        contentProps={LIST_CONTENT_PROPS}
+      >
         <Table
           className="audit-log-table"
           {...tableProps}
@@ -96,7 +99,7 @@ export const AuditLogPage = () => {
                     src={`https://rhrc.woa.com/photo/150/${record.authorName}.png`}
                     name={record.authorName}
                   />
-                  {record.authorName || "N/A"}
+                  {record.authorName || 'N/A'}
                 </Space>
               );
             }}
@@ -112,9 +115,9 @@ export const AuditLogPage = () => {
               </FilterDropdown>
             )}
             defaultFilteredValue={getDefaultFilter(
-              "authorName",
+              'authorName',
               filters,
-              "contains"
+              'contains',
             )}
           />
           <Table.Column
@@ -126,7 +129,7 @@ export const AuditLogPage = () => {
                   <Tag color={getActionColor(record.action)}>
                     {
                       auditLogActionOptions.find(
-                        (option) => option.value === record.action
+                        (option) => option.value === record.action,
                       )?.label
                     }
                   </Tag>
@@ -150,13 +153,13 @@ export const AuditLogPage = () => {
                 </Radio.Group>
               </FilterDropdown>
             )}
-            defaultFilteredValue={getDefaultFilter("action", filters, "eq")}
+            defaultFilteredValue={getDefaultFilter('action', filters, 'eq')}
           />
           <Table.Column
             dataIndex="resource"
             title="Entity"
             filterIcon={<SearchOutlined />}
-            filterDropdown={props => (
+            filterDropdown={(props) => (
               <FilterDropdown
                 {...(props as any)}
                 clearFilters={() => {
@@ -167,7 +170,11 @@ export const AuditLogPage = () => {
                 <Input />
               </FilterDropdown>
             )}
-            defaultFilteredValue={getDefaultFilter("resource", filters, "contains")}
+            defaultFilteredValue={getDefaultFilter(
+              'resource',
+              filters,
+              'contains',
+            )}
           />
           <Table.Column dataIndex="resourceId" title="Entity ID" />
           <Table.Column
@@ -181,7 +188,7 @@ export const AuditLogPage = () => {
             width="15%"
             render={(value) => (
               <DateField
-                style={{ verticalAlign: "middle" }}
+                style={{ verticalAlign: 'middle' }}
                 value={value}
                 format="YYYY-MM-DD hh:mm:ss"
               />
@@ -200,11 +207,11 @@ export const AuditLogPage = () => {
             )}
             sorter
             defaultFilteredValue={getDefaultFilter(
-              "timestamp",
+              'timestamp',
               filters,
-              "between"
+              'between',
             )}
-            defaultSortOrder={getDefaultSortOrder("timestamp", sorters)}
+            defaultSortOrder={getDefaultSortOrder('timestamp', sorters)}
           />
         </Table>
       </List>

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

@@ -1,23 +1,34 @@
-
-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 { 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";
+} 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 resourceName = 'audit';
   const t = useTranslate();
-  
+
   const { queryResult } = useShow<Audit>({
-    meta: { select: showPrismaSelect},
+    meta: { select: showPrismaSelect },
   });
   const { data, isLoading } = queryResult;
   const record = data?.data;
@@ -28,9 +39,9 @@ export const AuditShow: React.FC<IResourceComponentsProps> = () => {
     });
 
     // getColumns is a function that returns an array of fields
-    const fields = getColumns("Audit", showConfig.fields, {
+    const fields = getColumns('Audit', showConfig.fields, {
       ...modelsMap,
-      Audit: { model, meta: modelsMap["Audit"].meta },
+      Audit: { model, meta: modelsMap['Audit'].meta },
     });
 
     return [fields, model] as const;
@@ -40,16 +51,19 @@ export const AuditShow: React.FC<IResourceComponentsProps> = () => {
     <Show
       isLoading={isLoading}
       headerButtons={
-        <>
-          <ListButton/>
+        <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}}
+            meta={{ select: showPrismaSelect }}
           />
-        </>
+        </div>
       }
     >
       {fields.map((field: any) => {
@@ -58,4 +72,3 @@ export const AuditShow: React.FC<IResourceComponentsProps> = () => {
     </Show>
   );
 };
-

package/dist/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/dist/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;