@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/plugins/devShellPlugin.ts

@@ -0,0 +1,81 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type { Plugin } from 'vite';
+
+/**
+ * Dev-only Vite plugin for Gadmin2 Dev Tools.
+ *
+ * Features:
+ * 1. POST /canvas-patch — agent pushes new component code to canvas via HMR
+ * 2. "/" serves dev-shell-entry.html (agent panel outer shell)
+ * 3. All other HTML navigation falls back to index.html (SPA router)
+ */
+export function devShellPlugin(): Plugin {
+  return {
+    name: 'dev-shell',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url?.split('?')[0] ?? '/';
+
+        // POST /canvas-patch — agent 将新组件代码通过 HMR 推送给前端画布
+        if (req.method === 'POST' && url === '/canvas-patch') {
+          let body = '';
+          req.on('data', (chunk: Buffer) => {
+            body += chunk.toString();
+          });
+          req.on('end', () => {
+            try {
+              const { itemId, code } = JSON.parse(body) as {
+                itemId: string;
+                code: string;
+              };
+              if (itemId && code !== undefined) {
+                server.hot.send('canvas:patch', { itemId, code });
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({ ok: true }));
+              } else {
+                res.statusCode = 400;
+                res.end(JSON.stringify({ error: 'itemId and code required' }));
+              }
+            } catch {
+              res.statusCode = 400;
+              res.end(JSON.stringify({ error: 'invalid JSON' }));
+            }
+          });
+          return;
+        }
+
+        // "/" → dev-shell-entry.html（Agent 外壳）
+        if (url === '/') {
+          const rawHtml = fs.readFileSync(
+            path.resolve(__dirname, '..', '..', 'dev-shell-entry.html'),
+            'utf-8',
+          );
+          const html = await server.transformIndexHtml(url, rawHtml);
+          res.setHeader('Content-Type', 'text/html');
+          res.end(html);
+          return;
+        }
+
+        // 其他 HTML 导航请求 → index.html（SPA fallback）
+        const lastSegment = url.split('/').pop() ?? '';
+        const isAsset = lastSegment.includes('.');
+        const isHtmlNav =
+          !isAsset && (req.headers.accept ?? '').includes('text/html');
+        if (isHtmlNav) {
+          const rawHtml = fs.readFileSync(
+            path.resolve(__dirname, '..', '..', 'index.html'),
+            'utf-8',
+          );
+          const html = await server.transformIndexHtml(url, rawHtml);
+          res.setHeader('Content-Type', 'text/html');
+          res.end(html);
+          return;
+        }
+
+        next();
+      });
+    },
+  };
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/components/action-cell.css

@@ -0,0 +1,3 @@
+.highlight-changed-row {
+  background-color: #fff2f0;
+} 

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

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+
+import { ZoomInOutlined } from '@ant-design/icons';
+import { Button, Modal, Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+import { Text } from 'components';
+import { AuditLogActionEnum } from 'enums';
+import { AuditLog } from 'types';
+import { renderLongColumnValue } from 'helpers';
+
+import './action-cell.css';
+
+export const ActionCell = ({ record }: { record: AuditLog }) => {
+  const [opened, setOpened] = useState(false);
+
+  const columns: ColumnsType<{
+    field: string;
+    from: any;
+    to: any;
+  }> = [
+    {
+      title: 'Field',
+      dataIndex: 'field',
+      key: 'field',
+      render: (value) => <Text strong>{value}</Text>,
+      width: '20%',
+    },
+  ];
+
+  if (record.action === AuditLogActionEnum.update) {
+    columns.push({
+      title: 'Old value',
+      dataIndex: 'from',
+      key: 'from',
+      width: '40%',
+      ellipsis: false,
+      render: (value) => {
+        if (value === null || value === undefined) {
+          return <Text type="secondary">-</Text>;
+        }
+        if (typeof value === 'object') {
+          return renderLongColumnValue(JSON.stringify(value, null, 2));
+        }
+        return renderLongColumnValue(String(value));
+      },
+    });
+  }
+
+  columns.push({
+    title: 'New value',
+    dataIndex: 'to',
+    key: 'to',
+    width: '40%',
+    ellipsis: false,
+    render: (value) => {
+      if (value === null || value === undefined) {
+        return <Text type="secondary">-</Text>;
+      }
+      if (typeof value === 'object') {
+        return renderLongColumnValue(JSON.stringify(value, null, 2));
+      }
+      return renderLongColumnValue(String(value));
+    },
+  });
+
+  if (!record.data) {
+    return null;
+  }
+
+  const newData = JSON.parse(record.data || '{}');
+  const previousData = JSON.parse(record.previousData || '{}');
+  const changes = Object.entries(newData).map(([key, value]) => ({
+    field: key,
+    from: previousData[key],
+    to: value,
+  }));
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Button
+          size="small"
+          icon={<ZoomInOutlined />}
+          onClick={() => setOpened((prev) => !prev)}
+        >
+          Details
+        </Button>
+      </div>
+      {opened && (
+        <Modal
+          open={opened}
+          onOk={() => setOpened(false)}
+          onCancel={() => setOpened(false)}
+          style={{ minWidth: '60vw' }}
+          styles={{
+            body: {
+              maxHeight: '500px',
+              overflow: 'auto',
+            },
+          }}
+        >
+          <Table
+            dataSource={changes}
+            pagination={false}
+            rowKey="field"
+            bordered
+            size="small"
+            columns={columns}
+            style={{ marginTop: '48px' }}
+            rowClassName={(row) => {
+              return record.action === AuditLogActionEnum.update &&
+                row.from !== row.to
+                ? 'highlight-changed-row'
+                : '';
+            }}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/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 {
+  auditFormConfig as formConfig,
+  auditFormPrismaSelect as formPrismaSelect,
+} from '../../generated/props/audit/config';
+import { auditModel, useRelation } from '../../generated/props/audit/model';
+import { Audit } from '../../generated/types/prisma.types';
+import { AuditForm as transformClass } from '../../generated/props/audit/form.validator';
+import { BusinessContext } from 'components/contexts/business';
+
+export const AuditCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'audit';
+  const t = useTranslate();
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      auditModel,
+      {
+        // 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<Audit>({
+    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/audit/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 {
+  auditFormConfig as formConfig,
+  auditFormPrismaSelect as formPrismaSelect,
+} from '../../generated/props/audit/config';
+import { auditModel, useRelation } from '../../generated/props/audit/model';
+import { Audit } from '../../generated/types/prisma.types';
+import { AuditForm as transformClass } from '../../generated/props/audit/form.validator';
+import { BusinessContext } from 'components/contexts/business';
+
+export const AuditEdit: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'audit';
+  const t = useTranslate();
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      auditModel,
+      {
+        // 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<Audit>({
+    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/audit/index.ts

@@ -0,0 +1,8 @@
+export * from './list';
+
+// Stub exports for generated/resources.tsx compatibility (gadmin2 generated imports)
+const EmptyComponent = () => null;
+export const AuditCreate = EmptyComponent;
+export const AuditEdit = EmptyComponent;
+export const AuditList = EmptyComponent;
+export const AuditShow = EmptyComponent;

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/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/audit/list.tsx

@@ -0,0 +1,220 @@
+import {
+  DateField,
+  FilterDropdown,
+  getDefaultSortOrder,
+  List,
+  rangePickerFilterMapper,
+  useTable,
+} from '@refinedev/antd';
+import { getDefaultFilter, HttpError } from '@refinedev/core';
+
+import { SearchOutlined } from '@ant-design/icons';
+import {
+  DatePicker,
+  Input,
+  Radio,
+  Space,
+  Table,
+  Tag,
+  type TagProps,
+} from 'antd';
+
+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';
+
+const getActionColor = (action: string): TagProps['color'] => {
+  switch (action) {
+    case AuditLogActionEnum.create:
+      return 'green';
+    case AuditLogActionEnum.update:
+      return 'cyan';
+    case AuditLogActionEnum.delete:
+      return 'red';
+    default:
+      return 'default';
+  }
+};
+
+export const AuditLogPage = () => {
+  const { tableProps, filters, sorters } = useTable<
+    AuditLog,
+    HttpError,
+    Partial<AuditLog>
+  >({
+    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' },
+      ],
+    },
+    sorters: {
+      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(',');
+    }
+  });
+
+  return (
+    <div className="page-container">
+      <List
+        breadcrumb={false}
+        canCreate={false}
+        contentProps={LIST_CONTENT_PROPS}
+      >
+        <Table
+          className="audit-log-table"
+          {...tableProps}
+          rowKey="id"
+          scroll={{ x: true }}
+          pagination={{
+            ...tableProps.pagination,
+            showTotal: (total) => (
+              <PaginationTotal total={total} entityName="audit logs" />
+            ),
+          }}
+        >
+          <Table.Column
+            dataIndex="authorName"
+            title="User"
+            width="15%"
+            filterIcon={<SearchOutlined />}
+            render={(_, record: AuditLog) => {
+              return (
+                <Space>
+                  <CustomAvatar
+                    src={`https://rhrc.woa.com/photo/150/${record.authorName}.png`}
+                    name={record.authorName}
+                  />
+                  {record.authorName || 'N/A'}
+                </Space>
+              );
+            }}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter(
+              'authorName',
+              filters,
+              'contains',
+            )}
+          />
+          <Table.Column
+            dataIndex="action"
+            title="Action"
+            render={(_, record: AuditLog) => {
+              return (
+                <Space>
+                  <Tag color={getActionColor(record.action)}>
+                    {
+                      auditLogActionOptions.find(
+                        (option) => option.value === record.action,
+                      )?.label
+                    }
+                  </Tag>
+                </Space>
+              );
+            }}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Radio.Group>
+                  {auditLogActionOptions.map((option) => (
+                    <Radio key={option.value} value={option.value}>
+                      {option.label}
+                    </Radio>
+                  ))}
+                </Radio.Group>
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter('action', filters, 'eq')}
+          />
+          <Table.Column
+            dataIndex="resource"
+            title="Entity"
+            filterIcon={<SearchOutlined />}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <Input />
+              </FilterDropdown>
+            )}
+            defaultFilteredValue={getDefaultFilter(
+              'resource',
+              filters,
+              'contains',
+            )}
+          />
+          <Table.Column dataIndex="resourceId" title="Entity ID" />
+          <Table.Column
+            dataIndex="data"
+            title="Changes"
+            render={(_, record: AuditLog) => <ActionCell record={record} />}
+          />
+          <Table.Column
+            dataIndex="timestamp"
+            title="Date & Time"
+            width="15%"
+            render={(value) => (
+              <DateField
+                style={{ verticalAlign: 'middle' }}
+                value={value}
+                format="YYYY-MM-DD hh:mm:ss"
+              />
+            )}
+            filterDropdown={(props) => (
+              <FilterDropdown
+                {...(props as any)}
+                mapValue={rangePickerFilterMapper}
+                clearFilters={() => {
+                  props.setSelectedKeys([]);
+                  props.confirm?.();
+                }}
+              >
+                <DatePicker.RangePicker />
+              </FilterDropdown>
+            )}
+            sorter
+            defaultFilteredValue={getDefaultFilter(
+              'timestamp',
+              filters,
+              'between',
+            )}
+            defaultSortOrder={getDefaultSortOrder('timestamp', sorters)}
+          />
+        </Table>
+      </List>
+    </div>
+  );
+};