diff --git a/.gitignore b/.gitignore
index aa3fce5825a412febff24ef3bf577105b08862ec..409be881a2a8d9807d016c24dabadebda65395c1 100755
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ yarn.lock
 package-lock.json
 *bak
 jsconfig.json
+.prettierrc
diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 1f9bb763947944a4f6279376b916cbc824e2412f..4142c517d809e65cb7dbc257fa9c38eb9635ee95 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -7,6 +7,7 @@ import { getProfileBasicData } from './mock/profile';
 import { getProfileAdvancedData } from './mock/profile';
 import { getNotices } from './mock/notices';
 import { format, delay } from 'roadhog-api-doc';
+import { getProvince, getCity, getArea } from './mock/geographic/geographic';
 
 // 是否禁用代理
 const noProxy = process.env.NO_PROXY === 'true';
@@ -15,7 +16,7 @@ const noProxy = process.env.NO_PROXY === 'true';
 const proxy = {
   // 支持值为 Object 和 Array
   'GET /api/currentUser': {
-    $desc: "获取当前用户接口",
+    $desc: '获取当前用户接口',
     $params: {
       pageSize: {
         desc: '分页',
@@ -24,28 +25,48 @@ const proxy = {
     },
     $body: {
       name: 'Serati Ma',
-      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+      avatar:
+        'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
       userid: '00000001',
+      email: 'antdesign@alipay.com',
+      profile: '简单的介绍下自己',
       notifyCount: 12,
+      country: 'China',
+      geographic: {
+        province: {
+          label: '浙江省',
+          key: '330000',
+        },
+        city: {
+          label: '杭州市',
+          key: '330100',
+        },
+      },
+      address: '西湖区工专路 77 号',
+      phone: '0752-268888888',
     },
   },
   // GET POST 可省略
-  'GET /api/users': [{
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  }, {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  }, {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  }],
+  'GET /api/users': [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park',
+    },
+  ],
   'GET /api/project/notice': getNotice,
   'GET /api/activities': getActivities,
   'GET /api/rule': getRule,
@@ -62,7 +83,7 @@ const proxy = {
     res.send({ message: 'Ok' });
   },
   'GET /api/tags': mockjs.mock({
-    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
+    'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],
   }),
   'GET /api/fake_list': getFakeList,
   'POST /api/fake_list': postFakeList,
@@ -71,26 +92,26 @@ const proxy = {
   'GET /api/profile/advanced': getProfileAdvancedData,
   'POST /api/login/account': (req, res) => {
     const { password, userName, type } = req.body;
-    if(password === '888888' && userName === 'admin'){
+    if (password === '888888' && userName === 'admin') {
       res.send({
         status: 'ok',
         type,
-        currentAuthority: 'admin'
+        currentAuthority: 'admin',
       });
-      return ;
+      return;
     }
-    if(password === '123456' && userName === 'user'){
+    if (password === '123456' && userName === 'user') {
       res.send({
         status: 'ok',
         type,
-        currentAuthority: 'user'
+        currentAuthority: 'user',
       });
-      return ;
+      return;
     }
     res.send({
       status: 'error',
       type,
-      currentAuthority: 'guest'
+      currentAuthority: 'guest',
     });
   },
   'POST /api/register': (req, res) => {
@@ -99,40 +120,42 @@ const proxy = {
   'GET /api/notices': getNotices,
   'GET /api/500': (req, res) => {
     res.status(500).send({
-      "timestamp": 1513932555104,
-      "status": 500,
-      "error": "error",
-      "message": "error",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 500,
+      error: 'error',
+      message: 'error',
+      path: '/base/category/list',
     });
   },
   'GET /api/404': (req, res) => {
     res.status(404).send({
-      "timestamp": 1513932643431,
-      "status": 404,
-      "error": "Not Found",
-      "message": "No message available",
-      "path": "/base/category/list/2121212"
+      timestamp: 1513932643431,
+      status: 404,
+      error: 'Not Found',
+      message: 'No message available',
+      path: '/base/category/list/2121212',
     });
   },
   'GET /api/403': (req, res) => {
     res.status(403).send({
-      "timestamp": 1513932555104,
-      "status": 403,
-      "error": "Unauthorized",
-      "message": "Unauthorized",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 403,
+      error: 'Unauthorized',
+      message: 'Unauthorized',
+      path: '/base/category/list',
     });
   },
   'GET /api/401': (req, res) => {
     res.status(401).send({
-      "timestamp": 1513932555104,
-      "status": 401,
-      "error": "Unauthorized",
-      "message": "Unauthorized",
-      "path": "/base/category/list"
+      timestamp: 1513932555104,
+      status: 401,
+      error: 'Unauthorized',
+      message: 'Unauthorized',
+      path: '/base/category/list',
     });
   },
+  'GET /api/geographic/province': getProvince,
+  'GET /api/geographic/city/:province': getCity,
 };
 
-export default noProxy ? {} : delay(proxy, 1000);
+export default (noProxy ? {} : delay(proxy, 1000));
diff --git a/mock/geographic/city.json b/mock/geographic/city.json
new file mode 100644
index 0000000000000000000000000000000000000000..953cb364cb2ba37bcb3834216271836fee8a2cc0
--- /dev/null
+++ b/mock/geographic/city.json
@@ -0,0 +1,1784 @@
+{
+    "110000": [
+        {
+            "province": "北京市", 
+            "name": "市辖区", 
+            "id": "110100"
+        }
+    ], 
+    "120000": [
+        {
+            "province": "天津市", 
+            "name": "市辖区", 
+            "id": "120100"
+        }
+    ], 
+    "130000": [
+        {
+            "province": "河北省", 
+            "name": "石家庄市", 
+            "id": "130100"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "唐山市", 
+            "id": "130200"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "秦皇岛市", 
+            "id": "130300"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "邯郸市", 
+            "id": "130400"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "邢台市", 
+            "id": "130500"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "保定市", 
+            "id": "130600"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "张家口市", 
+            "id": "130700"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "承德市", 
+            "id": "130800"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "沧州市", 
+            "id": "130900"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "廊坊市", 
+            "id": "131000"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "衡水市", 
+            "id": "131100"
+        }, 
+        {
+            "province": "河北省", 
+            "name": "省直辖县级行政区划", 
+            "id": "139000"
+        }
+    ], 
+    "140000": [
+        {
+            "province": "山西省", 
+            "name": "太原市", 
+            "id": "140100"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "大同市", 
+            "id": "140200"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "阳泉市", 
+            "id": "140300"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "长治市", 
+            "id": "140400"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "晋城市", 
+            "id": "140500"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "朔州市", 
+            "id": "140600"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "晋中市", 
+            "id": "140700"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "运城市", 
+            "id": "140800"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "忻州市", 
+            "id": "140900"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "临汾市", 
+            "id": "141000"
+        }, 
+        {
+            "province": "山西省", 
+            "name": "吕梁市", 
+            "id": "141100"
+        }
+    ], 
+    "150000": [
+        {
+            "province": "内蒙古自治区", 
+            "name": "呼和浩特市", 
+            "id": "150100"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "包头市", 
+            "id": "150200"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "乌海市", 
+            "id": "150300"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "赤峰市", 
+            "id": "150400"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "通辽市", 
+            "id": "150500"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "鄂尔多斯市", 
+            "id": "150600"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "呼伦贝尔市", 
+            "id": "150700"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "巴彦淖尔市", 
+            "id": "150800"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "乌兰察布市", 
+            "id": "150900"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "兴安盟", 
+            "id": "152200"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "锡林郭勒盟", 
+            "id": "152500"
+        }, 
+        {
+            "province": "内蒙古自治区", 
+            "name": "阿拉善盟", 
+            "id": "152900"
+        }
+    ], 
+    "210000": [
+        {
+            "province": "辽宁省", 
+            "name": "沈阳市", 
+            "id": "210100"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "大连市", 
+            "id": "210200"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "鞍山市", 
+            "id": "210300"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "抚顺市", 
+            "id": "210400"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "本溪市", 
+            "id": "210500"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "丹东市", 
+            "id": "210600"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "锦州市", 
+            "id": "210700"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "营口市", 
+            "id": "210800"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "阜新市", 
+            "id": "210900"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "辽阳市", 
+            "id": "211000"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "盘锦市", 
+            "id": "211100"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "铁岭市", 
+            "id": "211200"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "朝阳市", 
+            "id": "211300"
+        }, 
+        {
+            "province": "辽宁省", 
+            "name": "葫芦岛市", 
+            "id": "211400"
+        }
+    ], 
+    "220000": [
+        {
+            "province": "吉林省", 
+            "name": "长春市", 
+            "id": "220100"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "吉林市", 
+            "id": "220200"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "四平市", 
+            "id": "220300"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "辽源市", 
+            "id": "220400"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "通化市", 
+            "id": "220500"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "白山市", 
+            "id": "220600"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "松原市", 
+            "id": "220700"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "白城市", 
+            "id": "220800"
+        }, 
+        {
+            "province": "吉林省", 
+            "name": "延边朝鲜族自治州", 
+            "id": "222400"
+        }
+    ], 
+    "230000": [
+        {
+            "province": "黑龙江省", 
+            "name": "哈尔滨市", 
+            "id": "230100"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "齐齐哈尔市", 
+            "id": "230200"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "鸡西市", 
+            "id": "230300"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "鹤岗市", 
+            "id": "230400"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "双鸭山市", 
+            "id": "230500"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "大庆市", 
+            "id": "230600"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "伊春市", 
+            "id": "230700"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "佳木斯市", 
+            "id": "230800"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "七台河市", 
+            "id": "230900"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "牡丹江市", 
+            "id": "231000"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "黑河市", 
+            "id": "231100"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "绥化市", 
+            "id": "231200"
+        }, 
+        {
+            "province": "黑龙江省", 
+            "name": "大兴安岭地区", 
+            "id": "232700"
+        }
+    ], 
+    "310000": [
+        {
+            "province": "上海市", 
+            "name": "市辖区", 
+            "id": "310100"
+        }
+    ], 
+    "320000": [
+        {
+            "province": "江苏省", 
+            "name": "南京市", 
+            "id": "320100"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "无锡市", 
+            "id": "320200"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "徐州市", 
+            "id": "320300"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "常州市", 
+            "id": "320400"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "苏州市", 
+            "id": "320500"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "南通市", 
+            "id": "320600"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "连云港市", 
+            "id": "320700"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "淮安市", 
+            "id": "320800"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "盐城市", 
+            "id": "320900"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "扬州市", 
+            "id": "321000"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "镇江市", 
+            "id": "321100"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "泰州市", 
+            "id": "321200"
+        }, 
+        {
+            "province": "江苏省", 
+            "name": "宿迁市", 
+            "id": "321300"
+        }
+    ], 
+    "330000": [
+        {
+            "province": "浙江省", 
+            "name": "杭州市", 
+            "id": "330100"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "宁波市", 
+            "id": "330200"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "温州市", 
+            "id": "330300"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "嘉兴市", 
+            "id": "330400"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "湖州市", 
+            "id": "330500"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "绍兴市", 
+            "id": "330600"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "金华市", 
+            "id": "330700"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "衢州市", 
+            "id": "330800"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "舟山市", 
+            "id": "330900"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "台州市", 
+            "id": "331000"
+        }, 
+        {
+            "province": "浙江省", 
+            "name": "丽水市", 
+            "id": "331100"
+        }
+    ], 
+    "340000": [
+        {
+            "province": "安徽省", 
+            "name": "合肥市", 
+            "id": "340100"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "芜湖市", 
+            "id": "340200"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "蚌埠市", 
+            "id": "340300"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "淮南市", 
+            "id": "340400"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "马鞍山市", 
+            "id": "340500"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "淮北市", 
+            "id": "340600"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "铜陵市", 
+            "id": "340700"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "安庆市", 
+            "id": "340800"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "黄山市", 
+            "id": "341000"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "滁州市", 
+            "id": "341100"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "阜阳市", 
+            "id": "341200"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "宿州市", 
+            "id": "341300"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "六安市", 
+            "id": "341500"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "亳州市", 
+            "id": "341600"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "池州市", 
+            "id": "341700"
+        }, 
+        {
+            "province": "安徽省", 
+            "name": "宣城市", 
+            "id": "341800"
+        }
+    ], 
+    "350000": [
+        {
+            "province": "福建省", 
+            "name": "福州市", 
+            "id": "350100"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "厦门市", 
+            "id": "350200"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "莆田市", 
+            "id": "350300"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "三明市", 
+            "id": "350400"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "泉州市", 
+            "id": "350500"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "漳州市", 
+            "id": "350600"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "南平市", 
+            "id": "350700"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "龙岩市", 
+            "id": "350800"
+        }, 
+        {
+            "province": "福建省", 
+            "name": "宁德市", 
+            "id": "350900"
+        }
+    ], 
+    "360000": [
+        {
+            "province": "江西省", 
+            "name": "南昌市", 
+            "id": "360100"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "景德镇市", 
+            "id": "360200"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "萍乡市", 
+            "id": "360300"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "九江市", 
+            "id": "360400"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "新余市", 
+            "id": "360500"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "鹰潭市", 
+            "id": "360600"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "赣州市", 
+            "id": "360700"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "吉安市", 
+            "id": "360800"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "宜春市", 
+            "id": "360900"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "抚州市", 
+            "id": "361000"
+        }, 
+        {
+            "province": "江西省", 
+            "name": "上饶市", 
+            "id": "361100"
+        }
+    ], 
+    "370000": [
+        {
+            "province": "山东省", 
+            "name": "济南市", 
+            "id": "370100"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "青岛市", 
+            "id": "370200"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "淄博市", 
+            "id": "370300"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "枣庄市", 
+            "id": "370400"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "东营市", 
+            "id": "370500"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "烟台市", 
+            "id": "370600"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "潍坊市", 
+            "id": "370700"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "济宁市", 
+            "id": "370800"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "泰安市", 
+            "id": "370900"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "威海市", 
+            "id": "371000"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "日照市", 
+            "id": "371100"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "莱芜市", 
+            "id": "371200"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "临沂市", 
+            "id": "371300"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "德州市", 
+            "id": "371400"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "聊城市", 
+            "id": "371500"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "滨州市", 
+            "id": "371600"
+        }, 
+        {
+            "province": "山东省", 
+            "name": "菏泽市", 
+            "id": "371700"
+        }
+    ], 
+    "410000": [
+        {
+            "province": "河南省", 
+            "name": "郑州市", 
+            "id": "410100"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "开封市", 
+            "id": "410200"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "洛阳市", 
+            "id": "410300"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "平顶山市", 
+            "id": "410400"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "安阳市", 
+            "id": "410500"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "鹤壁市", 
+            "id": "410600"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "新乡市", 
+            "id": "410700"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "焦作市", 
+            "id": "410800"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "濮阳市", 
+            "id": "410900"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "许昌市", 
+            "id": "411000"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "漯河市", 
+            "id": "411100"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "三门峡市", 
+            "id": "411200"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "南阳市", 
+            "id": "411300"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "商丘市", 
+            "id": "411400"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "信阳市", 
+            "id": "411500"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "周口市", 
+            "id": "411600"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "驻马店市", 
+            "id": "411700"
+        }, 
+        {
+            "province": "河南省", 
+            "name": "省直辖县级行政区划", 
+            "id": "419000"
+        }
+    ], 
+    "420000": [
+        {
+            "province": "湖北省", 
+            "name": "武汉市", 
+            "id": "420100"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "黄石市", 
+            "id": "420200"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "十堰市", 
+            "id": "420300"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "宜昌市", 
+            "id": "420500"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "襄阳市", 
+            "id": "420600"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "鄂州市", 
+            "id": "420700"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "荆门市", 
+            "id": "420800"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "孝感市", 
+            "id": "420900"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "荆州市", 
+            "id": "421000"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "黄冈市", 
+            "id": "421100"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "咸宁市", 
+            "id": "421200"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "随州市", 
+            "id": "421300"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "恩施土家族苗族自治州", 
+            "id": "422800"
+        }, 
+        {
+            "province": "湖北省", 
+            "name": "省直辖县级行政区划", 
+            "id": "429000"
+        }
+    ], 
+    "430000": [
+        {
+            "province": "湖南省", 
+            "name": "长沙市", 
+            "id": "430100"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "株洲市", 
+            "id": "430200"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "湘潭市", 
+            "id": "430300"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "衡阳市", 
+            "id": "430400"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "邵阳市", 
+            "id": "430500"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "岳阳市", 
+            "id": "430600"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "常德市", 
+            "id": "430700"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "张家界市", 
+            "id": "430800"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "益阳市", 
+            "id": "430900"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "郴州市", 
+            "id": "431000"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "永州市", 
+            "id": "431100"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "怀化市", 
+            "id": "431200"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "娄底市", 
+            "id": "431300"
+        }, 
+        {
+            "province": "湖南省", 
+            "name": "湘西土家族苗族自治州", 
+            "id": "433100"
+        }
+    ], 
+    "440000": [
+        {
+            "province": "广东省", 
+            "name": "广州市", 
+            "id": "440100"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "韶关市", 
+            "id": "440200"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "深圳市", 
+            "id": "440300"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "珠海市", 
+            "id": "440400"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "汕头市", 
+            "id": "440500"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "佛山市", 
+            "id": "440600"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "江门市", 
+            "id": "440700"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "湛江市", 
+            "id": "440800"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "茂名市", 
+            "id": "440900"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "肇庆市", 
+            "id": "441200"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "惠州市", 
+            "id": "441300"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "梅州市", 
+            "id": "441400"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "汕尾市", 
+            "id": "441500"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "河源市", 
+            "id": "441600"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "阳江市", 
+            "id": "441700"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "清远市", 
+            "id": "441800"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "东莞市", 
+            "id": "441900"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "中山市", 
+            "id": "442000"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "潮州市", 
+            "id": "445100"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "揭阳市", 
+            "id": "445200"
+        }, 
+        {
+            "province": "广东省", 
+            "name": "云浮市", 
+            "id": "445300"
+        }
+    ], 
+    "450000": [
+        {
+            "province": "广西壮族自治区", 
+            "name": "南宁市", 
+            "id": "450100"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "柳州市", 
+            "id": "450200"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "桂林市", 
+            "id": "450300"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "梧州市", 
+            "id": "450400"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "北海市", 
+            "id": "450500"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "防城港市", 
+            "id": "450600"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "钦州市", 
+            "id": "450700"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "贵港市", 
+            "id": "450800"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "玉林市", 
+            "id": "450900"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "百色市", 
+            "id": "451000"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "贺州市", 
+            "id": "451100"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "河池市", 
+            "id": "451200"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "来宾市", 
+            "id": "451300"
+        }, 
+        {
+            "province": "广西壮族自治区", 
+            "name": "崇左市", 
+            "id": "451400"
+        }
+    ], 
+    "460000": [
+        {
+            "province": "海南省", 
+            "name": "海口市", 
+            "id": "460100"
+        }, 
+        {
+            "province": "海南省", 
+            "name": "三亚市", 
+            "id": "460200"
+        }, 
+        {
+            "province": "海南省", 
+            "name": "三沙市", 
+            "id": "460300"
+        }, 
+        {
+            "province": "海南省", 
+            "name": "儋州市", 
+            "id": "460400"
+        }, 
+        {
+            "province": "海南省", 
+            "name": "省直辖县级行政区划", 
+            "id": "469000"
+        }
+    ], 
+    "500000": [
+        {
+            "province": "重庆市", 
+            "name": "市辖区", 
+            "id": "500100"
+        }, 
+        {
+            "province": "重庆市", 
+            "name": "县", 
+            "id": "500200"
+        }
+    ], 
+    "510000": [
+        {
+            "province": "四川省", 
+            "name": "成都市", 
+            "id": "510100"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "自贡市", 
+            "id": "510300"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "攀枝花市", 
+            "id": "510400"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "泸州市", 
+            "id": "510500"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "德阳市", 
+            "id": "510600"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "绵阳市", 
+            "id": "510700"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "广元市", 
+            "id": "510800"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "遂宁市", 
+            "id": "510900"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "内江市", 
+            "id": "511000"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "乐山市", 
+            "id": "511100"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "南充市", 
+            "id": "511300"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "眉山市", 
+            "id": "511400"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "宜宾市", 
+            "id": "511500"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "广安市", 
+            "id": "511600"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "达州市", 
+            "id": "511700"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "雅安市", 
+            "id": "511800"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "巴中市", 
+            "id": "511900"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "资阳市", 
+            "id": "512000"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "阿坝藏族羌族自治州", 
+            "id": "513200"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "甘孜藏族自治州", 
+            "id": "513300"
+        }, 
+        {
+            "province": "四川省", 
+            "name": "凉山彝族自治州", 
+            "id": "513400"
+        }
+    ], 
+    "520000": [
+        {
+            "province": "贵州省", 
+            "name": "贵阳市", 
+            "id": "520100"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "六盘水市", 
+            "id": "520200"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "遵义市", 
+            "id": "520300"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "安顺市", 
+            "id": "520400"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "毕节市", 
+            "id": "520500"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "铜仁市", 
+            "id": "520600"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "黔西南布依族苗族自治州", 
+            "id": "522300"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "黔东南苗族侗族自治州", 
+            "id": "522600"
+        }, 
+        {
+            "province": "贵州省", 
+            "name": "黔南布依族苗族自治州", 
+            "id": "522700"
+        }
+    ], 
+    "530000": [
+        {
+            "province": "云南省", 
+            "name": "昆明市", 
+            "id": "530100"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "曲靖市", 
+            "id": "530300"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "玉溪市", 
+            "id": "530400"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "保山市", 
+            "id": "530500"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "昭通市", 
+            "id": "530600"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "丽江市", 
+            "id": "530700"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "普洱市", 
+            "id": "530800"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "临沧市", 
+            "id": "530900"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "楚雄彝族自治州", 
+            "id": "532300"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "红河哈尼族彝族自治州", 
+            "id": "532500"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "文山壮族苗族自治州", 
+            "id": "532600"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "西双版纳傣族自治州", 
+            "id": "532800"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "大理白族自治州", 
+            "id": "532900"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "德宏傣族景颇族自治州", 
+            "id": "533100"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "怒江傈僳族自治州", 
+            "id": "533300"
+        }, 
+        {
+            "province": "云南省", 
+            "name": "迪庆藏族自治州", 
+            "id": "533400"
+        }
+    ], 
+    "540000": [
+        {
+            "province": "西藏自治区", 
+            "name": "拉萨市", 
+            "id": "540100"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "日喀则市", 
+            "id": "540200"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "昌都市", 
+            "id": "540300"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "林芝市", 
+            "id": "540400"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "山南市", 
+            "id": "540500"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "那曲地区", 
+            "id": "542400"
+        }, 
+        {
+            "province": "西藏自治区", 
+            "name": "阿里地区", 
+            "id": "542500"
+        }
+    ], 
+    "610000": [
+        {
+            "province": "陕西省", 
+            "name": "西安市", 
+            "id": "610100"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "铜川市", 
+            "id": "610200"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "宝鸡市", 
+            "id": "610300"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "咸阳市", 
+            "id": "610400"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "渭南市", 
+            "id": "610500"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "延安市", 
+            "id": "610600"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "汉中市", 
+            "id": "610700"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "榆林市", 
+            "id": "610800"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "安康市", 
+            "id": "610900"
+        }, 
+        {
+            "province": "陕西省", 
+            "name": "商洛市", 
+            "id": "611000"
+        }
+    ], 
+    "620000": [
+        {
+            "province": "甘肃省", 
+            "name": "兰州市", 
+            "id": "620100"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "嘉峪关市", 
+            "id": "620200"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "金昌市", 
+            "id": "620300"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "白银市", 
+            "id": "620400"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "天水市", 
+            "id": "620500"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "武威市", 
+            "id": "620600"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "张掖市", 
+            "id": "620700"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "平凉市", 
+            "id": "620800"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "酒泉市", 
+            "id": "620900"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "庆阳市", 
+            "id": "621000"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "定西市", 
+            "id": "621100"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "陇南市", 
+            "id": "621200"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "临夏回族自治州", 
+            "id": "622900"
+        }, 
+        {
+            "province": "甘肃省", 
+            "name": "甘南藏族自治州", 
+            "id": "623000"
+        }
+    ], 
+    "630000": [
+        {
+            "province": "青海省", 
+            "name": "西宁市", 
+            "id": "630100"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "海东市", 
+            "id": "630200"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "海北藏族自治州", 
+            "id": "632200"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "黄南藏族自治州", 
+            "id": "632300"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "海南藏族自治州", 
+            "id": "632500"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "果洛藏族自治州", 
+            "id": "632600"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "玉树藏族自治州", 
+            "id": "632700"
+        }, 
+        {
+            "province": "青海省", 
+            "name": "海西蒙古族藏族自治州", 
+            "id": "632800"
+        }
+    ], 
+    "640000": [
+        {
+            "province": "宁夏回族自治区", 
+            "name": "银川市", 
+            "id": "640100"
+        }, 
+        {
+            "province": "宁夏回族自治区", 
+            "name": "石嘴山市", 
+            "id": "640200"
+        }, 
+        {
+            "province": "宁夏回族自治区", 
+            "name": "吴忠市", 
+            "id": "640300"
+        }, 
+        {
+            "province": "宁夏回族自治区", 
+            "name": "固原市", 
+            "id": "640400"
+        }, 
+        {
+            "province": "宁夏回族自治区", 
+            "name": "中卫市", 
+            "id": "640500"
+        }
+    ], 
+    "650000": [
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "乌鲁木齐市", 
+            "id": "650100"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "克拉玛依市", 
+            "id": "650200"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "吐鲁番市", 
+            "id": "650400"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "哈密市", 
+            "id": "650500"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "昌吉回族自治州", 
+            "id": "652300"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "博尔塔拉蒙古自治州", 
+            "id": "652700"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "巴音郭楞蒙古自治州", 
+            "id": "652800"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "阿克苏地区", 
+            "id": "652900"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "克孜勒苏柯尔克孜自治州", 
+            "id": "653000"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "喀什地区", 
+            "id": "653100"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "和田地区", 
+            "id": "653200"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "伊犁哈萨克自治州", 
+            "id": "654000"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "塔城地区", 
+            "id": "654200"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "阿勒泰地区", 
+            "id": "654300"
+        }, 
+        {
+            "province": "新疆维吾尔自治区", 
+            "name": "自治区直辖县级行政区划", 
+            "id": "659000"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/mock/geographic/geographic.js b/mock/geographic/geographic.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c5b1b40920edad18ff89cb5729437159a8218e2
--- /dev/null
+++ b/mock/geographic/geographic.js
@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+function getJson(infoType) {
+  const json = fs.readFileSync(`${__dirname}/${infoType}.json`, 'utf8');
+  return JSON.parse(json);
+}
+
+export function getProvince(req, res) {
+  res.json(getJson('province'));
+}
+
+export function getCity(req, res) {
+  res.json(getJson('city')[req.params.province]);
+}
+
+export default {
+  getProvince,
+  getCity,
+};
diff --git a/mock/geographic/province.json b/mock/geographic/province.json
new file mode 100644
index 0000000000000000000000000000000000000000..910c83f08e3186bae3a6f13b19ae8b0e4b5c5a0d
--- /dev/null
+++ b/mock/geographic/province.json
@@ -0,0 +1,138 @@
+[
+  {
+    "name": "北京市",
+    "id": "110000"
+  },
+  {
+    "name": "天津市",
+    "id": "120000"
+  },
+  {
+    "name": "河北省",
+    "id": "130000"
+  },
+  {
+    "name": "山西省",
+    "id": "140000"
+  },
+  {
+    "name": "内蒙古自治区",
+    "id": "150000"
+  },
+  {
+    "name": "辽宁省",
+    "id": "210000"
+  },
+  {
+    "name": "吉林省",
+    "id": "220000"
+  },
+  {
+    "name": "黑龙江省",
+    "id": "230000"
+  },
+  {
+    "name": "上海市",
+    "id": "310000"
+  },
+  {
+    "name": "江苏省",
+    "id": "320000"
+  },
+  {
+    "name": "浙江省",
+    "id": "330000"
+  },
+  {
+    "name": "安徽省",
+    "id": "340000"
+  },
+  {
+    "name": "福建省",
+    "id": "350000"
+  },
+  {
+    "name": "江西省",
+    "id": "360000"
+  },
+  {
+    "name": "山东省",
+    "id": "370000"
+  },
+  {
+    "name": "河南省",
+    "id": "410000"
+  },
+  {
+    "name": "湖北省",
+    "id": "420000"
+  },
+  {
+    "name": "湖南省",
+    "id": "430000"
+  },
+  {
+    "name": "广东省",
+    "id": "440000"
+  },
+  {
+    "name": "广西壮族自治区",
+    "id": "450000"
+  },
+  {
+    "name": "海南省",
+    "id": "460000"
+  },
+  {
+    "name": "重庆市",
+    "id": "500000"
+  },
+  {
+    "name": "四川省",
+    "id": "510000"
+  },
+  {
+    "name": "贵州省",
+    "id": "520000"
+  },
+  {
+    "name": "云南省",
+    "id": "530000"
+  },
+  {
+    "name": "西藏自治区",
+    "id": "540000"
+  },
+  {
+    "name": "陕西省",
+    "id": "610000"
+  },
+  {
+    "name": "甘肃省",
+    "id": "620000"
+  },
+  {
+    "name": "青海省",
+    "id": "630000"
+  },
+  {
+    "name": "宁夏回族自治区",
+    "id": "640000"
+  },
+  {
+    "name": "新疆维吾尔自治区",
+    "id": "650000"
+  },
+  {
+    "name": "台湾省",
+    "id": "710000"
+  },
+  {
+    "name": "香港特别行政区",
+    "id": "810000"
+  },
+  {
+    "name": "澳门特别行政区",
+    "id": "820000"
+  }
+]
diff --git a/src/common/router.js b/src/common/router.js
index 5df24776509e6f111ce44204585a9bb04d878530..e0514c450ff6ac97ab7aaca0033341d5e828af44 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -160,6 +160,21 @@ export const getRouterData = (app) => {
     '/user/register-result': {
       component: dynamicWrapper(app, [], () => import('../routes/User/RegisterResult')),
     },
+    '/userinfo': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/Info')),
+    },
+    '/userinfo/base': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/BaseView')),
+    },
+    '/userinfo/safe': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/SafeView')),
+    },
+    '/userinfo/account': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/AccountView')),
+    },
+    '/userinfo/message': {
+      component: dynamicWrapper(app, ['geographic'], () => import('../routes/Userinfo/MessageView')),
+    },
     // '/user/:id': {
     //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
     // },
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index f43be9d2401de686e7013533b5df7bab17c5f6ca..bf22747b1608ae3e37ea96143de182d7284a85fc 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -58,7 +58,7 @@ export default class GlobalHeader extends PureComponent {
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
-        <Menu.Item disabled><Icon type="setting" />设置</Menu.Item>
+        <Menu.Item key="userinfo"><Icon type="setting" />设置</Menu.Item>
         <Menu.Item key="triggerError"><Icon type="close-circle" />触发报错</Menu.Item>
         <Menu.Divider />
         <Menu.Item key="logout"><Icon type="logout" />退出登录</Menu.Item>
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index f8c956a9a33112670bbfb9a1b4c487d437da6b71..90a5f56f66c0651cfa7ce4349a46f91f15aa140f 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -131,6 +131,10 @@ class BasicLayout extends React.PureComponent {
       this.props.dispatch(routerRedux.push('/exception/trigger'));
       return;
     }
+    if (key === 'userinfo') {
+      this.props.dispatch(routerRedux.push('/userinfo/base'));
+      return;
+    }
     if (key === 'logout') {
       this.props.dispatch({
         type: 'login/logout',
diff --git a/src/models/geographic.js b/src/models/geographic.js
new file mode 100644
index 0000000000000000000000000000000000000000..adcd73313b39f087179b7ac91f96e26c1505542b
--- /dev/null
+++ b/src/models/geographic.js
@@ -0,0 +1,65 @@
+import { queryProvince, queryCity } from '../services/geographic';
+
+export default {
+  namespace: 'geographic',
+
+  state: {
+    province: [],
+    city: [],
+    isLoading: false,
+  },
+
+  effects: {
+    *fetchProvince(_, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryProvince);
+      yield put({
+        type: 'setProvince',
+        payload: response,
+      });
+      yield put({
+        type: 'changeLoading',
+        payload: false,
+      });
+    },
+    *fetchCity({ payload }, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
+      const response = yield call(queryCity, payload);
+      yield put({
+        type: 'setCity',
+        payload: response,
+      });
+      yield put({
+        type: 'changeLoading',
+        payload: false,
+      });
+    },
+  },
+
+  reducers: {
+    setProvince(state, action) {
+      return {
+        ...state,
+        province: action.payload,
+      };
+    },
+    setCity(state, action) {
+      return {
+        ...state,
+        city: action.payload,
+      };
+    },
+    changeLoading(state, action) {
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    },
+  },
+};
diff --git a/src/routes/Forms/StepForm/index.js b/src/routes/Forms/StepForm/index.js
index de9779b9ad772b8d59d55d19ccfdade7aabc600d..1fdea41c71bbebedc69c5cd2f885b19132e8a031 100644
--- a/src/routes/Forms/StepForm/index.js
+++ b/src/routes/Forms/StepForm/index.js
@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import { Route, Redirect, Switch } from 'dva/router';
 import { Card, Steps } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
-import NotFound from '../../Exception/404';
 import { getRoutes } from '../../../utils/utils';
 import styles from '../style.less';
 
@@ -43,7 +42,7 @@ export default class StepForm extends PureComponent {
                 ))
               }
               <Redirect exact from="/form/step-form" to="/form/step-form/info" />
-              <Route render={NotFound} />
+              <Redirect to="/exception/404" />
             </Switch>
           </div>
         </Card>
diff --git a/src/routes/Userinfo/AccountView.js b/src/routes/Userinfo/AccountView.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff533d322448f12a1faa64db1e0b9690eb355f3c
--- /dev/null
+++ b/src/routes/Userinfo/AccountView.js
@@ -0,0 +1,46 @@
+import React, { Component, Fragment } from 'react';
+import { Icon, List } from 'antd';
+
+export default class AccountView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '绑定淘宝',
+        description: '当前未绑定淘宝账号',
+        actions: [<a>绑定</a>],
+        avatar: <Icon type="taobao" className="taobao" />,
+      },
+      {
+        title: '绑定支付宝',
+        description: '当前未绑定支付宝账号',
+        actions: [<a>绑定</a>],
+        avatar: <Icon type="alipay" className="alipay" />,
+      },
+      {
+        title: '绑定钉钉',
+        description: '当前未绑定钉钉账号',
+        actions: [<a>绑定</a>],
+        avatar: <Icon type="dingding" className="dingding" />,
+      },
+    ];
+  };
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                avatar={item.avatar}
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/BaseView.js b/src/routes/Userinfo/BaseView.js
new file mode 100644
index 0000000000000000000000000000000000000000..960e18c6930175f74a1e8ebe7aa6cab0543c4af7
--- /dev/null
+++ b/src/routes/Userinfo/BaseView.js
@@ -0,0 +1,147 @@
+import React, { Component, Fragment } from 'react';
+import { Form, Input, Upload, Select, Button } from 'antd';
+import styles from './BaseView.less';
+import GeographicView from './GeographicView';
+import PhoneView from './PhoneView';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+
+// 头像组件 方便以后独立，增加裁剪之类的功能
+const AvatarView = ({ avatar }) => (
+  <Fragment>
+    <div className={styles.avatar_title}>头像</div>
+    <div className={styles.avatar}>
+      <img src={avatar} alt="avatar" />
+    </div>
+    <Upload fileList={[]}>
+      <div className={styles.button_view}>
+        <Button icon="upload">更换头像</Button>
+      </div>
+    </Upload>
+  </Fragment>
+);
+
+const validatorGeographic = (rule, value, callback) => {
+  const { province, city } = value;
+  if (!province.key) {
+    callback('Please input your province!');
+  }
+  if (!city.key) {
+    callback('Please input your city!');
+  }
+  callback();
+};
+
+const validatorPhone = (rule, value, callback) => {
+  const values = value.split('-');
+  if (!values[0]) {
+    callback('Please input your area code!');
+  }
+  if (!values[1]) {
+    callback('Please input your phone number!');
+  }
+  callback();
+};
+
+@Form.create()
+export default class BaseView extends Component {
+  componentDidMount() {
+    this.setBaseInfo();
+  }
+  setBaseInfo = () => {
+    const { currentUser } = this.props;
+    Object.keys(this.props.form.getFieldsValue()).forEach((key) => {
+      const obj = {};
+      obj[key] = currentUser[key] || null;
+      this.props.form.setFieldsValue(obj);
+    });
+  };
+  getAvatarURL() {
+    if (this.props.currentUser.avatar) {
+      return this.props.currentUser.avatar;
+    }
+    const url =
+      'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+    return url;
+  }
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className={styles.baseView}>
+        <div className={styles.left}>
+          <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
+            <FormItem label="邮箱">
+              {getFieldDecorator('email', {
+                rules: [
+                  { required: true, message: 'Please input your email!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="昵称">
+              {getFieldDecorator('name', {
+                rules: [
+                  { required: true, message: 'Please input your nick name!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="个人简介">
+              {getFieldDecorator('profile', {
+                rules: [
+                  { required: true, message: 'Please input personal profile!' },
+                ],
+              })(<Input.TextArea rows={4} />)}
+            </FormItem>
+            <FormItem label="国家/地区">
+              {getFieldDecorator('country', {
+                rules: [
+                  { required: true, message: 'Please input your country!' },
+                ],
+              })(
+                <Select style={{ width: 220 }}>
+                  <Option value="China">中国</Option>
+                  <Option value="USA">美国</Option>
+                  <Option value="France">法国</Option>
+                  <Option value="Russian">俄罗斯</Option>
+                  <Option value="UK">英国</Option>
+                </Select>,
+              )}
+            </FormItem>
+            <FormItem label="所在省市">
+              {getFieldDecorator('geographic', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please input your geographic info!',
+                  },
+                  {
+                    validator: validatorGeographic,
+                  },
+                ],
+              })(<GeographicView />)}
+            </FormItem>
+            <FormItem label="街道地址">
+              {getFieldDecorator('address', {
+                rules: [
+                  { required: true, message: 'Please input your address!' },
+                ],
+              })(<Input />)}
+            </FormItem>
+            <FormItem label="联系电话">
+              {getFieldDecorator('phone', {
+                rules: [
+                  { required: true, message: 'Please input your phone!' },
+                  { validator: validatorPhone },
+                ],
+              })(<PhoneView />)}
+            </FormItem>
+            <Button type="primary">更新信息</Button>
+          </Form>
+        </div>
+        <div className={styles.right}>
+          <AvatarView avatar={this.getAvatarURL()} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less
new file mode 100644
index 0000000000000000000000000000000000000000..78a5bba50fc60ffdb2b1cb22a67b939814ab9630
--- /dev/null
+++ b/src/routes/Userinfo/BaseView.less
@@ -0,0 +1,33 @@
+@import '~antd/lib/style/themes/default.less';
+
+.baseView {
+  display: flex;
+  .left {
+    width: 448px;
+  }
+  .right {
+    flex: 1;
+    padding-left: 104px;
+    .avatar_title {
+      height: 22px;
+      width: 28px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 22px;
+      margin-bottom: 8px;
+    }
+    .avatar {
+      width: 144px;
+      height: 144px;
+      margin-bottom: 12px;
+      overflow: hidden;
+      img {
+        width: 100%;
+      }
+    }
+    .button_view {
+      width: 144px;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/routes/Userinfo/GeographicView.js b/src/routes/Userinfo/GeographicView.js
new file mode 100644
index 0000000000000000000000000000000000000000..15be9314ea42588f1df0fc5dfddb8e9b4f2f8bc7
--- /dev/null
+++ b/src/routes/Userinfo/GeographicView.js
@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import { Select, Spin } from 'antd';
+import { connect } from 'dva';
+
+const { Option } = Select;
+
+const nullSlectItem = {
+  label: '',
+  key: '',
+};
+
+@connect(({ geographic }) => {
+  const { province, isLoading, city } = geographic;
+  return {
+    province,
+    city,
+    isLoading,
+  };
+})
+export default class ProvinceSelect extends PureComponent {
+  componentDidMount = () => {
+    this.props.dispatch({
+      type: 'geographic/fetchProvince',
+    });
+  };
+  getProvinceOption() {
+    return this.getOption(this.props.province);
+  }
+  getCityOption = () => {
+    return this.getOption(this.props.city);
+  };
+  getOption = (list) => {
+    if (!list || list.length < 1) {
+      return (
+        <Option key={0} value={0}>
+          没有找到选项
+        </Option>
+      );
+    }
+    return list.map((item) => {
+      return (
+        <Option key={item.id} value={item.id}>
+          {item.name}
+        </Option>
+      );
+    });
+  };
+  selectProvinceItem = (item) => {
+    this.props.dispatch({
+      type: 'geographic/fetchCity',
+      payload: item.key,
+    });
+    this.props.onChange({
+      province: item,
+      city: nullSlectItem,
+    });
+  };
+  selectCityItem = (item) => {
+    this.props.onChange({
+      province: this.props.value.province,
+      city: item,
+    });
+  };
+  conversionObject() {
+    const { value } = this.props;
+    if (!value) {
+      return {
+        province: nullSlectItem,
+        city: nullSlectItem,
+      };
+    }
+    const { province, city } = value;
+    return {
+      province: province || nullSlectItem,
+      city: city || nullSlectItem,
+    };
+  }
+  render() {
+    const { province, city } = this.conversionObject();
+    return (
+      <Spin spinning={this.props.isLoading}>
+        <Select
+          value={province}
+          labelInValue
+          showSearch
+          onSelect={this.selectProvinceItem}
+          style={{ width: 220, marginRight: 8 }}
+        >
+          {this.getProvinceOption()}
+        </Select>
+        <Select
+          value={city}
+          labelInValue
+          showSearch
+          onSelect={this.selectCityItem}
+          style={{ width: 220 }}
+        >
+          {this.getCityOption()}
+        </Select>
+      </Spin>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js
new file mode 100644
index 0000000000000000000000000000000000000000..a978ecd523fb2d583c7544d31b14e3b23157a697
--- /dev/null
+++ b/src/routes/Userinfo/Info.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { Route, routerRedux, Switch, Redirect } from 'dva/router';
+import { Menu } from 'antd';
+import styles from './Info.less';
+import { getRoutes } from '../../utils/utils';
+
+const { Item } = Menu;
+
+const menuMap = {
+  base: '基本设置',
+  safe: '安全设置',
+  account: '账号绑定',
+  message: '新消息通知',
+};
+
+@connect(({ user }) => ({
+  currentUser: user.currentUser,
+}))
+export default class Info extends PureComponent {
+  constructor(props) {
+    super(props);
+    const { match, location } = props;
+    let key = location.pathname.replace(`${match.path}/`, '');
+    key = menuMap[key] ? key : 'base';
+    this.state = {
+      selectKey: key,
+    };
+  }
+  getmenu = () => {
+    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
+  };
+  getRightTitle = () => {
+    return menuMap[this.state.selectKey];
+  };
+  selectKey = ({ key }) => {
+    this.props.dispatch(routerRedux.push(`/userinfo/${key}`));
+    this.setState({
+      selectKey: key,
+    });
+  };
+  render() {
+    const { match, routerData, currentUser } = this.props;
+    if (!currentUser.userid) {
+      return '';
+    }
+    return (
+      <div className={styles.main}>
+        <div className={styles.leftmenu}>
+          <Menu
+            mode="inline"
+            selectedKeys={[this.state.selectKey]}
+            onClick={this.selectKey}
+          >
+            {this.getmenu()}
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.title}>{this.getRightTitle()}</div>
+          <Switch>
+            {
+              getRoutes(match.path, routerData).map(item => (
+                <Route
+                  key={item.key}
+                  path={item.path}
+                  render={props => <item.component {...props} currentUser={currentUser} />}
+                  exact={item.exact}
+                />
+              ))
+            }
+            <Redirect exact from="/userinfo" to="/userinfo/base" />
+            <Redirect to="/exception/404" />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less
new file mode 100644
index 0000000000000000000000000000000000000000..6804a44feec7a9d442b33292cd2bc0dc33be33f9
--- /dev/null
+++ b/src/routes/Userinfo/Info.less
@@ -0,0 +1,73 @@
+@import '~antd/lib/style/themes/default.less';
+
+.main {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .leftmenu {
+    width: 224px;
+    border-right: 1px solid #e8e8e8;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 9px;
+    padding-bottom: 9px;
+    .title {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 28px;
+      width: 100px;
+      height: 28px;
+      font-weight: bold;
+      margin-bottom: 24px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      color: #ff4000;
+      display: block;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: 4px;
+    }
+    .dingding {
+      background-color: #2eabff;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      padding: 6px;
+      margin: 2px;
+      border-radius: 4px;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: 4px;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: #52c41a;
+  }
+  font.medium {
+    color: yellow;
+  }
+  font.weak {
+    color: red;
+  }
+}
diff --git a/src/routes/Userinfo/MessageView.js b/src/routes/Userinfo/MessageView.js
new file mode 100644
index 0000000000000000000000000000000000000000..54f23295d201335eb0c68f3f46df9f99cd27155f
--- /dev/null
+++ b/src/routes/Userinfo/MessageView.js
@@ -0,0 +1,49 @@
+import React, { Component, Fragment } from 'react';
+import { Switch, List } from 'antd';
+
+const Action = <Switch defaultChecked />;
+
+export default class MessageView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '账户密码',
+        description: '其他用户的消息将以站内信的形式通知',
+        actions: [Action],
+      },
+      {
+        title: '消息通知',
+        description: '已绑定手机：138****8293',
+        actions: [Action],
+      },
+      {
+        title: '系统消息',
+        description: '系统消息将以站内信的形式通知',
+        actions: [Action],
+      },
+      {
+        title: '待办通知',
+        description: '待办事项将以站内信的形式通知',
+        actions: [Action],
+      },
+    ];
+  };
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src/routes/Userinfo/PhoneView.js b/src/routes/Userinfo/PhoneView.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e5a920aa3ef6baeeaaba9ded2aff60c905a3242
--- /dev/null
+++ b/src/routes/Userinfo/PhoneView.js
@@ -0,0 +1,32 @@
+import React, { Fragment, PureComponent } from 'react';
+import { Input } from 'antd';
+
+class PhoneView extends PureComponent {
+  render() {
+    const { value, onChange } = this.props;
+    let values = ['', ''];
+    if (value) {
+      values = value.split('-');
+    }
+    return (
+      <Fragment>
+        <Input
+          value={values[0]}
+          onChange={(e) => {
+            onChange(`${e.target.value}-${values[1]}`);
+          }}
+          style={{ width: 128, marginRight: 8 }}
+        />
+        <Input
+          onChange={(e) => {
+            onChange(`${values[0]}-${e.target.value}`);
+          }}
+          value={values[1]}
+          style={{ width: 312 }}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default PhoneView;
diff --git a/src/routes/Userinfo/SafeView.js b/src/routes/Userinfo/SafeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..332e033a573ada40147e001463f70715ee9bcbe5
--- /dev/null
+++ b/src/routes/Userinfo/SafeView.js
@@ -0,0 +1,60 @@
+import React, { Component, Fragment } from 'react';
+import { List } from 'antd';
+
+const passwordStrength = {
+  strong: <font className="strong">强</font>,
+  medium: <font className="medium">中文</font>,
+  weak: <font className="weak">弱</font>,
+};
+
+export default class SafeView extends Component {
+  getData = () => {
+    return [
+      {
+        title: '账户密码',
+        description: (
+          <Fragment> 当前密码强度：{passwordStrength.strong}</Fragment>
+        ),
+        actions: [<a>修改</a>],
+      },
+      {
+        title: '密保手机',
+        description: '已绑定手机：138****8293',
+        actions: [<a>修改</a>],
+      },
+      {
+        title: '密保问题',
+        description: '未设置密保问题，密保问题可有效保护账户安全',
+        actions: [<a>设置</a>],
+      },
+      {
+        title: '备用邮箱',
+        description: '已绑定邮箱：ant***sign.com',
+        actions: [<a>修改</a>],
+      },
+      {
+        title: 'MFA 设备',
+        description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
+        actions: [<a>绑定</a>],
+      },
+    ];
+  };
+  render() {
+    return (
+      <Fragment>
+        <List
+          itemLayout="horizontal"
+          dataSource={this.getData()}
+          renderItem={item => (
+            <List.Item actions={item.actions}>
+              <List.Item.Meta
+                title={item.title}
+                description={item.description}
+              />
+            </List.Item>
+          )}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src/services/geographic.js b/src/services/geographic.js
new file mode 100644
index 0000000000000000000000000000000000000000..570a36e05239a9f869833d54ef6efb1077541996
--- /dev/null
+++ b/src/services/geographic.js
@@ -0,0 +1,9 @@
+import request from '../utils/request';
+
+export async function queryProvince() {
+  return request('/api/geographic/province');
+}
+
+export async function queryCity(province) {
+  return request(`/api/geographic/city/${province}`);
+}