From 9a3a0868acad484de941b8acb9835c67eb7537e9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 19 Aug 2021 17:28:37 +0800
Subject: [PATCH] refactor(web): common title and create group panel

---
 web/src/components/FullModal/CommonTitle.tsx  | 15 +++++++++
 .../components/modals/CreateGroupPanel.tsx    | 14 ++++++++
 .../modals/GroupDetail/Panel/index.tsx        | 26 ++++++++++++++-
 .../components/modals/GroupDetail/Summary.tsx | 33 +++++++++++--------
 4 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 web/src/components/FullModal/CommonTitle.tsx
 create mode 100644 web/src/components/modals/CreateGroupPanel.tsx

diff --git a/web/src/components/FullModal/CommonTitle.tsx b/web/src/components/FullModal/CommonTitle.tsx
new file mode 100644
index 00000000..57992669
--- /dev/null
+++ b/web/src/components/FullModal/CommonTitle.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface FullModalCommonTitleProps {
+  extra?: React.ReactNode;
+}
+export const FullModalCommonTitle: React.FC<FullModalCommonTitleProps> =
+  React.memo((props) => {
+    return (
+      <div className="text-xl font-bold mb-4 flex justify-between">
+        <div>{props.children}</div>
+        <div>{props.extra}</div>
+      </div>
+    );
+  });
+FullModalCommonTitle.displayName = 'FullModalCommonTitle';
diff --git a/web/src/components/modals/CreateGroupPanel.tsx b/web/src/components/modals/CreateGroupPanel.tsx
new file mode 100644
index 00000000..68449972
--- /dev/null
+++ b/web/src/components/modals/CreateGroupPanel.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { t } from 'tailchat-shared';
+import { ModalWrapper } from '../Modal';
+
+export const ModalCreateGroupPanel: React.FC<{
+  groupId: string;
+}> = React.memo((props) => {
+  return (
+    <ModalWrapper title={t('创建群组面板')}>
+      创建群组面板: {props.groupId}
+    </ModalWrapper>
+  );
+});
+ModalCreateGroupPanel.displayName = 'ModalCreateGroupPanel';
diff --git a/web/src/components/modals/GroupDetail/Panel/index.tsx b/web/src/components/modals/GroupDetail/Panel/index.tsx
index 9073a1f8..79ae4033 100644
--- a/web/src/components/modals/GroupDetail/Panel/index.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/index.tsx
@@ -10,6 +10,9 @@ import {
 import { Button } from 'antd';
 import _isEqual from 'lodash/isEqual';
 import { GroupPanelTree } from './GroupPanelTree';
+import { FullModalCommonTitle } from '@/components/FullModal/CommonTitle';
+import { openModal } from '@/components/Modal';
+import { ModalCreateGroupPanel } from '../../CreateGroupPanel';
 
 export const GroupPanel: React.FC<{
   groupId: string;
@@ -28,9 +31,30 @@ export const GroupPanel: React.FC<{
     showToasts(t('保存成功'), 'success');
   }, [editingGroupPanels]);
 
+  const [{ loading: createLoading }, handleCreatePanel] =
+    useAsyncRequest(async () => {
+      // TODO
+    }, []);
+
+  const handleOpenCreatePanelModal = useCallback(() => {
+    openModal(<ModalCreateGroupPanel groupId={groupId} />);
+  }, [handleCreatePanel]);
+
   return (
     <div>
-      <div className="text-xl font-bold mb-4">{t('面板管理')}</div>
+      <FullModalCommonTitle
+        extra={
+          <Button
+            type="primary"
+            loading={createLoading}
+            onClick={handleOpenCreatePanelModal}
+          >
+            {t('创建面板')}
+          </Button>
+        }
+      >
+        {t('面板管理')}
+      </FullModalCommonTitle>
 
       <GroupPanelTree
         groupPanels={editingGroupPanels}
diff --git a/web/src/components/modals/GroupDetail/Summary.tsx b/web/src/components/modals/GroupDetail/Summary.tsx
index a6837721..9c501fec 100644
--- a/web/src/components/modals/GroupDetail/Summary.tsx
+++ b/web/src/components/modals/GroupDetail/Summary.tsx
@@ -1,5 +1,6 @@
 import { Avatar } from '@/components/Avatar';
 import { AvatarUploader } from '@/components/AvatarUploader';
+import { FullModalCommonTitle } from '@/components/FullModal/CommonTitle';
 import {
   DefaultFullModalInputEditorRender,
   FullModalField,
@@ -41,21 +42,25 @@ export const GroupSummary: React.FC<{
   }
 
   return (
-    <div className="flex">
-      <div className="w-1/3">
-        <AvatarUploader onUploadSuccess={handleGroupAvatarChange}>
-          <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
-        </AvatarUploader>
-      </div>
+    <div>
+      <FullModalCommonTitle>{t('群组概述')}</FullModalCommonTitle>
+
+      <div className="flex">
+        <div className="w-1/3">
+          <AvatarUploader onUploadSuccess={handleGroupAvatarChange}>
+            <Avatar size={128} name={groupInfo.name} src={groupInfo.avatar} />
+          </AvatarUploader>
+        </div>
 
-      <div className="w-2/3">
-        <FullModalField
-          title={t('群组名')}
-          value={groupInfo.name}
-          editable={true}
-          renderEditor={DefaultFullModalInputEditorRender}
-          onSave={handleUpdateGroupName}
-        />
+        <div className="w-2/3">
+          <FullModalField
+            title={t('群组名')}
+            value={groupInfo.name}
+            editable={true}
+            renderEditor={DefaultFullModalInputEditorRender}
+            onSave={handleUpdateGroupName}
+          />
+        </div>
       </div>
     </div>
   );