添加配置选择UI

src/UI/Components/Board/BehindBoardModal.tsx

@@ -76,7 +76,7 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                             }}
                             selectedValue={store.m_BoardOption.boardPosition}
                         >
-                            <Radio label="全部高度" value={BehindHeightPositon.AllHeight} />
+                            <Radio label="总高" value={BehindHeightPositon.AllHeight} />
                             <Radio label="靠上" value={BehindHeightPositon.ForTop} />
                             <Radio label="靠下" value={BehindHeightPositon.ForBottom} />
                         </RadioGroup>
@@ -84,7 +84,7 @@ export class BehindBoardModal extends React.Component<{ store?: BehindBoardStore
                             <SetBoardDataItem
                                 k="height"
                                 opt={store.m_BoardOption}
-                                title="板件高度"
+                                title="板高"
                                 isDisabled={store.m_BoardOption.boardPosition === BehindHeightPositon.AllHeight}
                             />
                             <SetBoardDataItem

src/UI/Components/Board/BoardModal.tsx

@@ -40,6 +40,8 @@ interface BoardModalProps
 */
 export const BoardModal = (props: BoardModalProps) =>
 {
+    let configs = new Map([["lr", []]]);
+
     let store = props.store;
     //模态框字典
     const m_ModalMap = new Map([
@@ -50,7 +52,10 @@ export const BoardModal = (props: BoardModalProps) =>
         [BoardModalType.Ve, <VerticalBoardModal store={store as VerticalBoardStore} />],
     ])
     return (
-        <div className="pt-dialog-container" id="behindBr" onKeyDown={(e) => e.stopPropagation()} >
+        <div
+            className="pt-dialog-container"
+            id="boardModal"
+            onKeyDown={(e) => e.stopPropagation()} >
             <div className="pt-dialog">
                 <div
                     className="pt-dialog-header"
@@ -75,16 +80,33 @@ export const BoardModal = (props: BoardModalProps) =>
                     }
                 </div>
                 <div className="pt-dialog-footer">
+                    <label className="pt-label pt-inline .modifier">
+                        <div className="cf-select">
+                            <label>选择配置</label>
+                            <input list="configs" />
+                            <datalist id="configs">
+                                <option value="Chrome" />>
+                                <option value="Firefox" />>
+                                <option value="Internet Explorer" />
+                                <option value="Opera" />>
+                                <option value="Safari" />>
+                                <option value="Microsoft Edge" />>
+                            </datalist>
+                        </div>
+                        <button type="button" className="pt-button pt-intent-success">保存</button>
+                        <button type="button" className="pt-button pt-intent-danger">删除</button>
+                    </label>
+
                     <div className="pt-dialog-footer-actions">
                         <Button
-                            className="LeftRightBtn"
+                            className="LeftRightBtn pt-intent-success"
                             text="确定"
                             onClick={() =>
                             {
                                 store.OnOk(ModalState.Ok);
                             }} />
 
-                        <Button className="LeftRightBtn" text="取消" onClick={() =>
+                        <Button className="LeftRightBtn pt-intent-danger" text="取消" onClick={() =>
                         {
                             store.OnOk(ModalState.Cancel);
                         }} />
@@ -95,3 +117,5 @@ export const BoardModal = (props: BoardModalProps) =>
         </div>
     );
 }
+
+

src/UI/Components/Board/VerticalBoardModal.tsx

@@ -92,7 +92,7 @@ export const VerticalBoardModal =
                                     )
                                 }
                             </div>
-                            <div>
+                            <div style={{ width: 100 }}>
                                 <Checkbox checked={brOpt.isTotalWidth} label="总深" onChange={() =>
                                 {
                                     brOpt.isTotalWidth = !brOpt.isTotalWidth;

src/UI/Components/Modal/Modal.css

@@ -44,25 +44,25 @@
 }
 
 /**************板件模态框样式*************/
-.boardRadio{
+#boardModal .boardRadio{
     display: flex;
     justify-content: flex-start;
 }
-.boardRadio>label{
+#boardModal .boardRadio>label{
     margin-right: 10px;
 }
-#behindBr .flexWrap{
+#boardModal .flexWrap{
     width: 200px;
 }
-#behindBr .flexWrap>div{
+#boardModal .flexWrap>div{
     width: 50%;
     line-height: 15px;
 }
-#behindBr .flexWrap>div .pt-input{
+#boardModal .flexWrap>div .pt-input{
     padding:0 0 0 5px;
     width: 60px; 
 }
-#behindBr .boardModel{
+#boardModal .boardModel{
     display: inline-block;
     width: 35px;
     height: 50px;
@@ -70,24 +70,51 @@
     vertical-align: middle;
     margin: 10px;
 }
-#behindBr .boardSize .pt-label{
+#boardModal .boardSize .pt-label{
     display: inline-block;
     margin: 0 5px;
 }
-#behindBr .boardSize .pt-inline{
+#boardModal .boardSize .pt-inline{
     line-height: 15px;
 }
 
-#behindBr .boardSize .pt-label>.pt-input{
+#boardModal .boardSize .pt-label>.pt-input{
     display: block;
     padding: 0;
     width: 50px;
     padding-left: 5px;
     line-height: 15px;
 }
-#behindBr .br-set{
+#boardModal .br-set{
     margin-bottom: 10px;
 }
-#behindBr .process-data .br-set>input{
+#boardModal .process-data .br-set>input{
     display: block;
 }
+#boardModal .pt-dialog{
+   padding: 0;
+}
+
+#boardModal .pt-dialog-footer{
+    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15);
+    background: #ffffff;
+    margin: 0;
+    padding:10px 20px;
+    border-radius:0 0 6px 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+#boardModal .pt-dialog-footer .pt-label{
+    margin: 0;
+}
+#boardModal .pt-dialog-footer .cf-select{
+    vertical-align: middle;
+    display: inline-block;
+}
+#boardModal .pt-dialog-footer .cf-select>input{
+    width: 60px;
+    height: 30px;
+}
+    
+