!2164 功能:门板,抽屉界面添加新配置

src/Add-on/DrawBoard/DrawDoorDrawer/DrawLeftRightOpenDoor.ts

@@ -10,6 +10,7 @@ import { TemplateRecord } from "../../../DatabaseServices/Template/TemplateRecor
 import { TemplateSplitType } from "../../../DatabaseServices/Template/TemplateType";
 import { AppToaster } from "../../../UI/Components/Toaster";
 import { DoorOpenDir, IDoorInfo } from "../../../UI/Store/DoorInterface";
+import { DrillType } from "../../DrawDrilling/DrillType";
 import { DrawDoorTool } from "./DrawDoorTool";
 
 export class DrawLeftRightOpenDoor extends DrawDoorTool
@@ -30,6 +31,15 @@ export class DrawLeftRightOpenDoor extends DrawDoorTool
 
         let isWarnHingeRules = false;//铰链已经干涉
 
+        const {
+            lbSealedUp, lbSealedDown, lbSealedRight, lbSealedLeft,
+            topBrSeal, bottomBrSeal, leftBrSeal, rightBrSeal,
+            verticalBoardName, layerBoardName,
+            offset, thickness, isAuto,
+            lbHightDrillOption: { down: lbDrillDown, up: lbDrillUp, left: lbDrillLeft, right: lbDrillRight },
+            cbHightDrillOption: { down: cbDrillDown, up: cbDrillUp, left: cbDrillLeft, right: cbDrillRight },
+        } = this.option;
+
         for (let i = 0; i < col; i++)
         {
             let lValue = this.colWidths[i];
@@ -50,15 +60,22 @@ export class DrawLeftRightOpenDoor extends DrawDoorTool
                 {
                     if (this.isDrawLayBrS[j + 1])
                     {
-                        let layTemp = this.GetLayerTemp(size.x, size.y, this.option.thickness, i !== 0, this.option.isAuto);
+                        let layTemp = this.GetLayerTemp(size.x, size.y, thickness, i !== 0, isAuto);
                         colTemp.Children.push(layTemp.Id);
                         if (layTemp.Objects.length > 0)
                         {
                             let en = layTemp.Objects[0].Object as Board;
-                            en.BoardProcessOption[EBoardKeyList.UpSealed] = this.option.topBrSeal.toString();
+                            en.Name = layerBoardName;
-                            en.BoardProcessOption[EBoardKeyList.DownSealed] = this.option.bottomBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.UpSealed] = topBrSeal.toString();
-                            en.BoardProcessOption[EBoardKeyList.LeftSealed] = this.option.leftBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.DownSealed] = bottomBrSeal.toString();
-                            en.BoardProcessOption[EBoardKeyList.RightSealed] = this.option.rightBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.LeftSealed] = leftBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.RightSealed] = rightBrSeal.toString();
+                            en.BoardProcessOption.highDrill = [cbDrillDown, cbDrillRight, cbDrillUp, cbDrillLeft];
+                            let drillSet = new Set(en.BoardProcessOption.highDrill);
+                            if (drillSet.size > 1)
+                                en.BoardProcessOption.drillType = DrillType.More;
+                            else if (drillSet.size === 1)
+                                en.BoardProcessOption.drillType = en.BoardProcessOption.highDrill[0];
                             if (this.surroundOption)
                             {
                                 en.BoardProcessOption[EBoardKeyList.RoomName] = this.surroundOption[EBoardKeyList.RoomName];
@@ -73,15 +90,22 @@ export class DrawLeftRightOpenDoor extends DrawDoorTool
             templateSpace.Children.push(colTemp.Id);
             if (i < col - 1)
             {
-                let verTemp = this.GetVerticalTemp(size.z, size.y - this.option.offset, this.option.thickness, !this.isDrawVerBrS[i], this.option.isAuto);
+                let verTemp = this.GetVerticalTemp(size.z, size.y - offset, thickness, !this.isDrawVerBrS[i], isAuto);
                 if (verTemp.Objects.length > 0)
                 {
                     verBoardIds.push(...verTemp.Objects);
                     let en = verTemp.Objects[0].Object as Board;
-                    en.BoardProcessOption[EBoardKeyList.UpSealed] = this.option.topBrSeal.toString();
+                    en.Name = verticalBoardName;
-                    en.BoardProcessOption[EBoardKeyList.DownSealed] = this.option.bottomBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.UpSealed] = lbSealedUp.toString();
-                    en.BoardProcessOption[EBoardKeyList.LeftSealed] = this.option.leftBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.DownSealed] = lbSealedDown.toString();
-                    en.BoardProcessOption[EBoardKeyList.RightSealed] = this.option.rightBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.LeftSealed] = lbSealedLeft.toString();
+                    en.BoardProcessOption[EBoardKeyList.RightSealed] = lbSealedRight.toString();
+                    en.BoardProcessOption.highDrill = [lbDrillDown, lbDrillRight, lbDrillUp, lbDrillLeft];
+                    let drillSet = new Set(en.BoardProcessOption.highDrill);
+                    if (drillSet.size > 1)
+                        en.BoardProcessOption.drillType = DrillType.More;
+                    else if (drillSet.size === 1)
+                        en.BoardProcessOption.drillType = en.BoardProcessOption.highDrill[0];
                     if (this.surroundOption)
                     {
                         en.BoardProcessOption[EBoardKeyList.RoomName] = this.surroundOption[EBoardKeyList.RoomName];

src/Add-on/DrawBoard/DrawDoorDrawer/DrawUpDownOpenDoor.ts

@@ -10,6 +10,7 @@ import { TemplateRecord } from "../../../DatabaseServices/Template/TemplateRecor
 import { TemplateSplitType } from "../../../DatabaseServices/Template/TemplateType";
 import { AppToaster } from "../../../UI/Components/Toaster";
 import { DoorOpenDir, IDoorInfo } from "../../../UI/Store/DoorInterface";
+import { DrillType } from "../../DrawDrilling/DrillType";
 import { DrawDoorTool } from "./DrawDoorTool";
 
 export class DrawUpDownOpenDoor extends DrawDoorTool
@@ -28,6 +29,14 @@ export class DrawUpDownOpenDoor extends DrawDoorTool
         let layBoardIds: ObjectId[] = [];
 
         let isWarnHingeRules = false;
+        const {
+            lbSealedUp, lbSealedDown, lbSealedRight, lbSealedLeft,
+            topBrSeal, bottomBrSeal, leftBrSeal, rightBrSeal,
+            verticalBoardName, layerBoardName,
+            thickness, isAuto,
+            lbHightDrillOption: { down: lbDrillDown, up: lbDrillUp, left: lbDrillLeft, right: lbDrillRight },
+            cbHightDrillOption: { down: cbDrillDown, up: cbDrillUp, left: cbDrillLeft, right: cbDrillRight },
+        } = this.option;
 
         for (let i = 0; i < row; i++)
         {
@@ -50,15 +59,22 @@ export class DrawUpDownOpenDoor extends DrawDoorTool
                 {
                     if (this.isDrawVerBrS[j])
                     {
-                        let verTemp = this.GetVerticalTemp(size.z, size.y, this.option.thickness, i !== 0, this.option.isAuto);
+                        let verTemp = this.GetVerticalTemp(size.z, size.y, thickness, i !== 0, isAuto);
                         rowTemp.Children.push(verTemp.Id);
                         if (verTemp.Objects.length > 0)
                         {
                             let en = verTemp.Objects[0].Object as Board;
-                            en.BoardProcessOption[EBoardKeyList.UpSealed] = this.option.topBrSeal.toString();
+                            en.Name = verticalBoardName;
-                            en.BoardProcessOption[EBoardKeyList.DownSealed] = this.option.bottomBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.UpSealed] = lbSealedUp.toString();
-                            en.BoardProcessOption[EBoardKeyList.LeftSealed] = this.option.leftBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.DownSealed] = lbSealedDown.toString();
-                            en.BoardProcessOption[EBoardKeyList.RightSealed] = this.option.rightBrSeal.toString();
+                            en.BoardProcessOption[EBoardKeyList.LeftSealed] = lbSealedLeft.toString();
+                            en.BoardProcessOption[EBoardKeyList.RightSealed] = lbSealedRight.toString();
+                            en.BoardProcessOption.highDrill = [lbDrillDown, lbDrillRight, lbDrillUp, lbDrillLeft];
+                            let drillSet = new Set(en.BoardProcessOption.highDrill);
+                            if (drillSet.size > 1)
+                                en.BoardProcessOption.drillType = DrillType.More;
+                            else if (drillSet.size === 1)
+                                en.BoardProcessOption.drillType = en.BoardProcessOption.highDrill[0];
                             if (this.surroundOption)
                             {
                                 en.BoardProcessOption[EBoardKeyList.RoomName] = this.surroundOption[EBoardKeyList.RoomName];
@@ -74,15 +90,22 @@ export class DrawUpDownOpenDoor extends DrawDoorTool
 
             if (i < row - 1)
             {
-                let layerTemp = this.GetLayerTemp(size.y, size.x, this.option.thickness, !this.isDrawLayBrS[i + 1], this.option.isAuto);
+                let layerTemp = this.GetLayerTemp(size.y, size.x, thickness, !this.isDrawLayBrS[i + 1], isAuto);
                 if (layerTemp.Objects.length > 0)
                 {
                     layBoardIds.push(...layerTemp.Objects);
                     let en = layerTemp.Objects[0].Object as Board;
-                    en.BoardProcessOption[EBoardKeyList.UpSealed] = this.option.topBrSeal.toString();
+                    en.Name = layerBoardName;
-                    en.BoardProcessOption[EBoardKeyList.DownSealed] = this.option.bottomBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.UpSealed] = topBrSeal.toString();
-                    en.BoardProcessOption[EBoardKeyList.LeftSealed] = this.option.leftBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.DownSealed] = bottomBrSeal.toString();
-                    en.BoardProcessOption[EBoardKeyList.RightSealed] = this.option.rightBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.LeftSealed] = leftBrSeal.toString();
+                    en.BoardProcessOption[EBoardKeyList.RightSealed] = rightBrSeal.toString();
+                    en.BoardProcessOption.highDrill = [cbDrillDown, cbDrillRight, cbDrillUp, cbDrillLeft];
+                    let drillSet = new Set(en.BoardProcessOption.highDrill);
+                    if (drillSet.size > 1)
+                        en.BoardProcessOption.drillType = DrillType.More;
+                    else if (drillSet.size === 1)
+                        en.BoardProcessOption.drillType = en.BoardProcessOption.highDrill[0];
                     if (this.surroundOption)
                     {
                         en.BoardProcessOption[EBoardKeyList.RoomName] = this.surroundOption[EBoardKeyList.RoomName];

src/Add-on/DrawBoard/DrawDrawer.ts

@@ -26,6 +26,7 @@ import { DoorModal } from "../../UI/Components/Board/Door/DoorModal";
 import { DrawerStore } from "../../UI/Store/DoorDrawerStore/DrawerStore";
 import { DisableChangeParName, HandleHorPos, HandleVePos, IDrawerConfigOption, IDrawerInfo } from "../../UI/Store/DoorInterface";
 import { ITemplateParam } from "../../UI/Store/RightPanelStore/ITemplateParam";
+import { DrillType } from "../DrawDrilling/DrillType";
 
 export class DrawDrawrer implements Command
 {
@@ -62,8 +63,6 @@ export class DrawDrawrer implements Command
             //内偏移
             let offset = store.m_Option.offset;
 
-            let thickness = store.m_Option.thickness;
-
             //抽屉信息排序从左下角那块板开始
             let doorInfos = toJS(store.doorDrawersInfo);
 
@@ -197,7 +196,7 @@ export class DrawDrawrer implements Command
                 templateSpace.Children.push(colTemp.Id);
                 if (i < col - 1)
                 {
-                    let verTemp = this.GetVerticalTemp(size.z, size.y - offset, thickness);
+                    let verTemp = this.GetVerticalTemp(size.z, size.y - offset, store.m_Option);
                     vertialsBoards.push(verTemp.Objects[0].Object as Board);
                     if (surroundOption)
                     {
@@ -509,12 +508,28 @@ export class DrawDrawrer implements Command
 
         return rowTemplate;
     }
-    private GetVerticalTemp(width: number, height: number, thickness: number)
+    private GetVerticalTemp(width: number, height: number, option: IDrawerConfigOption)
     {
+        const {
+            verticalBoardName, thickness,
+            lbSealedUp, lbSealedDown, lbSealedLeft, lbSealedRight,
+            lbHightDrillOption: { down: lbDrillDown, up: lbDrillUp, left: lbDrillLeft, right: lbDrillRight },
+        } = option;
         let verTemp = new TemplateSizeBoard().InitBaseParams();
         verTemp.Name = "立板";
         app.Database.TemplateTable.Append(verTemp);
         let br = Board.CreateBoard(width, height, thickness, BoardType.Vertical);
+        br.Name = verticalBoardName;
+        br.BoardProcessOption[EBoardKeyList.UpSealed] = lbSealedUp.toString();
+        br.BoardProcessOption[EBoardKeyList.DownSealed] = lbSealedDown.toString();
+        br.BoardProcessOption[EBoardKeyList.LeftSealed] = lbSealedLeft.toString();
+        br.BoardProcessOption[EBoardKeyList.RightSealed] = lbSealedRight.toString();
+        br.BoardProcessOption.highDrill = [lbDrillDown, lbDrillRight, lbDrillUp, lbDrillLeft];
+        let drillSet = new Set(br.BoardProcessOption.highDrill);
+        if (drillSet.size > 1)
+            br.BoardProcessOption.drillType = DrillType.More;
+        else if (drillSet.size === 1)
+            br.BoardProcessOption.drillType = br.BoardProcessOption.highDrill[0];
         app.Database.ModelSpace.Append(br);
         verTemp.Objects = [br.Id];
         verTemp.LParam.expr = "_LBH"; //应用立板厚

src/Common/CheckoutVaildValue.ts

@@ -167,6 +167,10 @@ export namespace CheckoutValid
             case "sealedDown":
             case "sealedLeft":
             case "sealedRight":
+            case "lbSealedUp":
+            case "lbSealedDown":
+            case "lbSealedLeft":
+            case "lbSealedRight":
             case "divCount":
             case "startDist":
             case "endDist":

src/Editor/DefaultConfig.ts

@@ -418,7 +418,7 @@ export const DefaultLatticOption: ILatticeOption = {
 Object.freeze(DefaultLatticOption);
 
 export const DefaultDoorOption: IDoorConfigOption = {
-    version: 5,
+    version: 6,
     col: 2,
     row: 1,
     isAllSelect: true,
@@ -446,6 +446,7 @@ export const DefaultDoorOption: IDoorConfigOption = {
     rightBrSeal: 1,
     topDoorSeal: 1,
     bottomDoorSeal: 1,
+    cbHightDrillOption: { up: "", down: "", left: "", right: "" },
     leftDoorSeal: 1,
     rightDoorSeal: 1,
     handleAngle: 0,
@@ -461,6 +462,13 @@ export const DefaultDoorOption: IDoorConfigOption = {
     useRule: false,
     changeTemplateBoardNameOfOpenDir: true,
     frontAndBackDrill: false,
+    verticalBoardName: "立板",
+    layerBoardName: "层板",
+    lbSealedUp: 1,
+    lbSealedDown: 1,
+    lbSealedLeft: 1,
+    lbSealedRight: 1,
+    lbHightDrillOption: { up: "", down: "", left: "", right: "" },
 };
 Object.freeze(DefaultDoorOption);
 export const DefaultHingeOption: IHingeConfigOption = {
@@ -471,7 +479,7 @@ export const DefaultHingeOption: IHingeConfigOption = {
 };
 Object.freeze(DefaultHingeOption);
 export const DefaultDrawerOption: IDrawerConfigOption = {
-    version: 4,
+    version: 5,
     col: 1,
     row: 1,
     isAllSelect: true,
@@ -504,6 +512,12 @@ export const DefaultDrawerOption: IDrawerConfigOption = {
     isLockBottomOffset: false,
     downOffsetExpr: "0",
     upOffsetExpr: "0",
+    verticalBoardName: "立板",
+    lbSealedUp: 1,
+    lbSealedDown: 1,
+    lbSealedLeft: 1,
+    lbSealedRight: 1,
+    lbHightDrillOption: { up: "", down: "", left: "", right: "" },
 };
 Object.freeze(DefaultDrawerOption);
 

src/UI/Components/Board/BoardCommon.tsx

@@ -491,27 +491,31 @@ export class Input5Or4Component extends React.Component<I5InputComponent, {}>
     render()
     {
         const options = [...userConfig.DrillConfigs.keys(), "不排"];
-        const isShow = this.props.isShowEditor && this.props.highDrillOption;
+        const { highDrillOption, isShowEditor, type,
+            upKey, leftKey, downKey, rightKey, centerKey,
+            option, uiOption, showDirectionIcon, hasCenter,
+            onChange } = this.props;
+        const isShow = isShowEditor && highDrillOption;
 
         return (
             <div className="boardSize center textCenter">
                 <div>
                     <ToasterInput
-                        type={this.props.type}
+                        type={type}
-                        optKey={this.props.upKey}
+                        optKey={upKey}
-                        option={this.props.option}
+                        option={option}
-                        uiOption={this.props.uiOption}
+                        uiOption={uiOption}
-                        onChange={this.props.onChange}
+                        onChange={onChange}
                     />
                     {
                         isShow && <HTMLSelect
                             className="select-drillType"
                             options={options}
                             style={{ marginLeft: 3, width: 60, height: 20, padding: "0 19px 0 5px" }}
-                            value={this.props.highDrillOption.up}
+                            value={highDrillOption.up}
                             onChange={e =>
                             {
-                                this.props.highDrillOption.up = e.currentTarget.value;
+                                highDrillOption.up = e.currentTarget.value;
                             }}
                         />
                     }
@@ -523,54 +527,54 @@ export class Input5Or4Component extends React.Component<I5InputComponent, {}>
                 }}>
                     <div className="flexCol">
                         <ToasterInput
-                            type={this.props.type}
+                            type={type}
-                            optKey={this.props.leftKey}
+                            optKey={leftKey}
-                            option={this.props.option}
+                            option={option}
-                            uiOption={this.props.uiOption}
+                            uiOption={uiOption}
-                            onChange={this.props.onChange}
+                            onChange={onChange}
                         />
                         {
                             isShow && <HTMLSelect
                                 className="select-drillType"
                                 options={options}
                                 style={{ width: 60, height: 20, padding: "0 19px 0 5px" }}
-                                value={this.props.highDrillOption.left}
+                                value={highDrillOption.left}
                                 onChange={e =>
                                 {
-                                    this.props.highDrillOption.left = e.currentTarget.value;
+                                    highDrillOption.left = e.currentTarget.value;
                                 }}
                             />
                         }
                     </div>
                     {
-                        this.props.showDirectionIcon && <BoardDirectionIcon />
+                        showDirectionIcon && <BoardDirectionIcon />
                     }
                     {
-                        this.props.hasCenter && <ToasterInput
+                        hasCenter && <ToasterInput
-                            type={this.props.type}
+                            type={type}
-                            optKey={this.props.centerKey}
+                            optKey={centerKey}
-                            option={this.props.option}
+                            option={option}
-                            uiOption={this.props.uiOption}
+                            uiOption={uiOption}
-                            onChange={this.props.onChange}
+                            onChange={onChange}
                         />
                     }
                     <div className="flexCol">
                         <ToasterInput
-                            type={this.props.type}
+                            type={type}
-                            optKey={this.props.rightKey}
+                            optKey={rightKey}
-                            option={this.props.option}
+                            option={option}
-                            uiOption={this.props.uiOption}
+                            uiOption={uiOption}
-                            onChange={this.props.onChange}
+                            onChange={onChange}
                         />
                         {
                             isShow && <HTMLSelect
                                 className="select-drillType"
                                 options={options}
                                 style={{ width: 60, height: 20, padding: "0 19px 0 5px" }}
-                                value={this.props.highDrillOption.right}
+                                value={highDrillOption.right}
                                 onChange={e =>
                                 {
-                                    this.props.highDrillOption.right = e.currentTarget.value;
+                                    highDrillOption.right = e.currentTarget.value;
                                 }}
                             />
                         }
@@ -578,21 +582,21 @@ export class Input5Or4Component extends React.Component<I5InputComponent, {}>
                 </div>
                 <div>
                     <ToasterInput
-                        type={this.props.type}
+                        type={type}
-                        optKey={this.props.downKey}
+                        optKey={downKey}
-                        option={this.props.option}
+                        option={option}
-                        uiOption={this.props.uiOption}
+                        uiOption={uiOption}
-                        onChange={this.props.onChange}
+                        onChange={onChange}
                     />
                     {
                         isShow && <HTMLSelect
                             className="select-drillType"
                             options={options}
                             style={{ marginLeft: 3, width: 60, height: 20, padding: "0 19px 0 5px" }}
-                            value={this.props.highDrillOption.down}
+                            value={highDrillOption.down}
                             onChange={e =>
                             {
-                                this.props.highDrillOption.down = e.currentTarget.value;
+                                highDrillOption.down = e.currentTarget.value;
                             }}
                         />
                     }

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

@@ -26,14 +26,79 @@ export class DoorConfigModal extends React.Component<{ store?: DoorDrawerStore;
             store.SetDrawerDepth();
         }
     };
-    UNSAFE_componentWillMount()
+    /**
+     *渲染拉手
+    */
+    renderHandle = () =>
     {
-        this.uiOption = this.props.store.UIOption as IUiOption<IDoorConfigOption & IDrawerConfigOption>;
+        const { store } = this.props;
-        this.isDoor = this.props.store instanceof DoorStore;
+        return (
-    }
+            <>
-    render()
+                <H5>拉手</H5>
+                <div>
+                    <SetBoardDataItem
+                        type={CheckObjectType.Do}
+                        optKey="handleAngle"
+                        option={store.m_Option}
+                        uiOption={this.uiOption}
+                        title="旋转角"
+                    />
+                    <div>
+                        <RadioGroup
+                            className="door-pos-type"
+                            inline={true}
+                            selectedValue={store.m_Option.handleHorPos}
+                            onChange={e =>
                             {
-        const store = this.props.store;
+                                store.m_Option.handleHorPos = safeEval(e.currentTarget.value) as HandleHorPos;
+                            }}
+                        >
+                            <Radio label="左距" value={HandleHorPos.Left} />
+                            <Radio label="右距" value={HandleHorPos.Right} />
+                            <Radio label="居中" value={HandleHorPos.Mid} />
+                        </RadioGroup>
+                        <ToasterInput
+                            type={CheckObjectType.Do}
+                            optKey="horSpacing"
+                            option={store.m_Option}
+                            uiOption={this.uiOption}
+                            inline={true}
+                        />
+                    </div>
+                    <div>
+                        <RadioGroup
+                            className="door-pos-type"
+                            inline={true}
+                            selectedValue={store.m_Option.handleVePos}
+                            onChange={e =>
+                            {
+                                store.m_Option.handleVePos = safeEval(e.currentTarget.value) as HandleVePos;
+                            }}
+                        >
+                            <Radio label="上距" value={HandleVePos.Top} />
+                            <Radio label="下距" value={HandleVePos.Bottom} />
+                            <Radio label="居中" value={HandleVePos.Mid} />
+                        </RadioGroup>
+                        <ToasterInput
+                            type={CheckObjectType.Do}
+                            optKey="veSpacing"
+                            option={store.m_Option}
+                            uiOption={this.uiOption}
+                            inline={true}
+                        />
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    /**
+     *渲染门板
+    */
+    renderDoor = () =>
+    {
+        const { store } = this.props;
+        const { m_Option } = store as DoorStore;
         return (
             <>
                 <DoorDrawerRowCol
@@ -53,21 +118,73 @@ export class DoorConfigModal extends React.Component<{ store?: DoorDrawerStore;
                     handleDrawerDepth={this.handleDrawerDepth}
                 />
                 <Divider />
+                <div className='flex'>
                     <div>
+                        <SetBoardDataItem
+                            type={CheckObjectType.Do}
+                            optKey="doorThickness"
+                            option={store.m_Option}
+                            uiOption={this.uiOption}
+                            title="门板厚"
+                            onChange={() =>
+                            {
+                                if (store.m_Option.doorPosType === DoorPosType.In)
+                                {
+                                    store.m_Option.offset = (store.m_Option as IDoorConfigOption).doorThickness;
+                                    this.uiOption.offset = this.uiOption.doorThickness;
+                                }
+                            }}
+                        />
+                        <div>
+                            <Checkbox
+                                label="正反面排孔"
+                                inline
+                                checked={(store as DoorStore).m_Option.frontAndBackDrill}
+                                onChange={() => (store as DoorStore).m_Option.frontAndBackDrill = !(store as DoorStore).m_Option.frontAndBackDrill}
+                            />
+                        </div>
+                        <div>
+                            <Checkbox
+                                label="使用模块时:修改板名为开门方向"
+                                inline
+                                checked={(store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir}
+                                onChange={() => (store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir = !(store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <H6 style={{ textAlign: "center" }}>门板封边</H6>
+                        <Input5Or4Component
+                            type={CheckObjectType.Do}
+                            showDirectionIcon={false}
+                            hasCenter={false}
+                            optKey=""
+                            upKey="topDoorSeal"
+                            downKey="bottomDoorSeal"
+                            leftKey="leftDoorSeal"
+                            rightKey="rightDoorSeal"
+                            option={store.m_Option}
+                            uiOption={this.uiOption}
+                        />
+                    </div>
+                </div>
+                <Divider />
+                <div className='flex-between'>
                     <SetBoardDataItem
                         type={CheckObjectType.Do}
                         optKey="thickness"
                         option={store.m_Option}
                         uiOption={this.uiOption}
-                        title="立板厚"
+                        title="板厚"
                         inline={true}
                     />
+                    <div>
                         <SetBoardDataItem
                             type={CheckObjectType.Do}
                             optKey="depth"
                             option={store.m_Option}
                             uiOption={this.uiOption}
-                        title={this.isDoor ? "立板深" : "抽屉深"}
+                            title={"深度"}
                             inline={true}
                             isDisabled={store.m_Option.isAuto}
                         />
@@ -79,178 +196,202 @@ export class DoorConfigModal extends React.Component<{ store?: DoorDrawerStore;
                             {
                                 store.m_Option.isAuto = !store.m_Option.isAuto;
                                 if (store.m_Option.isAuto)
-                            {
-                                if (this.isDoor)
                                 {
                                     store.m_Option.depth = store.totalDepth;
                                     this.uiOption.depth = store.totalDepth.toString();
                                 }
-                                else
-                                {
-                                    this.handleDrawerDepth();
-                                }
-                            }
-                        }}
-                    />
-                    {
-                        !this.isDoor && <SetBoardDataItem
-                            className="drawerTotalDepth"
-                            type={CheckObjectType.Do}
-                            optKey="drawerTotalDepth"
-                            option={store.m_Option}
-                            uiOption={this.uiOption}
-                            title="抽屉最大深度"
-                            tip="最大深度"
-                            onChange={() =>
-                            {
-                                this.handleDrawerDepth();
                             }}
                         />
-                    }
                     </div>
-                <Divider />
+                </div>
-                <div className={this.isDoor ? "flexWrap" : ""}>
+                <div className='flex-arround'>
                     <SetBoardDataItem
-                        className={(!this.isDoor) ? "br-name" : ""}
                         type={CheckObjectType.Do}
-                        optKey="boardName"
+                        className="verticalBoardName"
+                        optKey="verticalBoardName"
                         option={store.m_Option}
-                        title="柜名"
+                        uiOption={this.uiOption}
-                        placeHolder="输入柜名"
+                        title="立板名称"
-                        isDisabled={true}
+                        inline
                     />
-                    {
+                    <SetBoardDataItem
-                        this.isDoor && <SetBoardDataItem
                         type={CheckObjectType.Do}
-                            optKey="doorThickness"
+                        className="layerBoardName"
+                        optKey="layerBoardName"
                         option={store.m_Option}
                         uiOption={this.uiOption}
-                            title="门板厚"
+                        title="层板名称"
-                            onChange={() =>
+                        inline
-                            {
-                                if (store.m_Option.doorPosType === DoorPosType.In)
-                                {
-                                    store.m_Option.offset = (store.m_Option as IDoorConfigOption).doorThickness;
-                                    this.uiOption.offset = this.uiOption.doorThickness;
-                                }
-                            }}
                     />
-                    }
-
                 </div>
-                <Divider />
+                <div className="flex-arround">
-                {
-                    this.isDoor && <div className="flex-arround">
                     <div>
-                            <H6>层板立板封边</H6>
+                        <H5>立板封边/排钻</H5>
                         <Input5Or4Component
-                                type={CheckObjectType.Do}
+                            type={CheckObjectType.BR}
-                                showDirectionIcon={false}
+                            showDirectionIcon={true}
                             hasCenter={false}
                             optKey=""
-                                upKey="topBrSeal"
+                            upKey="lbSealedUp"
-                                downKey="bottomBrSeal"
+                            downKey="lbSealedDown"
-                                leftKey="leftBrSeal"
+                            leftKey="lbSealedLeft"
-                                rightKey="rightBrSeal"
+                            rightKey="lbSealedRight"
                             option={store.m_Option}
-                                uiOption={this.uiOption}
+                            uiOption={store.UIOption}
+                            isShowEditor={true}
+                            highDrillOption={store.m_Option.lbHightDrillOption}
                         />
                     </div>
                     <div>
-                            <H6>门板封边</H6>
+                        <H5>层板封边/排钻</H5>
                         <Input5Or4Component
                             type={CheckObjectType.Do}
-                                showDirectionIcon={false}
+                            showDirectionIcon={true}
                             hasCenter={false}
                             optKey=""
-                                upKey="topDoorSeal"
+                            upKey="topBrSeal"
-                                downKey="bottomDoorSeal"
+                            downKey="bottomBrSeal"
-                                leftKey="leftDoorSeal"
+                            leftKey="leftBrSeal"
-                                rightKey="rightDoorSeal"
+                            rightKey="rightBrSeal"
                             option={store.m_Option}
                             uiOption={this.uiOption}
+                            isShowEditor={true}
+                            highDrillOption={m_Option.cbHightDrillOption}
                         />
                     </div>
                 </div>
-                }
+                <Divider />
-                <H5>拉手</H5>
+                {this.renderHandle()}
+                <Divider />
+                <HingeRules
+                    store={store as DoorStore}
+                    uiOption={this.uiOption}
+                />
+
+            </>
+        );
+    };
+
+    /**
+     *渲染抽屉
+    */
+    renderDrawer = () =>
+    {
+        const { store } = this.props;
+        return (
+            <>
+                <DoorDrawerRowCol
+                    uiOption={this.uiOption}
+                    store={store}
+                />
+                <Divider />
+                <UpDownSpaceComponent
+                    uiOption={this.uiOption}
+                    store={store}
+                />
+                <Divider />
+                <ChangeDoorOrDrawerPosition
+                    uiOption={this.uiOption}
+                    store={store}
+                    isDoor={this.isDoor}
+                    handleDrawerDepth={this.handleDrawerDepth}
+                />
+                <Divider />
                 <div>
                     <SetBoardDataItem
                         type={CheckObjectType.Do}
-                        optKey="handleAngle"
+                        optKey="depth"
                         option={store.m_Option}
                         uiOption={this.uiOption}
-                        title="旋转角"
+                        title={"抽屉深"}
+                        inline={true}
+                        isDisabled={store.m_Option.isAuto}
                     />
-                    <div>
+                    <Checkbox
-                        <RadioGroup
-                            className="door-pos-type"
                         inline={true}
-                            selectedValue={store.m_Option.handleHorPos}
+                        checked={store.m_Option.isAuto}
-                            onChange={e =>
+                        label="智能识别"
+                        onChange={() =>
                         {
-                                store.m_Option.handleHorPos = safeEval(e.currentTarget.value) as HandleHorPos;
+                            store.m_Option.isAuto = !store.m_Option.isAuto;
+                            if (store.m_Option.isAuto)
+                            {
+                                this.handleDrawerDepth();
+                            }
                         }}
-                        >
+                    />
-                            <Radio label="左距" value={HandleHorPos.Left} />
+                    <SetBoardDataItem
-                            <Radio label="右距" value={HandleHorPos.Right} />
+                        inline
-                            <Radio label="居中" value={HandleHorPos.Mid} />
+                        className="drawerTotalDepth"
-                        </RadioGroup>
-                        <ToasterInput
                         type={CheckObjectType.Do}
-                            optKey="horSpacing"
+                        optKey="drawerTotalDepth"
                         option={store.m_Option}
                         uiOption={this.uiOption}
-                            inline={true}
+                        title="抽屉最大深度"
+                        tip="最大深度"
+                        onChange={() =>
+                        {
+                            this.handleDrawerDepth();
+                        }}
                     />
                 </div>
+                <Divider />
                 <div>
-                        <RadioGroup
+                    <div >
-                            className="door-pos-type"
+                        <SetBoardDataItem
-                            inline={true}
-                            selectedValue={store.m_Option.handleVePos}
-                            onChange={e =>
-                            {
-                                store.m_Option.handleVePos = safeEval(e.currentTarget.value) as HandleVePos;
-                            }}
-                        >
-                            <Radio label="上距" value={HandleVePos.Top} />
-                            <Radio label="下距" value={HandleVePos.Bottom} />
-                            <Radio label="居中" value={HandleVePos.Mid} />
-                        </RadioGroup>
-                        <ToasterInput
                             type={CheckObjectType.Do}
-                            optKey="veSpacing"
+                            className="verticalBoardName"
+                            optKey="verticalBoardName"
                             option={store.m_Option}
                             uiOption={this.uiOption}
-                            inline={true}
+                            title="立板名称"
+                            inline
                         />
                     </div>
-                </div>
+                    <div>
-                {
+                        <SetBoardDataItem
-                    this.isDoor && <HingeRules
+                            type={CheckObjectType.Do}
-                        store={store as DoorStore}
+                            optKey="thickness"
+                            option={store.m_Option}
                             uiOption={this.uiOption}
-                    />
+                            title="立板厚"
-                }
+                            inline={true}
-                {
-                    this.isDoor && <div><Checkbox
-                        label="正反面排孔"
-                        inline
-                        checked={(store as DoorStore).m_Option.frontAndBackDrill}
-                        onChange={() => (store as DoorStore).m_Option.frontAndBackDrill = !(store as DoorStore).m_Option.frontAndBackDrill}
                         />
                     </div>
-                }
+                    <div>
-                {
+                        <H5 style={{ textAlign: "center" }}>立板封边/排钻</H5>
-                    this.isDoor && <div><Checkbox
+                        <Input5Or4Component
-                        label="使用模块时:修改板名为开门方向"
+                            type={CheckObjectType.BR}
-                        inline
+                            showDirectionIcon={true}
-                        checked={(store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir}
+                            hasCenter={false}
-                        onChange={() => (store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir = !(store as DoorStore).m_Option.changeTemplateBoardNameOfOpenDir}
+                            optKey=""
+                            upKey="lbSealedUp"
+                            downKey="lbSealedDown"
+                            leftKey="lbSealedLeft"
+                            rightKey="lbSealedRight"
+                            option={store.m_Option}
+                            uiOption={store.UIOption}
+                            isShowEditor={true}
+                            highDrillOption={store.m_Option.lbHightDrillOption}
                         />
                     </div>
+                </div>
+                <Divider />
+                {this.renderHandle()}
+            </>
+        );
+    };
+
+    UNSAFE_componentWillMount()
+    {
+        this.uiOption = this.props.store.UIOption as IUiOption<IDoorConfigOption & IDrawerConfigOption>;
+        this.isDoor = this.props.store instanceof DoorStore;
     }
+    render()
+    {
+        return (
+            <>
+                {this.isDoor ? this.renderDoor() : this.renderDrawer()}
             </>
         );
     }

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

@@ -83,7 +83,7 @@ export class DoorModal extends React.Component<{ store: DoorDrawerStore, type: B
                         <div>
                             <div className={Classes.DIALOG_BODY + " door"}>
                                 <div className="flex">
-                                    <div className={Classes.CARD}>
+                                    <div className={Classes.CARD} style={{ paddingBottom: 5 }}>
                                         <DoorConfigModal store={this.props.store} />
                                         {/* <div>
                                             <AutoCutCheckbox autoCutOption={this.props.store.autoCutOption} />
@@ -92,7 +92,7 @@ export class DoorModal extends React.Component<{ store: DoorDrawerStore, type: B
                                     <div className={Classes.CARD} style={{ minWidth: 350 }}>
                                         <DoorPreviewComponent store={this.props.store} />
                                     </div>
-                                    <div className={Classes.CARD} style={{ width: 250, maxHeight: isDoor ? 700 : 500, overflow: "auto" }}>
+                                    <div className={Classes.CARD} style={{ width: 250 }}>
                                         <H5>{isDoor ? "板件属性" : "抽屉属性"}</H5>
                                         <TemplateDetail
                                             updateParams={this.props.store.currentTempProp}

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

@@ -224,7 +224,6 @@ export class DoorPreviewItem extends React.Component<IDoorPreviewItemProps, {}>{
                 <Popover
                     usePortal={false}
                     isOpen={this.isOpen}
-                    hasBackdrop
                     autoFocus
                     canEscapeKeyClose
                     onOpened={e =>

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

@@ -71,6 +71,7 @@ export class HingeRules extends React.Component<IHingeRulesProps> {
                     targetTitle="配置"
                     //onOpening={() => this.onOpening(store)}
                     onClosing={() => this.onClosing(store)}
+                    usePortal={true}
                 >
                     <Card className="hinge-rules">
                         <H5>铰链配置规则</H5>
@@ -138,6 +139,7 @@ export class HingeRules extends React.Component<IHingeRulesProps> {
                             {
                                 store.rules.map((rule, index) =>
                                     <li
+                                        key={JSON.stringify(rule)}
                                         style={store.currentIndex === index
                                             ? SelectStyle : {}}
                                         onClick={(e) =>

src/UI/Components/Common/PopoverContent.tsx

@@ -12,15 +12,17 @@ interface IPopOverContentProps
     style?: React.CSSProperties;
     className?: string;
     intent?: Intent;
+    usePortal?: boolean;
     onClosing?: () => void;
     onOpening?: () => void;
 }
 
 export class PopoverContent extends React.Component<IPopOverContentProps> {
     private cancelBtn: HTMLButtonElement;
-    static defaultProps = {
+    static defaultProps: Partial<IPopOverContentProps> = {
         position: Position.TOP,
-        intent: Intent.PRIMARY
+        intent: Intent.PRIMARY,
+        usePortal: false,
     };
     public render()
     {
@@ -28,6 +30,7 @@ export class PopoverContent extends React.Component<IPopOverContentProps> {
             <Popover
                 position={this.props.position}
                 disabled={this.props.disabled}
+                usePortal={this.props.usePortal}
                 onOpening={e =>
                 {
                     if (this.props.onOpening)

src/UI/Components/Modal/ModalStyle/DoorModal.less

@@ -27,6 +27,13 @@
         }
     }
 
+    .verticalBoardName,
+    .layerBoardName {
+        &>span {
+            width: 54px;
+        }
+    }
+
     .br-name input {
         width: 10rem;
     }
@@ -287,6 +294,7 @@
         }
     }
 }
+
 .hinge-rule {
     display: flex;
     flex-direction: row;

src/UI/Store/DoorDrawerStore/DoorStore.ts

@@ -3,6 +3,7 @@ import { observable, toJS } from "mobx";
 import { CheckObjectType, CheckoutValid } from "../../../Common/CheckoutVaildValue";
 import { DataAdapter } from "../../../Common/DataAdapter";
 import { DefaultDoorOption } from "../../../Editor/DefaultConfig";
+import { userConfig } from "../../../Editor/UserConfig";
 import { IConfigOption } from "../../Components/Board/UserConfigComponent";
 import { AppConfirm } from "../../Components/Common/Confirm";
 import { AppToaster } from "../../Components/Toaster";
@@ -129,6 +130,9 @@ export class DoorStore extends DoorDrawerStore
     InitOption()
     {
         Object.assign(this.m_Option, DefaultDoorOption);
+        let drilltypes = [...userConfig.DrillConfigs.keys(), "不排"];
+        Object.assign(this.m_Option.lbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
+        Object.assign(this.m_Option.cbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
         super.InitOption();
         this.InitInfos();
         Object.assign(this.currentRule, {
@@ -173,23 +177,38 @@ export class DoorStore extends DoorDrawerStore
             FixErrorDataConfig(opt, DefaultDoorOption);
         }
 
-        if (opt.version <= 2)
+        if (opt.version < 3)
         {
             opt.version = 3;
             opt.upOffsetExpr = opt.topOffset.toString();
             opt.downOffsetExpr = opt.bottomOffset.toString();
             this.UpdateDoorDrawerVersionInfo(cof);
         }
-        else if (opt.version <= 3)
+        if (opt.version < 4)
         {
             opt.version = 4;
             opt.useRule = false;
         }
-        else if (opt.version <= 4)
+        if (opt.version < 5)
         {
             opt.version = 5;
             opt.frontAndBackDrill = false;
         }
+        if (opt.version < 6)
+        {
+            opt.version = 6;
+            opt.verticalBoardName = "立板";
+            opt.layerBoardName = "层板";
+            opt.lbSealedUp = 1;
+            opt.lbSealedDown = 1;
+            opt.lbSealedLeft = 1;
+            opt.lbSealedRight = 1;
+            opt.lbHightDrillOption = { up: "", down: "", left: "", right: "" };
+            opt.cbHightDrillOption = { up: "", down: "", left: "", right: "" };
+            let drilltypes = [...userConfig.DrillConfigs.keys(), "不排"];
+            Object.assign(opt.lbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
+            Object.assign(opt.cbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
+        }
     }
     get UIRule()
     {

src/UI/Store/DoorDrawerStore/DrawerStore.ts

@@ -1,6 +1,7 @@
 import { observable } from "mobx";
 import { safeEval } from "../../../Common/eval";
 import { DefaultDrawerOption } from "../../../Editor/DefaultConfig";
+import { userConfig } from "../../../Editor/UserConfig";
 import { IConfigOption } from "../../Components/Board/UserConfigComponent";
 import { FixErrorDataConfig } from "../BoardStore";
 import { IDrawerConfigOption } from "../DoorInterface";
@@ -45,6 +46,8 @@ export class DrawerStore extends DoorDrawerStore
     InitOption()
     {
         Object.assign(this.m_Option, DefaultDrawerOption);
+        let drilltypes = [...userConfig.DrillConfigs.keys(), "不排"];
+        Object.assign(this.m_Option.lbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
         super.InitOption();
         this.InitInfos();
     }
@@ -62,19 +65,32 @@ export class DrawerStore extends DoorDrawerStore
             opt.isLockTopOffset = false;
             opt.isLockBottomOffset = false;
         }
-        if (opt.version <= 2)
+        if (opt.version < 3)
         {
             opt.version = 3;
             FixErrorDataConfig(opt, DefaultDrawerOption);
         }
 
-        if (opt.version <= 3)
+        if (opt.version < 4)
         {
             opt.version = 4;
             opt.upOffsetExpr = opt.topOffset.toString();
             opt.downOffsetExpr = opt.bottomOffset.toString();
             this.UpdateDoorDrawerVersionInfo(cof);
         }
+
+        if (opt.version < 5)
+        {
+            opt.version = 5;
+            opt.verticalBoardName = "立板";
+            opt.lbSealedUp = 1;
+            opt.lbSealedDown = 1;
+            opt.lbSealedLeft = 1;
+            opt.lbSealedRight = 1;
+            opt.lbHightDrillOption = { up: "", down: "", left: "", right: "" };
+            let drilltypes = [...userConfig.DrillConfigs.keys(), "不排"];
+            Object.assign(opt.lbHightDrillOption, { up: drilltypes[0], down: drilltypes[0], left: drilltypes[0], right: drilltypes[0] });
+        }
     }
     SetDrawerDepth()
     {

src/UI/Store/DoorInterface.ts

@@ -1,4 +1,4 @@
-import { IBaseOption } from "./OptionInterface/IOptionInterface";
+import { IBaseOption, IHightDrillOption } from "./OptionInterface/IOptionInterface";
 import { ITemplateParam } from "./RightPanelStore/ITemplateParam";
 
 export interface IDoorAndDrawerConfigOption extends IBaseOption
@@ -19,6 +19,7 @@ export interface IDoorAndDrawerConfigOption extends IBaseOption
     leftSpace: number;//左预留间隙
     rightSpace: number;//右预留间隙
     midSpace: number;//中预留间隙
+    verticalBoardName: string; //立板名称
     thickness: number; //立板厚度
     depth: number; //立板深度
     isAuto: boolean; //智能识别
@@ -30,6 +31,11 @@ export interface IDoorAndDrawerConfigOption extends IBaseOption
     veSpacing: number;
     upOffsetExpr: string;
     downOffsetExpr: string;
+    lbSealedUp: number;//立板封边上下左右
+    lbSealedDown: number;
+    lbSealedLeft: number;
+    lbSealedRight: number;
+    lbHightDrillOption: IHightDrillOption; //立板高级排钻
 }
 
 /**
@@ -52,6 +58,8 @@ export interface IDoorConfigOption extends IDoorAndDrawerConfigOption
     useRule: boolean;
     changeTemplateBoardNameOfOpenDir: boolean;//使用模块时,修改板件名称
     frontAndBackDrill: boolean; //正反面排孔
+    layerBoardName: string;
+    cbHightDrillOption: IHightDrillOption; //层板高级排钻
 }
 
 /**