From b9c91f243dfb0bcc93d2a7c35f94d0efd0a704a1 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 25 Dec 2021 18:44:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=81=E7=A7=BB?=
 =?UTF-8?q?=E5=90=8E=E4=BA=A7=E7=94=9F=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E7=BB=9F=E4=B8=80=E5=9B=BE=E6=A0=87=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FullModal/Field.tsx        |  20 +-
 web/src/components/IconBtn.tsx                |  48 +-
 web/src/components/Panel/common/Wrapper.tsx   |   9 +-
 web/src/components/Panel/group/Wrapper.tsx    |  48 +-
 .../Panel/personal/ConversePanel.tsx          |  79 ++-
 .../__snapshots__/IconBtn.spec.tsx.snap       |   8 +-
 .../GroupDetail/Panel/GroupPanelTree.tsx      |  59 ++-
 .../GroupPanelTree.spec.tsx.snap              | 464 ++++++++++++++----
 8 files changed, 507 insertions(+), 228 deletions(-)

diff --git a/web/src/components/FullModal/Field.tsx b/web/src/components/FullModal/Field.tsx
index cf8cde11..e8950214 100644
--- a/web/src/components/FullModal/Field.tsx
+++ b/web/src/components/FullModal/Field.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import _isString from 'lodash/isString';
 import _isNil from 'lodash/isNil';
-import { Button, Input, Space } from 'antd';
-import { Icon } from '@iconify/react';
+import { Input, Space } from 'antd';
 import { t } from 'tailchat-shared';
 import { DelayTip } from '../DelayTip';
+import { IconBtn } from '../IconBtn';
 
 export type FullModalFieldEditorRenderComponent = React.FC<{
   value: string;
@@ -86,25 +86,15 @@ const FullModalFieldEditor: React.FC<FullModalFieldProps> = React.memo(
 
         {!isEditing ? (
           <DelayTip title={t('编辑')}>
-            <Button
-              icon={<Icon className="anticon" icon="mdi:square-edit-outline" />}
-              onClick={handleEditing}
-            />
+            <IconBtn icon="mdi:square-edit-outline" onClick={handleEditing} />
           </DelayTip>
         ) : (
           <>
             <DelayTip title={t('取消')}>
-              <Button
-                icon={<Icon className="anticon" icon="mdi:close" />}
-                onClick={handleEditing}
-              />
+              <IconBtn icon="mdi:close" onClick={handleEditing} />
             </DelayTip>
             <DelayTip title={t('保存变更')}>
-              <Button
-                type="primary"
-                icon={<Icon className="anticon" icon="mdi:check" />}
-                onClick={handleSave}
-              />
+              <IconBtn type="primary" icon="mdi:check" onClick={handleSave} />
             </DelayTip>
           </>
         )}
diff --git a/web/src/components/IconBtn.tsx b/web/src/components/IconBtn.tsx
index 8a58ac7a..1d822d5d 100644
--- a/web/src/components/IconBtn.tsx
+++ b/web/src/components/IconBtn.tsx
@@ -1,20 +1,48 @@
 import { Icon } from '@iconify/react';
-import { Button, ButtonProps } from 'antd';
+import { Button, ButtonProps, Tooltip } from 'antd';
 import React from 'react';
+import { isValidStr } from 'tailchat-shared';
 
-interface IconBtnProps extends ButtonProps {
+const btnClassName =
+  'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';
+
+type IconBtnShapeType = 'circle' | 'square';
+
+function calcShape(
+  inputShape: IconBtnShapeType = 'circle'
+): ButtonProps['shape'] {
+  if (inputShape === 'circle') {
+    return 'circle';
+  }
+
+  return 'default';
+}
+
+interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
   icon: string;
+  iconClassName?: string;
+  shape?: IconBtnShapeType;
+  title?: string;
 }
 export const IconBtn: React.FC<IconBtnProps> = React.memo(
-  ({ icon, ...props }) => {
-    return (
-      <Button
-        className="border-0 bg-black bg-opacity-30 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
-        shape="circle"
-        {...props}
-        icon={<Icon className="anticon" icon={icon} />}
-      />
+  ({ icon, iconClassName, title, ...props }) => {
+    const shape = calcShape(props.shape);
+
+    const iconEl = (
+      <span className="anticon">
+        <Icon className={iconClassName} icon={icon} />
+      </span>
     );
+
+    const btnEl = (
+      <Button className={btnClassName} {...props} shape={shape} icon={iconEl} />
+    );
+
+    if (isValidStr(title)) {
+      return <Tooltip title={title}>{btnEl}</Tooltip>;
+    } else {
+      return btnEl;
+    }
   }
 );
 IconBtn.displayName = 'IconBtn';
diff --git a/web/src/components/Panel/common/Wrapper.tsx b/web/src/components/Panel/common/Wrapper.tsx
index 3722c591..fef2b209 100644
--- a/web/src/components/Panel/common/Wrapper.tsx
+++ b/web/src/components/Panel/common/Wrapper.tsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { PanelCommonHeader } from '../common/Header';
-import { Icon } from '@iconify/react';
-import { Button } from 'antd';
 import clsx from 'clsx';
 import { useIsMobile } from '@/hooks/useIsMobile';
+import { IconBtn } from '@/components/IconBtn';
 
 interface RightPanelType {
   name: string;
@@ -54,9 +53,11 @@ export const CommonPanelWrapper: React.FC<CommonPanelWrapperProps> = React.memo(
           <PanelCommonHeader
             actions={[
               // 关闭按钮
-              <Button
+              <IconBtn
                 key="close"
-                icon={<Icon className="anticon text-2xl" icon="mdi:close" />}
+                shape="square"
+                icon="mdi:close"
+                iconClassName="text-2xl"
                 onClick={() => setRightPanel(undefined)}
               />,
             ]}
diff --git a/web/src/components/Panel/group/Wrapper.tsx b/web/src/components/Panel/group/Wrapper.tsx
index 54d4e3cc..cbf5dada 100644
--- a/web/src/components/Panel/group/Wrapper.tsx
+++ b/web/src/components/Panel/group/Wrapper.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import { t, useGroupPanel } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
-import { Icon } from '@iconify/react';
-import { Button, Tooltip } from 'antd';
 import { MembersPanel } from './MembersPanel';
 import { CommonPanelWrapper } from '../common/Wrapper';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { OpenedPanelTip } from '@/components/OpenedPanelTip';
+import { IconBtn } from '@/components/IconBtn';
 
 /**
  * 群组面板通用包装器
@@ -33,30 +32,27 @@ export const GroupPanelWrapper: React.FC<GroupPanelWrapperProps> = React.memo(
       <CommonPanelWrapper
         header={panelInfo.name}
         actions={(setRightPanel) => [
-          <Tooltip key="open" title={t('在新窗口打开')}>
-            <Button
-              icon={
-                <Icon className="anticon text-2xl" icon="mdi:dock-window" />
-              }
-              onClick={openPanelWindow}
-            />
-          </Tooltip>,
-          <Tooltip key="members" title={t('成员列表')}>
-            <Button
-              icon={
-                <Icon
-                  className="anticon text-2xl"
-                  icon="mdi:account-supervisor-outline"
-                />
-              }
-              onClick={() =>
-                setRightPanel({
-                  name: t('成员'),
-                  panel: <MembersPanel groupId={props.groupId} />,
-                })
-              }
-            />
-          </Tooltip>,
+          <IconBtn
+            key="open"
+            title={t('在新窗口打开')}
+            shape="square"
+            icon="mdi:dock-window"
+            iconClassName="text-2xl"
+            onClick={openPanelWindow}
+          />,
+          <IconBtn
+            key="members"
+            title={t('成员列表')}
+            shape="square"
+            icon="mdi:account-supervisor-outline"
+            iconClassName="text-2xl"
+            onClick={() =>
+              setRightPanel({
+                name: t('成员'),
+                panel: <MembersPanel groupId={props.groupId} />,
+              })
+            }
+          />,
         ]}
       >
         {props.children}
diff --git a/web/src/components/Panel/personal/ConversePanel.tsx b/web/src/components/Panel/personal/ConversePanel.tsx
index 9d8885cf..113a72b0 100644
--- a/web/src/components/Panel/personal/ConversePanel.tsx
+++ b/web/src/components/Panel/personal/ConversePanel.tsx
@@ -1,7 +1,5 @@
 import { ChatBox } from '@/components/ChatBox';
 import { UserListItem } from '@/components/UserListItem';
-import { Icon } from '@iconify/react';
-import { Button, Tooltip } from 'antd';
 import React from 'react';
 import {
   ChatConverseState,
@@ -15,6 +13,7 @@ import { openModal } from '@/components/Modal';
 import { AppendDMConverseMembers } from '@/components/modals/AppendDMConverseMembers';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { OpenedPanelTip } from '@/components/OpenedPanelTip';
+import { IconBtn } from '@/components/IconBtn';
 
 const ConversePanelTitle: React.FC<{ converse: ChatConverseState }> =
   React.memo(({ converse }) => {
@@ -61,52 +60,44 @@ export const ConversePanel: React.FC<ConversePanelProps> = React.memo(
           }
 
           return _compact([
-            <Tooltip key="open" title={t('在新窗口打开')}>
-              <Button
-                icon={
-                  <Icon className="anticon text-2xl" icon="mdi:dock-window" />
-                }
-                onClick={openPanelWindow}
-              />
-            </Tooltip>,
-            <Tooltip key="add" title={t('邀请成员')}>
-              <Button
-                icon={
-                  <Icon
-                    className="anticon text-2xl"
-                    icon="mdi:account-multiple-plus-outline"
+            <IconBtn
+              key="open"
+              title={t('在新窗口打开')}
+              shape="square"
+              icon="mdi:dock-window"
+              iconClassName="text-2xl"
+              onClick={openPanelWindow}
+            />,
+            <IconBtn
+              key="add"
+              title={t('邀请成员')}
+              shape="square"
+              icon="mdi:account-multiple-plus-outline"
+              iconClassName="text-2xl"
+              onClick={() =>
+                openModal(
+                  <AppendDMConverseMembers
+                    converseId={converse._id}
+                    withoutUserIds={converse.members}
                   />
-                }
+                )
+              }
+            />,
+            // 当成员数大于2时，显示成员列表按钮
+            converse.members.length > 2 && (
+              <IconBtn
+                key="members"
+                title={t('成员列表')}
+                shape="square"
+                icon="mdi:account-supervisor-outline"
+                iconClassName="text-2xl"
                 onClick={() =>
-                  openModal(
-                    <AppendDMConverseMembers
-                      converseId={converse._id}
-                      withoutUserIds={converse.members}
-                    />
-                  )
+                  setRightPanel({
+                    name: t('成员'),
+                    panel: <ConversePanelMembers members={converse.members} />,
+                  })
                 }
               />
-            </Tooltip>,
-            // 当成员数大于2时，显示成员列表按钮
-            converse.members.length > 2 && (
-              <Tooltip key="members" title={t('成员列表')}>
-                <Button
-                  icon={
-                    <Icon
-                      className="anticon text-2xl"
-                      icon="mdi:account-supervisor-outline"
-                    />
-                  }
-                  onClick={() =>
-                    setRightPanel({
-                      name: t('成员'),
-                      panel: (
-                        <ConversePanelMembers members={converse.members} />
-                      ),
-                    })
-                  }
-                />
-              </Tooltip>
             ),
           ]);
         }}
diff --git a/web/src/components/__tests__/__snapshots__/IconBtn.spec.tsx.snap b/web/src/components/__tests__/__snapshots__/IconBtn.spec.tsx.snap
index ac9f9705..435b2675 100644
--- a/web/src/components/__tests__/__snapshots__/IconBtn.spec.tsx.snap
+++ b/web/src/components/__tests__/__snapshots__/IconBtn.spec.tsx.snap
@@ -3,10 +3,14 @@
 exports[`IconBtn render 1`] = `
 <div>
   <button
-    class="ant-btn ant-btn-circle ant-btn-icon-only border-0 bg-black bg-opacity-30 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+    class="ant-btn ant-btn-circle ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
     type="button"
   >
-    [iconify icon="mdi:close"]
+    <span
+      class="anticon"
+    >
+      [iconify icon="mdi:close"]
+    </span>
   </button>
 </div>
 `;
diff --git a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
index 28eb6c63..b904caa4 100644
--- a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx
@@ -5,13 +5,13 @@ import {
   showAlert,
   t,
 } from 'tailchat-shared';
-import { Button, Tree } from 'antd';
+import { Space, Tree } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 import { buildTreeDataWithGroupPanel } from './utils';
-import { Icon } from '@iconify/react';
 import { useGroupPanelTreeDrag } from './useGroupPanelTreeDrag';
 import { closeModal, openModal } from '@/components/Modal';
 import { ModalModifyGroupPanel } from '../../GroupPanel/ModifyGroupPanel';
+import { IconBtn } from '@/components/IconBtn';
 
 interface GroupPanelTree {
   groupId: string;
@@ -61,32 +61,36 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
       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:pencil-outline" />}
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                handleModifyPanel(String(node.key));
-              }}
-            />
+          <div className="opacity-0 group-hover:opacity-100 ml-2">
+            <Space size="small">
+              <IconBtn
+                title={t('编辑')}
+                type="text"
+                size="small"
+                icon="mdi:pencil-outline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleModifyPanel(String(node.key));
+                }}
+              />
 
-            <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
-                );
-              }}
-            />
+              <IconBtn
+                title={t('删除')}
+                type="text"
+                size="small"
+                icon="mdi:trash-can-outline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleDeletePanel(
+                    String(node.key),
+                    String(node.title),
+                    !node.isLeaf
+                  );
+                }}
+              />
+            </Space>
           </div>
         </div>
       );
@@ -103,6 +107,7 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
       defaultExpandAll={true}
       blockNode={true}
       draggable={true}
+      selectable={false}
       titleRender={titleRender}
       onDrop={handleDrop}
       // TODO: 待简化 https://github.com/react-component/tree/pull/482
diff --git a/web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap b/web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap
index 8d5d242a..9e66e6fd 100644
--- a/web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap
+++ b/web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap
@@ -3,12 +3,12 @@
 exports[`GroupPanelTree simple render snapshot 1`] = `
 <div>
   <div
-    class="ant-tree ant-tree-icon-hide ant-tree-block-node"
+    class="ant-tree ant-tree-icon-hide ant-tree-block-node ant-tree-unselectable"
+    role="tree"
   >
-    <div
-      role="tree"
-    >
+    <div>
       <input
+        aria-label="for screen reader"
         style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
         tabindex="0"
         value=""
@@ -40,12 +40,37 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
             style="display: flex; flex-direction: column;"
           >
             <div
-              class="ant-tree-treenode ant-tree-treenode-switcher-open"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
                 class="ant-tree-indent"
               />
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher_open"
               >
@@ -70,9 +95,7 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                 </span>
               </span>
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
                 title="section-1"
               >
                 <span
@@ -85,27 +108,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       section-1
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>
               </span>
             </div>
             <div
-              class="ant-tree-treenode"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
@@ -115,13 +161,34 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                   class="ant-tree-indent-unit ant-tree-indent-unit-start"
                 />
               </span>
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher-noop"
               />
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
                 title="panel-01"
               >
                 <span
@@ -134,27 +201,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       panel-01
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>
               </span>
             </div>
             <div
-              class="ant-tree-treenode ant-tree-treenode-leaf-last"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
@@ -164,13 +254,34 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                   class="ant-tree-indent-unit ant-tree-indent-unit-start"
                 />
               </span>
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher-noop"
               />
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
                 title="panel-02"
               >
                 <span
@@ -183,32 +294,78 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       panel-02
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>
               </span>
             </div>
             <div
-              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
                 class="ant-tree-indent"
               />
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher_open"
               >
@@ -233,9 +390,7 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                 </span>
               </span>
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
                 title="section-2"
               >
                 <span
@@ -248,27 +403,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       section-2
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>
               </span>
             </div>
             <div
-              class="ant-tree-treenode"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
@@ -278,13 +456,34 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                   class="ant-tree-indent-unit ant-tree-indent-unit-end"
                 />
               </span>
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher-noop"
               />
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
                 title="panel-11"
               >
                 <span
@@ -297,27 +496,50 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       panel-11
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>
               </span>
             </div>
             <div
-              class="ant-tree-treenode ant-tree-treenode-leaf-last"
+              aria-grabbed="false"
+              class="ant-tree-treenode ant-tree-treenode-leaf-last ant-tree-treenode-draggable"
+              draggable="true"
             >
               <span
                 aria-hidden="true"
@@ -327,13 +549,34 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                   class="ant-tree-indent-unit ant-tree-indent-unit-end"
                 />
               </span>
+              <span
+                class="ant-tree-draggable-icon"
+              >
+                <span
+                  aria-label="holder"
+                  class="anticon anticon-holder"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="holder"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
               <span
                 class="ant-tree-switcher ant-tree-switcher-noop"
               />
               <span
-                aria-grabbed="true"
-                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
-                draggable="true"
+                class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
                 title="panel-12"
               >
                 <span
@@ -346,20 +589,41 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                       panel-12
                     </span>
                     <div
-                      class="opacity-0 group-hover:opacity-100"
+                      class="opacity-0 group-hover:opacity-100 ml-2"
                     >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
-                      >
-                        [iconify icon="mdi:pencil-outline"]
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only"
-                        type="button"
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
                       >
-                        [iconify icon="mdi:trash-can-outline"]
-                      </button>
+                        <div
+                          class="ant-space-item"
+                          style="margin-right: 8px;"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:pencil-outline"]
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <button
+                            class="ant-btn ant-btn-text ant-btn-circle ant-btn-sm ant-btn-icon-only border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60"
+                            type="button"
+                          >
+                            <span
+                              class="anticon"
+                            >
+                              [iconify icon="mdi:trash-can-outline"]
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </span>