From 14be606ac96e3b480d83f01d48cea817f8070885 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 24 Jul 2024 18:18:20 +0800
Subject: [PATCH] style: playground button tips

---
 src/components/copy-button/index.tsx          | 40 ++++++++++---------
 src/components/icon-font/index.tsx            |  2 +-
 src/locales/en-US/common.ts                   |  3 ++
 ...lang-config-map.ts => lang-config-map.tsx} |  6 ++-
 src/locales/zh-CN/common.ts                   |  3 ++
 .../playground/components/ground-left.tsx     | 16 ++++++--
 .../playground/components/message-item.tsx    | 14 ++++---
 7 files changed, 52 insertions(+), 32 deletions(-)
 rename src/locales/{lang-config-map.ts => lang-config-map.tsx} (97%)

diff --git a/src/components/copy-button/index.tsx b/src/components/copy-button/index.tsx
index 48d9e6e4..2e02568b 100644
--- a/src/components/copy-button/index.tsx
+++ b/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
-      className="copy-button"
-      ref={buttonRef}
-      type={type}
-      shape={shape}
-      size={size}
-      disabled={!!disabled}
-      data-clipboard-text={text}
-      icon={
-        copied ? (
-          <CheckCircleFilled
-            style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
-          />
-        ) : (
-          <CopyOutlined style={{ fontSize: fontSize, ...style }} />
-        )
-      }
-    ></Button>
+    <Tooltip title={intl.formatMessage({ id: 'common.button.copy' })}>
+      <Button
+        className="copy-button"
+        ref={buttonRef}
+        type={type}
+        shape={shape}
+        size={size}
+        disabled={!!disabled}
+        data-clipboard-text={text}
+        icon={
+          copied ? (
+            <CheckCircleFilled
+              style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
+            />
+          ) : (
+            <CopyOutlined style={{ fontSize: fontSize, ...style }} />
+          )
+        }
+      ></Button>
+    </Tooltip>
   );
 };
 
diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
index d2cc6cbf..d36ad3dc 100644
--- a/src/components/icon-font/index.tsx
+++ b/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;
diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts
index 1b12f98a..0f1c1011 100644
--- a/src/locales/en-US/common.ts
+++ b/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',
diff --git a/src/locales/lang-config-map.ts b/src/locales/lang-config-map.tsx
similarity index 97%
rename from src/locales/lang-config-map.ts
rename to src/locales/lang-config-map.tsx
index 6328e77f..aa6c0b54 100644
--- a/src/locales/lang-config-map.ts
+++ b/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': {
diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts
index ff51b364..59620ac5 100644
--- a/src/locales/zh-CN/common.ts
+++ b/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': '不同意',
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index b4c6c73e..c9547a45 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/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">
-          {collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
-        </Button>
+        <Tooltip
+          title={
+            collapsed
+              ? intl.formatMessage({ id: 'common.button.collapse' })
+              : intl.formatMessage({ id: 'common.button.expand' })
+          }
+        >
+          <Button size="small">
+            {collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+          </Button>
+        </Tooltip>
       </div>
     );
   };
diff --git a/src/pages/playground/components/message-item.tsx b/src/pages/playground/components/message-item.tsx
index 74400d80..429b8719 100644
--- a/src/pages/playground/components/message-item.tsx
+++ b/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
-            size="small"
-            onClick={handleDelete}
-            icon={<MinusCircleOutlined />}
-          ></Button>
+          <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
+            <Button
+              size="small"
+              onClick={handleDelete}
+              icon={<MinusCircleOutlined />}
+            ></Button>
+          </Tooltip>
         </Space>
       </div>
     </div>