feat: 增加GroupPanelSelector

packages/design/README.md

@@ -1,3 +1,3 @@
 Tailchat 的前端组件
 
-能进这个包的原则是该组件是一个业务无关的组件
+能进这个包的原则是该组件是一个业务无关的组件(无环境依赖)

shared/components/FastForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import _isNil from 'lodash/isNil';
 import _fromPairs from 'lodash/fromPairs';

shared/index.tsx

@@ -163,7 +163,8 @@ export {
   useGroupInfo,
   useGroupMemberIds,
   useGroupMemberInfos,
-  useGroupPanel,
+  useGroupPanels,
+  useGroupPanelInfo,
   useIsGroupOwner,
   useGroupUnread,
   useGroupTextPanelUnread,

shared/redux/hooks/useGroup.ts

@@ -34,18 +34,27 @@ export function useGroupMemberInfos(groupId: string): UserBaseInfo[] {
   return userInfos;
 }
 
+/**
+ * 获取群组面板列表
+ */
+export function useGroupPanels(groupId: string): GroupPanel[] {
+  const groupInfo = useGroupInfo(groupId);
+
+  return useMemo(() => groupInfo?.panels ?? [], [groupId]);
+}
+
 /**
  * 获取群组面板信息
  */
-export function useGroupPanel(
+export function useGroupPanelInfo(
   groupId: string,
   panelId: string
 ): GroupPanel | null {
-  const groupInfo = useGroupInfo(groupId);
+  const panels = useGroupPanels(groupId);
 
   return useMemo(
-    () => groupInfo?.panels.find((p) => p.id === panelId) ?? null,
+    () => panels.find((p) => p.id === panelId) ?? null,
-    [groupInfo, panelId]
+    [groupId, panelId]
   );
 }
 

web/src/components/GroupPanelItem.tsx

@@ -4,6 +4,10 @@ import React from 'react';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 
+/**
+ * 面板项
+ * 用于侧边栏
+ */
 export const GroupPanelItem: React.FC<{
   name: string;
   icon: React.ReactNode;

web/src/components/GroupPanelSelector.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { Select } from 'antd';
+import { GroupPanelType, useGroupPanels } from 'tailchat-shared';
+import { useGroupIdContext } from '@/context/GroupIdContext';
+
+const { Option } = Select;
+
+interface GroupPanelSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+  groupId?: string;
+  panelType?: GroupPanelType;
+}
+
+/**
+ * 群组面板选择器
+ */
+export const GroupPanelSelector: React.FC<GroupPanelSelectorProps> = React.memo(
+  (props) => {
+    const contextGroupId = useGroupIdContext();
+    const groupId = props.groupId ?? contextGroupId;
+    const panelType = props.panelType ?? GroupPanelType.TEXT;
+    const panels = useGroupPanels(groupId);
+
+    const filteredPanels = useMemo(
+      () => panels.filter((panel) => panel.type === panelType),
+      [panels, panelType]
+    );
+
+    return (
+      <Select value={props.value} onChange={props.onChange}>
+        {filteredPanels.map((p) => (
+          <Option key={p.id} value={p.id}>
+            {p.name}
+          </Option>
+        ))}
+      </Select>
+    );
+  }
+);
+GroupPanelSelector.displayName = 'GroupPanelSelector';

web/src/components/Panel/group/PluginPanel.tsx

@@ -1,7 +1,7 @@
 import { findPluginPanelInfoByName } from '@/utils/plugin-helper';
 import { Alert } from 'antd';
 import React, { useMemo } from 'react';
-import { isValidStr, t, useGroupPanel } from 'tailchat-shared';
+import { isValidStr, t, useGroupPanelInfo } from 'tailchat-shared';
 import { GroupPanelWrapper } from './Wrapper';
 
 interface GroupPluginPanelProps {
@@ -14,7 +14,7 @@ interface GroupPluginPanelProps {
  */
 export const GroupPluginPanel: React.FC<GroupPluginPanelProps> = React.memo(
   (props) => {
-    const panelInfo = useGroupPanel(props.groupId, props.panelId);
+    const panelInfo = useGroupPanelInfo(props.groupId, props.panelId);
 
     if (!panelInfo) {
       return (

web/src/components/Panel/group/TextPanel.tsx

@@ -1,7 +1,7 @@
 import { ChatBox } from '@/components/ChatBox';
 import { ChatInputMentionsContextProvider } from '@/components/ChatBox/ChatInputBox/context';
 import React from 'react';
-import { useGroupPanel, useGroupMemberInfos } from 'tailchat-shared';
+import { useGroupPanelInfo, useGroupMemberInfos } from 'tailchat-shared';
 import { GroupPanelWrapper } from './Wrapper';
 
 interface TextPanelProps {
@@ -11,7 +11,7 @@ interface TextPanelProps {
 export const TextPanel: React.FC<TextPanelProps> = React.memo(
   ({ groupId, panelId }) => {
     const groupMembers = useGroupMemberInfos(groupId);
-    const panelInfo = useGroupPanel(groupId, panelId);
+    const panelInfo = useGroupPanelInfo(groupId, panelId);
     if (panelInfo === undefined) {
       return null;
     }

web/src/components/Panel/group/Wrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { t, useGroupPanel } from 'tailchat-shared';
+import { t, useGroupPanelInfo } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { MembersPanel } from './MembersPanel';
 import { CommonPanelWrapper } from '../common/Wrapper';
@@ -21,7 +21,7 @@ interface GroupPanelWrapperProps {
 }
 export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
   (props) => {
-    const panelInfo = useGroupPanel(props.groupId, props.panelId);
+    const panelInfo = useGroupPanelInfo(props.groupId, props.panelId);
 
     if (_isNil(panelInfo)) {
       return null;

web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx

@@ -7,7 +7,7 @@ import {
   createFastFormSchema,
   fieldSchema,
   showToasts,
-  useGroupPanel,
+  useGroupPanelInfo,
 } from 'tailchat-shared';
 import { ModalWrapper } from '../../Modal';
 import { WebFastForm } from '../../WebFastForm';
@@ -32,7 +32,7 @@ export const ModalModifyGroupPanel: React.FC<{
   groupPanelId: string;
   onSuccess?: () => void;
 }> = React.memo((props) => {
-  const groupPanelInfo = useGroupPanel(props.groupId, props.groupPanelId);
+  const groupPanelInfo = useGroupPanelInfo(props.groupId, props.groupPanelId);
   const [currentValues, setValues] = useState<Partial<GroupPanelValues>>({});
 
   const [, handleSubmit] = useAsyncRequest(

web/src/plugin/component/index.tsx

@@ -23,3 +23,4 @@ export {
 } from '@/components/FullModal/Field';
 export { Loading } from '@/components/Loading';
 export { SidebarView } from '@/components/SidebarView';
+export { GroupPanelSelector } from '@/components/GroupPanelSelector';

web/src/routes/Main/Content/Group/Panel.tsx

@@ -7,7 +7,7 @@ import {
   GroupPanelType,
   t,
   useGroupInfo,
-  useGroupPanel,
+  useGroupPanelInfo,
 } from 'tailchat-shared';
 import { useGroupPanelParams } from './utils';
 
@@ -19,7 +19,7 @@ export const GroupPanelRender: React.FC<GroupPanelRenderProps> = React.memo(
   (props) => {
     const { groupId, panelId } = props;
     const groupInfo = useGroupInfo(groupId);
-    const panelInfo = useGroupPanel(groupId, panelId);
+    const panelInfo = useGroupPanelInfo(groupId, panelId);
 
     if (groupInfo === null) {
       return (

web/src/routes/Main/Content/Group/utils.ts

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router';
-import { GroupPanel, useGroupPanel } from 'tailchat-shared';
+import { GroupPanel, useGroupPanelInfo } from 'tailchat-shared';
 
 /**
  * 获取群组面板的参数