表单样式优化

src/Main.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import {Nav, Navbar} from "react-bootstrap";
+import {Button, Nav, Navbar} from "react-bootstrap";
 import {Manager} from "./Manager";
 import {User} from "./User";
 import {Active} from "./Active";
 import {Cookies} from "react-cookie";
+import {manager_cookie} from "./account/PropCookie";
+import {fontEnd} from "./api";
 
 /**
  * 菜单标记
@@ -92,6 +94,11 @@ export class Main extends React.Component<
                         <Nav.Item className="col-2">
                             <Nav.Link style={this.getMenuColor(Menu.active)} onClick={()=>this.changeMenu(Menu.active)}>活动管理</Nav.Link>
                         </Nav.Item>
+                        <Navbar.Text>
+                            欢迎管理员{this.props.cookies.get(manager_cookie)}登录
+                        </Navbar.Text>
+                        <Button variant="outline-info" className="ml-3" onClick={()=>window.location.href=fontEnd}>切换前台</Button>
+                        <Button variant="outline-primary" className="ml-3" onClick={()=>this.props.logout()}>注销登录</Button>
                     </Nav>
                 </Navbar>
                 {this.state.subMenu}

src/User.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Button, Form, Image, Tab, Table, Tabs} from "react-bootstrap";
+import {Button, Col, Form, Image, Row, Tab, Table, Tabs} from "react-bootstrap";
 import {PageProps, UserEntity, UserType} from "./entity";
 import {Input} from "./ui/InputGroup";
 import {JSONResponse, Method, request} from "./interface";
@@ -39,22 +39,32 @@ class EditUser extends React.Component<{
     render() {
         return (
             <Form>
-                <div className="text-center ml-auto mr-auto">
+                <Row>
-                    <UploadImg tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
+                    <Col className={"text-center"}>
+                        <UploadImg imgClass={"mt-3 col-12"} tip={"点击更新头像"} maxImageSize={maxImageSize} onChange={(value:string)=>
                             this.setState({ user:{...this.state.user,...{activityImgFile:value}}})} />
-                </div>
+                    </Col>
-                <Input name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
+                </Row>
+                <Row>
+                    <Col>
+                        <Input className={"mt-3 ml-auto"} name="name" desc="姓名" value={this.state.user.name} onChange={(value:string)=>
                             this.setState({
                             user:{...this.state.user,...{name:value}}
                         })} valid={{check:this.isNotEmpty(this.state.user.name)}}/>
+                    </Col>
 
-                <Input col={4} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
+                    <Col>
+                    <Input className={"mt-3 mr-auto"} name="age" desc="年龄" value={this.state.user.age+""} onChange={(value:string)=>
                         this.setState({
                             user:{...this.state.user,...{age:+value}}
                         })
-                } as={"select"} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
+                    } as={"select"} valid={{check:true}} options={this.ages.map(value=><option key={value} value={value}>{value}</option>)}/>
+                    </Col>
+                </Row>
 
-                <Input col={4} name="sex" desc="性别" as="select" value={this.state.user.sex} onChange={(value:string)=>{
+                <Row>
+                    <Col>
+                        <Input className={"mt-3 ml-auto"} valid={{check:this.state.user.sex!==""}} name="sex" desc="性别" as="select" value={this.state.user.sex} onChange={(value:string)=>{
                             this.setState({
                                 user:{...this.state.user,...{sex:value}}
                             })
@@ -63,20 +73,27 @@ class EditUser extends React.Component<{
                                    <option value="" key={"sex"+0}>请选择性别</option>,
                                    <option value="man" key={"sex"+1}>男</option>,
                                    <option value="women" key={"sex"+2}>女</option>]}/>
+                    </Col>
 
-                <Input name="address" desc="住址" value={this.state.user.address} onChange={(value:string)=>this.setState({
+                    <Col>
+                        <Input className={"mt-3 mr-auto"} name="address" desc="住址" value={this.state.user.address} onChange={(value:string)=>this.setState({
                         user:{...this.state.user,...{address:value}}
                     })} valid={{check:this.isNotEmpty(this.state.user.address)}}/>
+                    </Col>
+                </Row>
 
-                <div className="mt-3">
+                <Row>
-                    <Address value={this.state.user.serviceAddress} onChange={(value:string)=>
+
+                    <Col>
+                        <Address className={"mt-3 ml-auto"}  value={this.state.user.serviceAddress} onChange={(value:string)=>
                             this.setState({
                                 user:{...this.state.user,...{serviceAddress:value}}
                             })
                         }/>
-                </div>
+                    </Col>
 
-                <Input col={4} name="userType" desc="用户身份" as="select" value={this.state.user.userType} onChange={(value:string)=>
+                    <Col>
+                        <Input className={"mt-3 mr-auto"} name="userType" desc="用户身份" as="select" value={this.state.user.userType} onChange={(value:string)=>
                             this.setState({
                                 user:{...this.state.user,...{userType:value}}
                             })
@@ -84,26 +101,40 @@ class EditUser extends React.Component<{
                                options={[<option value="" key={"userType0"}>请选择用户身份</option>,
                                    <option key={"userType1"} value={UserType.seekHelp}>服务发起者</option>,
                                    <option key={"userType2"} value={UserType.help}>服务接收者</option>]}/>
+                    </Col>
+
+                </Row>
+
+                <Row>
 
-                <Input col={4} name="mobile" desc="电话" value={this.state.user.mobile} onChange={(value:string)=>
+                    <Col>
+                        <Input className={"mt-3 ml-auto"} name="mobile" desc="电话" maxLength={11} value={this.state.user.mobile} onChange={(value:string)=>
                             this.setState({
                                 user:{...this.state.user,...{mobile:value}}
                             })
                         } valid={{check:this.checkMobile()}}/>
+                    </Col>
 
-                <Input col={4} name="email" value={this.state.user.email} desc="邮箱" onChange={(value:string)=>
+                    <Col>
+                        <Input className={"mt-3 mr-auto"} name="email" value={this.state.user.email} desc="邮箱" onChange={(value:string)=>
                             this.setState({
                                 user:{...this.state.user,...{email:value}}
                             })
                         } valid={{check:this.checkEmail()}}/>
+                    </Col>
 
-                <Input col={7} name="info" desc="简介" value={this.state.user.info} as={"textarea"} onChange={(value:string)=>
+                </Row>
+
+                <Row>
+                    <Col>
+                        <Input className={"ml-auto mr-auto mt-3 pl-0 pr-0"} name="info" desc="简介" value={this.state.user.info} as={"textarea"} onChange={(value:string)=>
                             this.setState({
                             user:{...this.state.user,...{info:value}}
                         })
                         }
                         valid={{check:this.isNotEmpty(this.state.user.info)}}/>
-
+                    </Col>
+                </Row>
 
 
                 <Button variant="info" block={true} disabled={!this.check()} className={"ml-auto mr-auto mt-3 col-3"} onClick={()=>this.props.modifyUser(this.state.user)}>确认修改</Button>

src/entity.ts

@@ -75,12 +75,14 @@ export interface FormInputProps {
         valid?: String;
         invalid?: String;
     }
-    //bootstrap col
-    col?: number
     //长度
     maxLength?: number
     //选项
     options?:Array<JSX.Element>;
+    //bootstrap col
+    col?: number
+    //整体样式，若存在会覆盖col局部样式
+    className?:string;
 }
 
 /**
@@ -147,6 +149,8 @@ export interface MyDialogProps extends CloseDialogProps{
     content:JSX.Element|null;
     //弹窗状态
     open:boolean;
+    //窗口宽度
+    maxWidth?:number;
 }
 
 /**
@@ -197,6 +201,7 @@ export interface OnChangeAddress {
     onChange:Function;
     col?:number;
     value?:string;
+    className?:string;
 }
 
 export interface TimeScore {

src/ui/Address.tsx

@@ -40,7 +40,7 @@ export class Address extends React.Component<OnChangeAddress, { addressList:Arra
 
     render() {
         return (
-            <InputGroup className={"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
+            <InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text>服务地点</InputGroup.Text>
                 </InputGroup.Prepend>

src/ui/InputGroup.tsx

@@ -27,7 +27,7 @@ export class Input extends React.Component<FormInputProps, { undefined?:undefine
 
     render() {
         return (
-            <InputGroup className={"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
+            <InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
                 <InputGroup.Prepend>
                     <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                 </InputGroup.Prepend>

src/ui/MyDialog.tsx

@@ -6,14 +6,20 @@ import {MyDialogProps} from "../entity";
 import {CloseDialog} from "./CloseDialog";
 
 
-const EditDialogPaper=styled(Paper)({
-    maxWidth:1000
-})
 /**
  * 我的弹窗
  */
-export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefined }>{
+export class MyDialog extends React.Component<MyDialogProps, { defaultPaper:any }>{
 
+    private EditDialogPaper:any;
+
+    constructor(props: Readonly<MyDialogProps>) {
+        super(props);
+
+        this.EditDialogPaper=styled(Paper)({
+            maxWidth:this.props.maxWidth?this.props.maxWidth:600
+        })
+    }
 
     render() {
         return (
@@ -22,7 +28,7 @@ export class MyDialog extends React.Component<MyDialogProps, { undefined?:undefi
                 open={this.props.open}
                 PaperComponent={(props)=>
                     <Draggable handle={"#"+this.props.titleId} cancel={'[class*="MuiDialogContent-root"]'}>
-                        <EditDialogPaper  {...props} />
+                        {<this.EditDialogPaper {...props}/>}
                     </Draggable>}
                 aria-labelledby={this.props.titleId}
                 classes={{paper:"w-100"}}

src/ui/UploadImg.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Form, Image} from "react-bootstrap";
+import {Form, Image, Row} from "react-bootstrap";
 import path from "path";
 
 /**
@@ -16,6 +16,8 @@ export class UploadImg extends React.Component<
         };
         //上传事件
         onChange:Function;
+        //默认样式
+        imgClass?:string;
 }, {
     //imgObj
     imgObj?:any;
@@ -24,7 +26,7 @@ export class UploadImg extends React.Component<
 }>{
 
 
-    constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function }>) {
+    constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function; imgClass: string }>) {
         super(props);
 
         this.state={}
@@ -32,11 +34,11 @@ export class UploadImg extends React.Component<
 
     render() {
         return (
-            <div>
+            <Row>
                     {/*
                         预览背景图
                         */}
-                <Image className="mt-3 d-none" src={this.state.imgObj} onLoad={(s)=> {
+                <Image className="ml-auto mr-auto mt-3 d-none" src={this.state.imgObj} onLoad={(s)=> {
                     if (s.target instanceof HTMLImageElement) {
                         //限制图片显示大小
                         s.target.width = s.target.width > this.props.maxImageSize.width ? this.props.maxImageSize.width : s.target.width
@@ -47,7 +49,7 @@ export class UploadImg extends React.Component<
                 }/>
 
                 {/*上传背景图*/}
-                <div className="col-7 ml-auto mr-auto mt-3">
+                <div className={this.props.imgClass?this.props.imgClass:"col-7 ml-auto mr-auto mt-3"}>
                     <Form.File
                         label={this.state.imageName?path.basename(this.state.imageName.replace(/\\/g,'/')):this.props.tip}
                         custom
@@ -65,7 +67,7 @@ export class UploadImg extends React.Component<
                         }}
                     />
                 </div>
-            </div>
+            </Row>
         )
     }
 }