Просмотр исходного кода

fix: 数据源设置高度的调整

outaozhen 3 лет назад
Родитель
Сommit
41cc040c9d

+ 1 - 1
src/pages/Permission/Role/components/RoleLeftMenu/index.less

@@ -5,7 +5,7 @@
   height: 32px;
   @apply flex justify-between items-center flex-nowrap;
   .title {
-    // max-width: 110px;
+    max-width: 110px;
     @apply line-clamp-1;
   }
   .extra {

+ 9 - 4
src/pages/Schema/Option/Components/LeftMenu.tsx

@@ -111,12 +111,13 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options, showDelIcon, ini
       return newItem
     })
   }
+  const virtualHeigh = document.getElementById('role-list')?.clientHeight
   return (
     <div
-      className="w-54 rounded-20px flex flex-col bg-white "
+      className="min-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>
+      <div className="menu-title flex items-center justify-around">
+        <div className="py-4 text-base text-opacity-85">数据源列表</div>
         <ModalForm
           layout="horizontal"
           title="新增数据源"
@@ -144,11 +145,15 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options, showDelIcon, ini
           {/* <ProFormText label="URL" name="url" required disabled placeholder="自动生成" /> */}
         </ModalForm>
       </div>
-      <div className="flex-1">
+      <div
+        id="role-list"
+        className="p-4 bg-white rounded-b-20px"
+        style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
         <DirectoryTree
           treeData={renderTreeNode(
             options.map(item => ({ title: item.name, key: item.ID, ...item }))
           )}
+          height={virtualHeigh - 32}
           onSelect={handleOnSelect}
           showIcon={false}
           defaultExpandAll

+ 4 - 4
src/pages/Schema/Option/index.tsx

@@ -197,10 +197,13 @@ const Option = () => {
           options={state.menuData}
           initFn={() => tryFetchList()}
         />
-        <div className="w-6/7 ml-8 bg-white p-4  rounded-20px shadow-hex-3e2c5a relative">
+        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px shadow-hex-3e2c5a relative">
           <ProTable<API.DataSourceItem>
             columns={columns}
             search={false}
+            scroll={{
+              y: document.body.clientHeight - (287 + wrapHeight)
+            }}
             dataSource={state.menuDataItems || []}
             rowKey="index"
             headerTitle={state.activeID ? state.menuDataTitle : null}
@@ -234,9 +237,6 @@ const Option = () => {
             labelCol={{ span: 6 }}
             key="form"
             width="30%"
-            scroll={{
-              y: document.body.clientHeight - (285 + wrapHeight)
-            }}
             title={`${state.modalType === OptionModalType.ADD ? '添加' : '编辑'}选项`}
             formRef={formRef}
             layout="horizontal"