fix: When the component id is very long, the delete button of generat…

…e will be hidden #1906 (#1907)

### What problem does this PR solve?
fix: When the component id is very long, the delete button of generate
will be hidden #1906

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/editable-cell.tsx

@@ -1,7 +1,8 @@
-import { Form, FormInstance, Input, InputRef } from 'antd';
+import { Form, FormInstance, Input, InputRef, Typography } from 'antd';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
+const { Paragraph, Text } = Typography;
 
 interface EditableRowProps {
   index: number;
@@ -77,7 +78,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   if (editable) {
     childNode = editing ? (
       <Form.Item
-        style={{ margin: 0 }}
+        style={{ margin: 0, width: 100 }}
         name={dataIndex}
         rules={[
           {
@@ -91,10 +92,12 @@ export const EditableCell: React.FC<EditableCellProps> = ({
     ) : (
       <div
         className="editable-cell-value-wrap"
-        style={{ paddingRight: 24 }}
+        // style={{ paddingRight: 24 }}
         onClick={toggleEdit}
       >
-        {children}
+        <Text ellipsis={{ tooltip: children }} style={{ width: 100 }}>
+          {children}
+        </Text>
       </div>
     );
   }

web/src/locales/en.ts

@@ -783,7 +783,7 @@ The above is the content you need to summarize.`,
         '15d': '12 days',
         '30d': '30 days',
       },
-      publish: 'Publish',
+      publish: 'API',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -741,7 +741,7 @@ export default {
         '15d': '12天',
         '30d': '30天',
       },
-      publish: '發布',
+      publish: 'API',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -759,7 +759,7 @@ export default {
         '15d': '12天',
         '30d': '30天',
       },
-      publish: '发布',
+      publish: 'API',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/generate-form/dynamic-parameters.tsx

@@ -38,6 +38,7 @@ const DynamicParameters = ({ nodeId }: IProps) => {
       title: t('key'),
       dataIndex: 'key',
       key: 'key',
+      width: 50,
       onCell: (record: IGenerateParameter) => ({
         record,
         editable: true,
@@ -69,6 +70,7 @@ const DynamicParameters = ({ nodeId }: IProps) => {
       width: 20,
       key: 'operation',
       align: 'center',
+      fixed: 'right',
       render(_, record) {
         return <DeleteOutlined onClick={handleRemove(record.id)} />;
       },
@@ -89,6 +91,7 @@ const DynamicParameters = ({ nodeId }: IProps) => {
         className={styles.variableTable}
         components={components}
         rowClassName={() => styles.editableRow}
+        scroll={{ x: true }}
       />
     </section>
   );