From 166681dfad76163e25138bfbfa9771ac77a311d4 Mon Sep 17 00:00:00 2001
From: chenyongxin <59717382+Cyx649312038@users.noreply.github.com>
Date: Thu, 24 Oct 2024 22:35:39 +0800
Subject: [PATCH] feat: plugin-block-workbench add title and height setting
 (#5492)

---
 .../client/SchemaSettingsBlockTitleItem.tsx   | 56 +++++++++++++++++++
 .../src/client/blockSchema.ts                 |  3 +
 .../src/client/workbenchBlockSettings.tsx     |  5 ++
 3 files changed, 64 insertions(+)
 create mode 100644 packages/plugins/@nocobase/plugin-block-workbench/src/client/SchemaSettingsBlockTitleItem.tsx

diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/SchemaSettingsBlockTitleItem.tsx b/packages/plugins/@nocobase/plugin-block-workbench/src/client/SchemaSettingsBlockTitleItem.tsx
new file mode 100644
index 0000000000..344c77f250
--- /dev/null
+++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/SchemaSettingsBlockTitleItem.tsx
@@ -0,0 +1,56 @@
+/**
+ * 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 { ISchema, useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesignable, SchemaSettingsModalItem } from '@nocobase/client';
+
+export function CustomSchemaSettingsBlockTitleItem() {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+
+  return (
+    <SchemaSettingsModalItem
+      title={t('Edit block title')}
+      schema={
+        {
+          type: 'object',
+          title: t('Edit block title'),
+          properties: {
+            title: {
+              title: t('Block title'),
+              type: 'string',
+              default: fieldSchema?.['x-decorator-props']?.['title'],
+              'x-decorator': 'FormItem',
+              'x-component': 'Input',
+            },
+          },
+        } as ISchema
+      }
+      onSubmit={({ title }) => {
+        console.log('titleSchemaTest', fieldSchema, field);
+
+        const componentProps = fieldSchema['x-decorator-props'] || {};
+        componentProps.title = title;
+        fieldSchema['x-decorator-props'] = componentProps;
+        field.decoratorProps.title = title;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-decorator-props': fieldSchema['x-decorator-props'],
+          },
+        });
+        dn.refresh();
+      }}
+    />
+  );
+}
diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/blockSchema.ts b/packages/plugins/@nocobase/plugin-block-workbench/src/client/blockSchema.ts
index 3dd401ce60..a5eb480dd3 100644
--- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/blockSchema.ts
+++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/blockSchema.ts
@@ -12,6 +12,9 @@ import { ISchema } from '@nocobase/client';
 export const blockSchema: ISchema = {
   type: 'void',
   'x-decorator': 'CardItem',
+  'x-decorator-props': {
+    title: '',
+  },
   'x-settings': 'blockSettings:workbench',
   'x-schema-toolbar': 'BlockSchemaToolbar',
   'x-component': 'WorkbenchBlock',
diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/workbenchBlockSettings.tsx b/packages/plugins/@nocobase/plugin-block-workbench/src/client/workbenchBlockSettings.tsx
index 0b8ef4851d..8811a1e343 100644
--- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/workbenchBlockSettings.tsx
+++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/workbenchBlockSettings.tsx
@@ -8,6 +8,7 @@
  */
 
 import { SchemaSettings, SchemaSettingsSelectItem, useDesignable } from '@nocobase/client';
+import { CustomSchemaSettingsBlockTitleItem } from './SchemaSettingsBlockTitleItem';
 import React from 'react';
 import { useField, useFieldSchema } from '@formily/react';
 import { useTranslation } from 'react-i18next';
@@ -50,6 +51,10 @@ const ActionPanelLayout = () => {
 export const workbenchBlockSettings = new SchemaSettings({
   name: 'blockSettings:workbench',
   items: [
+    {
+      name: 'title',
+      Component: CustomSchemaSettingsBlockTitleItem,
+    },
     {
       name: 'layout',
       Component: ActionPanelLayout,