feat: 增加删除群组面板的功能

shared/i18n/langs/en-US/translation.json

@@ -14,6 +14,7 @@
   "k249e23b9": "E-mail format is incorrect",
   "k24ccd723": "Refresh now",
   "k267cc491": "Me",
+  "k28fd9e24": "Are you sure you want to delete the panel group {{name}} and all subordinate panels",
   "k2d6cfb27": "Chat Channel",
   "k3172297b": "This feature is not yet open",
   "k31a9d6a3": "The connect to the server is broken",
@@ -133,5 +134,6 @@
   "kf7d829eb": "Wait to process",
   "kf87f3059": "Plugin Store",
   "kfa01c850": "No private message found",
-  "kfaddd61d": "Chat Service"
+  "kfaddd61d": "Chat Service",
+  "kffafc3b3": "Are you sure you want to delete the panel {{name}}"
 }

shared/i18n/langs/zh-CN/translation.json

@@ -14,6 +14,7 @@
   "k249e23b9": "邮箱格式不正确",
   "k24ccd723": "立即刷新",
   "k267cc491": "我",
+  "k28fd9e24": "确定要删除面板组 {{name}} 以及下级的所有面板么",
   "k2d6cfb27": "聊天频道",
   "k3172297b": "该功能暂未开放",
   "k31a9d6a3": "与服务器的链接已断开",
@@ -133,5 +134,6 @@
   "kf7d829eb": "待处理",
   "kf87f3059": "插件中心",
   "kfa01c850": "找不到私信会话",
-  "kfaddd61d": "聊天服务"
+  "kfaddd61d": "聊天服务",
+  "kffafc3b3": "确定要删除面板 {{name}} 么"
 }

shared/index.tsx

@@ -88,6 +88,7 @@ export {
   applyGroupInvite,
   modifyGroupField,
   createGroupPanel,
+  deleteGroupPanel,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export type { ChatMessage } from './model/message';

shared/model/group.ts

@@ -169,3 +169,15 @@ export async function createGroupPanel(
     groupId,
   });
 }
+
+/**
+ * 删除群组面板
+ * @param groupId 群组Id
+ * @param panelId 面板Id
+ */
+export async function deleteGroupPanel(groupId: string, panelId: string) {
+  await request.post('/api/group/deleteGroupPanel', {
+    groupId,
+    panelId,
+  });
+}

web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx

@@ -1,14 +1,22 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { GroupPanel as GroupPanelInfo, showToasts } from 'tailchat-shared';
-import { Tree } from 'antd';
+import {
+  deleteGroupPanel,
+  GroupPanel as GroupPanelInfo,
+  showAlert,
+  showToasts,
+  t,
+} from 'tailchat-shared';
+import { Button, Tree } from 'antd';
 import type { NodeDragEventParams } from 'rc-tree/lib/contextTypes';
 import type { DataNode, EventDataNode } from 'antd/lib/tree';
 import type { Key } from 'rc-tree/lib/interface';
 import type { AllowDrop } from 'rc-tree/lib/Tree';
 import _cloneDeep from 'lodash/cloneDeep';
 import { buildTreeDataWithGroupPanel, rebuildGroupPanelOrder } from './utils';
+import { Icon } from '@iconify/react';
 
 interface GroupPanelTree {
+  groupId: string;
   groupPanels: GroupPanelInfo[];
   onChange: (newGroupPanels: GroupPanelInfo[]) => void;
 }
@@ -22,6 +30,49 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
     [props.groupPanels]
   );
 
+  const handleDeletePanel = useCallback(
+    (panelId: string, panelName: string, isGroup: boolean) => {
+      showAlert({
+        message: isGroup
+          ? t('确定要删除面板组 【{{name}}】 以及下级的所有面板么', {
+              name: panelName,
+            })
+          : t('确定要删除面板 【{{name}}】 么', { name: panelName }),
+        onConfirm: async () => {
+          await deleteGroupPanel(props.groupId, panelId);
+        },
+      });
+    },
+    [props.groupId]
+  );
+
+  const titleRender = useCallback(
+    (node: DataNode): React.ReactNode => {
+      return (
+        <div className="flex group">
+          <span>{node.title}</span>
+          <div className="opacity-0 group-hover:opacity-100">
+            <Button
+              type="text"
+              size="small"
+              icon={<Icon className="anticon" icon="mdi:trash-can-outline" />}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                handleDeletePanel(
+                  String(node.key),
+                  String(node.title),
+                  !node.isLeaf
+                );
+              }}
+            />
+          </div>
+        </div>
+      );
+    },
+    [handleDeletePanel]
+  );
+
   const handleDragStart = useCallback(
     (info: NodeDragEventParams<HTMLDivElement>) => {
       draggingNode.current = info.node;
@@ -148,7 +199,9 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
     <Tree
       treeData={treeData}
       defaultExpandAll={true}
+      blockNode={true}
       draggable={true}
+      titleRender={titleRender}
       onDrop={handleDrop}
       // TODO: 待简化 https://github.com/react-component/tree/pull/482
       onDragStart={handleDragStart}

web/src/components/modals/GroupDetail/Panel/index.tsx

@@ -73,6 +73,7 @@ export const GroupPanel: React.FC<{
       </FullModalCommonTitle>
 
       <GroupPanelTree
+        groupId={groupId}
         groupPanels={editingGroupPanels}
         onChange={handleChange}
       />