1

src/components/Menu/index.tsx

@@ -15,7 +15,7 @@ interface iMenuProps {
 class NavSider extends Component<iMenuProps, any> {
   render() {
     const { list: MeunList } = this.props
-    return (
+    return ( 
       <div className="main-nav">
         <div className="logo"><img src={logo}></img></div>
         <div className="nav-content">
@@ -41,14 +41,14 @@ class NavSider extends Component<iMenuProps, any> {
                 return (
                   <Menu>
                     <Menu.Item key="0">
-                      <Link to="/acount/safe">账号资料</Link>
+                      <Link to="/console/account/info">账号资料</Link>
                     </Menu.Item>
                     <Menu.Item key="1">
-                      <Link to="/acount/safe">账号安全</Link>
+                      <Link to="/console/account/safe">账号安全</Link>
                     </Menu.Item>
                     <Menu.Divider />
                     <Menu.Item key="2">
-                      <Link to="/acount/safe">帮助中心</Link>
+                      <Link to="/console/account/safe">帮助中心</Link>
                     </Menu.Item>
                     <Menu.Item key="3">
                       {/* <Link to="/login">退出登录</Link> */}

src/pages/Account/Information/index.tsx

@@ -1,9 +1,93 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import Header from '@/components/Header'
+import { Button, Form, Input, message } from 'antd'
+import styles from './index.module.scss'
+
+import { apiAccountEdit,apiProjectAccountInfo } from './api'
+import consts from '@/utils/consts'
+import user from '@/store/mobx/user'
+
+interface iUserInfo {
+  account: string
+  name: string
+  company: string
+  position: string
+  telephone: string
+}
+export default function info() {
+  const [ form ] = Form.useForm() 
+  const [ loading, setLoading ] = useState<boolean>(false)
+  const [ accountInfo, setAccountInfo ] = useState<iUserInfo>({
+    account: '',
+    name: '',
+    company: "",
+    position: '',
+    telephone: ''
+  })
+
+  // 获得账号数据
+  useEffect(() => {
+    initData()
+  }, [])
+  // 初始化表单
+  useEffect(() => {
+    form.setFieldsValue(
+      { ...accountInfo })
+  }, [ accountInfo ])
+  // 保存表单信息
+  const saveAccountInfo = async (values:any) => {
+    setLoading(true)
+    
+    values.id=user.userInfo.id
+    const { code = -1 } = await apiAccountEdit(values)
+    if (code === consts.RET_CODE.SUCCESS) {
+      message.success("更新成功!")
+      initData()
+    }
+   
+    setLoading(false)
+     // const newName = form.getFieldValue("projectName")
+    //  if (newName !== projectInfo.projectName) {
+    //   const { code = -1 } = await apiSaveProjectInfo(newName)
+    // }
+  }
+
+  const initData = async () => {
+    const { code = -1, data = {} } = await apiProjectAccountInfo()
+    if (code === consts.RET_CODE.SUCCESS) {
+      setAccountInfo(data)
+    }
+  }
 
-export default function index() {
   return (
-    <div>
-      账号资料
+    <div className="wrap-contaniner">
+      <Header title="账号资料"></Header>
+      <div className={styles.projectInfo}>
+        <Form form={form} className={styles.formContent} layout="vertical" size="small">
+          <Form.Item name="account" label="账号">
+            <Input disabled></Input>
+          </Form.Item>
+          <Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
+            <Input></Input>
+          </Form.Item>
+          <Form.Item name="company" label="单位" rules={[ { required: true, message: '请输入单位' } ]}>
+            <Input></Input>
+          </Form.Item>
+          <Form.Item name="position" label="职称" rules={[ { required: true, message: '请输入职称' } ]}>
+            <Input></Input>
+          </Form.Item>
+          <Form.Item name="telephone" label="电话" >
+            <Input></Input>
+          </Form.Item>
+          <Button type="primary" size="small" loading={loading}    onClick={() => {
+              form.validateFields().then(values => {
+                saveAccountInfo(values)
+              })
+            }}>保存修改</Button>
+        </Form>
+      </div>
     </div>
+    
   )
 }
+

src/pages/Account/Safe/index.tsx

@@ -1,9 +1,33 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import Header from '@/components/Header'
+import { Button, Form, Input, message } from 'antd'
+import styles from './index.module.scss'
 
 export default function index() {
+  const [ form ] = Form.useForm() 
+  const [ loading, setLoading ] = useState<boolean>(false)
   return (
-    <div>
-      账号安全
+    <div className="wrap-contaniner">
+      <Header title="账号安全"></Header>
+      <div className={styles.projectInfo}>
+        <Form form={form} className={styles.formContent} layout="vertical" size="small">
+          <Form.Item name="account" label="旧密码" rules={[ { required: true, message: '请输入旧密码' } ]}>
+            <Input.Password></Input.Password>
+          </Form.Item>
+          <Form.Item name="name" label="新密码" rules={[ { required: true, message: '请输入新密码' } ]}>
+          <Input.Password></Input.Password>
+          </Form.Item>
+          <Form.Item name="company" label="确认新密码" rules={[ { required: true, message: '请输入确认新密码' } ]}>
+          <Input.Password></Input.Password>
+          </Form.Item>
+          
+          <Button type="primary" size="small" loading={loading}    onClick={() => {
+              form.validateFields().then(values => {
+                // saveAccountInfo(values)
+              })
+            }}>保存修改</Button>
+        </Form>
+      </div>
     </div>
   )
 }

src/pages/Account/index.tsx

@@ -1,9 +1,22 @@
+import LeftSide from '@/components/LeftSide'
+import Guards from '@/components/Navigation'
+import { NavigationGuardsProps } from '@/types/router'
 import React from 'react'
-
-export default function index() {
+import { Switch } from 'react-router-dom'
+const Account: React.FC<NavigationGuardsProps> = props => {
+  const { routeConfig, match, location } = props
   return (
-    <div>
-      账号页面
-    </div>
+    <>
+      <LeftSide childRoutes={routeConfig} location={location}></LeftSide>
+      <div className="panel-content">
+        <Switch>
+          <Guards routeConfig={routeConfig} match={match} location={location}></Guards>
+        </Switch>
+      </div>
+
+    </>
   )
 }
+
+export default Account
+

src/router/routes.ts

@@ -249,17 +249,26 @@ export const routeConfig: RouteModel[] = [
             path: 'info',
             defaultChildRoute: true,
             auth: [ 'USER', 'ADMIN' ],
-            component:AsyncModuleLoader(() => import('@/pages/Account/Information'))
+            component:AsyncModuleLoader(() => import('@/pages/Account/Information')),
+            meta: {
+              title: '账号资料'
+            }
           },
           {
             path: 'safe',
             auth: [ 'USER', 'ADMIN' ],
-            component:AsyncModuleLoader(() => import('@/pages/Account/Safe'))
+            component:AsyncModuleLoader(() => import('@/pages/Account/Safe')),
+            meta: {
+              title: '账号安全'
+            }
           },
           {
             path: 'manual',
             auth: [ 'USER', 'ADMIN' ],
-            component:AsyncModuleLoader(() => import('@/pages/Account/Manual'))
+            component:AsyncModuleLoader(() => import('@/pages/Account/Manual')),
+            meta: {
+              title: '帮助中心'
+            }
           }
         ]
       }

tsconfig.json

@@ -1,9 +1,4 @@
-/*
- * @description:
- * @Author: CP
- * @Date: 2020-11-11 11:14:31
- * @FilePath: \management\tsconfig.json
- */
+
 {
   "compilerOptions": {
     "target": "es5",