refactor(web): new UI: SectionHeader 菜单

TRPGEngine · Aug 4, 2020 · 68707fc · 68707fc
1 parent 4735b0b
commit 68707fc
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 2 deletions.
diff --git a/src/shared/utils/theme.ts b/src/shared/utils/theme.ts
@@ -125,6 +125,11 @@ const styledTheme = {
         overflow-y: overlay;
       }
     `,
+    oneline: `
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
     linkBtn: `
       font-size: 14px;
       background-color: transparent;

diff --git a/src/web/components/SectionHeader.tsx b/src/web/components/SectionHeader.tsx
@@ -1,6 +1,10 @@
+import React from 'react';
 import styled from 'styled-components';
+import { TMemo } from '@shared/components/TMemo';
+import { Dropdown } from 'antd';
+import { Iconfont } from './Iconfont';
 
-export const SectionHeader = styled.div`
+export const SectionHeaderContainer = styled.div`
   height: ${(props) => props.theme.style.sectionHeight};
   position: relative;
   display: flex;
@@ -22,4 +26,38 @@ export const SectionHeader = styled.div`
     z-index: 1;
     pointer-events: none;
   }
+
+  header {
+    ${(props) => props.theme.mixins.oneline}
+
+    flex: 1;
+  }
+
+  .clickable-header {
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+  }
 `;
+
+interface SectionHeaderProps {
+  menu?: React.ReactElement;
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = TMemo((props) => {
+  return (
+    <SectionHeaderContainer>
+      {React.isValidElement(props.menu) ? (
+        <Dropdown overlay={props.menu} placement="topRight" trigger={['click']}>
+          <div className="clickable-header">
+            <header>{props.children}</header>
+            <Iconfont>&#xe60f;</Iconfont>
+          </div>
+        </Dropdown>
+      ) : (
+        <header>{props.children}</header>
+      )}
+    </SectionHeaderContainer>
+  );
+});
+SectionHeader.displayName = 'SectionHeader';
diff --git a/src/web/routes/Main/Content/Group/GroupMenu.tsx b/src/web/routes/Main/Content/Group/GroupMenu.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { TMemo } from '@shared/components/TMemo';
+import { Menu } from 'antd';
+
+interface GroupMenuProps {
+  groupUUID: string;
+}
+export const GroupMenu: React.FC<GroupMenuProps> = TMemo((props) => {
+  const { groupUUID } = props;
+
+  return (
+    <Menu>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.alipay.com/"
+        >
+          查看详情
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.taobao.com/"
+        >
+          邀请成员
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.tmall.com/"
+        >
+          创建面板
+        </a>
+      </Menu.Item>
+      <Menu.Item danger={true}>退出团</Menu.Item>
+    </Menu>
+  );
+});
+GroupMenu.displayName = 'GroupMenu';
diff --git a/src/web/routes/Main/Content/Group/index.tsx b/src/web/routes/Main/Content/Group/index.tsx
@@ -12,6 +12,7 @@ import { useJoinedGroupInfo } from '@redux/hooks/group';
 import { SidebarItem } from '../SidebarItem';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import { GroupPanel } from './GroupPanel';
+import { GroupMenu } from './GroupMenu';
 
 interface GroupParams {
   groupUUID: string;
@@ -24,7 +25,9 @@ export const Group: React.FC = TMemo(() => {
   return (
     <ContentContainer>
       <Sidebar>
-        <SectionHeader>{groupInfo?.name}</SectionHeader>
+        <SectionHeader menu={<GroupMenu groupUUID={groupUUID} />}>
+          {groupInfo?.name}
+        </SectionHeader>
         <SidebarItemsContainer>
           <SidebarItem
             name="综合"