refactor: 邀请模态框入口与样式

web/src/components/SectionHeader.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dropdown } from 'antd';
 import { Icon } from '@iconify/react';
+import clsx from 'clsx';
 
 interface SectionHeaderProps {
   menu?: React.ReactElement;
@@ -13,7 +14,6 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
       <div className="h-12 relative flex items-center px-4 py-0 text-base font-bold flex-shrink-0 thin-line-bottom">
         {React.isValidElement(props.menu) ? (
           <Dropdown
-            visible={visible}
             onVisibleChange={setVisible}
             overlay={props.menu}
             placement="topRight"
@@ -21,7 +21,12 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
           >
             <div className="cursor-pointer flex flex-1">
               <header className="flex-1 truncate">{props.children}</header>
-              <Icon className="text-2xl" icon="mdi-chevron-down">
+              <Icon
+                className={clsx('text-2xl transition-transform transform', {
+                  'rotate-180': visible,
+                })}
+                icon="mdi-chevron-down"
+              >
                 &#xe60f;
               </Icon>
             </div>

web/src/components/modals/GroupInvite.tsx

@@ -49,15 +49,30 @@ export const GroupInvite: React.FC<GroupInviteProps> = React.memo((props) => {
 
       <Divider>或者创建链接并发送给外部好友</Divider> */}
 
-      <div>创建链接并发送给外部好友</div>
+      <div className="text-gray-400 font-bold text-lg mb-2">
+        创建链接并发送给外部好友
+      </div>
 
       <div>
         {isValidStr(inviteLink) ? (
-          <Typography.Text copyable={true} className="select-text">
-            {inviteLink}
-          </Typography.Text>
+          <div>
+            <Typography.Title
+              className="bg-black bg-opacity-30 px-2 py-1 select-text text-lg rounded border border-black border-opacity-20"
+              level={4}
+              copyable={true}
+            >
+              {inviteLink}
+            </Typography.Title>
+            <p className="text-gray-500 text-sm">该邀请连接将会于7天后过期</p>
+          </div>
         ) : (
-          <Button loading={loading} onClick={handleCreateInviteLink}>
+          <Button
+            block={true}
+            size="large"
+            type="primary"
+            loading={loading}
+            onClick={handleCreateInviteLink}
+          >
             创建链接
           </Button>
         )}

web/src/routes/Main/Content/Group/GroupHeader.tsx

@@ -4,6 +4,7 @@ import _isNil from 'lodash/isNil';
 // import { useGroupHeaderAction } from './useGroupHeaderAction';
 import { useGroupInfo, useTranslation } from 'tailchat-shared';
 import { SectionHeader } from '@/components/SectionHeader';
+import { useGroupHeaderAction } from './useGroupHeaderAction';
 
 interface GroupHeaderProps {
   groupId: string;
@@ -13,12 +14,7 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
   const groupInfo = useGroupInfo(groupId);
   const { t } = useTranslation();
 
-  // const {
-  //   handleShowGroupInfo,
-  //   handleShowInvite,
-  //   handleCreateGroupPanel,
-  //   handleQuitGroup,
-  // } = useGroupHeaderAction(groupInfo!);
+  const { handleInviteUser } = useGroupHeaderAction(groupId);
 
   if (_isNil(groupInfo)) {
     return null;
@@ -26,11 +22,10 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
 
   const menu = (
     <Menu>
-      {/* TODO */}
       <Menu.Item key="0" onClick={() => console.log('查看详情')}>
         {t('查看详情')}
       </Menu.Item>
-      <Menu.Item key="1" onClick={() => console.log('邀请用户')}>
+      <Menu.Item key="1" onClick={handleInviteUser}>
         {t('邀请用户')}
       </Menu.Item>
     </Menu>

web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx

@@ -0,0 +1,12 @@
+import { openModal } from '@/components/Modal';
+import { GroupInvite } from '@/components/modals/GroupInvite';
+import React from 'react';
+import { useCallback } from 'react';
+
+export function useGroupHeaderAction(groupId: string) {
+  const handleInviteUser = useCallback(() => {
+    openModal(<GroupInvite groupId={groupId} />);
+  }, [groupId]);
+
+  return { handleInviteUser };
+}