Merge branch 'next' of github.com:jetlinks/jetlinks-ui-antd into next-wzy

src/components/DashBoard/header.tsx

@@ -95,7 +95,7 @@ export default forwardRef((props: HeaderProps, ref) => {
                       ))
                     ) : (
                       <>
-                        <Radio.Button value={TimeKey.today}>当天</Radio.Button>
+                        <Radio.Button value={TimeKey.today}>今日</Radio.Button>
                         <Radio.Button value={TimeKey.week}>近一周</Radio.Button>
                         <Radio.Button value={TimeKey.month}>近一月</Radio.Button>
                         <Radio.Button value={TimeKey.year}>近一年</Radio.Button>

src/components/DashBoard/timePicker.tsx

@@ -116,7 +116,7 @@ export default forwardRef((props: ExtraTimePickerProps, ref) => {
                         ))
                       ) : (
                         <>
-                          <Radio.Button value={TimeKey.today}>当天</Radio.Button>
+                          <Radio.Button value={TimeKey.today}>今日</Radio.Button>
                           <Radio.Button value={TimeKey.week}>近一周</Radio.Button>
                           <Radio.Button value={TimeKey.month}>近一月</Radio.Button>
                           <Radio.Button value={TimeKey.year}>近一年</Radio.Button>

src/components/SearchComponent/index.tsx

@@ -544,8 +544,15 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
       handleForm(true);
     }
 
-    if (type) {
-      setUrl({ q: JSON.stringify(value), target: props.target });
+    if (
+      (value.terms1 && value.terms1.length && value.terms1?.some((item) => item.value)) ||
+      (value.terms2 && value.terms2.length && value.terms2?.some((item) => item.value))
+    ) {
+      if (type) {
+        setUrl({ q: JSON.stringify(value), target: props.target });
+      }
+    } else {
+      setUrl({ q: undefined, target: undefined });
     }
     onSearch({ terms: _temp });
   };
@@ -553,15 +560,13 @@ const SearchComponent = <T extends Record<string, any>>(props: Props<T>) => {
   useEffect(() => {
     // 防止页面下多个TabsTabPane中的查询组件共享路由中的参数
     if (url.q) {
-      // if (url.target) {
-      //   if (props.target && url.target === props.target) {
-      //     form.setValues(JSON.parse(url.q));
-      //     handleSearch(false);
-      //   }
-      // } else {
-      //   form.setValues(JSON.parse(url.q));
-      //   handleSearch(false);
-      // }
+      if (url.target) {
+        if (props.target && url.target === props.target) {
+          form.setValues(JSON.parse(url.q));
+          handleSearch(false);
+        }
+        return;
+      }
       form.setValues(JSON.parse(url.q));
       handleSearch(false);
     }

src/pages/link/DashBoard/index.tsx

@@ -25,6 +25,7 @@ type TopEchartsItemNodeType = {
 const service = new Service('dashboard');
 
 const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
+  let formatterCount = 0;
   const options = {
     series: [
       {
@@ -56,7 +57,15 @@ const TopEchartsItemNode = (props: TopEchartsItemNodeType) => {
           distance: -22,
           color: 'auto',
           fontSize: 12,
-          formatter: '{value}' + (props.formatter || '%'),
+          width: 30,
+          padding: [6, -4, 0, -4],
+          formatter: (value: number) => {
+            formatterCount += 1;
+            if ([1, 3, 6, 9, 11].includes(formatterCount)) {
+              return value + (props.formatter || '%');
+            }
+            return '';
+          },
         },
         pointer: {
           length: '80%',
@@ -161,7 +170,7 @@ export default () => {
   const [serverId, setServerId] = useState(undefined);
   const [timeToolOptions] = useState([
     { label: '最近1小时', value: 'hour' },
-    { label: '当天', value: 'today' },
+    { label: '今日', value: 'today' },
     { label: '近一周', value: 'week' },
   ]);
 
@@ -170,6 +179,7 @@ export default () => {
     jvm: 0,
     jvmTotal: 0,
     usage: 0,
+    usageTotal: 0,
     systemUsage: 0,
     systemUsageTotal: 0,
   });
@@ -213,6 +223,8 @@ export default () => {
       case 'month':
       case 'week':
         return '1d';
+      case 'hour':
+        return '1m';
       default:
         return '1h';
     }
@@ -626,11 +638,13 @@ export default () => {
         const cpu = value.cpu;
         const memory = value.memory;
         const disk = value.disk;
+        console.log(value);
         setTopValues({
           cpu: cpu.systemUsage,
           jvm: Number(((memory.jvmHeapUsage / 100) * (memory.jvmHeapTotal / 1024)).toFixed(1)),
           jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
-          usage: disk.usage,
+          usage: Number(((disk.total / 1024) * (disk.usage / 100)).toFixed(1)),
+          usageTotal: Math.ceil(disk.total / 1024),
           systemUsage: Number(
             ((memory.systemTotal / 1024) * (memory.systemUsage / 100)).toFixed(1),
           ),
@@ -673,7 +687,13 @@ export default () => {
             max={topValues.jvmTotal}
             bottom={`总JVM内存  ${topValues.jvmTotal}G`}
           />
-          <TopEchartsItemNode title={'磁盘占用率'} value={topValues.usage} />
+          <TopEchartsItemNode
+            title={'磁盘占用'}
+            formatter={'G'}
+            value={topValues.usage}
+            max={topValues.usageTotal}
+            bottom={`总磁盘大小  ${topValues.usageTotal}G`}
+          />
           <TopEchartsItemNode
             title={'系统内存'}
             formatter={'G'}
@@ -687,6 +707,8 @@ export default () => {
             title={'网络流量'}
             ref={NETWORKRef}
             initialValues={{ type: 'bytesRead' }}
+            defaultTime={'hour'}
+            timeToolOptions={timeToolOptions}
             height={400}
             closeInitialParams={true}
             showTimeTool={true}
@@ -699,7 +721,6 @@ export default () => {
                 </Radio.Group>
               ),
             }}
-            defaultTime={'week'}
             options={networkOptions}
             onParamsChange={getNetworkEcharts}
           />

src/pages/media/Device/index.tsx

@@ -352,18 +352,19 @@ const Device = () => {
         cardRender={(record) => (
           <MediaDevice
             {...record}
-            detail={
-              <div
-                style={{ fontSize: 18, padding: 8 }}
-                onClick={() => {
-                  history.push(
-                    `${getMenuPathByParams(MENUS_CODE['device/Instance/Detail'], record.id)}`,
-                  );
-                }}
-              >
-                <EyeOutlined />
-              </div>
-            }
+            // detail={
+            //   <div
+            //     style={{ fontSize: 18, padding: 8 }}
+            //     onClick={() => {
+            //       history.push(
+            //         `${getMenuPathByParams(MENUS_CODE['device/Instance/Detail'], record.id)}`,
+            //       );
+            //     }}
+            //   >
+            //     <EyeOutlined />
+            //   </div>
+            // }
+            showMask={false}
             actions={[
               <PermissionButton
                 key="edit"

src/pages/system/Department/Assets/deivce/bind.tsx

@@ -120,7 +120,11 @@ const Bind = observer((props: Props) => {
       visible={props.visible}
       onOk={handleBind}
       onCancel={props.onCancel}
-      width={800}
+      width={'75vw'}
+      bodyStyle={{
+        height: 'calc(100vh - 240px);',
+        overflowY: 'auto',
+      }}
       title="绑定"
     >
       <PermissionModal

src/pages/system/Department/Assets/product/bind.tsx

@@ -11,7 +11,6 @@ import type { ProductItem } from '@/pages/system/Department/typings';
 import SearchComponent from '@/components/SearchComponent';
 import { ExtraProductCard } from '@/components/ProTableCard/CardItems/product';
 import { ProTableCard } from '@/components';
-import { ASSETS_TABS_ENUM, AssetsModel } from '@/pages/system/Department/Assets';
 
 interface Props {
   reload: () => void;
@@ -25,7 +24,6 @@ const Bind = observer((props: Props) => {
   const actionRef = useRef<ActionType>();
   const [searchParam, setSearchParam] = useState({});
   const saveRef = useRef<{ saveData: Function }>();
-  const [deviceVisible, setDeviceVisible] = useState(false);
 
   const columns: ProColumns<ProductItem>[] = [
     {
@@ -69,91 +67,80 @@ const Bind = observer((props: Props) => {
   }, [props.visible]);
 
   return (
-    <Modal
-      visible={props.visible}
-      onOk={handleBind}
-      onCancel={props.onCancel}
-      width={800}
-      title="绑定"
-    >
+    <>
       <Modal
-        visible={deviceVisible}
-        width={800}
-        onCancel={() => {
-          setDeviceVisible(false);
-          props.reload();
-          props.onCancel();
+        visible={props.visible}
+        onOk={handleBind}
+        onCancel={props.onCancel}
+        width={'75vw'}
+        bodyStyle={{
+          height: 'calc(100vh - 240px);',
+          overflowY: 'auto',
         }}
-        onOk={() => {
-          setDeviceVisible(false);
-          AssetsModel.tabsIndex = ASSETS_TABS_ENUM.Device;
-          AssetsModel.bindModal = true;
-          props.onCancel();
-        }}
-        title={'绑定'}
+        title="绑定"
       >
-        是否继续分配产品下的具体设备
-      </Modal>
-      <PermissionModal
-        type="product"
-        parentId={props.parentId}
-        bindKeys={Models.bindKeys}
-        ref={saveRef}
-        onCancel={(type) => {
-          if (type) {
-            setDeviceVisible(true);
-          }
-        }}
-      />
-      <SearchComponent<ProductItem>
-        field={columns}
-        model={'simple'}
-        enableSave={false}
-        defaultParam={[
-          {
-            column: 'id',
-            termType: 'dim-assets$not',
-            value: {
-              assetType: 'product',
-              targets: [
-                {
-                  type: 'org',
-                  id: props.parentId,
-                },
-              ],
+        <PermissionModal
+          type="product"
+          parentId={props.parentId}
+          bindKeys={Models.bindKeys}
+          ref={saveRef}
+          onCancel={(type) => {
+            if (type) {
+              props.reload();
+              props.onCancel();
+            }
+          }}
+        />
+        <SearchComponent<ProductItem>
+          field={columns}
+          model={'simple'}
+          enableSave={false}
+          defaultParam={[
+            {
+              column: 'id',
+              termType: 'dim-assets$not',
+              value: {
+                assetType: 'product',
+                targets: [
+                  {
+                    type: 'org',
+                    id: props.parentId,
+                  },
+                ],
+              },
             },
-          },
-        ]}
-        onSearch={async (data) => {
-          actionRef.current?.reset?.();
-          setSearchParam(data);
-        }}
-        // onReset={() => {
-        //   // 重置分页及搜索参数
-        //   actionRef.current?.reset?.();
-        //   setSearchParam({});
-        // }}
-        target="department-assets-product"
-      />
-      <ProTableCard<ProductItem>
-        actionRef={actionRef}
-        columns={columns}
-        rowKey="id"
-        search={false}
-        gridColumn={2}
-        rowSelection={{
-          selectedRowKeys: Models.bindKeys,
-          onChange: (selectedRowKeys, selectedRows) => {
-            Models.bindKeys = selectedRows.map((item) => item.id);
-          },
-        }}
-        request={(params) => service.queryProductList(params)}
-        params={searchParam}
-        cardRender={(record) => (
-          <ExtraProductCard showBindBtn={false} {...record} cardType={'bind'} />
-        )}
-      />
-    </Modal>
+          ]}
+          onSearch={async (data) => {
+            actionRef.current?.reset?.();
+            setSearchParam(data);
+          }}
+          // onReset={() => {
+          //   // 重置分页及搜索参数
+          //   actionRef.current?.reset?.();
+          //   setSearchParam({});
+          // }}
+          target="department-assets-product"
+        />
+        <ProTableCard<ProductItem>
+          actionRef={actionRef}
+          columns={columns}
+          rowKey="id"
+          search={false}
+          gridColumn={2}
+          rowSelection={{
+            selectedRowKeys: Models.bindKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+              Models.bindKeys = selectedRows.map((item) => item.id);
+            },
+          }}
+          request={(params) => service.queryProductList(params)}
+          params={searchParam}
+          cardRender={(record) => (
+            <ExtraProductCard showBindBtn={false} {...record} cardType={'bind'} />
+          )}
+        />
+      </Modal>
+    </>
   );
 });
 export default Bind;

src/pages/system/Department/Assets/product/index.tsx

@@ -1,7 +1,7 @@
 // 资产分配-产品分类
 import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import { useIntl } from '@@/plugin-locale/localeExports';
-import { Button, Popconfirm, Tooltip } from 'antd';
+import { Button, Modal, Popconfirm, Tooltip } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { observer } from '@formily/react';
 import type { ProductItem } from '@/pages/system/Department/typings';
@@ -25,6 +25,7 @@ export default observer((props: { parentId: string }) => {
   const actionRef = useRef<ActionType>();
 
   const [searchParam, setSearchParam] = useState({});
+  const [deviceVisible, setDeviceVisible] = useState(false);
 
   useEffect(() => {
     if (AssetsModel.tabsIndex === ASSETS_TABS_ENUM.Product && actionRef.current) {
@@ -181,10 +182,30 @@ export default observer((props: { parentId: string }) => {
         <Bind
           visible={Models.bind}
           onCancel={closeModal}
-          reload={() => actionRef.current?.reload()}
+          reload={() => {
+            setDeviceVisible(true);
+            actionRef.current?.reload();
+          }}
           parentId={props.parentId}
         />
       )}
+      {deviceVisible && (
+        <Modal
+          visible={deviceVisible}
+          width={600}
+          onCancel={() => {
+            setDeviceVisible(false);
+          }}
+          onOk={() => {
+            setDeviceVisible(false);
+            AssetsModel.tabsIndex = ASSETS_TABS_ENUM.Device;
+            AssetsModel.bindModal = true;
+          }}
+          title={'绑定'}
+        >
+          是否继续分配产品下的具体设备
+        </Modal>
+      )}
       <SearchComponent<ProductItem>
         field={columns}
         defaultParam={[

src/pages/system/Department/Member/bind.tsx

@@ -73,7 +73,11 @@ const Bind = observer((props: Props) => {
       visible={props.visible}
       onOk={handleBind}
       onCancel={props.onCancel}
-      width={800}
+      width={'75vw'}
+      bodyStyle={{
+        height: 'calc(100vh - 240px);',
+        overflowY: 'auto',
+      }}
       title="绑定"
     >
       <SearchComponent<UserItem>

src/pages/system/Department/save.tsx

@@ -1,5 +1,5 @@
 // Modal 弹窗，用于新增、修改数据
-import React from 'react';
+import React, { useState } from 'react';
 import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import {
@@ -42,6 +42,7 @@ export interface SaveModalProps<T> extends Omit<ModalProps, 'onOk' | 'onCancel'>
 const Save = <T extends object>(props: SaveModalProps<T>) => {
   const { data, schema, onCancel, service } = props;
   const intl = useIntl();
+  const [loading, setLoading] = useState(false);
 
   const SchemaField = createSchemaField({
     components: {
@@ -88,10 +89,10 @@ const Save = <T extends object>(props: SaveModalProps<T>) => {
    */
   const saveData = async () => {
     const formData: T = await form.submit();
-
+    setLoading(true);
     const response =
       data && 'id' in data ? await service.update(formData) : await service.save(formData);
-
+    setLoading(false);
     if (response.status === 200) {
       onlyMessage('操作成功！');
       modalClose(true, response.result.parentId);
@@ -120,6 +121,7 @@ const Save = <T extends object>(props: SaveModalProps<T>) => {
       maskClosable={false}
       visible={props.visible}
       onOk={saveData}
+      confirmLoading={loading}
       onCancel={() => {
         modalClose(false);
       }}

src/pages/system/Platforms/Api/base.tsx

@@ -42,8 +42,8 @@ interface ApiPageProps {
 
 export default observer((props: ApiPageProps) => {
   const location = useLocation();
-  const [operations, setOperations] = useState<string[]>([]);
-  const [GrantKeys, setGrantKeys] = useState<string[]>([]);
+  const [operations, setOperations] = useState<string[] | undefined>(undefined);
+  const [GrantKeys, setGrantKeys] = useState<string[] | undefined>(undefined);
   const { minHeight } = useDomFullHeight(`.platforms-api`);
 
   const initModel = () => {

src/pages/system/Platforms/Api/basePage.tsx

@@ -7,13 +7,13 @@ import { onlyMessage } from '@/utils/util';
 
 interface TableProps {
   data: any;
-  operations: string[];
+  operations: string[] | undefined;
   // 是否只展示已授权的接口
   isShowGranted?: boolean;
   //
   isOpenGranted?: boolean;
   //
-  grantKeys: string[];
+  grantKeys: string[] | undefined;
 }
 
 export default (props: TableProps) => {
@@ -36,8 +36,8 @@ export default (props: TableProps) => {
    * 获取已授权的接口ID
    */
   useEffect(() => {
-    grantCache.current = props.grantKeys;
-    setSelectKeys(props.grantKeys);
+    grantCache.current = props.grantKeys || [];
+    setSelectKeys(props.grantKeys || []);
   }, [props.grantKeys]);
 
   useEffect(() => {

src/pages/system/Platforms/Api/leftTree.tsx

@@ -2,6 +2,9 @@ import { Tree } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { service } from '@/pages/system/Platforms';
 import { ApiModel } from '@/pages/system/Platforms/Api/base';
+import { forkJoin, from, defer } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { LoadingOutlined } from '@ant-design/icons';
 
 type LeftTreeType = {
   onSelect: (data: any) => void;
@@ -25,73 +28,32 @@ interface DataNode {
 
 export default (props: LeftTreeType) => {
   const [treeData, setTreeData] = useState<DataNode[]>([]);
-
-  const getLevelOne = async () => {
-    const resp = await service.getApiFirstLevel();
-    if (resp.urls && resp.urls.length) {
-      if (props.showHome) {
-        const home = [
-          {
-            id: 'home',
-            name: '首页',
-            isLeaf: true,
-          },
-        ];
-        ApiModel.data = undefined;
-        setTreeData(home.concat(resp.urls.map((item: any) => ({ ...item, id: item.url }))));
-      } else {
-        setTreeData(resp.urls.map((item: any) => ({ ...item, id: item.url })));
-      }
-    }
-  };
+  const [loading, setLoading] = useState(false);
 
   const updateTreeData = useCallback(
-    (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] => {
-      return list.map((node) => {
-        if (node.id === key) {
-          const newChildren = node.children ? [...node.children, ...children] : children;
-          // // 屏蔽掉没有子节点的接口
-          // const noOperations = newChildren.filter((item: any) => {
-          //   return item.extraData &&
-          //     item.extraData.some((extraItem: any) =>
-          //       props.operations?.includes(extraItem.operationId),
-          //     )
-          // })
-
-          let filterChildren = newChildren;
-          // api详情时，过滤掉没有授权的接口
-          if (props.type === 'empowerment') {
-            filterChildren = newChildren.filter(
-              (item: any) =>
-                item.extraData &&
-                item.extraData.some((extraItem: any) =>
-                  props.operations?.includes(extraItem.operationId),
-                ),
-            );
-          } else if (props.type === 'authorize') {
-            filterChildren = newChildren.filter(
-              (item: any) =>
-                item.extraData &&
-                item.extraData.some((extraItem: any) =>
-                  props.grantKeys?.includes(extraItem.operationId),
-                ),
-            );
-          }
-
-          return {
-            ...node,
-            children: filterChildren,
-          };
-        }
+    (list: DataNode[], parentItem: any): DataNode[] => {
+      let newArray: any[] = list;
+      console.log(list, props.grantKeys);
+      if (props.type === 'empowerment') {
+        newArray = list.filter(
+          (item: any) =>
+            item.extraData &&
+            item.extraData.some((extraItem: any) =>
+              props.operations?.includes(extraItem.operationId),
+            ),
+        );
+      } else if (props.type === 'authorize') {
+        newArray = list.filter(
+          (item: any) =>
+            item.extraData &&
+            item.extraData.some((extraItem: any) =>
+              props.grantKeys?.includes(extraItem.operationId),
+            ),
+        );
+      }
+      parentItem.children = newArray;
 
-        if (node.children) {
-          return {
-            ...node,
-            children: updateTreeData(node.children, key, children),
-          };
-        }
-        return node;
-      });
+      return parentItem;
     },
     [props.isShowGranted, props.grantKeys, props.type, props.operations],
   );
@@ -120,60 +82,129 @@ export default (props: LeftTreeType) => {
     return newArr;
   };
 
-  const getChildren = (key: string, name: string): Promise<any> => {
-    return new Promise(async (resolve) => {
-      const resp = await service.getApiNextLevel(name);
-      if (resp) {
-        ApiModel.components = { ...ApiModel.components, ...resp.components.schemas };
-        const handleData = handleTreeData(resp);
-        setTreeData((origin) => {
-          const data = updateTreeData(origin, key, handleData);
+  const getChildrenData = async (data: any[], extraData?: any) => {
+    const ofArray: any[] = [];
+    data.forEach((item: any) => {
+      ofArray.push(
+        defer(() =>
+          from(service.getApiNextLevel(item.name)).pipe(
+            map((resp: any) => {
+              if (resp && resp.components) {
+                return handleTreeData(resp);
+              }
+              return undefined;
+            }),
+            map((resp: any) => resp && updateTreeData(resp, item)),
+          ),
+        ),
+      );
+    });
 
-          return data;
-        });
-        resolve(resp.result);
-      }
+    forkJoin(ofArray).subscribe((res) => {
+      console.log(res);
+      setLoading(false);
+      setTreeData(extraData ? [extraData, ...res] : res);
     });
   };
 
-  const onLoadData = (node: any): Promise<void> => {
-    return new Promise(async (resolve) => {
-      if (node.children) {
-        resolve();
-        return;
+  const getLevelOne = async () => {
+    setLoading(true);
+    const resp = await service.getApiFirstLevel();
+    if (resp.urls && resp.urls.length) {
+      if (props.showHome) {
+        const home = {
+          id: 'home',
+          name: '首页',
+          isLeaf: true,
+        };
+        ApiModel.data = undefined;
+        getChildrenData(
+          resp.urls.map((item: any) => ({ ...item, id: item.url })),
+          home,
+        );
+      } else {
+        // setTreeData(resp.urls.map((item: any) => ({ ...item, id: item.url })));
+        getChildrenData(resp.urls.map((item: any) => ({ ...item, id: item.url })));
       }
-      await getChildren(node.key, node.name);
-      resolve();
-    });
+    }
   };
 
+  // const getChildren = (key: string, name: string): Promise<any> => {
+  //   return new Promise(async (resolve) => {
+  //     const resp = await service.getApiNextLevel(name);
+  //     if (resp && resp.components) {
+  //       ApiModel.components = { ...ApiModel.components, ...resp.components.schemas };
+  //       const handleData = handleTreeData(resp);
+  //       setTreeData((origin) => {
+  //         const data = updateTreeData(origin, key, handleData);
+  //
+  //         return data;
+  //       });
+  //       resolve(resp.result);
+  //     } else {
+  //       resolve([])
+  //     }
+  //   });
+  // };
+
+  // const onLoadData = (node: any): Promise<void> => {
+  //   return new Promise(async (resolve) => {
+  //     if (node.children) {
+  //       resolve();
+  //       return;
+  //     }
+  //     await getChildren(node.key, node.name);
+  //     resolve();
+  //   });
+  // };
+
   useEffect(() => {
-    getLevelOne();
-  }, []);
+    if (props.type === 'all') {
+      getLevelOne();
+    } else if (props.type === 'empowerment' && props.grantKeys) {
+      getLevelOne();
+    } else if (props.type === 'authorize' && props.operations) {
+      getLevelOne();
+    }
+  }, [props.operations, props.grantKeys, props.type]);
 
+  console.log(treeData);
   return (
-    <Tree
-      showIcon
-      showLine={{ showLeafIcon: false }}
-      height={700}
-      style={{ minWidth: 145 }}
-      fieldNames={{
-        title: 'name',
-        key: 'id',
-      }}
-      onSelect={(_, { node }: any) => {
-        if (node.isLeaf && props.onSelect) {
-          props.onSelect(node.extraData);
-        }
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
       }}
-      // onExpand={(_,{node}:any)=>{
-      //   if (node.isLeaf && props.onSelect) {
-      //     props.onSelect(node.extraData);
-      //   }
-      // }}
-      defaultSelectedKeys={['home']}
-      loadData={onLoadData}
-      treeData={treeData}
-    />
+    >
+      {!loading ? (
+        <Tree
+          showIcon
+          showLine={{ showLeafIcon: false }}
+          height={700}
+          style={{ minWidth: 145 }}
+          fieldNames={{
+            title: 'name',
+            key: 'id',
+          }}
+          onSelect={(_, { node }: any) => {
+            if (node.isLeaf && props.onSelect) {
+              props.onSelect(node.extraData);
+            }
+          }}
+          // onExpand={(_,{node}:any)=>{
+          //   if (node.isLeaf && props.onSelect) {
+          //     props.onSelect(node.extraData);
+          //   }
+          // }}
+          defaultSelectedKeys={['home']}
+          // loadData={onLoadData}
+          treeData={treeData}
+        />
+      ) : (
+        <div style={{ paddingTop: 32, display: 'flex', justifyContent: 'center' }}>
+          <LoadingOutlined style={{ fontSize: 32 }} />
+        </div>
+      )}
+    </div>
   );
 };