!2823 优化:门板抽屉酒格界面UI,房名柜名材质放置位置

src/UI/Components/Board/Door/DoorModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Classes, Divider, H5, Tooltip } from '@blueprintjs/core';
+import { Button, Checkbox, Classes, H5, Tooltip } from '@blueprintjs/core';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -92,7 +92,16 @@ export class DoorModal extends React.Component<{ store: DoorDrawerStore, type: B
                                             <AutoCutCheckbox autoCutOption={this.props.store.autoCutOption} />
                                         </div> */}
                                     </div>
-                                    <div className={Classes.CARD} style={{ minWidth: 350 }}>
+                                    <div
+                                        className={Classes.CARD}
+                                        style={{
+                                            minWidth: 350,
+                                            paddingBottom: 5,
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            justifyContent: "space-between",
+                                        }}>
+                                        <DoorPreviewComponent store={this.props.store} />
                                         <div style={{ marginBottom: 10 }}>
                                             <div className='flex'>
                                                 <Tooltip content={"使用空间拾取板的房名,柜名,板材名,材料,颜色"}>
@@ -111,8 +120,6 @@ export class DoorModal extends React.Component<{ store: DoorDrawerStore, type: B
                                             </div>
                                             <RoomAndBoardMaterialInfo data={store.m_Option} />
                                         </div>
-                                        <Divider />
-                                        <DoorPreviewComponent store={this.props.store} />
                                     </div>
                                     <div className={Classes.CARD} style={{ width: 250, overflow: "scroll" }}>
                                         <div>

src/UI/Components/Board/Door/DoorPreviewComponent.tsx

@@ -153,7 +153,7 @@ export class DoorPreviewComponent extends React.Component<{ store?: DoorDrawerSt
             refSize = 100;
 
         return (
-            <>
+            <div>
                 <div className="flex-between">
                     <span>总宽:{store.totalWidth}mm</span>
                     <span>总深:{store.totalDepth}mm</span>
@@ -202,7 +202,7 @@ export class DoorPreviewComponent extends React.Component<{ store?: DoorDrawerSt
                         })
                     }
                 </div>
-            </>
+            </div>
         );
     }
     private handleCheck = (e: React.FocusEvent<HTMLInputElement>, info: IDoorInfo) =>

src/UI/Components/Board/WineRack.tsx

@@ -196,15 +196,6 @@ export class WineRackModal extends React.Component<{ store?: WineRackStore; }, {
                             {
                                 m_Option.isLock = !m_Option.isLock;
                             }} />
-                        <Checkbox
-                            checked={m_Option.useBoardProcessOption}
-                            label="使用周围的板件数据"
-                            onChange={() => { store.OnHandleUseBoardProcessOptionChange(); }}
-                        />
-                        <RoomAndBoardMaterialInfo
-                            data={m_Option}
-                            vertical={true}
-                        />
                         <div className="flexWrap" style={{ marginTop: 10 }}>
                             {
                                 [["heightCount", "高个数"], ["widthCount", "宽个数"]].map(([k, v]) =>
@@ -287,18 +278,29 @@ export class WineRackModal extends React.Component<{ store?: WineRackStore; }, {
                             option={m_Option}
                             uiOption={UIOption}
                         />
-                        <H5>封边</H5>
-                        <Input5Or4Component
-                            type={CheckObjectType.WR}
-                            showDirectionIcon={true}
-                            hasCenter={false}
-                            optKey=""
-                            upKey="topEdge"
-                            downKey="bottomEdge"
-                            leftKey="leftEdge"
-                            rightKey="rightEdge"
-                            option={m_Option}
-                            uiOption={UIOption}
+                        <div style={{ marginBottom: 10 }}>
+                            <H5>封边</H5>
+                            <Input5Or4Component
+                                type={CheckObjectType.WR}
+                                showDirectionIcon={true}
+                                hasCenter={false}
+                                optKey=""
+                                upKey="topEdge"
+                                downKey="bottomEdge"
+                                leftKey="leftEdge"
+                                rightKey="rightEdge"
+                                option={m_Option}
+                                uiOption={UIOption}
+                            />
+                        </div>
+                        <Checkbox
+                            checked={m_Option.useBoardProcessOption}
+                            label="使用周围的板件数据"
+                            onChange={() => { store.OnHandleUseBoardProcessOptionChange(); }}
+                        />
+                        <RoomAndBoardMaterialInfo
+                            data={m_Option}
+                            vertical={true}
                         />
                     </div>
                     <div className={Classes.CARD}>