feat: support line break for button titles in action panel (#6433)

packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx

@@ -31,9 +31,6 @@ const useStyles = createStyles(({ token, css }) => ({
   title: css`
     margin-top: ${token.marginSM}px;
     width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
   `,
 }));
 
@@ -41,14 +38,23 @@ function Button() {
   const fieldSchema = useFieldSchema();
   const icon = fieldSchema['x-component-props']?.['icon'];
   const backgroundColor = fieldSchema['x-component-props']?.['iconColor'];
-  const { layout } = useContext(WorkbenchBlockContext);
+  const { layout, ellipsis = true } = useContext(WorkbenchBlockContext);
   const { styles, cx } = useStyles();
   const compile = useCompile();
   const title = compile(fieldSchema.title);
   return layout === WorkbenchLayout.Grid ? (
     <div title={title} className={cx(styles.avatar)}>
       <Avatar style={{ backgroundColor }} size={48} icon={<Icon type={icon} />} />
-      <div className={cx(styles.title)}>{title}</div>
+      <div
+        className={cx(styles.title)}
+        style={{
+          whiteSpace: ellipsis ? 'nowrap' : 'normal',
+          textOverflow: ellipsis ? 'ellipsis' : 'clip',
+          overflow: ellipsis ? 'hidden' : 'visible',
+        }}
+      >
+        {title}
+      </div>
     </div>
   ) : (
     <span>{title}</span>

packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx

@@ -101,7 +101,7 @@ const InternalIcons = () => {
   );
 };
 
-export const WorkbenchBlockContext = createContext({ layout: 'grid' });
+export const WorkbenchBlockContext = createContext({ layout: 'grid', ellipsis: true });
 
 const useStyles = createStyles(({ token, css }) => ({
   containerClass: css`
@@ -142,7 +142,7 @@ const useStyles = createStyles(({ token, css }) => ({
 export const WorkbenchBlock: any = withDynamicSchemaProps(
   (props) => {
     const fieldSchema = useFieldSchema();
-    const { layout = 'grid' } = fieldSchema['x-component-props'] || {};
+    const { layout = 'grid', ellipsis } = fieldSchema['x-component-props'] || {};
     const { styles } = useStyles();
     const { title } = fieldSchema['x-decorator-props'] || {};
     const targetHeight = useBlockHeight();
@@ -171,7 +171,7 @@ export const WorkbenchBlock: any = withDynamicSchemaProps(
 
     return (
       <div className={`nb-action-penal-container ${layout} ${styles.containerClass} ${heightClass}`}>
-        <WorkbenchBlockContext.Provider value={{ layout }}>
+        <WorkbenchBlockContext.Provider value={{ layout, ellipsis }}>
           <DataSourceContext.Provider value={undefined}>
             <CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>
           </DataSourceContext.Provider>

packages/plugins/@nocobase/plugin-block-workbench/src/client/workbenchBlockSettings.tsx

@@ -14,6 +14,7 @@ import {
   SchemaSettingsBlockHeightItem,
   SchemaSettingsModalItem,
   useOpenModeContext,
+  SchemaSettingsItemType,
 } from '@nocobase/client';
 import { CustomSchemaSettingsBlockTitleItem } from './SchemaSettingsBlockTitleItem';
 import React from 'react';
@@ -55,6 +56,32 @@ const ActionPanelLayout = () => {
   );
 };
 
+export const ellipsisSettingsItem: SchemaSettingsItemType = {
+  name: 'ellipsis',
+  type: 'switch',
+  useComponentProps() {
+    const fieldSchema = useFieldSchema();
+    const { dn } = useDesignable();
+    const { t } = useTranslation();
+    return {
+      title: t('Ellipsis action title', { ns: 'block-workbench' }),
+      checked: fieldSchema['x-component-props']?.ellipsis !== false,
+      onChange: async (checked) => {
+        fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+        fieldSchema['x-component-props']['ellipsis'] = checked;
+        await dn.emit('patch', {
+          schema: {
+            'x-uid': fieldSchema['x-uid'],
+            'x-component-props': {
+              ...fieldSchema['x-component-props'],
+              ellipsis: checked,
+            },
+          },
+        });
+      },
+    };
+  },
+};
 export function ActionPanelItemsPerRow() {
   const field = useField();
   const fieldSchema = useFieldSchema();
@@ -122,6 +149,7 @@ export const workbenchBlockSettings = new SchemaSettings({
         return isMobile && fieldSchema?.['x-component-props']?.layout !== WorkbenchLayout.List;
       },
     },
+    ellipsisSettingsItem,
     {
       type: 'remove',
       name: 'remove',

packages/plugins/@nocobase/plugin-block-workbench/src/locale/zh-CN.json

@@ -13,5 +13,6 @@
   "Add popup": "添加弹窗",
   "Add custom request": "添加自定义请求",
   "At least 1, up to 6": "最多6个，最少一个",
-  "Items per row":"每行显示个数"
+  "Items per row": "每行显示个数",
+  "Ellipsis action title": "省略超出长度的操作标题"
 }