From c731cd0690a0b7f69c62401f42a6b43289cc8e17 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 1 Aug 2021 21:26:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E6=82=AC=E6=B5=AE=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/routes/Main/Navbar/GroupNav.tsx | 14 ++++++++---
 web/src/routes/Main/Navbar/NavItem.tsx  | 33 +++++++++++++++----------
 web/src/routes/Main/Navbar/index.tsx    |  4 +--
 web/src/styles/antd/overwrite.less      |  6 +++++
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/src/routes/Main/Navbar/GroupNav.tsx b/web/src/routes/Main/Navbar/GroupNav.tsx
index 73a8c4fd..9848aeeb 100644
--- a/web/src/routes/Main/Navbar/GroupNav.tsx
+++ b/web/src/routes/Main/Navbar/GroupNav.tsx
@@ -3,7 +3,7 @@ import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
 import { Icon } from '@iconify/react';
 import React, { useCallback, useMemo } from 'react';
-import { GroupInfo, useAppSelector } from 'tailchat-shared';
+import { GroupInfo, t, useAppSelector } from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';
 
 function useGroups(): GroupInfo[] {
@@ -25,7 +25,11 @@ export const GroupNav: React.FC = React.memo(() => {
     <div className="space-y-2">
       {Array.isArray(groups) &&
         groups.map((group) => (
-          <NavbarNavItem key={group._id} to={`/main/group/${group._id}`}>
+          <NavbarNavItem
+            key={group._id}
+            name={group.name}
+            to={`/main/group/${group._id}`}
+          >
             <Avatar
               shape="square"
               size={48}
@@ -36,7 +40,11 @@ export const GroupNav: React.FC = React.memo(() => {
         ))}
 
       {/* 创建群组 */}
-      <NavbarNavItem className="bg-green-500" onClick={handleCreateGroup}>
+      <NavbarNavItem
+        className="bg-green-500"
+        name={t('创建群组')}
+        onClick={handleCreateGroup}
+      >
         <Icon className="text-3xl text-white" icon="mdi-plus" />
       </NavbarNavItem>
     </div>
diff --git a/web/src/routes/Main/Navbar/NavItem.tsx b/web/src/routes/Main/Navbar/NavItem.tsx
index 8293ce16..81c61a5c 100644
--- a/web/src/routes/Main/Navbar/NavItem.tsx
+++ b/web/src/routes/Main/Navbar/NavItem.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from 'antd';
 import type { ClassValue } from 'clsx';
 import clsx from 'clsx';
 import React from 'react';
@@ -5,28 +6,34 @@ import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 
 export const NavbarNavItem: React.FC<{
+  name: string;
   className?: ClassValue;
   to?: string;
   onClick?: () => void;
 }> = React.memo((props) => {
-  const { className, to } = props;
+  const { name, className, to } = props;
   const location = useLocation();
   const isActive = typeof to === 'string' && location.pathname.startsWith(to);
 
   const inner = (
-    <div
-      className={clsx(
-        'w-12 h-12 hover:rounded-lg transition-all cursor-pointer flex items-center justify-center overflow-hidden',
-        className,
-        {
-          'rounded-1/2': !isActive,
-          'rounded-lg': isActive,
-        }
-      )}
-      onClick={props.onClick}
+    <Tooltip
+      title={<div className="font-bold px-1.5 py-0.5">{name}</div>}
+      placement="right"
     >
-      {props.children}
-    </div>
+      <div
+        className={clsx(
+          'w-12 h-12 hover:rounded-lg transition-all cursor-pointer flex items-center justify-center overflow-hidden',
+          className,
+          {
+            'rounded-1/2': !isActive,
+            'rounded-lg': isActive,
+          }
+        )}
+        onClick={props.onClick}
+      >
+        {props.children}
+      </div>
+    </Tooltip>
   );
 
   if (typeof to === 'string') {
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 2f7056ab..5d563268 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/web/src/routes/Main/Navbar/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useAppSelector } from 'tailchat-shared';
+import { t, useAppSelector } from 'tailchat-shared';
 import { Icon } from '@iconify/react';
 import { Avatar } from '@/components/Avatar';
 import { NavbarNavItem } from './NavItem';
@@ -18,7 +18,7 @@ export const Navbar: React.FC = React.memo(() => {
 
       {/* Navbar */}
       <div className="flex-1">
-        <NavbarNavItem to={'/main/personal'}>
+        <NavbarNavItem name={t('我')} to={'/main/personal'}>
           <Avatar
             shape="square"
             size={48}
diff --git a/web/src/styles/antd/overwrite.less b/web/src/styles/antd/overwrite.less
index 4ca8143f..c2911d64 100644
--- a/web/src/styles/antd/overwrite.less
+++ b/web/src/styles/antd/overwrite.less
@@ -14,3 +14,9 @@
 .ant-input:hover, .ant-input:focus, .ant-input-focused {
   border-right-width: inherit !important;
 }
+
+.ant-tooltip {
+  .ant-tooltip-inner {
+    background-color: black;
+  }
+}