feat: ✨ add miniMenu hover tips

tipisai · Apr 10, 2024 · f9c2b66 · f9c2b66
1 parent f02a780
commit f9c2b66
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/apps/agent/src/Layout/Workspace/pc/modules/Menu/MiniMenu/index.tsx b/apps/agent/src/Layout/Workspace/pc/modules/Menu/MiniMenu/index.tsx
@@ -1,6 +1,7 @@
 import Icon from "@ant-design/icons"
-import { Button, Divider, Tooltip } from "antd"
+import { Button, ConfigProvider, Divider, Tooltip } from "antd"
 import { FC, useCallback, useContext } from "react"
+import { useTranslation } from "react-i18next"
 import { TipisTrack } from "@illa-public/track-utils"
 import UserInfoContent from "@/Layout/Workspace/components/UserInfoContent"
 import RecentTabs from "@/Layout/Workspace/modules/RecentTabs"
@@ -21,6 +22,8 @@ import {
 const MiniMenu: FC = () => {
   const { changeCollapsed } = useContext(MenuStatusUIContext)
 
+  const { t } = useTranslation()
+
   const onClickFoldButton = useCallback(() => {
     TipisTrack.track("click_collapse")
 
@@ -36,7 +39,7 @@ const MiniMenu: FC = () => {
           </div>
           <div css={miniMenuLockSideBarContainerStyle}>
             <Tooltip
-              title="展開"
+              title={t("homepage.left_panel.tab.expand_menu")}
               placement="right"
               align={{
                 offset: [16, 0],
@@ -50,21 +53,43 @@ const MiniMenu: FC = () => {
             </Tooltip>
           </div>
           <div css={dividerContainerStyle}>
-            <Divider
-              style={{
-                margin: "0",
+            <ConfigProvider
+              theme={{
+                components: {
+                  Divider: {
+                    textPaddingInline: 0,
+                    colorSplit: "rgba(16, 9, 116, 0.08);",
+                  },
+                },
               }}
-            />
+            >
+              <Divider
+                style={{
+                  margin: "0",
+                }}
+              />
+            </ConfigProvider>
           </div>
           <RecentTabs isMiniSize />
         </div>
         <div css={miniMenuFooterContainerStyle}>
           <div css={dividerContainerStyle}>
-            <Divider
-              style={{
-                margin: "0",
+            <ConfigProvider
+              theme={{
+                components: {
+                  Divider: {
+                    textPaddingInline: 0,
+                    colorSplit: "rgba(16, 9, 116, 0.08);",
+                  },
+                },
               }}
-            />
+            >
+              <Divider
+                style={{
+                  margin: "0",
+                }}
+              />
+            </ConfigProvider>
           </div>
           <div css={userInfoContainerStyle}>
             <UserInfoContent isMiniSize />

diff --git a/apps/agent/src/Layout/Workspace/pc/modules/Menu/index.tsx b/apps/agent/src/Layout/Workspace/pc/modules/Menu/index.tsx
@@ -70,6 +70,7 @@ const PCWorkspaceMenu: FC = () => {
                         components: {
                           Divider: {
                             textPaddingInline: 0,
+                            colorSplit: "rgba(16, 9, 116, 0.08);",
                           },
                         },
                       }}

diff --git a/apps/agent/src/Layout/Workspace/pc/modules/MenuHeader/index.tsx b/apps/agent/src/Layout/Workspace/pc/modules/MenuHeader/index.tsx
@@ -1,6 +1,7 @@
 import Icon from "@ant-design/icons"
-import { Button } from "antd"
+import { Button, Tooltip } from "antd"
 import { FC, useCallback, useContext } from "react"
+import { useTranslation } from "react-i18next"
 import { TipisTrack } from "@illa-public/track-utils"
 import TextAndLogo from "@/assets/public/textLogo.svg?react"
 import MenuCollapseIcon from "@/assets/workspace/menuCollapse.svg?react"
@@ -9,6 +10,7 @@ import { logoAndProjectNameContainerStyle, menuHeaderStyle } from "./style"
 
 const MenuHeader: FC = () => {
   const { changeCollapsed } = useContext(MenuStatusUIContext)
+  const { t } = useTranslation()
 
   const onClickFoldButton = useCallback(() => {
     TipisTrack.track("click_collapse")
@@ -22,11 +24,19 @@ const MenuHeader: FC = () => {
         <TextAndLogo />
       </div>
       <div>
-        <Button
-          icon={<Icon component={MenuCollapseIcon} />}
-          type="text"
-          onClick={onClickFoldButton}
-        />
+        <Tooltip
+          title={t("homepage.left_panel.tab.collapse_menu")}
+          placement="right"
+          align={{
+            offset: [24, 0],
+          }}
+        >
+          <Button
+            icon={<Icon component={MenuCollapseIcon} />}
+            type="text"
+            onClick={onClickFoldButton}
+          />
+        </Tooltip>
       </div>
     </div>
   )