@nocobase/plugin-ui-templates 2.0.0-alpha.57

package/src/client/collections/flowModelTemplates.ts

@@ -0,0 +1,131 @@
+/**
+ * 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 { tStr } from '../locale';
+
+export const flowModelTemplatesCollection = {
+  name: 'flowModelTemplates',
+  filterTargetKey: 'uid',
+  fields: [
+    {
+      type: 'string',
+      name: 'name',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: tStr('Template name'),
+        required: true,
+        'x-component': 'Input',
+      },
+    },
+    {
+      type: 'string',
+      name: 'description',
+      interface: 'textarea',
+      uiSchema: {
+        type: 'string',
+        title: tStr('Template description'),
+        'x-component': 'Input.TextArea',
+        'x-component-props': {
+          rows: 3,
+        },
+      },
+    },
+    {
+      type: 'string',
+      name: 'targetUid',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'targetUid',
+        'x-component': 'Input',
+        'x-disabled': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'useModel',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'useModel',
+        'x-component': 'Input',
+        'x-disabled': true,
+        'x-hidden': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'dataSourceKey',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'dataSourceKey',
+        'x-component': 'Input',
+        'x-disabled': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'collectionName',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'collectionName',
+        'x-component': 'Input',
+        'x-disabled': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'associationName',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'associationName',
+        'x-component': 'Input',
+        'x-disabled': true,
+        'x-hidden': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'filterByTk',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'filterByTk',
+        'x-component': 'Input',
+        'x-disabled': true,
+      },
+    },
+    {
+      type: 'string',
+      name: 'sourceId',
+      interface: 'input',
+      uiSchema: {
+        type: 'string',
+        title: 'sourceId',
+        'x-component': 'Input',
+        'x-disabled': true,
+      },
+    },
+    {
+      type: 'number',
+      name: 'usageCount',
+      interface: 'number',
+      uiSchema: {
+        type: 'number',
+        title: tStr('Usage count'),
+        'x-component': 'InputNumber',
+        'x-disabled': true,
+      },
+    },
+  ],
+};

package/src/client/components/FlowModelTemplatesPage.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 React, { useMemo } from 'react';
+import {
+  ExtendCollectionsProvider,
+  SchemaComponent,
+  SchemaComponentContext,
+  useSchemaComponentContext,
+} from '@nocobase/client';
+import { createFlowModelTemplatesSchema } from '../schemas/flowModelTemplates';
+import {
+  useFlowModelTemplateDeleteActionProps,
+  useFlowModelTemplateEditActionProps,
+  useFlowModelTemplateEditFormProps,
+  useFlowModelTemplateSearchProps,
+} from '../hooks/useFlowModelTemplateActions';
+import { flowModelTemplatesCollection } from '../collections/flowModelTemplates';
+
+const TemplateTable: React.FC<{ filter?: Record<string, any> }> = ({ filter }) => {
+  const scCtx = useSchemaComponentContext();
+  const schema = useMemo(() => createFlowModelTemplatesSchema(filter), [filter]);
+
+  return (
+    <SchemaComponentContext.Provider value={{ ...scCtx, designable: false }}>
+      <SchemaComponent
+        schema={schema}
+        scope={{
+          useFlowModelTemplateSearchProps,
+          useFlowModelTemplateEditFormProps,
+          useFlowModelTemplateEditActionProps,
+          useFlowModelTemplateDeleteActionProps,
+        }}
+      />
+    </SchemaComponentContext.Provider>
+  );
+};
+
+// 区块模板页面: type 不是 popup 的（包括 null 和空）
+export const BlockTemplatesPage: React.FC = () => {
+  const blockTemplateFilter = useMemo(
+    () => ({
+      $or: [{ type: { $ne: 'popup' } }, { type: { $empty: true } }],
+    }),
+    [],
+  );
+
+  return (
+    <ExtendCollectionsProvider collections={[flowModelTemplatesCollection]}>
+      <TemplateTable filter={blockTemplateFilter} />
+    </ExtendCollectionsProvider>
+  );
+};
+
+// 弹窗模板页面: type 是 popup 的
+export const PopupTemplatesPage: React.FC = () => {
+  const popupTemplateFilter = useMemo(
+    () => ({
+      type: 'popup',
+    }),
+    [],
+  );
+
+  return (
+    <ExtendCollectionsProvider collections={[flowModelTemplatesCollection]}>
+      <TemplateTable filter={popupTemplateFilter} />
+    </ExtendCollectionsProvider>
+  );
+};
+
+// 保留原来的导出以兼容
+export const FlowModelTemplatesPage = BlockTemplatesPage;

package/src/client/components/TemplateSelectOption.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 React from 'react';
+import { Tooltip, Typography } from 'antd';
+
+const NAME_MAX_WIDTH = 480;
+const OPTION_MAX_WIDTH = 520;
+const TOOLTIP_MAX_WIDTH = 400;
+
+export function renderTemplateSelectLabel(name: React.ReactNode, maxWidth = NAME_MAX_WIDTH) {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        maxWidth,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+      }}
+    >
+      {name}
+    </span>
+  );
+}
+
+export type TemplateSelectOptionData = {
+  rawName?: React.ReactNode;
+  description?: React.ReactNode;
+  disabledReason?: React.ReactNode;
+};
+
+export type TemplateSelectOptionRenderArg = {
+  label?: React.ReactNode;
+  data?: TemplateSelectOptionData;
+};
+
+export function renderTemplateSelectOption(option: TemplateSelectOptionRenderArg) {
+  const desc = option?.data?.description;
+  const disabledReason = option?.data?.disabledReason;
+  const isDisabled = !!disabledReason;
+  const name = option?.data?.rawName || option?.label;
+
+  const content = (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        padding: '4px 0',
+        maxWidth: OPTION_MAX_WIDTH,
+        opacity: isDisabled ? 0.5 : 1,
+        width: '100%',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+      }}
+    >
+      <Typography.Text
+        strong
+        style={{
+          maxWidth: NAME_MAX_WIDTH,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {name}
+      </Typography.Text>
+      {desc && (
+        <Typography.Text
+          type="secondary"
+          style={{
+            fontSize: 12,
+            lineHeight: 1.4,
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+          }}
+        >
+          {desc}
+        </Typography.Text>
+      )}
+    </div>
+  );
+
+  if (isDisabled && disabledReason) {
+    return (
+      <Tooltip
+        title={disabledReason}
+        placement="right"
+        zIndex={9999}
+        overlayStyle={{ maxWidth: TOOLTIP_MAX_WIDTH }}
+        mouseEnterDelay={0.1}
+      >
+        <div style={{ width: '100%' }}>{content}</div>
+      </Tooltip>
+    );
+  }
+
+  return content;
+}

package/src/client/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 const REF_HOST_CTX_KEY = '__subModelReferenceHost';

package/src/client/hooks/useFlowModelTemplateActions.tsx

@@ -0,0 +1,137 @@
+/**
+ * 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 { createForm } from '@formily/core';
+import { useForm } from '@formily/react';
+import {
+  ActionProps,
+  useActionContext,
+  useBlockRequestContext,
+  useCollection,
+  useCollectionRecordData,
+  useDataBlockResource,
+} from '@nocobase/client';
+import { App as AntdApp } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useT } from '../locale';
+
+export const useFlowModelTemplateSearchProps = () => {
+  const { service } = useBlockRequestContext();
+  const t = useT();
+  const [keyword, setKeyword] = useState('');
+
+  useEffect(() => {
+    const current = service?.params?.[0]?.search;
+    setKeyword(current || '');
+  }, [service?.params]);
+
+  const doSearch = useCallback(
+    (value: string) => {
+      const params = { ...(service?.params?.[0] || {}) };
+      if (value) {
+        params.search = value;
+      } else {
+        delete params.search;
+      }
+      service?.run?.({ ...params, page: 1 });
+    },
+    [service],
+  );
+
+  return {
+    placeholder: t('Search templates'),
+    value: keyword,
+    onChange: (e: any) => {
+      const next = e?.target?.value ?? '';
+      setKeyword(next);
+      if (!next) {
+        doSearch('');
+      }
+    },
+    onSearch: (value: string) => doSearch(value?.trim?.() || ''),
+    allowClear: true,
+    style: { width: 260 },
+  };
+};
+
+export const useFlowModelTemplateEditFormProps = () => {
+  const recordData = useCollectionRecordData();
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: recordData,
+      }),
+    [recordData],
+  );
+
+  return {
+    form,
+  };
+};
+
+export const useFlowModelTemplateEditActionProps = (): ActionProps => {
+  const { setVisible } = useActionContext();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+  const resource = useDataBlockResource();
+  const collection = useCollection();
+  const { service } = useBlockRequestContext();
+  const t = useT();
+
+  return {
+    type: 'primary',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+      await resource.update({
+        values: {
+          name: values.name,
+          description: values.description,
+        },
+        filterByTk: values[collection.filterTargetKey],
+      });
+      await service?.refresh?.();
+      message.success(t('Saved'));
+      setVisible?.(false);
+    },
+  };
+};
+
+export const useFlowModelTemplateDeleteActionProps = (): ActionProps => {
+  const record = useCollectionRecordData();
+  const collection = useCollection();
+  const resource = useDataBlockResource();
+  const { service } = useBlockRequestContext();
+  const { message } = AntdApp.useApp();
+  const t = useT();
+
+  const inUse = (record?.usageCount || 0) > 0;
+
+  return {
+    danger: true,
+    disabled: inUse,
+    confirm: inUse
+      ? undefined
+      : {
+          title: t('Delete template'),
+          content: t('Are you sure you want to delete this item? This action cannot be undone.'),
+        },
+    async onClick() {
+      if (inUse) {
+        message.warning(t('Template is in use and cannot be deleted'));
+        return;
+      }
+      await resource.destroy({
+        filterByTk: record?.[collection.filterTargetKey],
+      });
+      await service?.refresh?.();
+      message.success(t('Deleted'));
+    },
+  };
+};

package/src/client/index.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 { Plugin } from '@nocobase/client';
+import { ReferenceBlockModel } from './models/ReferenceBlockModel';
+import { ReferenceFormGridModel } from './models/ReferenceFormGridModel';
+import { SubModelTemplateImporterModel } from './models/SubModelTemplateImporterModel';
+import { BlockTemplatesPage, PopupTemplatesPage } from './components/FlowModelTemplatesPage';
+// @ts-ignore
+import pkg from '../../package.json';
+import { registerMenuExtensions } from './menuExtensions';
+import { registerSubModelMenuExtensions } from './subModelMenuExtensions';
+import { registerOpenViewPopupTemplateAction } from './openViewActionExtensions';
+
+const NAMESPACE = 'ui-templates';
+
+export class PluginBlockReferenceClient extends Plugin {
+  async load() {
+    this.flowEngine.registerModels({
+      ReferenceBlockModel,
+      ReferenceFormGridModel,
+      SubModelTemplateImporterModel,
+    });
+    registerSubModelMenuExtensions(this.flowEngine);
+    registerOpenViewPopupTemplateAction(this.flowEngine);
+
+    // 父级菜单（只有标题，无组件）
+    this.app.pluginSettingsManager.add(NAMESPACE, {
+      title: `{{t("UI templates", { ns: "${pkg.name}", nsMode: "fallback" })}}`,
+      icon: 'ProfileOutlined',
+    });
+
+    // 子级：区块模板 (v2)
+    this.app.pluginSettingsManager.add(`${NAMESPACE}.block`, {
+      title: `{{t("Block templates (v2)", { ns: "${pkg.name}", nsMode: "fallback" })}}`,
+      Component: BlockTemplatesPage,
+    });
+
+    // 子级：弹窗模板 (v2)
+    this.app.pluginSettingsManager.add(`${NAMESPACE}.popup`, {
+      title: `{{t("Popup templates (v2)", { ns: "${pkg.name}", nsMode: "fallback" })}}`,
+      Component: PopupTemplatesPage,
+    });
+    registerMenuExtensions();
+  }
+}
+
+export default PluginBlockReferenceClient;

package/src/client/locale.ts

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+// @ts-ignore
+import pkg from '../../package.json';
+import { useApp } from '@nocobase/client';
+import type { FlowModel } from '@nocobase/flow-engine';
+
+export const NAMESPACE = pkg.name;
+
+export function useT() {
+  const app = useApp();
+  return (str: string, options?: Record<string, any>) =>
+    app.i18n.t(str, { ns: [pkg.name, 'client'], ...(options || {}) });
+}
+
+export function tStr(key: string) {
+  return `{{t(${JSON.stringify(key)}, { ns: ['${pkg.name}', 'client'], nsMode: 'fallback' })}}`;
+}
+
+/**
+ * 获取带有插件命名空间的翻译函数（用于非组件环境）
+ * @param model FlowModel 实例
+ * @returns 翻译函数，使用插件命名空间
+ */
+export function getPluginT(model: FlowModel): (key: string, options?: any) => string {
+  if (model.flowEngine?.translate) {
+    return (key: string, options?: any) => {
+      return model.flowEngine.translate(key, { ns: [pkg.name, 'client'], nsMode: 'fallback', ...options });
+    };
+  }
+  // 回退到原始键值
+  return (key: string) => key;
+}