From 5701165b0c54fbebb272963a9adce048772a0f27 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 20 Aug 2021 11:22:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E7=BA=A7=E8=8A=82=E7=82=B9=E7=9A=84=E9=9D=A2=E6=9D=BF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/GroupPanelItem.tsx         |  2 +-
 web/src/components/GroupSection.tsx           |  2 +-
 web/src/routes/Main/Content/Group/Sidebar.tsx | 47 +++++++++++--------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
index 786d89bb..afeaab9d 100644
--- a/web/src/components/GroupPanelItem.tsx
+++ b/web/src/components/GroupPanelItem.tsx
@@ -15,7 +15,7 @@ export const GroupPanelItem: React.FC<{
   const isActive = location.pathname.startsWith(to);
 
   return (
-    <Link to={to}>
+    <Link className="block" to={to}>
       <div
         className={clsx(
           'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
diff --git a/web/src/components/GroupSection.tsx b/web/src/components/GroupSection.tsx
index f7e5b912..b5ef82b7 100644
--- a/web/src/components/GroupSection.tsx
+++ b/web/src/components/GroupSection.tsx
@@ -21,7 +21,7 @@ export const GroupSection: React.FC<{
         <div>{props.header}</div>
       </div>
       <div
-        className="transition-all overflow-hidden space-y-0.5"
+        className="transition-all overflow-hidden space-y-0.5 pl-2 ml-1 border-l-4 border-opacity-40"
         style={{
           maxHeight: isShow ? 'var(--max-height)' : 0,
         }}
diff --git a/web/src/routes/Main/Content/Group/Sidebar.tsx b/web/src/routes/Main/Content/Group/Sidebar.tsx
index 50313efd..f298a2c2 100644
--- a/web/src/routes/Main/Content/Group/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Group/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupPanelType, useGroupInfo } from 'tailchat-shared';
+import { GroupPanelType, isValidStr, useGroupInfo } from 'tailchat-shared';
 import { useParams } from 'react-router';
 import { GroupHeader } from './GroupHeader';
 import { GroupSection } from '@/components/GroupSection';
@@ -10,7 +10,7 @@ interface GroupParams {
 }
 
 /**
- * 个人面板侧边栏组件
+ * 群组面板侧边栏组件
  */
 export const Sidebar: React.FC = React.memo(() => {
   const { groupId } = useParams<GroupParams>();
@@ -21,24 +21,33 @@ export const Sidebar: React.FC = React.memo(() => {
     <div>
       <GroupHeader groupId={groupId} />
 
-      <div className="p-2">
+      <div className="p-2 space-y-1">
         {groupPanels
-          .filter((panel) => panel.type === GroupPanelType.GROUP)
-          .map((group) => (
-            <GroupSection key={group.id} header={group.name}>
-              {groupPanels
-                .filter((panel) => panel.parentId === group.id)
-                .map((panel) => (
-                  <div key={panel.id}>
-                    <GroupPanelItem
-                      name={panel.name}
-                      icon={<div>#</div>}
-                      to={`/main/group/${groupId}/${panel.id}`}
-                    />
-                  </div>
-                ))}
-            </GroupSection>
-          ))}
+          .filter((panel) => !isValidStr(panel.parentId))
+          .map((panel) =>
+            panel.type === GroupPanelType.GROUP ? (
+              <GroupSection key={panel.id} header={panel.name}>
+                {groupPanels
+                  .filter((sub) => sub.parentId === panel.id)
+                  .map((sub) => (
+                    <div key={sub.id}>
+                      <GroupPanelItem
+                        name={sub.name}
+                        icon={<div>#</div>}
+                        to={`/main/group/${groupId}/${sub.id}`}
+                      />
+                    </div>
+                  ))}
+              </GroupSection>
+            ) : (
+              <GroupPanelItem
+                key={panel.id}
+                name={panel.name}
+                icon={<div>#</div>}
+                to={`/main/group/${groupId}/${panel.id}`}
+              />
+            )
+          )}
       </div>
     </div>
   );