@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,2 @@
+export { default as CanvasListPage } from './CanvasListPage';
+export { default as CanvasEditPage } from './CanvasEditPage';

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/sectionCompactor.ts

@@ -0,0 +1,45 @@
+import { verticalCompactor } from 'react-grid-layout';
+import type { Compactor } from 'react-grid-layout';
+import type { CanvasItem } from './types';
+
+/**
+ * 创建支持 Section 分层重叠的自定义 compactor。
+ *
+ * 碰撞规则：
+ * - Section 与 Section：正常碰撞（不能重叠）
+ * - 普通组件与普通组件：正常碰撞（不能重叠）
+ * - Section 与普通组件：允许重叠
+ *
+ * 实现：将 layout 分为两层分别 compact，然后合并。
+ * - Section 层：只包含 Section item，独立 compact
+ * - 普通层：只包含普通 item，独立 compact
+ * 由于两层独立 compact，它们之间自然不会互相推挤。
+ */
+export function createSectionCompactor(
+  getItems: () => CanvasItem[],
+): Compactor {
+  return {
+    type: 'vertical',
+    allowOverlap: false,
+
+    compact(layout, cols) {
+      const items = getItems();
+      const sectionIds = new Set(
+        items
+          .filter((item) => item.componentType === 'Section')
+          .map((item) => item.id),
+      );
+
+      // 分两层
+      const sectionLayout = layout.filter((l) => sectionIds.has(l.i));
+      const normalLayout = layout.filter((l) => !sectionIds.has(l.i));
+
+      // 各自独立 compact
+      const compactedSections = verticalCompactor.compact(sectionLayout, cols);
+      const compactedNormals = verticalCompactor.compact(normalLayout, cols);
+
+      // 合并
+      return [...compactedSections, ...compactedNormals];
+    },
+  };
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/types.ts

@@ -0,0 +1,45 @@
+// 每个组件 demo 的配置格式
+export interface PropDoc {
+  name: string;
+  type: string;
+  required?: boolean;
+  default?: string;
+  desc: string;
+}
+
+export interface ComponentVariant {
+  name: string;
+  label: string;
+  testId?: string;
+  code: string;
+}
+
+export interface ComponentDemo {
+  id: string;
+  title: string;
+  description: string;
+  imports: string;
+  props: PropDoc[]; // 完整 props 表，所有 variant 共用
+  variants: ComponentVariant[];
+}
+
+// ─── Canvas ───────────────────────────────────────────────────────
+
+export interface CanvasItem {
+  id: string; // nanoid 生成的唯一 ID
+  componentType: string; // "PieChart" | "BarChart" | "NumCard" | ...
+  code: string; // 当前 TSX 代码
+}
+
+// ─── Multi-Canvas ────────────────────────────────────────────────────────
+
+export interface SavedCanvas {
+  id: string;
+  name: string;
+  items: CanvasItem[];
+  layout: import('react-grid-layout').LayoutItem[];
+  publishedPageCode: string | null;
+  publishedAt: number | null; // epoch ms, null = never published
+  createdAt: number;
+  updatedAt: number;
+}

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Spin } from 'antd';
+import { GridLayout, useContainerWidth } from 'react-grid-layout';
+import type { LayoutItem } from 'react-grid-layout';
+import CanvasCell from '../canvas/CanvasCell';
+import type { CanvasItem } from '../canvas/types';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+
+const COLS = 48;
+const ROW_HEIGHT = 10;
+
+interface CanvasData {
+  items: CanvasItem[];
+  layout: LayoutItem[];
+  name: string;
+}
+
+export default function CanvasViewPage() {
+  const { slug } = useParams<{ slug: string }>();
+  const [data, setData] = useState<CanvasData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { width: containerWidth, containerRef, mounted } = useContainerWidth();
+
+  useEffect(() => {
+    if (!slug) return;
+    setLoading(true);
+    fetch(`/api/canvas/by-page-code/${slug}`, { credentials: 'include' })
+      .then((r) => {
+        if (!r.ok) throw new Error(`${r.status}`);
+        return r.json();
+      })
+      .then((d) => {
+        setData(d);
+        setError(null);
+      })
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [slug]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        ref={containerRef as React.RefObject<HTMLDivElement>}
+        style={{
+          flex: 1,
+          overflow: 'visible',
+          position: 'relative',
+          background: '#f0f2f5',
+        }}
+      >
+        {loading ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              minHeight: 400,
+            }}
+          >
+            <Spin size="large" />
+          </div>
+        ) : error || !data ? (
+          <div style={{ textAlign: 'center', padding: 60, color: '#999' }}>
+            {error || 'Page not found'}
+          </div>
+        ) : (
+          mounted && (
+            <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%' }}>
+              <GridLayout
+                className="layout"
+                layout={data.layout}
+                width={Math.min(containerWidth, 1600)}
+                gridConfig={{
+                  cols: COLS,
+                  rowHeight: ROW_HEIGHT,
+                  margin: [8, 8],
+                }}
+                dragConfig={{ enabled: false }}
+                resizeConfig={{ enabled: false }}
+              >
+                {data.items.map((item) => (
+                  <CanvasCell
+                    key={item.id}
+                    code={item.code}
+                    componentType={item.componentType}
+                    selected={false}
+                    isPreview={true}
+                    onClick={() => {}}
+                    onDoubleClick={() => {}}
+                    onContextMenu={() => {}}
+                  />
+                ))}
+              </GridLayout>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from '@gadmin2n/react-common';
+import { Create, useFileUploadState, useForm } from '@refinedev/antd';
+import { Form } from 'antd';
+import {
+  IResourceComponentsProps,
+  useApiUrl,
+  useTranslate,
+} from '@refinedev/core';
+import React, { useContext, useState } from 'react';
+import { getFormItem, onFormValuesChange } from '../../helpers';
+import { modelsMap, modelsEnum } from '../../generated/models.index';
+import {
+  gameFormConfig as formConfig,
+  gameFormPrismaSelect as formPrismaSelect,
+} from '../../generated/props/game/config';
+import { gameModel, useRelation } from '../../generated/props/game/model';
+import { Game } from '../../generated/types/prisma.types';
+import { GameForm as transformClass } from '../../generated/props/game/form.validator';
+import { BusinessContext } from 'components/contexts/business';
+
+export const GameCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'game';
+  const t = useTranslate();
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      gameModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass,
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } = useForm<Game>({
+    meta: { select: formPrismaSelect },
+  });
+  if (formProps.initialValues || formConfig.initialValues) {
+    formProps.initialValues = handleInitialValues(
+      formProps.initialValues || formConfig.initialValues || {},
+      fields,
+    );
+  }
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Create
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+              },
+              fields,
+            ),
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(form, formConfig.reaction)}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange,
+          );
+        })}
+      </Form>
+    </Create>
+  );
+};

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

@@ -0,0 +1,121 @@
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from '@gadmin2n/react-common';
+import {
+  Edit,
+  ListButton,
+  RefreshButton,
+  useFileUploadState,
+  useForm,
+} from '@refinedev/antd';
+import { Form } from 'antd';
+import {
+  IResourceComponentsProps,
+  useApiUrl,
+  useParsed,
+  useTranslate,
+} from '@refinedev/core';
+import { getFormItem, onFormValuesChange } from '../../helpers';
+import React, { useContext, useState } from 'react';
+
+import { modelsMap, modelsEnum } from '../../generated/models.index';
+import {
+  gameFormConfig as formConfig,
+  gameFormPrismaSelect as formPrismaSelect,
+} from '../../generated/props/game/config';
+import { gameModel, useRelation } from '../../generated/props/game/model';
+import { Game } from '../../generated/types/prisma.types';
+import { GameForm as transformClass } from '../../generated/props/game/form.validator';
+import { BusinessContext } from 'components/contexts/business';
+
+export const GameEdit: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'game';
+  const t = useTranslate();
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      gameModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass,
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } = useForm<Game>({
+    meta: { select: formPrismaSelect },
+  });
+  formProps.initialValues = handleInitialValues(
+    formProps.initialValues || {},
+    fields,
+  );
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Edit
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+      headerButtons={
+        <>
+          <ListButton />
+          <RefreshButton meta={{ select: formPrismaSelect }} />
+        </>
+      }
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+
+                id: undefined,
+              },
+              fields,
+              'edit',
+            ),
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(form, formConfig.reaction)}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange,
+          );
+        })}
+      </Form>
+    </Edit>
+  );
+};

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

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

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

@@ -0,0 +1,237 @@
+/**
+ * Game List Page
+ *
+ * Generated using simplified pattern with @gadmin2n/react-common hooks and components.
+ *
+ * Flexibility Levels:
+ * 1. Basic usage - Use components with defaults (this file)
+ * 2. Render props - Customize specific buttons/elements
+ * 3. Children function - Complete UI control
+ * 4. Core hooks - No UI assumptions, full control
+ *
+ * See: examples/ListPageExamples.tsx for all patterns
+ */
+import React, { useMemo } from 'react';
+import { Table } from 'antd';
+import { List, useTable, useImport } from '@refinedev/antd';
+import {
+  HttpError,
+  IResourceComponentsProps,
+  parseTableParams,
+  useExport,
+  useTranslate,
+  useApiUrl,
+} from '@refinedev/core';
+import { useLocation } from 'react-router-dom';
+import {
+  getColumns,
+  ModelType,
+  produceModel,
+  tableSearchBar,
+} from '@gadmin2n/react-common';
+
+// Generated imports
+import { modelsEnum, modelsMap } from 'generated/models.index';
+import {
+  gameTableConfig as tableConfig,
+  gameTablePrismaSelect as prismaSelect,
+} from 'generated/props/game/config';
+import { gameModel, useRelation } from 'generated/props/game/model';
+import type { Game } from 'generated/types/prisma.types';
+
+// Local imports
+import { BulkActions, ListPageHeader, RowActions, SearchBar } from 'components';
+import { getRowActionsColumnProps } from 'components/agentPanel';
+import { LogButton } from 'components/auditLog';
+import { requestHeaders } from 'helpers/login';
+import { useBatchOperations } from 'hooks';
+import {
+  createSearchFormOnFinish,
+  getSearchFormInitialValues,
+  getTableColumnV2,
+  TableColumnContext,
+} from 'helpers';
+
+const { placeholder: searchPlaceholder, getSearchFilters } = tableSearchBar(
+  tableConfig['toolbar']['searchBar'],
+  gameModel,
+);
+
+// https://refine.dev/docs/api-reference/antd/hooks/table/useTable/
+export const GameList: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'game';
+  const t = useTranslate();
+  const apiUrl = useApiUrl();
+  const { search } = useLocation();
+  const { parsedSorter, parsedFilters } = parseTableParams(search);
+
+  // Relations
+  const relationSelectProps = useRelation(modelsMap);
+
+  // Model with customizations
+  const [columns, model] = useMemo(() => {
+    const model: ModelType = produceModel(gameModel, {
+      // Custom column renderers can be added here
+      // cron: { render: (value) => humanizeCronInChinese(value) },
+    });
+
+    const columns = getColumns('Game', tableConfig.fields, {
+      ...modelsMap,
+      Game: { model, meta: modelsMap['Game'].meta },
+    });
+
+    return [columns, model] as const;
+  }, []);
+
+  // Table hook
+  const {
+    tableProps,
+    sorters: sorter,
+    setCurrent,
+    setFilters,
+    filters,
+    tableQueryResult,
+    searchFormProps,
+  } = useTable<Game, HttpError>({
+    meta: { transformQFn: getSearchFilters, select: prismaSelect },
+    filters: { initial: parsedFilters, defaultBehavior: 'merge' },
+    sorters: { initial: parsedSorter },
+  });
+
+  // initialValues: 从 URL 的 parsedFilters 中恢复 q（搜索关键词）和 createdAt（日期范围）
+  // onFinish: 将表单值转换为 CrudFilters 并更新筛选条件
+  // 有 createdAt 字段的模型（默认）
+  searchFormProps.initialValues = getSearchFormInitialValues(parsedFilters);
+  searchFormProps.onFinish = createSearchFormOnFinish(setCurrent, setFilters);
+
+  // 没有 createdAt 字段的模型
+  // searchFormProps.initialValues = getSearchFormInitialValues(parsedFilters, { dateField: null });
+  // searchFormProps.onFinish = createSearchFormOnFinish(setCurrent, setFilters, { dateField: null });
+
+  // 使用其他日期字段（如 updatedAt）
+  // searchFormProps.initialValues = getSearchFormInitialValues(parsedFilters, { dateField: 'updatedAt' });
+  // searchFormProps.onFinish = createSearchFormOnFinish(setCurrent, setFilters, { dateField: 'updatedAt' });
+
+  // Batch operations (selection, update, delete)
+  const batchOps = useBatchOperations({
+    resourceName,
+    apiUrl,
+    requestHeaders,
+    onSuccess: () => tableQueryResult.refetch(),
+    t,
+  });
+
+  // Export all
+  const { triggerExport, isLoading: exportLoading } = useExport<Game>({
+    maxItemCount: 200,
+    pageSize: 100,
+  });
+
+  // Export selected
+  const {
+    triggerExport: triggerExportSelected,
+    isLoading: exportSelectedLoading,
+  } = useExport<Game>({
+    pageSize: 100,
+    meta: { where: { id: { in: batchOps.selectedRowKeys.map(Number) } } },
+  });
+
+  // Import
+  const importProps = useImport<Game>({
+    mapData: (item: any) => ({
+      ...item,
+    }),
+    batchSize: 1,
+  });
+
+  // Context for table columns
+  const columnContext: TableColumnContext = {
+    resourceName,
+    t,
+    model,
+    modelsEnum,
+    modelsMap,
+    tableConfig,
+    sorter,
+    filters,
+    relationSelectProps,
+  };
+
+  return (
+    <List
+      headerProps={{
+        subTitle: (
+          <BulkActions
+            selectedRowKeys={batchOps.selectedRowKeys}
+            actions={tableConfig.rowSelection.actions}
+            onUpdateSelected={batchOps.updateSelectedItems}
+            onDeleteSelected={batchOps.deleteSelectedItems}
+            onExportSelected={triggerExportSelected}
+            updateLoading={batchOps.updateManyIsLoading}
+            deleteLoading={batchOps.deleteManyIsLoading}
+            exportLoading={exportSelectedLoading}
+            t={t}
+            resourceName={resourceName}
+            // Render props examples (uncomment to customize):
+            // renderDeleteButton={(onClick, loading) => <Button danger onClick={onClick} loading={loading}>Delete</Button>}
+            // renderSelectionCount={(count) => <Badge count={count}><Tag>Selected</Tag></Badge>}
+            // extraActions={<Button>Custom Action</Button>}
+          />
+        ),
+        extra: (
+          <ListPageHeader
+            importProps={importProps}
+            onExport={triggerExport}
+            exportLoading={exportLoading}
+            resourceName={resourceName}
+          />
+        ),
+      }}
+    >
+      {/* Search Bar */}
+      <SearchBar
+        formProps={searchFormProps}
+        t={t}
+        resourceName={resourceName}
+        searchPlaceholder={searchPlaceholder}
+        // Render props examples (uncomment to customize):
+        // renderKeywordInput={(field, defaultInput) => <Input.Search placeholder={field.placeholder} />}
+        // renderSubmitButton={(defaultButton) => <Space>{defaultButton}<Button>Reset</Button></Space>}
+        // extraActions={<Button type="link">Advanced</Button>}
+      />
+
+      {/* Data Table */}
+      <Table {...tableProps} rowKey="id" rowSelection={batchOps.rowSelection}>
+        {columns.map((col) =>
+          getTableColumnV2({ col, context: columnContext }),
+        )}
+
+        {/* Actions Column */}
+        <Table.Column<Game>
+          title={t('table.actions')}
+          dataIndex="actions"
+          {...getRowActionsColumnProps(resourceName)}
+          render={(_, record) => (
+            <RowActions
+              record={record}
+              actions={tableConfig.rowActions.actions}
+              onUpdate={batchOps.updateOne}
+              updateLoading={batchOps.updateManyIsLoading}
+              t={t}
+              resourceName={resourceName}
+              LogButton={LogButton}
+              // Render props examples (uncomment to customize):
+              // showClone={false}
+              // showDelete={false}
+              // renderEditButton={(id) => <Button type="link" size="small">Quick Edit</Button>}
+              // renderDeleteButton={(id) => <Popconfirm title="Sure?"><Button danger size="small">Remove</Button></Popconfirm>}
+              // extraPrimaryActions={<Button type="text" size="small">Quick View</Button>}
+            />
+          )}
+        />
+      </Table>
+    </List>
+  );
+};
+
+export default GameList;