fix: When the component id is very long, the delete button of generate 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/assets/svg/llm/moonshot.svg

@@ -1,31 +1,6 @@
-<svg t="1710744709437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1280"
+<svg t="1723440926542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1552"
     width="200" height="200">
-    <path d="M0.143417 0h1011.952942v1011.952941h-1011.952942v-1011.952941z" fill="#1A1D22" p-id="1281"></path>
     <path
-        d="M554.308123 289.129412a1898.375529 1898.375529 0 0 0-289.129412-96.376471c175.911153-130.710588 352.617412-126.686871 530.070589 12.047059 46.116141 34.044988 78.2336 78.2336 96.37647 132.517647l-60.235294 24.094118a1077.320282 1077.320282 0 0 0-277.082353-72.282353z"
-        fill="#EDEDEE" p-id="1282"></path>
-    <path
-        d="M265.178711 216.847059c86.690635 52.814306 183.067106 76.908424 289.129412 72.282353 14.215529 15.709365 30.286306 31.756047 48.188236 48.188235-27.467294 22.287059-27.467294 42.381553 0 60.235294l337.317647 84.329412v96.376471a2918.207247 2918.207247 0 0 0-409.6-96.376471c-122.398118-52.043294-250.916141-92.184094-385.505883-120.470588-18.432-86.738824 21.7088-134.927059 120.470588-144.564706z"
-        fill="#EFEFF0" p-id="1283"></path>
-    <path
-        d="M265.178711 192.752941a1898.375529 1898.375529 0 0 1 289.129412 96.376471c-106.062306 4.626071-202.438776-19.468047-289.129412-72.282353v-24.094118z"
-        fill="#626568" p-id="1284"></path>
-    <path
-        d="M144.708123 385.505882a2590.021271 2590.021271 0 0 0 313.22353 96.376471c29.226165 5.951247 45.296941 22.022024 48.188235 48.188235 2.891294 26.166212 18.962071 42.236988 48.188235 48.188236a6047.623529 6047.623529 0 0 1 361.411765 108.423529c-17.492329 33.659482-45.586071 53.729882-84.329412 60.235294a2021.7856 2021.7856 0 0 1-301.17647-72.282353 3182.302871 3182.302871 0 0 0-457.788236-120.470588v-72.282353c-9.926776-59.584753 14.167341-91.702212 72.282353-96.376471z"
-        fill="#EEEEEF" p-id="1285"></path>
-    <path
-        d="M144.708123 361.411765c134.589741 28.286494 263.107765 68.427294 385.505883 120.470588 4.144188 23.901365-3.903247 39.948047-24.094118 48.188235-2.891294-26.166212-18.962071-42.236988-48.188235-48.188235a2590.021271 2590.021271 0 0 1-313.22353-96.376471v-24.094117z"
-        fill="#5C5E62" p-id="1286"></path>
-    <path
-        d="M72.42577 481.882353v72.282353a3182.302871 3182.302871 0 0 1 457.788236 120.470588c-16.070776 0-24.094118 8.023341-24.094118 24.094118a6126.772706 6126.772706 0 0 1-397.552941-120.470588 118.832188 118.832188 0 0 0-12.047059 72.282352c-49.007435-51.922824-57.030776-108.1344-24.094118-168.658823z"
-        fill="#4F5155" p-id="1287"></path>
-    <path
-        d="M506.119888 698.729412v72.282353c94.930824 9.637647 183.283953 37.755482 265.035294 84.329411-44.092235 66.499765-100.303812 78.546824-168.658823 36.141177a4261.285647 4261.285647 0 0 0-433.694118-120.470588c-42.164706-27.949176-66.258824-68.089976-72.282353-120.470589a118.832188 118.832188 0 0 1 12.047059-72.282352 6126.772706 6126.772706 0 0 0 397.552941 120.470588z"
-        fill="#F2F2F3" p-id="1288"></path>
-    <path
-        d="M168.802241 771.011765a4261.285647 4261.285647 0 0 1 433.694118 120.470588v24.094118a2109.391812 2109.391812 0 0 1-397.552942-120.470589c-9.613553 5.493459-13.613176 13.540894-12.047058 24.094118-20.190871-8.240188-28.238306-24.286871-24.094118-48.188235z"
-        fill="#5D5F62" p-id="1289"></path>
-    <path
-        d="M602.496359 915.576471c10.553224-1.566118 18.600659 2.433506 24.094117 12.047058-169.285271 59.994353-313.825882 23.853176-433.694117-108.423529-1.566118-10.553224 2.433506-18.600659 12.047058-24.094118a2109.391812 2109.391812 0 0 0 397.552942 120.470589z"
-        fill="#E7E7E8" p-id="1290"></path>
+        d="M572.3 404.2c-14 24.3-27.6 48-42.3 73.5 141.5 37.9 281.3 75.4 423.8 113.6-8.1 29-16.1 57.4-24.5 87.1-288-77.1-573.8-153.6-860.4-230.4 5.3-37.3 14.7-72.5 29.2-106.3 7.3-17 16.1-33.3 24-50 2.7-5.6 5.9-7.4 12.6-5.6 142.4 38.5 285 76.6 427.5 114.9 3.2 1 6.5 2.1 10.1 3.2zM956.1 476.9c-270.8-72.5-541.6-145-816.1-218.4 21.2-23.9 40-46.7 60.5-67.7 25.8-26.3 55.4-48.2 87.7-66 3.9-2.1 9.6-3.2 13.8-2.1 136 36.2 271.9 72.8 407.9 109.3 0.6 0.2 1.1 0.7 2.9 1.9-25.4 18.2-48.2 38.6-67.3 64.9 28.5 7.7 55.5 15.1 82.5 22.4 67.3 18 134.6 36.1 201.9 53.9 6.2 1.6 10 4.2 11.3 10.7 6.1 29.5 12.4 58.9 18.7 88.4-1.2 0.9-2.5 1.8-3.8 2.7zM873.3 780.6c-22.3 22.9-44.5 45.9-67.1 68.5-2.2 2.2-7.8 2.7-11.2 1.8-90.3-23.9-180.6-48.2-270.9-72.3-123.6-33.1-247.2-66.1-370.8-99.1-18.9-5-37.8-10-56.5-15.4-3.2-0.9-7.3-3.8-8.3-6.7-20-56.9-27.1-115.5-23.6-175.6 0.1-1 0.7-2 1.6-4.8 140.9 37.8 281.7 75.6 422.8 113.4-6.2 26.4-12.3 52.3-18.7 79.2 134.2 35.9 267.2 71.6 400.2 107.2 0.8 1.3 1.7 2.6 2.5 3.8zM672.3 929.4c-214.4 85.7-475.1-16.2-567.3-233.2 20.9 5.5 41.1 10.8 61.1 16.2 93.7 25.2 187.3 50.6 281.1 75.5 7.1 1.9 8.8 4.5 9.1 11.3 0.9 21.3 3 42.6 3.8 63.9 0.3 8.4 4.6 10.6 11.5 12.4 62.5 16.5 125 33.3 187.5 50 3.5 1 7.1 2.2 13.2 3.9zM868.3 244.7c-176.9-47.3-353.8-94.7-530.7-142 73.5-34 150.4-45.2 230.1-34.5 124.5 16.7 224.8 75.6 300.6 176.5z"
+        p-id="1553"></path>
 </svg>

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>
   );