From c903b3adaad44ea1c9ac036664ab5c7956b82bef Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 9 Feb 2022 17:48:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0pin=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=B9=B6=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?useCurrentGroupPanelInfo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/model/group.ts                         |  1 +
 shared/redux/slices/group.ts                  | 33 ++++++++
 web/plugins/com.msgbyte.webview/src/index.tsx | 11 +--
 .../components/Panel/group/PluginPanel.tsx    |  2 +-
 web/src/plugin/common/index.ts                |  5 +-
 web/src/plugin/common/reg.ts                  |  3 +-
 web/src/routes/Main/Content/Group/Panel.tsx   | 77 +++++++++++--------
 .../routes/Main/Content/Group/SidebarItem.tsx | 46 ++++++++++-
 web/src/routes/Main/Content/Group/index.tsx   | 50 ++++++++----
 web/src/routes/Main/Content/Group/utils.ts    |  7 --
 10 files changed, 171 insertions(+), 64 deletions(-)

diff --git a/shared/model/group.ts b/shared/model/group.ts
index 2396f05f..9e16bf2f 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -28,6 +28,7 @@ export interface GroupInfo {
   owner: string;
   members: GroupMember[];
   panels: GroupPanel[];
+  pinnedPanelId?: string; // 被钉选的面板Id
 }
 
 /**
diff --git a/shared/redux/slices/group.ts b/shared/redux/slices/group.ts
index a0fd1e4e..7f5d9472 100644
--- a/shared/redux/slices/group.ts
+++ b/shared/redux/slices/group.ts
@@ -42,6 +42,39 @@ const groupSlice = createSlice({
       const groupId = action.payload;
       delete state.groups[groupId];
     },
+    pinGroupPanel(
+      state,
+      action: PayloadAction<{
+        groupId: string;
+        panelId: string;
+      }>
+    ) {
+      const { groupId, panelId } = action.payload;
+
+      if (state.groups[groupId]) {
+        // NOTICE: updateGroup 只会去更新，不会去添加新的
+        state.groups[groupId] = {
+          ...state.groups[groupId],
+          pinnedPanelId: panelId,
+        };
+      }
+    },
+    unpinGroupPanel(
+      state,
+      action: PayloadAction<{
+        groupId: string;
+      }>
+    ) {
+      const { groupId } = action.payload;
+
+      if (state.groups[groupId]) {
+        // NOTICE: updateGroup 只会去更新，不会去添加新的
+        state.groups[groupId] = {
+          ...state.groups[groupId],
+          pinnedPanelId: undefined,
+        };
+      }
+    },
   },
 });
 
diff --git a/web/plugins/com.msgbyte.webview/src/index.tsx b/web/plugins/com.msgbyte.webview/src/index.tsx
index 72058c60..0776c20b 100644
--- a/web/plugins/com.msgbyte.webview/src/index.tsx
+++ b/web/plugins/com.msgbyte.webview/src/index.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
-import { regGroupPanel, useCurrentGroupPanelInfo } from '@capital/common';
+import { regGroupPanel } from '@capital/common';
 import { Translate } from './translate';
+import _get from 'lodash/get';
 
 const PLUGIN_NAME = 'com.msgbyte.webview';
 
-const GroupWebPanelRender = () => {
-  const groupPanelInfo = useCurrentGroupPanelInfo();
+const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
+  const panelInfo = props.panelInfo;
 
-  if (!groupPanelInfo) {
+  if (!panelInfo) {
     return <div>{Translate.notfound}</div>;
   }
 
-  const url = groupPanelInfo.meta?.url;
+  const url = _get(panelInfo, 'meta.url');
 
   return (
     <iframe key={String(url)} className="w-full h-full bg-white" src={url} />
diff --git a/web/src/components/Panel/group/PluginPanel.tsx b/web/src/components/Panel/group/PluginPanel.tsx
index 0318f914..e35c85b3 100644
--- a/web/src/components/Panel/group/PluginPanel.tsx
+++ b/web/src/components/Panel/group/PluginPanel.tsx
@@ -61,7 +61,7 @@ export const GroupPluginPanel: React.FC<GroupPluginPanelProps> = React.memo(
         panelId={props.panelId}
         showHeader={false}
       >
-        <Component />
+        <Component panelInfo={panelInfo} />
       </GroupPanelWrapper>
     );
   }
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index 4d6a8c3e..ec33599a 100644
--- a/web/src/plugin/common/index.ts
+++ b/web/src/plugin/common/index.ts
@@ -5,10 +5,7 @@
 
 import _pick from 'lodash/pick';
 export * from './reg';
-export {
-  useGroupPanelParams,
-  useCurrentGroupPanelInfo,
-} from '@/routes/Main/Content/Group/utils';
+export { useGroupPanelParams } from '@/routes/Main/Content/Group/utils';
 export {
   openModal,
   closeModal,
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index 1b15a2be..4166e646 100644
--- a/web/src/plugin/common/reg.ts
+++ b/web/src/plugin/common/reg.ts
@@ -4,6 +4,7 @@ import {
   buildRegList,
   ChatMessage,
   FastFormFieldMeta,
+  GroupPanel,
   regSocketEventListener,
 } from 'tailchat-shared';
 
@@ -71,7 +72,7 @@ export interface PluginGroupPanel {
   /**
    * 该面板如何渲染
    */
-  render: React.ComponentType;
+  render: React.ComponentType<{ panelInfo: GroupPanel }>;
 }
 export const [pluginGroupPanel, regGroupPanel] =
   buildRegList<PluginGroupPanel>();
diff --git a/web/src/routes/Main/Content/Group/Panel.tsx b/web/src/routes/Main/Content/Group/Panel.tsx
index ab06def4..a71c9822 100644
--- a/web/src/routes/Main/Content/Group/Panel.tsx
+++ b/web/src/routes/Main/Content/Group/Panel.tsx
@@ -11,47 +11,60 @@ import {
 } from 'tailchat-shared';
 import { useGroupPanelParams } from './utils';
 
-export const GroupPanelRender: React.FC = React.memo(() => {
-  const { groupId, panelId } = useGroupPanelParams();
-  const groupInfo = useGroupInfo(groupId);
-  const panelInfo = useGroupPanel(groupId, panelId);
+interface GroupPanelRenderProps {
+  groupId: string;
+  panelId: string;
+}
+export const GroupPanelRender: React.FC<GroupPanelRenderProps> = React.memo(
+  (props) => {
+    const { groupId, panelId } = props;
+    const groupInfo = useGroupInfo(groupId);
+    const panelInfo = useGroupPanel(groupId, panelId);
 
-  if (groupInfo === null) {
-    return (
-      <Alert
-        className="w-full text-center"
-        type="error"
-        message={t('群组不存在')}
-      />
-    );
-  }
+    if (groupInfo === null) {
+      return (
+        <Alert
+          className="w-full text-center"
+          type="error"
+          message={t('群组不存在')}
+        />
+      );
+    }
+
+    if (panelInfo === null) {
+      return (
+        <Alert
+          className="w-full text-center"
+          type="error"
+          message={t('面板不存在')}
+        />
+      );
+    }
+
+    if (panelInfo.type === GroupPanelType.TEXT) {
+      return (
+        <GroupInfoContextProvider groupInfo={groupInfo}>
+          <TextPanel groupId={groupId} panelId={panelInfo.id} />
+        </GroupInfoContextProvider>
+      );
+    } else if (panelInfo.type === GroupPanelType.PLUGIN) {
+      return <GroupPluginPanel groupId={groupId} panelId={panelInfo.id} />;
+    }
 
-  if (panelInfo === null) {
     return (
       <Alert
         className="w-full text-center"
         type="error"
-        message={t('面板不存在')}
+        message={t('未知的面板类型')}
       />
     );
   }
+);
+GroupPanelRender.displayName = 'GroupPanelRender';
 
-  if (panelInfo.type === GroupPanelType.TEXT) {
-    return (
-      <GroupInfoContextProvider groupInfo={groupInfo}>
-        <TextPanel groupId={groupId} panelId={panelInfo.id} />
-      </GroupInfoContextProvider>
-    );
-  } else if (panelInfo.type === GroupPanelType.PLUGIN) {
-    return <GroupPluginPanel groupId={groupId} panelId={panelInfo.id} />;
-  }
+export const GroupPanelRoute: React.FC = React.memo(() => {
+  const { groupId, panelId } = useGroupPanelParams();
 
-  return (
-    <Alert
-      className="w-full text-center"
-      type="error"
-      message={t('未知的面板类型')}
-    />
-  );
+  return <GroupPanelRender groupId={groupId} panelId={panelId} />;
 });
-GroupPanelRender.displayName = 'GroupPanelRender';
+GroupPanelRoute.displayName = 'GroupPanelRoute';
diff --git a/web/src/routes/Main/Content/Group/SidebarItem.tsx b/web/src/routes/Main/Content/Group/SidebarItem.tsx
index 11bffbb3..b2672785 100644
--- a/web/src/routes/Main/Content/Group/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/Group/SidebarItem.tsx
@@ -1,10 +1,20 @@
 import React from 'react';
-import { GroupPanel, GroupPanelType, showToasts, t } from 'tailchat-shared';
+import {
+  groupActions,
+  GroupPanel,
+  GroupPanelType,
+  isValidStr,
+  showToasts,
+  t,
+  useAppDispatch,
+  useGroupInfo,
+} from 'tailchat-shared';
 import { GroupPanelItem } from '@/components/GroupPanelItem';
 import { GroupTextPanelItem } from './TextPanelItem';
 import { Dropdown, Menu } from 'antd';
 import copy from 'copy-to-clipboard';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
 
 /**
  * 群组面板侧边栏组件
@@ -17,6 +27,12 @@ export const SidebarItem: React.FC<{
   const { hasOpenedPanel, openPanelWindow } = usePanelWindow(
     `/panel/group/${groupId}/${panel.id}`
   );
+  const groupInfo = useGroupInfo(groupId);
+  const dispatch = useAppDispatch();
+
+  if (!groupInfo) {
+    return <LoadingSpinner />;
+  }
 
   const menu = (
     <Menu>
@@ -33,6 +49,34 @@ export const SidebarItem: React.FC<{
       <Menu.Item disabled={hasOpenedPanel} onClick={openPanelWindow}>
         {t('在新窗口打开')}
       </Menu.Item>
+
+      {isValidStr(groupInfo.pinnedPanelId) &&
+      groupInfo.pinnedPanelId === panel.id ? (
+        <Menu.Item
+          onClick={() => {
+            dispatch(
+              groupActions.unpinGroupPanel({
+                groupId,
+              })
+            );
+          }}
+        >
+          {t('Unpin')}
+        </Menu.Item>
+      ) : (
+        <Menu.Item
+          onClick={() => {
+            dispatch(
+              groupActions.pinGroupPanel({
+                groupId,
+                panelId: panel.id,
+              })
+            );
+          }}
+        >
+          {t('Pin')}
+        </Menu.Item>
+      )}
     </Menu>
   );
 
diff --git a/web/src/routes/Main/Content/Group/index.tsx b/web/src/routes/Main/Content/Group/index.tsx
index 6cce469a..c2cc93df 100644
--- a/web/src/routes/Main/Content/Group/index.tsx
+++ b/web/src/routes/Main/Content/Group/index.tsx
@@ -1,24 +1,48 @@
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { SplitPanel } from '@/components/SplitPanel';
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, useParams } from 'react-router-dom';
+import { isValidStr, useGroupInfo } from 'tailchat-shared';
 import { PageContent } from '../PageContent';
-import { GroupPanelRender } from './Panel';
+import { GroupPanelRender, GroupPanelRoute } from './Panel';
 import { GroupPanelRedirect } from './PanelRedirect';
 import { Sidebar } from './Sidebar';
 
 export const Group: React.FC = React.memo(() => {
+  const { groupId } = useParams<{
+    groupId: string;
+  }>();
+  const groupInfo = useGroupInfo(groupId);
+
+  if (!groupInfo) {
+    return <LoadingSpinner />;
+  }
+
+  const pinnedPanelId = groupInfo.pinnedPanelId;
+
+  const routeMatch = (
+    <Switch>
+      <Route path="/main/group/:groupId/:panelId" component={GroupPanelRoute} />
+      <Route
+        path="/main/group/:groupId"
+        exact={true}
+        component={GroupPanelRedirect}
+      />
+    </Switch>
+  );
+
   return (
     <PageContent data-tc-role="content-group" sidebar={<Sidebar />}>
-      <Switch>
-        <Route
-          path="/main/group/:groupId/:panelId"
-          component={GroupPanelRender}
-        />
-        <Route
-          path="/main/group/:groupId"
-          exact={true}
-          component={GroupPanelRedirect}
-        />
-      </Switch>
+      {isValidStr(pinnedPanelId) ? (
+        <SplitPanel className="flex-auto">
+          <div>{routeMatch}</div>
+          <div>
+            <GroupPanelRender groupId={groupId} panelId={pinnedPanelId} />
+          </div>
+        </SplitPanel>
+      ) : (
+        routeMatch
+      )}
     </PageContent>
   );
 });
diff --git a/web/src/routes/Main/Content/Group/utils.ts b/web/src/routes/Main/Content/Group/utils.ts
index f792ca87..63c08892 100644
--- a/web/src/routes/Main/Content/Group/utils.ts
+++ b/web/src/routes/Main/Content/Group/utils.ts
@@ -15,10 +15,3 @@ export function useGroupPanelParams(): {
 
   return { groupId, panelId };
 }
-
-export function useCurrentGroupPanelInfo(): GroupPanel | null {
-  const { groupId, panelId } = useGroupPanelParams();
-  const panelInfo = useGroupPanel(groupId, panelId);
-
-  return panelInfo;
-}