refactor: 修改面板管理的样式。并设置最高高度以优化用户体验

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

@@ -106,7 +106,9 @@ export const GroupPanelTree: React.FC<GroupPanelTree> = React.memo((props) => {
       treeData={treeData}
       defaultExpandAll={true}
       blockNode={true}
-      draggable={true}
+      draggable={{
+        icon: false,
+      }}
       selectable={false}
       titleRender={titleRender}
       onDrop={handleDrop}

web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap

@@ -48,29 +48,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                 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"
               >
@@ -161,29 +138,6 @@ 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"
               />
@@ -254,29 +208,6 @@ 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"
               />
@@ -343,29 +274,6 @@ exports[`GroupPanelTree simple render snapshot 1`] = `
                 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"
               >
@@ -456,29 +364,6 @@ 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"
               />
@@ -549,29 +434,6 @@ 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"
               />

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

@@ -72,11 +72,13 @@ export const GroupPanel: React.FC<{
         {t('面板管理')}
       </FullModalCommonTitle>
 
-      <GroupPanelTree
+      <div className="max-h-80 overflow-auto border rounded border-black border-opacity-20 p-1">
-        groupId={groupId}
+        <GroupPanelTree
-        groupPanels={editingGroupPanels}
+          groupId={groupId}
-        onChange={handleChange}
+          groupPanels={editingGroupPanels}
-      />
+          onChange={handleChange}
+        />
+      </div>
 
       {!_isEqual(groupPanels, editingGroupPanels) && (
         <div className="space-x-1 mt-2">