调整组织与用户树结构可折叠拖拽

eiam-console/src/main/console-fe/package.json

@@ -49,6 +49,7 @@
     "@ant-design/icons": "^5.3.7",
     "@ant-design/maps": "^1.0.8",
     "@ant-design/pro-components": "^2.7.1",
+    "@ant-design/pro-editor": "^1.2.1",
     "ahooks": "^3.7.11",
     "antd": "^5.17.0",
     "antd-img-crop": "^4.21.0",
@@ -56,13 +57,13 @@
     "classnames": "^2.5.1",
     "codemirror": "^5.65.5",
     "content-security-policy-parser": "^0.6.0",
+    "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
     "echarts": "^5.5.0",
     "fetch-jsonp": "^1.3.0",
     "form-render": "^2.4.4",
     "google-libphonenumber": "^3.2.34",
-    "copy-to-clipboard": "^3.3.3",
     "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "jsencrypt": "^3.3.2",

eiam-console/src/main/console-fe/src/pages/account/UserList/UserList.tsx

@@ -15,8 +15,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+
+import { DraggablePanel } from '@ant-design/pro-editor';
 import { PageContainer } from '@ant-design/pro-components';
-import { Col, Row } from 'antd';
+import { Col, Flex, Row } from 'antd';
 import { useState } from 'react';
 import OrgTree from './components/Organization';
 import UserList from './components/User';
@@ -48,16 +50,19 @@ export const User = () => {
 
   return (
     <PageContainer content={intl.formatMessage({ id: 'pages.account.user_list.desc' })}>
-      <Row gutter={[16, 16]}>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         {/* 左侧 */}
-        <Col {...leftLayout} style={{ minHeight: '100%', overflow: 'auto' }}>
+        <DraggablePanel
+          placement="left"
+          maxWidth={800}
+          style={{ flex: 1, padding: 0, borderRadius: 12 }}
+        >
           <OrgTree onSelect={treeOnSelect} />
-        </Col>
+        </DraggablePanel>
+        <div style={{ width: 'auto', flex: 1, padding: '0px 6px' }}></div>
         {/* 表格 */}
-        <Col {...rightLayout} style={{ minHeight: '100%', overflow: 'auto' }}>
-          <UserList organization={organization} />
-        </Col>
-      </Row>
+        <UserList organization={organization} />
+      </div>
     </PageContainer>
   );
 };

eiam-console/src/main/console-fe/src/pages/account/UserList/components/Organization/Tree.tsx

@@ -318,7 +318,7 @@ export const OrganizationTree = (props: {
   return (
     <div className={styles}>
       <Card
-        style={{ height: 'calc(100vh - 200px)', overflow: 'auto' }}
+        style={{ height: 'calc(100vh - 220px)', overflow: 'auto' }}
         bordered={false}
         className={classnames(`${prefixCls}`)}
       >
@@ -420,7 +420,7 @@ export const OrganizationTree = (props: {
                 await getRootOrganizationData();
                 return Promise.resolve(true);
               }
-              return Promise.resolve(false);
+              return Promise.resolvyarne(false);
             }}
             id={currentSelectedNode.id}
             visible={moveNodeVisible}

eiam-console/src/main/console-fe/src/pages/account/UserList/components/User/User.tsx

@@ -387,7 +387,7 @@ export default (props: UserListProps) => {
   return (
     <>
       {!organization ? (
-        <Card style={{ height: 'calc(100vh - 200px)' }} bordered={false}>
+        <Card style={{ height: 'calc(100vh - 220px)' }} bordered={false}>
           <Skeleton paragraph={{ rows: 10 }} active={true} />
         </Card>
       ) : (
@@ -396,10 +396,10 @@ export default (props: UserListProps) => {
           scroll={{ x: 1200 }}
           params={{ organizationId: organization?.id, inclSubOrganization }}
           style={{
-            height: 'calc(100vh - 200px)',
+            height: 'calc(100vh - 220px)',
             overflow: 'auto',
           }}
-          cardProps={{ style: { minHeight: 'calc(100vh - 200px)' } }}
+          cardProps={{ style: { minHeight: 'calc(100vh - 220px)' } }}
           search={{
             defaultCollapsed: true,
           }}