@nocobase/flow-engine 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/reactive/index.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export * from '@formily/reactive';
+export { observer, getPageActive } from './observer';

package/src/reactive/observer.tsx

@@ -0,0 +1,101 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { observer as originalObserver, IObserverOptions, ReactFC } from '@formily/reactive-react';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { useFlowContext } from '../FlowContextProvider';
+import { autorun } from '@formily/reactive';
+import { FlowEngineContext } from '..';
+
+type ObserverComponentProps<P, Options extends IObserverOptions> = Options extends {
+  forwardRef: true;
+}
+  ? P & {
+      ref?: 'ref' extends keyof P ? P['ref'] : React.RefAttributes<any>;
+    }
+  : React.PropsWithoutRef<P>;
+
+export const observer = <P, Options extends IObserverOptions = IObserverOptions>(
+  Component: ReactFC<P>,
+  options?: Options,
+): React.MemoExoticComponent<ReactFC<ObserverComponentProps<P, Options>>> => {
+  const ComponentWithDefaultScheduler = React.memo((props: any) => {
+    const ctx = useFlowContext();
+    const ctxRef = useRef(ctx);
+    ctxRef.current = ctx;
+
+    // Store the pending disposer to avoid creating multiple listeners
+    const pendingDisposerRef = useRef<(() => void) | null>(null);
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        if (pendingDisposerRef.current) {
+          pendingDisposerRef.current();
+          pendingDisposerRef.current = null;
+        }
+      };
+    }, []);
+
+    const ObservedComponent = useMemo(
+      () =>
+        originalObserver(Component, {
+          scheduler(updater) {
+            const pageActive = getPageActive(ctxRef.current);
+            const tabActive = ctxRef.current?.tabActive?.value;
+
+            if (pageActive === false || tabActive === false) {
+              // Avoid stack overflow
+              setTimeout(() => {
+                // If there is already a pending updater, do nothing
+                if (pendingDisposerRef.current) {
+                  return;
+                }
+
+                // Delay the update until the page and tab become active
+                const disposer = autorun(() => {
+                  if (
+                    ctxRef.current?.pageActive?.value &&
+                    (ctxRef.current?.tabActive?.value === true || ctxRef.current?.tabActive?.value === undefined)
+                  ) {
+                    updater();
+                    disposer?.();
+                    pendingDisposerRef.current = null;
+                  }
+                });
+                pendingDisposerRef.current = disposer;
+              });
+              return;
+            }
+
+            // If we are updating immediately, clear any pending disposer
+            if (pendingDisposerRef.current) {
+              pendingDisposerRef.current();
+              pendingDisposerRef.current = null;
+            }
+
+            updater();
+          },
+          ...options,
+        }),
+      [],
+    );
+    return <ObservedComponent {...props} />;
+  });
+
+  ComponentWithDefaultScheduler.displayName = `ComponentWithDefaultScheduler`;
+
+  return ComponentWithDefaultScheduler as React.MemoExoticComponent<ReactFC<ObserverComponentProps<P, Options>>>;
+};
+
+export function getPageActive(context: FlowEngineContext): boolean | undefined {
+  return typeof context?.pageActive?.value === 'boolean'
+    ? context?.pageActive?.value
+    : context?.view?.inputArgs.pageActive;
+}

package/src/resources/baseRecordResource.ts

@@ -95,6 +95,7 @@ export abstract class BaseRecordResource<TData = any> extends APIResource<TData>
   }
 
   async runAction<TData = any, TMeta = any>(action: string, options: any) {
+    const { rawResponse, ...rest } = options;
     const config = this.mergeRequestConfig(
       _.omit(this.request, ['params', 'data', 'method']),
       {
@@ -102,14 +103,18 @@ export abstract class BaseRecordResource<TData = any> extends APIResource<TData>
         url: this.buildURL(action),
       },
       this.runActionOptions?.[action],
-      options,
+      rest,
     );
     if (['create', 'update', 'firstOrCreate', 'updateOrCreate'].includes(action)) {
       config.params = config.params || {};
       config.params.updateAssociationValues = this.getUpdateAssociationValues();
     }
     try {
-      const { data } = await this.api.request(config);
+      const response = await this.api.request(config);
+      if (rawResponse) {
+        return response;
+      }
+      const { data } = response;
       if (!data?.data) {
         return data;
       }
@@ -227,8 +232,15 @@ export abstract class BaseRecordResource<TData = any> extends APIResource<TData>
     return this;
   }
 
+  jsonStringify(value: any): string {
+    if (value !== null && typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return value;
+  }
+
   setFilterByTk(filterByTk: any) {
-    return this.addRequestParameter('filterByTk', filterByTk);
+    return this.addRequestParameter('filterByTk', this.jsonStringify(filterByTk));
   }
 
   getFilterByTk(): any {

package/src/resources/multiRecordResource.ts

@@ -110,10 +110,14 @@ export class MultiRecordResource<TDataItem = any> extends BaseRecordResource<TDa
     }
   }
 
-  async create(data: TDataItem, options?: AxiosRequestConfig): Promise<void> {
+  async create(data: TDataItem, options?: AxiosRequestConfig & { refresh?: boolean }): Promise<void> {
     const config = this.mergeRequestConfig({ data }, this.createActionOptions, options);
-    await this.runAction('create', config);
-    await this.refresh();
+    const res = await this.runAction('create', config);
+    this.emit('saved', data);
+    if (options?.refresh !== false) {
+      await this.refresh();
+    }
+    return res;
   }
 
   async get(filterByTk: any): Promise<TDataItem | undefined> {
@@ -129,17 +133,19 @@ export class MultiRecordResource<TDataItem = any> extends BaseRecordResource<TDa
   }
 
   async update(filterByTk: string | number, data: Partial<TDataItem>, options?: AxiosRequestConfig): Promise<void> {
+    const result = data;
     const config = this.mergeRequestConfig(
       {
         params: {
           filterByTk,
         },
-        data,
+        data: result,
       },
       this.updateActionOptions,
       options,
     );
     await this.runAction('update', config);
+    this.emit('saved', data);
     await this.refresh();
   }
 
@@ -152,20 +158,23 @@ export class MultiRecordResource<TDataItem = any> extends BaseRecordResource<TDa
   }
 
   async destroy(
-    filterByTk: string | number | string[] | number[] | TDataItem | TDataItem[],
+    filterByTk: string | number | string[] | number[] | TDataItem | TDataItem[] | object,
     options?: AxiosRequestConfig,
   ): Promise<void> {
     const config = this.mergeRequestConfig(
       {
         params: {
-          filterByTk: _.castArray(filterByTk).map((item) => {
-            return typeof item === 'object' ? item['id'] : item; // TODO: ID 字段还需要根据实际情况更改
-          }),
+          filterByTk: this.jsonStringify(filterByTk),
         },
       },
       options,
     );
     await this.runAction('destroy', config);
+    const currentPage = this.getPage();
+    const lastPage = Math.ceil((this.getCount() - _.castArray(filterByTk).length) / this.getPageSize());
+    if (currentPage > lastPage) {
+      this.setPage(lastPage || 1);
+    }
     await this.refresh();
   }
 

package/src/resources/singleRecordResource.ts

@@ -33,26 +33,29 @@ export class SingleRecordResource<TData = any> extends BaseRecordResource<TData>
   async save(data: TData, options?: AxiosRequestConfig & { refresh?: boolean }): Promise<void> {
     const config = this.mergeRequestConfig(this.saveActionOptions, _.omit(options, ['refresh']));
     let actionName = 'create';
+    const result = data;
     // 如果有 filterByTk，则表示是更新操作
     if (!this.isNewRecord) {
       config.params = config.params || {};
       config.params.filterByTk = this.getFilterByTk();
       actionName = 'update';
     }
-    await this.runAction(actionName, {
+    const res = await this.runAction(actionName, {
       ...config,
-      data,
+      data: result,
     });
+    this.emit('saved', data);
     if (options?.refresh !== false) {
       await this.refresh();
     }
+    return res;
   }
 
   async destroy(options?: AxiosRequestConfig): Promise<void> {
     const config = this.mergeRequestConfig(
       {
         params: {
-          filterByTk: this.request.params.filterByTk,
+          filterByTk: this.jsonStringify(this.request.params.filterByTk),
         },
       },
       options,

package/src/resources/sqlResource.ts

@@ -11,6 +11,7 @@ import { observable } from '@formily/reactive';
 import _ from 'lodash';
 import { FlowContext, FlowEngineContext } from '../flowContext';
 import { BaseRecordResource } from './baseRecordResource';
+import { parseLiquidContext, transformSQL } from '@nocobase/utils/client';
 
 type SQLRunOptions = {
   bind?: Record<string, any>;
@@ -25,20 +26,6 @@ type SQLSaveOptions = {
   dataSourceKey?: string;
 };
 
-function transformSQL(template: string) {
-  let index = 1;
-  const bind = {};
-
-  const sql = template.replace(/{{\s*([^}]+)\s*}}/g, (_, expr) => {
-    const key = `__var${index}`;
-    bind[key] = `{{${expr.trim()}}}`;
-    index++;
-    return `$${key}`;
-  });
-
-  return { sql, bind };
-}
-
 export class FlowSQLRepository {
   protected ctx: FlowEngineContext;
 
@@ -56,16 +43,17 @@ export class FlowSQLRepository {
   }
 
   async run(sql: string, options: SQLRunOptions = {}) {
-    const result = transformSQL(sql);
-    const bind = await this.ctx.resolveJsonTemplate(result.bind);
+    const { sql: transformedSQL, bind, liquidContext } = await transformSQL(sql);
+    const resolved = await this.ctx.resolveJsonTemplate({ bind, liquidContext });
+    const parsedSQL = await parseLiquidContext(transformedSQL, resolved.liquidContext);
     const { data } = await this.ctx.api.request({
       method: 'POST',
       url: 'flowSql:run',
       data: {
-        sql: result.sql,
+        sql: parsedSQL,
         ...options,
         bind: {
-          ...bind,
+          ...resolved.bind,
           ...options.bind,
         },
       },
@@ -91,7 +79,7 @@ export class FlowSQLRepository {
         uid,
       },
     });
-    const bind = await this.ctx.resolveJsonTemplate(response.data.data || {});
+    const { bind, liquidContext } = await this.ctx.resolveJsonTemplate(response.data.data || {});
     const { data } = await this.ctx.api.request({
       method: 'POST',
       url: 'flowSql:runById',
@@ -100,8 +88,9 @@ export class FlowSQLRepository {
         ...options,
         bind: {
           ...bind,
-          ...options.bind,
+          ...options?.bind,
         },
+        liquidContext,
       },
     });
     return data?.data;
@@ -233,20 +222,25 @@ export class SQLResource<TData = any> extends BaseRecordResource<TData> {
     return this;
   }
 
+  setLiquidContext(liquidContext: Record<string, any>) {
+    this.request.data.liquidContext = liquidContext;
+    return this;
+  }
+
   async run() {
     return this._debugEnabled ? await this.runBySQL() : await this.runById();
   }
 
   async runBySQL() {
     const sql = this._sql;
-    const result = transformSQL(sql);
-    const bind = await this.context.resolveJsonTemplate(result.bind);
+    const { sql: transformedSQL, bind, liquidContext } = await transformSQL(sql);
+    const resolved = await this.context.resolveJsonTemplate({ bind, liquidContext });
     const options = _.cloneDeep({
       method: 'post',
       ...this.getRefreshRequestOptions(),
     });
-    options.data.bind = bind;
-    options.data.sql = result.sql;
+    options.data.sql = await parseLiquidContext(transformedSQL, resolved.liquidContext);
+    options.data.bind = resolved.bind;
     return await this.runAction<TData, any>('run', options);
   }
 
@@ -257,8 +251,9 @@ export class SQLResource<TData = any> extends BaseRecordResource<TData> {
         uid: this.request.data.uid,
       },
     });
-    const bind = await this.context.resolveJsonTemplate(data);
+    const { bind, liquidContext } = await this.context.resolveJsonTemplate(data);
     this.setBind(bind);
+    this.setLiquidContext(liquidContext);
     return await this.runAction<TData, any>('runById', {
       method: 'post',
       ...this.getRefreshRequestOptions(),
@@ -281,10 +276,11 @@ export class SQLResource<TData = any> extends BaseRecordResource<TData> {
         try {
           this.clearError();
           this.loading = true;
+          this.emit('loading');
           const { data, meta } = await this.run();
           this.setData(data).setMeta(meta);
-          this.emit('refresh');
           this.loading = false;
+          this.emit('refresh');
           resolve();
         } catch (error) {
           this.setError(error);

package/src/runjs-context/contexts/base.ts

@@ -44,12 +44,33 @@ export function defineBaseContextMeta() {
           language: 'Current active language code.',
         },
       },
-      React: 'React namespace providing React library functions and hooks (available in RunJS environment)',
-      ReactDOM: 'ReactDOM client API including createRoot for rendering React components',
-      antd: 'Ant Design component library',
+      React:
+        'React namespace providing React library functions and hooks (available in RunJS environment). Recommended access path: `ctx.libs.React`.',
+      ReactDOM:
+        'ReactDOM client API including createRoot for rendering React components. Also available via `ctx.libs.ReactDOM`.',
+      antd: 'Ant Design component library. Recommended access path: `ctx.libs.antd`.',
+      libs: {
+        description: 'Namespace for third-party and shared libraries. Includes React, ReactDOM, Ant Design, and dayjs.',
+        detail: 'Libraries namespace',
+        properties: {
+          React: 'React namespace (same as ctx.React).',
+          ReactDOM: 'ReactDOM client API (same as ctx.ReactDOM).',
+          antd: 'Ant Design component library (same as ctx.antd).',
+          dayjs: 'dayjs date-time utility library.',
+          antdIcons: 'Ant Design icons library. Example: `ctx.libs.antdIcons.PlusOutlined`.',
+        },
+      },
     },
     methods: {
       t: 'Internationalization function for translating text. Parameters: (key: string, variables?: object) => string. Example: `ctx.t("Hello {name}", { name: "World" })`',
+      render: {
+        description:
+          'Render into container. Accepts ReactElement, DOM Node/Fragment, or HTML string. Parameters: (vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null. Example: `ctx.render(<div>Hello</div>)` or `ctx.render("<b>hi</b>")`',
+        detail: 'ReactDOM Root',
+        completion: {
+          insertText: `ctx.render(<div />)`,
+        },
+      },
       requireAsync:
         'Asynchronously load external libraries from URL. Parameters: (url: string) => Promise<any>. Example: `const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
       importAsync:
@@ -121,12 +142,32 @@ export function defineBaseContextMeta() {
             language: '当前激活的语言代码',
           },
         },
-        React: 'React 命名空间，提供 React 函数与 hooks（RunJS 环境中可用）',
-        ReactDOM: 'ReactDOM 客户端 API，含 createRoot 等渲染方法',
-        antd: 'Ant Design 组件库（RunJS 环境中可用）',
+        React: 'React 命名空间，提供 React 函数与 hooks（RunJS 环境中可用）。推荐使用 `ctx.libs.React` 访问。',
+        ReactDOM: 'ReactDOM 客户端 API，含 createRoot 等渲染方法。推荐通过 `ctx.libs.ReactDOM` 访问。',
+        antd: 'Ant Design 组件库（RunJS 环境中可用）。推荐使用 `ctx.libs.antd` 访问。',
+        libs: {
+          description:
+            '第三方/通用库的统一命名空间，包含 React、ReactDOM、Ant Design、dayjs 等。后续新增库会优先挂在此处。',
+          detail: '通用库命名空间',
+          properties: {
+            React: 'React 命名空间（等价于 ctx.React）。',
+            ReactDOM: 'ReactDOM 客户端 API（等价于 ctx.ReactDOM）。',
+            antd: 'Ant Design 组件库（等价于 ctx.antd）。',
+            dayjs: 'dayjs 日期时间工具库。',
+            antdIcons: 'Ant Design 图标库。 例如：`ctx.libs.antdIcons.PlusOutlined`。',
+          },
+        },
       },
       methods: {
         t: '国际化函数，用于翻译文案。参数：(key: string, variables?: object) => string。示例：`ctx.t("你好 {name}", { name: "世界" })`',
+        render: {
+          description:
+            '渲染到容器。vnode 支持 ReactElement、DOM 节点/片段、或 HTML 字符串。参数：(vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null。示例：`ctx.render(<div />)` 或 `ctx.render("<b>hi</b>")`',
+          detail: 'ReactDOM Root',
+          completion: {
+            insertText: `ctx.render(<div />)`,
+          },
+        },
         requireAsync:
           '按 URL 异步加载外部库。参数：(url: string) => Promise<any>。示例：`const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
         importAsync:

package/src/runjs-context/snippets/global/clipboard-copy-text.snippet.ts

@@ -0,0 +1,42 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../types';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-clipboard-copy',
+  label: 'Copy text to clipboard (function)',
+  description: 'A reusable function that copies a given string to the clipboard.',
+  locales: {
+    'zh-CN': {
+      label: '复制文本到剪贴板（函数）',
+      description: '通用函数：接受一个字符串参数并复制到剪贴板。',
+    },
+  },
+  content: `
+// A general utility function that copies text to clipboard.
+// Usage:
+//   const ok = await copyTextToClipboard('Hello');
+//   if (ok) { /* success */ } else { /* handle failure */ }
+async function copyTextToClipboard(text) {
+  const s = String(text ?? '');
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(s);
+      return true;
+    }
+  } catch (_) {
+    // Fallback below
+  }
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/index.ts

@@ -22,10 +22,13 @@ const snippets: Record<string, () => Promise<any>> = {
   'global/open-view-drawer': () => import('./global/open-view-drawer.snippet'),
   'global/open-view-dialog': () => import('./global/open-view-dialog.snippet'),
   'global/query-selector': () => import('./global/query-selector.snippet'),
+  'global/clipboard-copy-text': () => import('./global/clipboard-copy-text.snippet'),
   // libs
   'scene/block/echarts-init': () => import('./scene/block/echarts-init.snippet'),
   // scene/block
   'scene/block/render-react': () => import('./scene/block/render-react.snippet'),
+  'scene/block/render-react-jsx': () => import('./scene/block/render-react-jsx.snippet'),
+  'scene/block/render-antd-icons': () => import('./scene/block/render-antd-icons.snippet'),
   'scene/block/render-button-handler': () => import('./scene/block/render-button-handler.snippet'),
   'scene/block/add-event-listener': () => import('./scene/block/add-event-listener.snippet'),
   'scene/block/chartjs-bar': () => import('./scene/block/chartjs-bar.snippet'),

package/src/runjs-context/snippets/scene/block/render-antd-icons.snippet.ts

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-antd-icons',
+  label: 'Render Ant Design icons',
+  description: 'Render Ant Design icons with buttons inside the block container',
+  locales: {
+    'zh-CN': {
+      label: '渲染 Ant Design 图标',
+      description: '在区块容器中使用 Ant Design 图标与按钮进行渲染',
+    },
+  },
+  content: `
+// Render Ant Design icons with buttons via ctx.libs
+const { React, antd, antdIcons } = ctx.libs;
+const { Button, Space } = antd;
+const { PlusOutlined, EditOutlined, DeleteOutlined } = antdIcons;
+
+const IconButtons = () => (
+  <Space style={{ padding: 12 }}>
+    <Button type="primary" icon={<PlusOutlined />}>
+      {ctx.t('Add')}
+    </Button>
+    <Button icon={<EditOutlined />}>{ctx.t('Edit')}</Button>
+    <Button danger icon={<DeleteOutlined />}>
+      {ctx.t('Delete')}
+    </Button>
+  </Space>
+);
+
+ctx.render(<IconButtons />);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-button-handler.snippet.ts

@@ -22,11 +22,13 @@ const snippet: SnippetModule = {
     },
   },
   content: `
-const { React, ReactDOM, antd } = ctx;
-const { Button } = antd;
+const { Button } = ctx.libs.antd;
 
-const node = React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Button'));
-ReactDOM.createRoot(ctx.element).render(node);
+ctx.render(
+  <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+    {ctx.t('Button')}
+  </Button>
+);
 `,
 };
 

package/src/runjs-context/snippets/scene/block/render-info-card.snippet.ts

@@ -22,29 +22,28 @@ const snippet: SnippetModule = {
     },
   },
   content: `
-const { Card, Descriptions, Tag, Typography } = ctx.antd;
-const { createElement: h } = ctx.React;
+const { Card, Descriptions, Tag } = ctx.libs.antd;
 
 if (!ctx.record) {
-  ctx.element.innerHTML = '<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>';
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>');
   return;
 }
 
 const record = ctx.record;
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Card, { title: ctx.t('Record Details'), bordered: true, style: { margin: 0 } },
-    h(Descriptions, { column: 2, size: 'small' },
-      h(Descriptions.Item, { label: ctx.t('ID') }, record.id || '-'),
-      h(Descriptions.Item, { label: ctx.t('Status') },
-        h(Tag, { color: record.status === 'active' ? 'green' : 'default' }, record.status || '-')
-      ),
-      h(Descriptions.Item, { label: ctx.t('Title') }, record.title || '-'),
-      h(Descriptions.Item, { label: ctx.t('Created At') },
-        record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'
-      )
-    )
-  )
+ctx.render(
+  <Card title={ctx.t('Record Details')} bordered style={{ margin: 0 }}>
+    <Descriptions column={2} size="small">
+      <Descriptions.Item label={ctx.t('ID')}>{record.id || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Status')}>
+        <Tag color={record.status === 'active' ? 'green' : 'default'}>{record.status || '-'}</Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Title')}>{record.title || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Created At')}>
+        {record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'}
+      </Descriptions.Item>
+    </Descriptions>
+  </Card>
 );
 
 `,

package/src/runjs-context/snippets/scene/block/render-react-jsx.snippet.ts

@@ -0,0 +1,39 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-react-jsx',
+  label: 'Render React (JSX)',
+  description: 'Render a simple React component using JSX syntax',
+  locales: {
+    'zh-CN': {
+      label: '渲染 React（JSX）',
+      description: '使用 JSX 语法渲染一个简单的 React 组件',
+    },
+  },
+  content: `
+// Render a React component with JSX
+const { React } = ctx.libs;
+
+const App = () => (
+  <div style={{ padding: 12 }}>
+    <h3 style={{ margin: 0, color: '#1890ff' }}>Hello JSX</h3>
+    <div style={{ color: '#555' }}>This block is rendered by JSX.</div>
+  </div>
+);
+
+ctx.render(<App />);
+`,
+};
+
+export default snippet;