From 83a73f9c216f6e2baa59b9ea62f15b0a910f57e5 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Mon, 26 Jul 2021 17:52:34 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BE=A4=E7=BB=84=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8Fheader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/App.tsx | 22 ++++++++- web/src/components/SectionHeader.tsx | 36 ++++++++++++++ .../routes/Main/Content/Group/GroupHeader.tsx | 48 +++++++++++++++++++ web/src/routes/Main/Content/Group/Sidebar.tsx | 37 +++++++------- web/src/routes/Main/Content/PageContent.tsx | 2 +- web/src/styles/antd/dark.less | 18 +++++++ web/tailwind.config.js | 41 +++++++++++++++- 7 files changed, 184 insertions(+), 20 deletions(-) create mode 100644 web/src/components/SectionHeader.tsx create mode 100644 web/src/routes/Main/Content/Group/GroupHeader.tsx diff --git a/web/src/App.tsx b/web/src/App.tsx index 5f364aa3..72342454 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; import { TcProvider, useStorage } from 'tailchat-shared'; import clsx from 'clsx'; import { Loadable } from './components/Loadable'; +import { ConfigProvider as AntdProvider } from 'antd'; const MainRoute = Loadable(() => import('./routes/Main').then((module) => module.MainRoute) @@ -13,9 +14,25 @@ const EntryRoute = Loadable(() => ); const AppProvider: React.FC = React.memo((props) => { + const getPopupContainer = useCallback( + (triggerNode: HTMLElement): HTMLElement => { + const appRoot = document.querySelector('#tailchat-app'); + if (appRoot) { + return appRoot; + } + + return document.body; + }, + [] + ); + return ( - {props.children} + + + {props.children} + + ); }); @@ -26,6 +43,7 @@ export const App: React.FC = React.memo(() => { return (
= React.memo( + (props) => { + const [visible, setVisible] = useState(false); + return ( +
+ {React.isValidElement(props.menu) ? ( + +
+
{props.children}
+ +  + +
+ + ) : ( +
{props.children}
+ )} +
+ ); + } +); +SectionHeader.displayName = 'SectionHeader'; diff --git a/web/src/routes/Main/Content/Group/GroupHeader.tsx b/web/src/routes/Main/Content/Group/GroupHeader.tsx new file mode 100644 index 00000000..d35dfe20 --- /dev/null +++ b/web/src/routes/Main/Content/Group/GroupHeader.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Menu } from 'antd'; +import _isNil from 'lodash/isNil'; +// import { useGroupHeaderAction } from './useGroupHeaderAction'; +import { useGroupInfo, useTranslation } from 'tailchat-shared'; +import { SectionHeader } from '@/components/SectionHeader'; + +interface GroupHeaderProps { + groupId: string; +} +export const GroupHeader: React.FC = React.memo((props) => { + const { groupId } = props; + const groupInfo = useGroupInfo(groupId); + const { t } = useTranslation(); + + // const { + // handleShowGroupInfo, + // handleShowInvite, + // handleCreateGroupPanel, + // handleQuitGroup, + // } = useGroupHeaderAction(groupInfo!); + + if (_isNil(groupInfo)) { + return null; + } + + const menu = ( + + {/* TODO */} + console.log('查看详情')}> + {t('查看详情')} + + {/* {t('查看详情')} */} + {/* {isGroupManager && ( + {t('邀请成员')} + )} + {isGroupManager && ( + {t('创建面板')} + )} + + {currentUserUUID === groupInfo.owner_uuid ? t('解散团') : t('退出团')} + */} + + ); + + return {groupInfo?.name}; +}); +GroupHeader.displayName = 'GroupHeader'; diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx index 4f7090ad..00e29d11 100644 --- a/web/src/routes/Main/Content/Group/Sidebar.tsx +++ b/web/src/routes/Main/Content/Group/Sidebar.tsx @@ -5,6 +5,7 @@ import { useLocation, useParams } from 'react-router'; import { Badge, Typography } from 'antd'; import { Link } from 'react-router-dom'; import clsx from 'clsx'; +import { GroupHeader } from './GroupHeader'; interface GroupParams { groupId: string; @@ -91,22 +92,26 @@ export const Sidebar: React.FC = React.memo(() => { return (
- {groupPanels - .filter((panel) => panel.type === GroupPanelType.GROUP) - .map((group) => ( - - {groupPanels - .filter((panel) => panel.parentId === group.id) - .map((panel) => ( - #
} - to={`/main/group/${groupId}/${panel.id}`} - /> - ))} - - ))} + + +
+ {groupPanels + .filter((panel) => panel.type === GroupPanelType.GROUP) + .map((group) => ( + + {groupPanels + .filter((panel) => panel.parentId === group.id) + .map((panel) => ( + #
} + to={`/main/group/${groupId}/${panel.id}`} + /> + ))} + + ))} +
); }); diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx index f0d8237c..6d6101bf 100644 --- a/web/src/routes/Main/Content/PageContent.tsx +++ b/web/src/routes/Main/Content/PageContent.tsx @@ -77,7 +77,7 @@ export const PageContent: React.FC = React.memo((props) => { const sidebarEl = _isNil(sidebar) ? null : (
diff --git a/web/src/styles/antd/dark.less b/web/src/styles/antd/dark.less index 3afa70d2..9131a92e 100644 --- a/web/src/styles/antd/dark.less +++ b/web/src/styles/antd/dark.less @@ -26,4 +26,22 @@ .ant-carousel { color: rgba(255,255,255,0.65); } + + // 下拉菜单 + .ant-dropdown { + color: rgba(255,255,255,0.65); + + .ant-dropdown-menu { + background-color: #1f1f1f; + + .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title { + color: rgba(255,255,255,0.65); + + &:hover { + background-color: rgba(255,255,255,0.08); + } + } + } + } + } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 07dad970..fb8c7146 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -1,5 +1,41 @@ // tailwind.config.js // Reference: https://www.tailwindcss.cn/docs/configuration +// 默认配置文件: https://unpkg.com/browse/tailwindcss@2.2.7/stubs/defaultConfig.stub.js + +const plugin = require('tailwindcss/plugin'); + +const customTheme = { + boxShadow: { + normal: 'rgba(0, 0, 0, 0.15) 0 0 8px', + elevationStroke: '0 0 0 1px rgba(4,4,5,0.15)', + elevationLow: + '0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05)', + elevationMedium: '0 4px 4px rgba(0,0,0,0.16)', + elevationHigh: '0 8px 16px rgba(0,0,0,0.24)', + }, +}; + +const tailchat = plugin(({ addUtilities }) => { + // Reference: https://www.tailwindcss.cn/docs/plugins#adding-utilities + const newUtilities = { + '.thin-line-bottom': { + '&::after': { + content: '" "', + position: 'absolute', + display: 'block', + bottom: '1px', + left: 0, + right: 0, + height: '1px', + boxShadow: customTheme.boxShadow.elevationLow, + zIndex: 1, + pointerEvents: 'none', + }, + }, + }; + + addUtilities(newUtilities); +}); module.exports = { purge: { @@ -25,6 +61,9 @@ module.exports = { lineHeight: { 13: '3.25rem', }, + boxShadow: { + ...customTheme.boxShadow, + }, }, }, variants: { @@ -34,5 +73,5 @@ module.exports = { borderRadius: ['hover'], }, }, - plugins: [], + plugins: [tailchat], };