[new]提交

config/config.ts

@@ -2,6 +2,8 @@
 import { defineConfig } from 'umi';
 import defaultSettings from './defaultSettings';
 import proxy from './proxy';
+import component from '@/locales/en-US/component';
+import route from 'mock/route';
 
 const { REACT_APP_ENV } = process.env;
 
@@ -43,6 +45,11 @@ export default defineConfig({
           path: '/user/login',
           component: './user/login',
         },
+        {
+          name: 'login',
+          path: '/user/forget',
+          component: './user/login',
+        },
       ],
     },
     {
@@ -56,45 +63,134 @@ export default defineConfig({
           routes: [
             {
               path: '/',
-              redirect: '/welcome',
+              redirect: '/runTest',
             },
             {
-              path: '/welcome',
-              name: 'welcome',
-              icon: 'smile',
-              component: './Welcome',
+              path: '/runTest',
+              name: 'Monitoring Center',
+              icon: 'PieChartOutlined',
+              component: './runTest/Template',
             },
-            // {
-            //   path: '/runTest',
-            //   component: './runTest/Template',             
-            // },
             {
-              path: '/admin',
-              name: 'admin',
-              icon: 'crown',
-              component: './Admin',
-              authority: ['admin'],
+              path: '/UserManagement',
+              name: 'User Management',
+              icon:'ProfileOutlined',
               routes: [
                 {
-                  path: '/admin/sub-page',
-                  name: 'sub-page',
-                  icon: 'smile',
-                  component: './Welcome',
-                  authority: ['admin'],
+                  path: '/UserManagement/LIFEUserManagement',
+                  name: 'LIFE Users',
+                  component:'./UserManagement/LIFEUserManagement/LIFEUserManagement'
                 },
-              ],
+                {
+                  path: '/UserManagement/ServiceProviderManagement',
+                  name: 'Service Providers',
+                  component:'./UserManagement/ServiceProviderManagement/ServiceProviderManagement'
+                },
+              ]
             },
             {
-              name: 'welcome',
-              icon: 'table',
-              path: '/runTest',
-              component: './runTest/Template',
+              path: '/PropertyManagement/PropertyManagement',
+              name: 'Property Management',
+              icon:'ReconciliationOutlined',
+              component:'./runTest/Template'
             },
             {
-              name: 'welcome',
-              icon: 'table',
-              path: '/runTest2',
-              component: './runTest/Template',
+              path: '/CommercialService',
+              name: 'Commercial Service',
+              icon:'ConsoleSqlOutlined',
+              routes: [
+                {
+                  path: '/CommercialService/OwnerComplaints',
+                  name: 'Owner Complaints',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommercialService/ProblemFeedback',
+                  name: 'Problem Feedback',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommercialService/RenovationApplication',
+                  name: 'Renovation Application',
+                  component:'./runTest/Template'
+                },
+                                {
+                  path: '/CommercialService/AccessCardApplication',
+                  name: 'AccessCard Application',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommercialService/Report Online',
+                  name: 'Report Online',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommercialService/Shelf life Service',
+                  name: 'Shelf life Service',
+                  component:'./runTest/Template'
+                },
+              ]
+            },
+            {
+              path: '/OrderManagement/OrderManagement',
+              name: 'Order Management',
+              icon: 'ContainerOutlined',
+              component:'./runTest/Template'
+            },
+            {
+              path: '/ContractManagement/ContractManagement',
+              name: 'Contract Management',
+              icon: 'SwitcherOutlined',
+              component:'./runTest/Template'
+            },
+            {
+              path: '/CommunityManagement',
+              name: 'Community Management',
+              icon:'HddOutlined',
+              routes: [
+                {
+                  path: '/CommunityManagement/CellList',
+                  name: 'Cell List',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommunityManagement/CommunityAnnouncement',
+                  name: 'Community Announcement',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommunityManagement/FacilityBookings',
+                  name: 'Facility Bookings',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/CommunityManagement/VisitorRecord',
+                  name: 'Visitor Record',
+                  component:'./runTest/Template'
+                },
+              ]
+            },
+            {
+              path: '/AccountManagement',
+              name: 'Account Management',
+              icon:'UserSwitchOutlined',
+              routes: [
+                {
+                  path: '/AccountManagement/AccountManagement',
+                  name: 'Account Management',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/AccountManagement/CompanyInformation',
+                  name: 'Company Information',
+                  component:'./runTest/Template'
+                },
+                {
+                  path: '/AccountManagement/LanguageSettings',
+                  name: 'Language Settings',
+                  component:'./runTest/Template'
+                },
+              ]
             },
             {
               component: './404',

mock/user.ts

@@ -79,7 +79,7 @@ export default {
   ],
   'POST /api/login/account': (req: Request, res: Response) => {
     const { password, userName, type } = req.body;
-    if (password === 'ant.design' && userName === 'admin') {
+    if (password === 'admin' && userName === 'admin') {
       res.send({
         status: 'ok',
         type,

src/components/GlobalHeader/RightContent.tsx

@@ -27,10 +27,9 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
   if (theme === 'dark' && layout === 'topmenu') {
     className = `${styles.right}  ${styles.dark}`;
   }
-
   return (
     <div className={className}>
-      <HeaderSearch
+      {/* <HeaderSearch
         className={`${styles.action} ${styles.search}`}
         placeholder="站内搜索"
         defaultValue="umi ui"
@@ -52,8 +51,8 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
         // onSearch={value => {
         //   //console.log('input', value);
         // }}
-      />
-      <Tooltip title="使用文档">
+      /> */}
+      {/* <Tooltip title="使用文档">
         <a
           target="_blank"
           href="https://pro.ant.design/docs/getting-started"
@@ -62,14 +61,14 @@ const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
         >
           <QuestionCircleOutlined />
         </a>
-      </Tooltip>
+      </Tooltip> */}
       <Avatar />
       {REACT_APP_ENV && (
         <span>
           <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
         </span>
       )}
-      <SelectLang className={styles.action} />
+      {/* <SelectLang className={styles.action} /> */}
     </div>
   );
 };

src/components/GlobalHeader/index.less

@@ -14,7 +14,7 @@
 .right {
   display: flex;
   float: right;
-  height: @layout-header-height;
+  height: 64px;//@layout-header-height;
   margin-left: auto;
   overflow: hidden;
   .action {

src/components/SelectOptions/index.jsx

@@ -141,20 +141,20 @@ class SelectOptions extends React.Component {
 
             {
                     this.state.componetVisible=="展开"?
-                    <div style={{width:"100%",height:30, position:"relative"}}>
+                    <div style={{width:"100%",height:48, position:"relative"}}>
                     <div style={{ position:"absolute",left:5,top:5}}>已选{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div>
-                    <div style={{ position:"absolute",right:5,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
+                    <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
                     </div>
                     :
                     <div style={{width:"100%",backgroundColor:"#eeeeee"}}>
-                    <div style={{width:"100%",height:30, position:"relative"}}>
+                    <div style={{width:"100%",height:48, position:"relative"}}>
                     <div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?'全不选':'已选'}{this.state.resultList.length==this.props.list.length?'全部小区':getDotText(this.state.resultList)}</div>
-                    <div style={{ position:"absolute",right:5,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
+                    <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}</div>
                     </div>
                     <div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}>
                         <div style={{width:"100%",height:40, position:"relative"}}>
                             <div  style={{fontSize:14,position:"absolute"}}>
-                            <a style={{marginLeft:10}} onClick={this.itemSelectAll.bind(this)}>所有</a>
+                            <a style={{marginLeft:16}} onClick={this.itemSelectAll.bind(this)}>所有</a>
                             {
                                 menuListNormal.map((item, index) => {                                
                                     if(this.state.menuList.indexOf(item)>-1){
@@ -168,15 +168,15 @@ class SelectOptions extends React.Component {
                             <Checkbox style={{ position:"absolute",right:100}} indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>全选</Checkbox>          
                             <Checkbox style={{ position:"absolute",right:0}} onChange={this.onCheckAllChangeOver}  checked={this.state.checkNone} >全不选</Checkbox>
                         </div>
-                        <div style={{width:"100%",paddingLeft:10,paddingRight:10}}>
+                        <div style={{width:"100%",paddingLeft:16,paddingRight:16}}>
                             <div  style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}>
-                            <div><h1> </h1></div>
-                            <Input.Search placeholder="搜索小区" onSearch={this.getSearchValue.bind(this)} style={{width:200}} />
+                           
+                            <Input.Search placeholder="搜索小区" onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} />
                             <div><h1> </h1></div>
                             <CheckboxGroup
                                 options={ this.state.checkedListOptions}
                                 value={this.state.checkedList}
-                                onChange={this.onChangeValue}/>
+                                onChange={this.onChangeValue} style={{marginLeft:16}}/>
                              <div><h1> </h1></div>                                                                      
                             </div>                           
                         </div> 

src/layouts/BasicLayout.tsx

@@ -18,6 +18,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
 import { ConnectState } from '@/models/connect';
 import { getAuthorityFromRouter } from '@/utils/utils';
 import logo from '../assets/logo.svg';
+import tsIcon from '../assets/logo.png';
 
 const noMatch = (
   <Result
@@ -128,10 +129,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       logo={logo}
       formatMessage={formatMessage}
       menuHeaderRender={(logoDom, titleDom) => (
-        <Link to="/">
-          {logoDom}
-          {titleDom}
-        </Link>
+        <div style={{ marginLeft: -25, width: 260, height: 64, backgroundColor: "#ffffff",paddingLeft:16,paddingTop:10}}>
+          <img src={tsIcon} style={{width:50,height:50}}/><span style={{fontSize:18,fontFamily:"Source Han Sans CN",fontWeight:"bold",color:"rgba(51,51,51,1)"}}> TOS Management</span>
+        </div>
+        // <Link to="/">
+        //   {/* {logoDom} */}
+        //   {titleDom}
+        // </Link>
       )}
       onCollapse={handleMenuCollapse}
       menuItemRender={(menuItemProps, defaultDom) => {

src/layouts/SecurityLayout.tsx

@@ -36,11 +36,15 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
     const { children, loading, currentUser } = this.props;
     // You can replace it to your authentication rule (such as check token exists)
     // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
-    const isLogin = currentUser && currentUser.userid;
+    
+    const isLogin = currentUser && currentUser.userid;//isLogin为关键点
+  
+    
     const queryString = stringify({
       redirect: window.location.href,
     });
 
+
     if ((!isLogin && loading) || !isReady) {
       return <PageLoading />;
     }

src/layouts/UserLayout.less

@@ -6,6 +6,19 @@
   height: 100vh;
   overflow: auto;
   background: @layout-body-background;
+  background-image: url("../assets/background.png");
+  background-repeat: no-repeat;
+  background-position:  center left;
+  margin-left: -44px;
+}
+
+.contain{
+  width: 700px;
+  height: 300px;
+  position: absolute;
+  left: 207px;
+  top: 50vh;
+  margin-top: -297px;
 }
 
 .lang {
@@ -18,21 +31,25 @@
   }
 }
 
-.content {
-  flex: 1;
-  padding: 32px 0;
-}
 
-@media (min-width: @screen-md-min) {
+@media (min-width:1603px) {
   .container {
-    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+    background-image: url("../assets/background.png");
     background-repeat: no-repeat;
-    background-position: center 110px;
-    background-size: 100%;
+    background-position:  center center;
+    //background-size: 100%;
+    // background-size:100% 100%;
+    // background-attachment: fixed;
   }
 
-  .content {
-    padding: 32px 0 24px;
+  .contain{
+    width: 700px;
+    height: 300px;
+    position: absolute;
+    left: 50vw;
+    top:50vh;
+    margin-left: -639px;
+    margin-top: -297px;
   }
 }
 
@@ -69,3 +86,21 @@
   color: @text-color-secondary;
   font-size: @font-size-base;
 }
+
+.box1{
+
+  font-size:36px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(129,152,177,1);
+  line-height:48px;
+  margin-bottom: 26px;
+}
+.box2{
+  font-size:38px;
+  font-family:PingFang SC;
+  font-weight:800;
+  color:rgba(0,43,96,1);
+  line-height:48px;
+  margin-bottom: 89px;
+}
\ No newline at end of file

src/layouts/UserLayout.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import SelectLang from '@/components/SelectLang';
 import { ConnectState } from '@/models/connect';
 import logo from '../assets/logo.svg';
+
 import styles from './UserLayout.less';
 
 export interface UserLayoutProps extends Partial<ConnectProps> {
@@ -35,31 +36,15 @@ const UserLayout: React.FC<UserLayoutProps> = (props) => {
     ...props,
   });
   return (
-    <HelmetProvider>
-      <Helmet>
-        <title>{title}</title>
-        <meta name="description" content={title} />
-      </Helmet>
-
     <div className={styles.container}>
-        <div className={styles.lang}>
-          <SelectLang />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.top}>
-            <div className={styles.header}>
-              <Link to="/">
-                <img alt="logo" className={styles.logo} src={logo} />
-                <span className={styles.title}>Ant Design</span>
-              </Link>
-            </div>
-            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
-          </div>
+      
+      <div className={styles.contain}>
+        <div className={styles.box1}>Welcome To</div>
+        <div className={styles.box2}>TOS Management Background</div>
         {children}
       </div>
-        <DefaultFooter />
+      
     </div>
-    </HelmetProvider>
   );
 };
 

src/pages/Admin.tsx

-import React from 'react';
-import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
-import { Card, Typography, Alert } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-
-export default (): React.ReactNode => (
-  <PageHeaderWrapper content=" 这个页面只有 admin 权限才能查看">
-    <Card>
-      <Alert
-        message="umi ui 现已发布，欢迎使用 npm run ui 启动体验。"
-        type="success"
-        showIcon
-        banner
-        style={{
-          margin: -12,
-          marginBottom: 48,
-        }}
-      />
-      <Typography.Title level={2} style={{ textAlign: 'center' }}>
-        <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
-      </Typography.Title>
-    </Card>
-    <p style={{ textAlign: 'center', marginTop: 24 }}>
-      Want to add more pages? Please refer to{' '}
-      <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-        use block
-      </a>
-      。
-    </p>
-  </PageHeaderWrapper>
-);

src/pages/UserManagement/LIFEUserManagement/LIFEUserManagement.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
+
+import { Link, useIntl, connect, Dispatch ,getLocale, setLocale} from 'umi';
+
+
+const locales = ['zh-CN','en-US'];
+
+const LIFEUserManagement = () => {
+
+  const languageSelect = (e) => {
+      setLocale(locales[e.target.value])
+  };
+
+  const [curLang, setCurLang] = useState(0);
+
+  useEffect(() => {
+    if (getLocale() == "en-US") {   
+      setCurLang(1)
+    } else {
+      setCurLang(0)
+    }
+  }, [curLang]);
+  
+  return (
+    <div className={styles.base}>
+
+      <div className={styles.box}>Language Selection</div>
+      <Radio.Group onChange={languageSelect} value={curLang} >
+        <div className={styles.box}><Radio value={0}>Chinese</Radio></div>
+        <div className={styles.box}><Radio value={1}>English</Radio></div>
+      </Radio.Group>
+
+    </div>
+  );
+};
+
+
+export default LIFEUserManagement;

src/pages/UserManagement/LIFEUserManagement/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+.box{
+    margin-bottom: 28px;
+}
\ No newline at end of file

src/pages/UserManagement/ServiceProviderManagement/ServiceProviderManagement.tsx

+import React, { useState, useEffect } from 'react';
+
+import styles from './index.less';
+import { Input ,Menu,Table,Space} from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+import SelectOptions from '../../../components/SelectOptions/index';
+
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const ServiceProviderManagement = () => {
+  const { formatMessage } = useIntl();
+  
+  const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
+  const inputProject = formatMessage({ id: 'R.charge.input.project' })
+  const username = formatMessage({ id: 'R.charge.username' })
+  const project = formatMessage({ id: 'R.charge.project' })
+  const unit = formatMessage({ id: 'R.charge.unit' })
+  const status = formatMessage({ id: 'R.charge.status' })
+  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
+  const actions = formatMessage({ id: 'R.charge.actions' })
+  const search = formatMessage({ id: 'R.charge.search' })
+  const addaccount = formatMessage({ id: 'R.charge.addaccount' })
+  const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
+  
+  const menuListNormal = ["A"]
+  const [display, setDisplay] = useState("A");//小组件：线框
+  
+  const pagination={defaultCurrent:1,total: 16}
+
+  const columns = [
+    {
+      title: username,
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: project,
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: unit,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: status,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: submissionTime,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: actions,
+      key: 'action',
+      render: (text: any, record: any) => (
+        <Space size="middle">
+          <a>详情</a>
+        </Space>
+      ),
+    },
+  ];
+
+  const printContent = (comment: any)=>{
+    console.log(comment)
+  }
+  return (
+    <div className={styles.base}>       
+        {/* 头部组件 */}
+      <div className={styles.box}>
+        <input className={styles.item1} placeholder={nameofowner} />        
+      </div>
+      <SelectOptions  list={["美国","美丽的","美好","加拿大","加油","XO"].sort()}  onSubmit={printContent}/>
+      <button className={styles.item3}>{search}</button>
+          
+        {/* 内容组件 */}
+      <div className={styles.box2}>
+        <button className={styles.buttonAdd2} >Avail Services</button>
+        <button className={styles.buttonAdd} >Create New</button>
+      </div>   
+        
+      {/* 列表组件 */}
+      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
+      
+
+    </div>
+  );
+};
+
+
+export default ServiceProviderManagement;

src/pages/UserManagement/ServiceProviderManagement/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+}
+//边栏1
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.input{
+    width:200px;
+    height:32px;
+    background:none;
+    outline: none;
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+    font-size:14px;
+    font-weight:400;
+    line-height:30px;
+    text-indent: 19px;
+}
+.item1{
+    .input();
+}
+.item2{
+    .input();
+    margin-left: 20px;
+}
+.item3{
+    width:80px;
+    height:32px;
+    border:1px solid rgba(24,144,255,1);
+    border-radius:2px;
+    background-color:#e7f4ff;
+    outline: none;
+    font-size:14px;
+    font-weight:400;
+    color:rgba(24,144,255,1);
+    line-height:30px;
+    cursor: pointer;
+    margin-top: 16px;
+}
+.item3:active{
+    background-color:#ffffff;
+}
+
+//边栏2
+.box2{
+    width: 100%;
+    height: 40px;
+    margin-top: 0px;
+    position: relative;
+}
+
+//小组件1
+.buttonLine{
+    width:200px;
+    height:32px;
+    border:none;
+    background:none;
+    outline: none;
+    font-size:14px;
+    font-weight:400;    
+    line-height:30px;
+    cursor: pointer;
+}
+.buttonWait{
+    .buttonLine();
+    border-bottom:2px solid#dedede;
+    color:#454545;
+}
+.buttonWait:hover{
+    border-bottom:3px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);   
+}
+.buttonChoose{
+    .buttonLine();
+    border-bottom:3px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);
+}
+
+
+.buttonAdd{
+    background:none;
+    outline: none;    
+    cursor: pointer;
+    font-size:14px;
+    width:154px;
+    height:32px;
+    border:1px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);
+    border-radius:2px;
+    position: absolute;
+    right: 0;
+}
+.buttonAdd2{
+    .buttonAdd();
+    right: 168px;
+}
+

src/pages/Welcome.less

-@import '~antd/lib/style/themes/default.less';
-
-.pre {
-  margin: 12px 0;
-  padding: 12px 20px;
-  background: @input-bg;
-  box-shadow: @card-shadow;
-}

src/pages/Welcome.tsx

-import React from 'react';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Card, Typography, Alert } from 'antd';
-import styles from './Welcome.less';
-
-const CodePreview: React.FC<{}> = ({ children }) => (
-  <pre className={styles.pre}>
-    <code>
-      <Typography.Text copyable>{children}</Typography.Text>
-    </code>
-  </pre>
-);
-
-export default (): React.ReactNode => (
-  <PageHeaderWrapper>
-    <Card>
-      <Alert
-        message="umi ui 现已发布，点击右下角 umi 图标即可使用"
-        type="success"
-        showIcon
-        banner
-        style={{
-          margin: -12,
-          marginBottom: 24,
-        }}
-      />
-      <Typography.Text strong>
-        <a target="_blank" rel="noopener noreferrer" href="https://pro.ant.design/docs/block">
-          基于 block 开发，快速构建标准页面
-        </a>
-      </Typography.Text>
-      <CodePreview> npm run ui</CodePreview>
-      <Typography.Text
-        strong
-        style={{
-          marginBottom: 12,
-        }}
-      >
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://pro.ant.design/docs/available-script#npm-run-fetchblocks"
-        >
-          获取全部区块
-        </a>
-      </Typography.Text>
-      <CodePreview> npm run fetch:blocks</CodePreview>
-    </Card>
-    <p
-      style={{
-        textAlign: 'center',
-        marginTop: 24,
-      }}
-    >
-      Want to add more pages? Please refer to{' '}
-      <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-        use block
-      </a>
-      。
-    </p>
-  </PageHeaderWrapper>
-);

src/pages/runTest/Template.tsx

 import React, { useState, useEffect } from 'react';
 import styles from './index.less';
-import { Input ,Menu,Table,Space,Pagination,Tooltip } from 'antd';
+import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd';
 
 import { Link, useIntl, connect, Dispatch } from 'umi';
 
 
+import {
+  PlusCircleOutlined,
+} from '@ant-design/icons';
+
 
 const Template = () => {
 
+
+  const [state, setState] = useState(false)
+  const [state2,setState2] = useState(false)
+  const [currentvalue, setCurrentvalue] = useState('')
+  
+  const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
+  const showModal = (value,e) => {
+    setState(true)
+    setCurrentvalue(value)
+  };
+
+  const handleOk = (e) => {
+    setState(false)
+    let serviceNew = service
+    Array.prototype.remove = function(val) {
+      var index = this.indexOf(val);      
+      if (index > -1) {
+        this.splice(index, 1);      
+      }      
+    };
+    serviceNew.remove(currentvalue)
+    setServices(serviceNew)
+  };
+
+  const handleCancel = (e) => {
+    setState(false)
+  };
+  
+  const addModal = (e) => {
+    setState2(true)
+  };
+
+  const handleOk2 =(e) => {
+    setState2(false);
+    let serviceNew = service
+    serviceNew.push(currentvalue)
+    setServices(serviceNew)
+  };
+
+  const handleCancel2 = (e) => {
+    setState2(false)
+  };
+  
+  const changeCurentvalue = (e) => {
+     setCurrentvalue(e.target.value)
+  }
+  
   return (
     <div className={styles.base}>
 
       {/* 头部组件 */}
       <div className={styles.box}>
-        <div className={styles.item1}>Payment Settings</div>
+        <div className={styles.item1}>Services Available Management</div>
         <button className={styles.item3}>返回</button>
       </div>
     
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Services Available</div>
+        <div className={styles.box1item2}>
+          {    
+            service.map((item, index) => {                                
+            return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
+            })
+          }     
+          <div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}}  onClick={addModal} /></div>
+        </div>
+      </div>
+      <div style={{ clear:"both"}}></div>
+      <div className={styles.line}></div>
+      <Button type="primary" size="large">提交</Button>
+
+      <div>            
+        <Modal  title="删除该选项" visible={state}  onOk={handleOk}  onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
+          <p>is delete service?</p>
+        </Modal>
+            
+        <Modal  title="新增该选项" visible={state2}  onOk={handleOk2}  onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
+          <Input style={{width:300}} onChange={changeCurentvalue} />
+        </Modal>
+      </div>
+
     </div>
   );
 };
 
 
 export default Template;
+
+
+
+
+

src/pages/runTest/index.less

@@ -16,7 +16,7 @@
 }
 .item1{
     position: absolute;
-    width: 180px;
+    width: 400px;
     text-align: center;
     border-left: 5px solid rgba(24,144,255,1);
     font-family:'Source Han Sans CN';
@@ -38,3 +38,67 @@
     border:1px solid rgba(217,217,217,1);
     border-radius:2px;
 }
+
+
+.box1{
+    width: 780px;
+    position: relative; 
+    margin-bottom: 28px;
+}
+.box1item1{
+    position: absolute;
+    line-height: 34px;
+}
+.box1item2{
+    padding-left: 167px;
+}
+.item2x0{
+    width: 120px;
+    height: 34px;
+    background-color: rgba(238,238,238,1);
+    border: 1px solid rgba(217,217,217,1);
+    float: left;
+    text-align: center;
+    line-height: 34px;
+    margin: 10px;       
+}
+.item2x1{
+    width: 120px;
+    height: 34px;
+    border: 1px solid rgba(217,217,217,1);
+    float: left;
+    text-align: center;
+    line-height: 34px;
+    margin: 10px;
+    cursor: pointer; 
+}
+.item2x1:hover{
+    width: 120px;
+    height: 34px;
+    border: 1px solid rgba(24,144,255,1);
+    float: left;
+    text-align: center;
+    line-height: 34px;
+    margin: 10px;
+    cursor: pointer; 
+}
+.item2x3{
+    width: 120px;
+    height: 34px;
+    float: left;
+    text-align: center;
+    line-height: 34px;
+    margin: 10px;
+}
+
+
+// 线栏
+.line{
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid rgba(217,217,217,1);
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+

src/pages/template/公司信息/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Button } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+
+
+const Template = () => {
+
+  return (
+    <div className={styles.base}>
+
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Management Company</div>
+        <div className={styles.box1item2}>Singapore Management Company</div>
+        <div className={styles.box1item3}>  <Button>Edit</Button></div>    
+      </div>
+          
+      <div className={styles.box2}>
+          <div className={styles.box2item1}>Contact Number</div>
+          <div className={styles.box2item2}><Input style={{width:200}} /></div>
+      </div>
+        <div className={styles.box2}>
+          <div className={styles.box2item1}>Contact Email</div>
+        <div className={styles.box2item2}><Input style={{width:200}}/></div>
+      </div>
+      
+    </div>
+  );
+};
+
+
+export default Template;

src/pages/template/公司信息/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+.box1{
+    width: 100%;
+    height: 34px;
+    position: relative;
+    margin-bottom: 28px;
+}
+.box1item1{
+    position: absolute;
+}
+.box1item2{
+    position: absolute;
+    left: 197px;
+}
+.box1item3{
+    position: absolute;
+    right: 0;
+}
+
+
+.box2{
+    width: 100%;
+    height: 34px;
+    position: relative;
+    margin-bottom: 28px;
+}
+.box2item1{
+    position: absolute;
+}
+.box2item2{
+    position: absolute;
+    left: 158px;
+}
\ No newline at end of file

src/pages/template/后台账号添加/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+import SelectOptions from '../../components/SelectOptions/index';
+
+const printContent = (comment: any)=>{
+    console.log(comment)
+}
+
+
+
+const Template = () => {
+
+  return (
+    <div className={styles.base}>
+
+            {/* 头部组件 */}
+      <div className={styles.box}>
+        <div className={styles.item1}>Add Admin Account</div>        
+        <button className={styles.item3}>返回</button>
+      </div>
+      
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Account ID</div>
+        <div className={styles.box1item2}><Input/></div>        
+      </div>
+
+      <div className={styles.box2}>
+        <div className={styles.box2item1}>Administrator Name</div>
+        <div className={styles.box2item2}><Input/></div> 
+        <div className={styles.box2item3}>Contact Details</div>
+        <div className={styles.box2item4}><Input/></div>    
+      </div>
+          
+        <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
+      
+      <div className={styles.box3}>
+        <div className={styles.box3item1}>Permission Configuration</div>        
+        <div className={styles.box3item2}>
+          <div className={styles.box3item2R}><Radio>Secondary Administrator</Radio></div>
+          <div className={styles.box3item2R}><Radio>Three Level Administrator</Radio></div>
+          <div className={styles.box3item2R}><Radio>Select All</Radio></div>                         
+        </div>
+        <div className={styles.box3item3}>
+            <Input />
+        </div>        
+      </div>
+
+    </div>
+  );
+};
+
+
+export default Template;

src/pages/template/后台账号添加/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.item1{
+    position: absolute;
+    width: 320px;
+    text-align: center;
+    border-left: 5px solid rgba(24,144,255,1);
+    font-family:'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+
+}
+.item3{
+    width:80px;
+    height: 32px;
+    position: absolute;
+    right: 0;
+
+    outline: none;
+    background:none;
+    cursor: pointer;
+
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+}
+
+
+.box1{
+    width: 100%;
+    height: 34px;
+    position: relative;    
+    margin-bottom: 28px;
+}
+.box1item1{
+    position: absolute;
+}
+.box1item2{
+    position: absolute;
+    left: 182px;
+}
+
+.box2{
+    width: 100%;
+    height: 34px;
+    position: relative;  
+    margin-bottom: 28px;  
+}
+.box2item1{
+    position: absolute;
+}
+.box2item2{
+    position: absolute;
+    left: 182px;
+}
+.box2item3{
+    position: absolute;
+    left: 537px;
+}
+.box2item4{
+    position: absolute;
+    left: 652px;
+}
+
+.box3{
+    width: 100%;
+    position: relative;
+    margin-top: 20px;
+}
+.box3item1{
+    position: absolute;
+}
+.box3item2{
+    padding-left: 182px;
+}
+.box3item2R{
+    bottom: 20px;
+}
+.box3item3{
+    position: absolute;
+    left: 435px;
+    top:19px;
+}
\ No newline at end of file

src/pages/template/小区公告列表/Template.tsx

+import React, { useState, useEffect } from 'react';
+
+import styles from './index.less';
+import { Input ,Menu,Table,Space} from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const ChargeManager = () => {
+  const { formatMessage } = useIntl();
+  
+  const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
+  const inputProject = formatMessage({ id: 'R.charge.input.project' })
+  const username = formatMessage({ id: 'R.charge.username' })
+  const project = formatMessage({ id: 'R.charge.project' })
+  const unit = formatMessage({ id: 'R.charge.unit' })
+  const status = formatMessage({ id: 'R.charge.status' })
+  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
+  const actions = formatMessage({ id: 'R.charge.actions' })
+  const search = formatMessage({ id: 'R.charge.search' })
+  const addaccount = formatMessage({ id: 'R.charge.addaccount' })
+  const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
+  
+  const menuListNormal = ["A"]
+  const [display, setDisplay] = useState("A");//小组件：线框
+  
+  const pagination={defaultCurrent:1,total: 16}
+
+  const columns = [
+    {
+      title: username,
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: project,
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: unit,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: status,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: submissionTime,
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: actions,
+      key: 'action',
+      render: (text: any, record: any) => (
+        <Space size="middle">
+          <a>详情</a>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.base}>       
+        {/* 头部组件 */}
+      <div className={styles.box}>
+        <input className={styles.item1} placeholder={nameofowner} />
+        <input className={styles.item2} placeholder={inputProject} />
+        <input className={styles.item4} placeholder="" />
+        <button className={styles.item3}>{search}</button>
+      </div>
+
+        {/* 内容组件 */}
+      <div className={styles.box2}>
+        <button className={styles.buttonAdd} >{paymentsetting}</button>
+      </div>   
+        
+      {/* 列表组件 */}
+      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
+      
+
+    </div>
+  );
+};
+
+
+export default ChargeManager;

src/pages/template/小区公告列表/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+}
+//边栏1
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.input{
+    width:200px;
+    height:32px;
+    background:none;
+    outline: none;
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+    font-size:14px;
+    font-weight:400;
+    line-height:30px;
+    text-indent: 19px;
+}
+.item1{
+    .input();
+}
+.item2{
+    .input();
+    margin-left: 20px;
+}
+.item4{
+    .input();
+    margin-left: 20px; 
+}
+.item3{
+    width:80px;
+    height:32px;
+    border:1px solid rgba(24,144,255,1);
+    border-radius:2px;
+    background-color:#e7f4ff;
+    outline: none;
+    font-size:14px;
+    font-weight:400;
+    color:rgba(24,144,255,1);
+    line-height:30px;
+    cursor: pointer;
+    margin-left: 20px;
+}
+.item3:active{
+    background-color:#ffffff;
+}
+
+//边栏2
+.box2{
+    width: 100%;
+    height: 40px;
+    margin-top: 0px;
+    position: relative;
+}
+
+//小组件1
+.buttonLine{
+    width:200px;
+    height:32px;
+    border:none;
+    background:none;
+    outline: none;
+    font-size:14px;
+    font-weight:400;    
+    line-height:30px;
+    cursor: pointer;
+}
+.buttonWait{
+    .buttonLine();
+    border-bottom:2px solid#dedede;
+    color:#454545;
+}
+.buttonWait:hover{
+    border-bottom:3px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);   
+}
+.buttonChoose{
+    .buttonLine();
+    border-bottom:3px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);
+}
+
+
+.buttonAdd{
+    background:none;
+    outline: none;    
+    cursor: pointer;
+    width:148px;
+    height:32px;
+    border:1px solid rgba(24,144,255,1);
+    color:rgba(24,144,255,1);
+    border-radius:2px;
+    position: absolute;
+    right: 0;
+}
+.buttonAdd2{
+    .buttonAdd();
+    right: 168px;
+}
+

src/pages/template/小区公告添加/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Menu,DatePicker,Upload,Modal, Button } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+import TextArea from 'antd/lib/input/TextArea';
+
+import { PlusOutlined } from '@ant-design/icons';
+
+import SelectOptions from '../../components/SelectOptions/index';
+const printContent = (comment: any)=>{
+  console.log(comment)
+}
+
+function getBase64(file: Blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+const Template = () => {
+
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState("");
+  const [previewTitle, setPreviewTitle] = useState("");
+  const [fileList, setFileList] = useState([]);
+  
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div className="ant-upload-text">Upload</div>
+    </div>
+    );
+    
+  const handleCancel = () =>{ setPreviewVisible(false) };
+
+  const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
+    if (!file.url && !file.preview) {
+      file.preview =  await getBase64(file.originFileObj);
+    }
+
+    setPreviewImage((file.url || file.preview));
+    setPreviewVisible(true);
+    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
+  };
+
+    const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
+    
+  return (
+    <div className={styles.base}>
+
+            {/* 头部组件 */}
+      <div className={styles.box}>
+        <div className={styles.item1}>Community Announcement</div>
+        <button className={styles.item3}>返回</button>
+      </div>
+      
+      <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />   
+      
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Announcement Title</div>
+        <div className={styles.box1item2}><Input style={{width:500}}/></div>
+      </div>
+      <div className={styles.box2}>
+        <div className={styles.box2item1}>Announcement Title</div>
+        <div className={styles.box2item2}><TextArea autoSize={false} style={{width:500,height:120}} /></div>
+      </div>
+          
+      <div className={styles.box3}>
+        <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
+                  {fileList.length >= 3 ? null : uploadButton}
+                </Upload>              
+                <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
+                  <img alt="picture" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+      </div>
+      
+      < div className = { styles.box4 } >
+        <div className={styles.box4item1}>Entry into Force Time</div>
+        <div className={styles.box4item2}><DatePicker/></div>
+      </div>
+
+      < div className = { styles.box4 } >
+        <div className={styles.box4item1}>End Date</div>
+        <div className={styles.box4item2}><DatePicker/></div>
+      </div>
+
+      <div className={styles.line}></div>
+      <Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
+    </div>
+  );
+};
+
+
+export default Template;

src/pages/template/小区公告添加/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.item1{
+    position: absolute;
+    width: 320px;
+    text-align: center;
+    border-left: 5px solid rgba(24,144,255,1);
+    font-family:'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+
+}
+.item3{
+    width:80px;
+    height: 32px;
+    position: absolute;
+    right: 0;
+
+    outline: none;
+    background:none;
+    cursor: pointer;
+
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+}
+
+.box1{
+    width: 100%;
+    height: 34px;
+    position: relative;
+    margin-bottom: 28px;
+    margin-top: 28px;
+}
+.box1item1{
+    position: absolute;
+}
+.box1item2{
+    position: absolute;
+    left: 206px;
+}
+
+.box2{
+    width: 100%;
+    height: 120px;
+    position: relative;
+    margin-bottom: 17px;
+}
+.box2item1{
+    position: absolute;
+}
+.box2item2{
+    position: absolute;
+    left: 206px;
+}
+
+.box3{
+    padding-left: 206px;
+    margin-bottom: 28px;
+}
+
+.box4{
+    width: 100%;
+    height: 34px;
+    position: relative;
+}
+.box4item1{
+    position: absolute;
+}
+.box4item2{
+    position: absolute;
+    left: 206px;
+}
+
+// 线栏
+.line{
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid rgba(217,217,217,1);
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
\ No newline at end of file

src/pages/template/服务商编辑/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+import SelectOptions from '../../components/SelectOptions/index';
+
+const Template = () => {
+
+  
+const printContent = (comment: any)=>{
+  console.log(comment)
+  }
+  
+  return (
+    <div className={styles.base}>
+
+            {/* 头部组件 */}
+      <div className={styles.box}>
+        <div className={styles.item1}>Edit Service Provider</div>
+        <button className={styles.item3}>返回</button>
+      </div>
+      
+     
+
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Company Name</div>
+        <div className={styles.box1item2}><Input style={{width:260}} placeholder="Please enter company name"/></div>
+        <div className={styles.box1item3}>Office Address</div>
+        <div className={styles.box1item4}><Input style={{width:200}} placeholder="Single Line Input"/></div>
+      </div>
+
+      <div className={styles.line}></div>
+      
+      <SelectOptions list={["美国", "美丽的", "美好", "加拿大", "加油", "XO"].sort()} onSubmit={printContent} />
+
+      <div className={styles.box2}>
+        <div className={styles.box2item1}>Services Available</div>
+        <div className={styles.box2item2}><Checkbox.Group options={ ["Cleaning", "Security Guard", "Maintenance",]} /></div>
+      </div>
+
+      <div className={styles.box3}>
+        <div className={styles.box3item1}>Person In Charge</div>
+        <div className={styles.box3item2}><Input style={{width:200}} placeholder="Please enter a name"/></div>
+      </div>
+
+      <div className={styles.box4}>
+        <div className={styles.box4item1}>Contact Details</div>
+        <div className={styles.box4item2}><Input style={{width:200}} placeholder="Telephone"/></div>
+        <div className={styles.box4item3}><Input style={{width:200}} placeholder="E-mail"/></div>
+      </div>
+
+      
+      <div className={styles.line}></div>
+      <Button type="primary" >提交</Button>
+    </div>
+  );
+};
+
+
+export default Template;
+
+
+ 
\ No newline at end of file

src/pages/template/服务商编辑/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.item1{
+    position: absolute;
+    width: 400px;
+    text-align: center;
+    border-left: 5px solid rgba(24,144,255,1);
+    font-family:'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+
+}
+.item3{
+    width:80px;
+    height: 32px;
+    position: absolute;
+    right: 0;
+
+    outline: none;
+    background:none;
+    cursor: pointer;
+
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+}
+
+
+.box1{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+}
+.box1item1{
+    position: absolute;
+}
+.box1item2{
+    position: absolute;
+    left: 154px;
+}
+.box1item3{
+    position: absolute;
+    left: 529px;
+}
+.box1item4{
+    position: absolute;
+    left: 650px;
+}
+
+// 线栏
+.line{
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid rgba(217,217,217,1);
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+.box2{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+    margin-top: 28px;
+}
+.box2item1{
+    position: absolute;
+}
+.box2item2{
+    position: absolute;
+    left: 192px;
+}
+
+.box3{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box3item1{
+    position: absolute;
+}
+.box3item2{
+    position: absolute;
+    left: 189px;
+}
+
+.box4{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+}
+.box4item1{
+    position: absolute;
+}
+.box4item2{
+    position: absolute;
+    left: 189px;
+}
+.box4item3{
+    position: absolute;
+    left: 405px;
+}
+
+.box5{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+}
+.box5item1{
+    position: absolute;
+}
+.box5item2{
+    position: absolute;
+    left: 189px;
+}
+.box5item3{
+    position: absolute;
+    left: 405px;
+}
+
+
+.box6{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+}
+.box6item1{
+    position: absolute;
+}
+.box6item2{
+    position: absolute;
+    left: 189px;
+}
+.box6item3{
+    position: absolute;
+    left: 405px;
+}
+
+
+.box7{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+}
+.box7item1{
+    position: absolute;
+}
+.box7item2{
+    position: absolute;
+    left: 189px;
+}
+.box7item3{
+    position: absolute;
+    left: 405px;
+}

src/pages/template/服务商详情/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const Template = () => {
+
+
+  const pagination={defaultCurrent:1,total: 16}
+
+  const columns = [
+    {
+      title: "username",
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: "project",
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: "unit",
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: "status",
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: "submissionTime",
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: "actions",
+      key: 'action',
+      render: (text: any, record: any) => (
+        <Space size="middle">
+          <a>详情</a>
+        </Space>
+      ),
+    },
+  ];
+  
+  return (
+    <div className={styles.base}>
+
+            {/* 头部组件 */}
+      <div className={styles.box}>
+        <div className={styles.item1}>Service Provider Details</div>
+        <button className={styles.item3}>返回</button>
+      </div>
+      
+     
+      <div className={styles.box1}>
+        <div className={styles.box1item1}>Company Name</div>
+        <div className={styles.box1item2}>Free Limited</div>
+      </div>
+
+      <div className={styles.box2}>
+        <div className={styles.box2item1}>Office Address</div>
+        <div className={styles.box2item2}>Albert Street, 175, Singapore, Albert, Bugis, Victoria Street, </div>
+      </div>
+
+      <div className={styles.box3}>
+        <div className={styles.box3item1}>Person In Charge</div>
+        <div className={styles.box3item2}>Bellamy</div>
+      </div>
+      <div className={styles.box4}>
+        <div className={styles.box4item1}>Contact Details</div>
+        <div className={styles.box4item2}>18205462231 371712650@qq.com</div>
+      </div>
+
+      <div className={styles.box5}>
+        <div className={styles.box5item1}>Services Available</div>
+        <div className={styles.box5item2}>Cleaning，Security Guard</div>
+      </div>
+
+      <div className={styles.box6}>
+        <div className={styles.box1item1}>Service Community</div>
+      </div>
+
+      <div className={styles.box7}>
+        <div className={styles.box1item1}>Security Guard Account</div>
+      </div>
+
+      {/* 列表组件 */}
+      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
+      
+      <Button >Cancellation</Button>
+
+    </div>
+  );
+};
+
+
+export default Template;
\ No newline at end of file

src/pages/template/服务商详情/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+//头部组件
+.box{
+    width: 100%;
+    height: 64px;
+    position: relative;
+}
+.item1{
+    position: absolute;
+    width: 400px;
+    text-align: center;
+    border-left: 5px solid rgba(24,144,255,1);
+    font-family:'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+
+}
+.item3{
+    width:80px;
+    height: 32px;
+    position: absolute;
+    right: 0;
+
+    outline: none;
+    background:none;
+    cursor: pointer;
+
+    border:1px solid rgba(217,217,217,1);
+    border-radius:2px;
+}
+
+
+.box1{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box1item1{
+    position: absolute;
+}
+.box1item2{
+    position: absolute;
+    left: 196px;
+}
+
+
+// 线栏
+.line{
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid rgba(217,217,217,1);
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+
+.box2{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box2item1{
+    position: absolute;
+}
+.box2item2{
+    position: absolute;
+    left: 196px;
+}
+
+.box3{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box3item1{
+    position: absolute;
+}
+.box3item2{
+    position: absolute;
+    left: 196px;
+}
+
+
+.box4{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box4item1{
+    position: absolute;
+}
+.box4item2{
+    position: absolute;
+    left: 196px;
+}
+
+.box5{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box5item1{
+    position: absolute;
+}
+.box5item2{
+    position: absolute;
+    left: 196px;
+}
+
+
+.box6{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box6item1{
+    position: absolute;
+}
+.box6item2{
+    position: absolute;
+    left: 196px;
+}
+
+.box7{
+    width: 100%;
+    height: 34px;
+    position: relative; 
+    line-height: 34px;
+    margin-bottom: 28px;
+}
+.box7item1{
+    position: absolute;
+}
+.box7item2{
+    position: absolute;
+    left: 196px;
+}

src/pages/template/模板/Template.tsx

@@ -13,10 +13,12 @@ const Template = () => {
 
             {/* 头部组件 */}
       <div className={styles.box}>
-        <div className={styles.item1}>Payment Settings</div>
+        <div className={styles.item1}>Edit Service Provider</div>
         <button className={styles.item3}>返回</button>
       </div>
       
+
+
     </div>
   );
 };

src/pages/template/模板/index.less

@@ -38,3 +38,4 @@
     border:1px solid rgba(217,217,217,1);
     border-radius:2px;
 }
+

src/pages/template/物业费管理/ChargeManager.tsx

@@ -92,7 +92,7 @@ const ChargeManager = () => {
       </div>   
         
       {/* 列表组件 */}
-      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />;
+      <Table style={{ marginTop: 16 }} dataSource={dataSource} columns={columns} pagination={pagination} />
       
 
     </div>

src/pages/template/语言设置/Template.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Radio } from 'antd';
+
+import { Link, useIntl, connect, Dispatch ,getLocale, setLocale} from 'umi';
+
+
+const locales = ['zh-CN','en-US'];
+
+const Template = () => {
+
+  const languageSelect = (e) => {
+      setLocale(locales[e.target.value])
+  };
+
+  const [curLang, setCurLang] = useState(0);
+
+  useEffect(() => {
+    if (getLocale() == "en-US") {   
+      setCurLang(1)
+    } else {
+      setCurLang(0)
+    }
+  }, [curLang]);
+  
+  return (
+    <div className={styles.base}>
+
+      <div className={styles.box}>Language Selection</div>
+      <Radio.Group onChange={languageSelect} value={curLang} >
+        <div className={styles.box}><Radio value={0}>Chinese</Radio></div>
+        <div className={styles.box}><Radio value={1}>English</Radio></div>
+      </Radio.Group>
+
+    </div>
+  );
+};
+
+
+export default Template;

src/pages/template/语言设置/index.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+.box{
+    margin-bottom: 28px;
+}
\ No newline at end of file

src/pages/user/login/index.tsx

-import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } from '@ant-design/icons';
-import { Alert, Checkbox } from 'antd';
-import React, { useState } from 'react';
-import { Link, connect, Dispatch } from 'umi';
+import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined,ArrowLeftOutlined } from '@ant-design/icons';
+import { Alert, Checkbox, Input } from 'antd';
+import React, { useState,useEffect } from 'react';
+import { Link, connect, Dispatch,history, Redirect } from 'umi';
 import { StateType } from '@/models/login';
 import { LoginParamsType } from '@/services/login';
 import { ConnectState } from '@/models/connect';
 import LoginForm from './components/Login';
 
 import styles from './style.less';
+import e from 'express';
 
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginForm;
 interface LoginProps {
@@ -16,115 +17,79 @@ interface LoginProps {
   submitting?: boolean;
 }
 
-const LoginMessage: React.FC<{
-  content: string;
-}> = ({ content }) => (
-  <Alert
-    style={{
-      marginBottom: 24,
-    }}
-    message={content}
-    type="error"
-    showIcon
-  />
-);
-
 const Login: React.FC<LoginProps> = (props) => {
   const { userLogin = {}, submitting } = props;
   const { status, type: loginType } = userLogin;
-  const [autoLogin, setAutoLogin] = useState(true);
   const [type, setType] = useState<string>('account');
 
+  const [userName, setUsername] = useState("");
+  const [password, setPasswd] = useState("");
+
   const handleSubmit = (values: LoginParamsType) => {
     const { dispatch } = props;
+    console.log({ ...values, type,userName,password })
     dispatch({
       type: 'login/login',
-      payload: { ...values, type },
+      payload: { ...values, type,userName,password },
     });
   };
+  const usernameHandle = (e: any) => {
+    setUsername(e.target.value)
+  }
+  const passwdHandle = (e: any) => {
+    setPasswd(e.target.value)
+  }
+
+  const returnHandle = (e: any)=> {
+    history.push("/user/login")
+  }
+  const gotoForgetHandle = (e: any)=> {
+    history.push("/user/forget")
+  }
+
+  const { location } = props;  
+  const [forgetflag,setForgetFlag]=useState(false)
+  useEffect(() => {
+
+    if (location.pathname=="/user/forget") {
+      setForgetFlag(true)     
+    } else {
+      setForgetFlag(false)
+    }    
+  }, [location.pathname]);
+  
   return (
-    <div className={styles.main}>
+    <div>
+      { 
+        forgetflag?(
+          <div style={{ position: "absolute", top: -50, cursor: "pointer" }} onClick={returnHandle}><ArrowLeftOutlined style={{ fontSize: '28px' }} /></div>
+        ):(<div />)
+      }
       <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
-        <Tab key="account" tab="账户密码登录">
-          {status === 'error' && loginType === 'account' && !submitting && (
-            <LoginMessage content="账户或密码错误（admin/ant.design）" />
-          )}
   
-          <UserName
-            name="userName"
-            placeholder="用户名: admin or user"
-            rules={[
-              {
-                required: true,
-                message: '请输入用户名!',
-              },
-            ]}
-          />
-          <Password
-            name="password"
-            placeholder="密码: ant.design"
-            rules={[
-              {
-                required: true,
-                message: '请输入密码！',
-              },
-            ]}
-          />
-        </Tab>
-        <Tab key="mobile" tab="手机号登录">
-          {status === 'error' && loginType === 'mobile' && !submitting && (
-            <LoginMessage content="验证码错误" />
-          )}
-          <Mobile
-            name="mobile"
-            placeholder="手机号"
-            rules={[
-              {
-                required: true,
-                message: '请输入手机号！',
-              },
+        <div className={styles.box1}>Account Number</div>
+        <input className={styles.input} onChange={usernameHandle}/>
+        <div className={styles.box1}>{forgetflag?("Next"):("Password")}</div>
         {
-                pattern: /^1\d{10}$/,
-                message: '手机号格式错误！',
-              },
-            ]}
-          />
-          <Captcha
-            name="captcha"
-            placeholder="验证码"
-            countDown={120}
-            getCaptchaButtonText=""
-            getCaptchaSecondText="秒"
-            rules={[
-              {
-                required: true,
-                message: '请输入验证码！',
-              },
-            ]}
-          />
-        </Tab>
+          forgetflag ? (
+            <div className={styles.box2}>
+            <input className={styles.input5} onChange={passwdHandle} type="password" />   
+            <div className={styles.button2} style={{float:"right"}}>Send</div>   
+          </div>
+          ) : (
             <div>
-          <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
-            自动登录
-          </Checkbox>
-          <a
-            style={{
-              float: 'right',
-            }}
-          >
-            忘记密码
-          </a>
+            <input className={styles.input2} onChange={passwdHandle} type="password"/>                                                                                                             
+            <div>                    
+               <div className={styles.input3} onClick={gotoForgetHandle}>Forget Password</div>   
+               <div className={styles.input4}>
+               {status === 'error' && loginType === 'account' && !submitting && (
+                <div>Wrong account or password</div>
+               )}</div>
             </div>   
-        <Submit loading={submitting}>登录</Submit>
-        <div className={styles.other}>
-          其他登录方式
-          <AlipayCircleOutlined className={styles.icon} />
-          <TaobaoCircleOutlined className={styles.icon} />
-          <WeiboCircleOutlined className={styles.icon} />
-          <Link className={styles.register} to="/user/register">
-            注册账户
-          </Link>
             </div>
+          )
+        }  
+        <Submit className={styles.button} loading={submitting} style={{ width: 330 }}>{forgetflag?("Next"):("登录")}</Submit>
       </LoginForm>
     </div>
   );

src/pages/user/login/style.less

@@ -37,3 +37,93 @@
     }
   }
 }
+
+.box1{
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(129,152,177,1);
+  margin-bottom: 20px;
+}
+.input{
+  border:none;
+  background:none;
+  outline: none;
+  border-bottom: 1px solid rgba(78,80,105,1);
+  width:330px;
+  margin-bottom: 20px;
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(0,26,84,1);
+}
+.input2{
+  border:none;
+  background:none;
+  outline: none;
+  border-bottom: 1px solid rgba(78,80,105,1);
+  width:330px;
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(0,26,84,1);
+}
+.input3{
+  cursor: pointer;
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(0,26,84,1);
+  opacity:0.3;
+}
+.input4{
+  width:400px;
+  height:20px;
+  font-size:20px;
+  font-family:PingFang SC;
+  font-weight:800;
+  color:rgba(255,56,56,1);
+}
+.button{
+  width:100px;
+  height:51px;
+  background:rgba(64,101,224,1);
+  border-radius:26px;
+  border: none;
+}
+.input5{
+  border:none;
+  background:none;
+  outline: none;
+  border-bottom: 1px solid rgba(78,80,105,1);
+  width:176px;
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(0,26,84,1);
+}
+.button2{
+  width: 120px;
+  height: 34px;
+  border-radius:26px;
+  background:none;
+  border: 1px solid rgba(78,80,105,1);
+  line-height: 34px;
+  text-align: center;
+  position: absolute;
+  cursor: pointer;
+  top:0;
+  left: 196px;
+
+  font-size:20px;
+  font-family:"PingFang SC";
+  font-weight:800;
+  color:rgba(0,26,84,1);
+
+}
+.box2{
+  width: 100%;
+  height: 34px;
+  position: relative;
+  margin-bottom: 45px;
+}
\ No newline at end of file