style: playground button tips

src/components/copy-button/index.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, message } from 'antd';
+import { Button, Tooltip, message } from 'antd';
 import ClipboardJS from 'clipboard';
 import { useEffect, useRef, useState } from 'react';
 
@@ -55,24 +55,26 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   }, [buttonRef]);
 
   return (
-    <Button
+    <Tooltip title={intl.formatMessage({ id: 'common.button.copy' })}>
-      className="copy-button"
+      <Button
-      ref={buttonRef}
+        className="copy-button"
-      type={type}
+        ref={buttonRef}
-      shape={shape}
+        type={type}
-      size={size}
+        shape={shape}
-      disabled={!!disabled}
+        size={size}
-      data-clipboard-text={text}
+        disabled={!!disabled}
-      icon={
+        data-clipboard-text={text}
-        copied ? (
+        icon={
-          <CheckCircleFilled
+          copied ? (
-            style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
+            <CheckCircleFilled
-          />
+              style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
-        ) : (
+            />
-          <CopyOutlined style={{ fontSize: fontSize, ...style }} />
+          ) : (
-        )
+            <CopyOutlined style={{ fontSize: fontSize, ...style }} />
-      }
+          )
-    ></Button>
+        }
+      ></Button>
+    </Tooltip>
   );
 };
 

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_nw3caxx03yp.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_68kh94h3e2r.js'
 });
 
 export default IconFont;

src/locales/en-US/common.ts

@@ -10,6 +10,9 @@ export default {
   'common.button.save': 'Save',
   'common.button.saverun': 'Save and Run',
   'common.button.run': 'Run',
+  'common.button.copy': 'Copy',
+  'common.button.collapse': 'Collapse',
+  'common.button.expand': 'Expand',
   'common.button.cancel': 'Cancel',
   'common.button.approval': 'Approve',
   'common.button.reject': 'Reject',

src/locales/lang-config-map.tsx

@@ -1,3 +1,5 @@
+import IconFont from '@/components/icon-font';
+
 export default {
   'ar-EG': {
     lang: 'ar-EG',
@@ -62,7 +64,7 @@ export default {
   'en-US': {
     lang: 'en-US',
     label: 'English',
-    icon: '🇺🇸',
+    icon: <IconFont type="icon-English" />,
     title: 'Language'
   },
   'es-ES': {
@@ -314,7 +316,7 @@ export default {
   'zh-CN': {
     lang: 'zh-CN',
     label: '简体中文',
-    icon: '🇨🇳',
+    icon: <IconFont type="icon-chinese" />,
     title: '语言'
   },
   'zh-TW': {

src/locales/zh-CN/common.ts

@@ -10,6 +10,9 @@ export default {
   'common.button.save': '保存',
   'common.button.saverun': '保存并运行',
   'common.button.run': '运行',
+  'common.button.copy': '复制',
+  'common.button.collapse': '折叠',
+  'common.button.expand': '展开',
   'common.button.submit': '提交',
   'common.button.approval': '同意',
   'common.button.reject': '不同意',

src/pages/playground/components/ground-left.tsx

@@ -4,7 +4,7 @@ import useContainerScroll from '@/hooks/use-container-scorll';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Spin } from 'antd';
+import { Button, Input, Spin, Tooltip } from 'antd';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -189,9 +189,17 @@ const MessageList: React.FC<MessageProps> = (props) => {
         <span className="title">
           {intl.formatMessage({ id: 'playground.system' })}
         </span>
-        <Button size="small">
+        <Tooltip
-          {collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+          title={
-        </Button>
+            collapsed
+              ? intl.formatMessage({ id: 'common.button.collapse' })
+              : intl.formatMessage({ id: 'common.button.expand' })
+          }
+        >
+          <Button size="small">
+            {collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+          </Button>
+        </Tooltip>
       </div>
     );
   };

src/pages/playground/components/message-item.tsx

@@ -2,7 +2,7 @@ import CopyButton from '@/components/copy-button';
 import HotKeys from '@/config/hotkeys';
 import { MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Space } from 'antd';
+import { Button, Input, Space, Tooltip } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
@@ -130,11 +130,13 @@ const MessageItem: React.FC<{
               fontSize="12px"
             ></CopyButton>
           )}
-          <Button
+          <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
-            size="small"
+            <Button
-            onClick={handleDelete}
+              size="small"
-            icon={<MinusCircleOutlined />}
+              onClick={handleDelete}
-          ></Button>
+              icon={<MinusCircleOutlined />}
+            ></Button>
+          </Tooltip>
         </Space>
       </div>
     </div>