fix: 数据源列表高度的调整

src/pages/Schema/Option/Components/LeftMenu.tsx

@@ -112,7 +112,9 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options, showDelIcon, ini
     })
   }
   return (
-    <div className="w-54 rounded-20px flex flex-col bg-white ">
+    <div
+      className="w-54 rounded-20px flex flex-col bg-white "
+      style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
       <div className="p-4 border-b-1 rounded-tl-20px rounded-tr-20px border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
         <div className="text-base">数据源列表</div>
         <ModalForm

src/pages/Schema/Option/index.tsx

@@ -13,6 +13,7 @@ import classNames from 'classnames'
 import { ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-form'
 import ProTable from '@ant-design/pro-table'
 import { ModalType } from '@/utils/enum'
+import { PageContainer } from '@ant-design/pro-layout'
 
 enum OptionModalType {
   ADD,
@@ -45,7 +46,6 @@ const Option = () => {
     menuDataItems: [],
     current: null
   })
-  // console.log(state.menuDataItems)
 
   const { run: tryFetchList } = useRequest(queryDataSource, {
     onSuccess: (result: API.DataSourceMenuItem) => {
@@ -164,108 +164,118 @@ const Option = () => {
     />
   )
 
-  const DraggableBodyRow = ({ className, style, ...restProps }) => {
-    const index = state.menuDataItems?.findIndex(x => x.index === restProps['data-row-key'])
-    return <SortableItem index={index} {...restProps} />
+  const DraggableBodyRow = ({ ...restProps }) => {
+    if (state.menuDataItems?.length) {
+      const index = state.menuDataItems?.findIndex(x => x.index === restProps['data-row-key'])
+      return <SortableItem index={index} {...restProps} />
+    }
+    return <SortableItem index={0} {...restProps} />
   }
 
+  const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
+
   return (
-    <div className="flex flex-nowrap h-full">
-      <LeftMenu
-        onSelect={onSelect}
-        showDelIcon={!state.menuDataItems?.length}
-        options={state.menuData}
-        initFn={() => tryFetchList()}
-      />
-      <div className="ml-6 shadow-hex-3e2c5a" style={{ width: 'calc(100% - 12rem)' }}>
-        <ProTable<API.DataSourceItem>
-          columns={columns}
-          search={false}
-          dataSource={state.menuDataItems || []}
-          rowKey="index"
-          toolbar={{
-            actions: [
-              <Button
-                key="btn-key"
-                size="small"
-                type="primary"
-                onClick={() => {
-                  setState({
-                    ...state,
-                    modalType: OptionModalType.ADD,
-                    modalVisible: true
-                  })
-                }}
-                ghost>
-                <PlusOutlined />
-                添加选项
-              </Button>
-            ]
-          }}
-          components={{
-            body: {
-              wrapper: DraggableContainer,
-              row: DraggableBodyRow
-            }
-          }}
+    <PageContainer title={false}>
+      <div className="h-full w-full flex flex-row">
+        <LeftMenu
+          onSelect={onSelect}
+          showDelIcon={!state.menuDataItems?.length}
+          options={state.menuData}
+          initFn={() => tryFetchList()}
         />
-        <ModalForm
-          labelCol={{ span: 6 }}
-          key="form"
-          width="30%"
-          title={`${state.modalType === OptionModalType.ADD ? '添加' : '编辑'}选项`}
-          formRef={formRef}
-          layout="horizontal"
-          visible={state.modalVisible}
-          onVisibleChange={visible => {
-            setState({ ...state, modalVisible: visible })
-            setTimeout(() => {
-              if (!visible) formRef.current?.resetFields()
-            }, 80)
-          }}
-          initialValues={{ enable: true }}
-          onFinish={async values => {
-            try {
-              if (state.modalType === OptionModalType.ADD) {
-                await tryAddDataSourceItem({ ...values, dataSourceID: state.activeID })
-              } else {
-                const newItemData = state.menuDataItems?.map(item => {
-                  if (item.ID === values.ID) {
-                    const newItem = { ...values }
-                    return newItem
-                  }
-                  return item
-                })
-                await tryUpdateDataSourceItem({
-                  ID: state.activeID,
-                  items: newItemData
-                })
+        <div className="w-6/7 ml-8 bg-white p-4  rounded-20px shadow-hex-3e2c5a relative">
+          <ProTable<API.DataSourceItem>
+            columns={columns}
+            search={false}
+            dataSource={state.menuDataItems || []}
+            rowKey="index"
+            toolbar={{
+              actions: [
+                <Button
+                  key="btn-key"
+                  size="small"
+                  type="primary"
+                  onClick={() => {
+                    setState({
+                      ...state,
+                      modalType: OptionModalType.ADD,
+                      modalVisible: true
+                    })
+                  }}
+                  ghost>
+                  <PlusOutlined />
+                  添加选项
+                </Button>
+              ]
+            }}
+            components={{
+              body: {
+                wrapper: DraggableContainer,
+                row: DraggableBodyRow
               }
-              message.success(`${state.modalType === OptionModalType.ADD ? '新增' : '编辑'}成功`)
-              return true
-            } catch (error) {
-              message.error(error)
-              return false
-            }
-          }}>
-          <ProFormText name="ID" hidden />
-          <ProFormText
-            name="name"
-            label="选项名称"
-            rules={[{ required: true, message: '请输入选项名称' }]}
+            }}
           />
-          <ProFormRadio.Group
-            name="enable"
-            label="状态"
-            options={[
-              { label: '启用', value: true },
-              { label: '停用', value: false }
-            ]}
-            rules={[{ required: true, message: '请选择启用/停用' }]}
-          />
-        </ModalForm>
+          <ModalForm
+            labelCol={{ span: 6 }}
+            key="form"
+            width="30%"
+            scroll={{
+              y: document.body.clientHeight - (285 + wrapHeight)
+            }}
+            title={`${state.modalType === OptionModalType.ADD ? '添加' : '编辑'}选项`}
+            formRef={formRef}
+            layout="horizontal"
+            visible={state.modalVisible}
+            onVisibleChange={visible => {
+              setState({ ...state, modalVisible: visible })
+              setTimeout(() => {
+                if (!visible) formRef.current?.resetFields()
+              }, 80)
+            }}
+            initialValues={{ enable: true }}
+            onFinish={async values => {
+              try {
+                if (state.modalType === OptionModalType.ADD) {
+                  await tryAddDataSourceItem({ ...values, dataSourceID: state.activeID })
+                } else {
+                  const newItemData = state.menuDataItems?.map(item => {
+                    if (item.ID === values.ID) {
+                      const newItem = { ...values }
+                      return newItem
+                    }
+                    return item
+                  })
+                  await tryUpdateDataSourceItem({
+                    ID: state.activeID,
+                    items: newItemData
+                  })
+                }
+                message.success(`${state.modalType === OptionModalType.ADD ? '新增' : '编辑'}成功`)
+                return true
+              } catch (error) {
+                message.error(error)
+                return false
+              }
+            }}>
+            <ProFormText name="ID" hidden />
+            <ProFormText
+              name="name"
+              label="选项名称"
+              rules={[{ required: true, message: '请输入选项名称' }]}
+            />
+            <ProFormRadio.Group
+              name="enable"
+              label="状态"
+              options={[
+                { label: '启用', value: true },
+                { label: '停用', value: false }
+              ]}
+              rules={[{ required: true, message: '请选择启用/停用' }]}
+            />
+          </ModalForm>
+        </div>
       </div>
-    </div>
+    </PageContainer>
   )
 }