diff --git a/package.json b/package.json
index d519e1a..bc958bb 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.0.38",
-    "D": "^1.0.0",
     "animate.css": "^3.7.2",
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
diff --git a/src/myview/index.js b/src/myview/index.js
index 23ba20c..6dc3164 100644
--- a/src/myview/index.js
+++ b/src/myview/index.js
@@ -2,7 +2,7 @@ import CopyRight from './components/CopyRight'
 import WhiteSpace from './components/WhiteSpace'
 import Label from './components/Label'
 import LabelGroup from './components/LabelGroup'
-import Card from '..component/Card'
+import Card from './components/Card'
 
 const components = {
   CopyRight,
diff --git a/src/router/route.js b/src/router/route.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/store/app.js b/src/store/app.js
deleted file mode 100644
index 642e211..0000000
--- a/src/store/app.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-const state = {
-  currentPage: {},
-  cachePages: [],
-  expandMisMenu: false,
-  loading: false
-}
-
-const getters = {
-  getCurrentPage (state) {
-    return state.currentPage
-  },
-  getCachePages (state) {
-    return state.cachePages
-  },
-  getCachePagesKeys (state) {
-    // TODO 用于页面缓存
-  },
-  getExpandMisMenu (state) {
-    return state.expandMisMenu
-  },
-  getLoading (state) {
-    return state.loading
-  }
-}
-
-const mutations = {
-  changeExpandMisMenu (state) {
-    let { expandMisMenu } = { ...state }
-    state.expandMisMenu = !expandMisMenu
-  },
-  loadingStart (state) {
-    state.loading = true
-  },
-  loadingFinish (state) {
-    state.loading = false
-  }
-}
-
-/**
- * @description actions 当中包含异步操作
- * @type {{UPDATECACHEPAGES(*, *=): void}}
- */
-const actions = {
-  CHANGEEXPANDMISMENU (context) {
-    context.commit('changeExpandMisMenu')
-  },
-  LOADINGSTART (context) {
-    context.commit('loadingStart')
-  },
-  LOADINGFINISHED (context) {
-    context.commit('loadingFinish')
-  }
-}
-
-const appnew = {
-  state,
-  getters,
-  mutations,
-  actions
-}
-
-export default appnew
diff --git a/src/store/index.d.ts b/src/store/index.d.ts
deleted file mode 100644
index 5d18f42..0000000
--- a/src/store/index.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vuex from 'vuex-class'
-// FIXME 稍后使用typescript进行重构
-declare var store: any
diff --git a/src/store/index.js b/src/store/index.ts
similarity index 79%
rename from src/store/index.js
rename to src/store/index.ts
index 54c3a02..db26676 100644
--- a/src/store/index.js
+++ b/src/store/index.ts
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import app from './app'
-import user from './user'
+import app from './newapp'
+import user from './newuser'
 
 Vue.use(Vuex)
 
diff --git a/src/store/newapp/index.ts b/src/store/newapp/index.ts
new file mode 100644
index 0000000..d83411f
--- /dev/null
+++ b/src/store/newapp/index.ts
@@ -0,0 +1,71 @@
+import { State } from './interface'
+import { Menu } from '../newuser/interface'
+import { Commit } from 'vuex'
+
+const state: State = {
+  currentPage: null,
+  cachePages: [],
+  expandMisMenu: false,
+  loading: false
+}
+
+const getters = {
+  getCurrentPage: (state: State) => state.currentPage,
+  getCachePages: (state: State) => state.cachePages,
+  getCachePagesKeys: (state: State) => state.cachePages,
+  getExpandMisMenu: (state: State) => state.expandMisMenu,
+  getLoading: (state: State) => state.loading
+}
+
+const mutations = {
+  updateCurrentPage: (state: State, menu: Menu) => {
+    state.currentPage = menu
+  },
+  updateCachePages: (state: State, menu: Menu) => {
+    let isHave: Boolean = false
+    let { cachePages } = { ...state }
+    cachePages.forEach((item: Menu) => {
+      if (item.mid === menu.mid) {
+        isHave = true
+      }
+    })
+    if (!isHave) {
+      state.cachePages.push(menu)
+    }
+  },
+  changeExpandMisMenu: (state: State) => {
+    let { expandMisMenu } = { ...state }
+    state.expandMisMenu = !expandMisMenu
+  },
+  loadingStart: (state: State) => {
+    state.loading = true
+  },
+  loadingFinish: (state: State) => {
+    state.loading = false
+  }
+}
+
+const actions = {
+  UPDATECURRENTPAGE: (context: { commit: Commit }, menu: Menu) => {
+    context.commit('updateCurrentPage', menu)
+    context.commit('updateCachePages', menu)
+  },
+  CHANGEEXPANDMISMENU: (context: { commit: Commit }) => {
+    context.commit('changeExpandMisMenu')
+  },
+  LOADINGSTART: (context: { commit: Commit }) => {
+    context.commit('loadingStart')
+  },
+  LOADINGFINISHED: (context: { commit: Commit }) => {
+    context.commit('loadingFinish')
+  }
+}
+
+const newapp = {
+  state,
+  getters,
+  mutations,
+  actions
+}
+
+export default newapp
diff --git a/src/store/newapp/interface.ts b/src/store/newapp/interface.ts
new file mode 100644
index 0000000..f69c3bf
--- /dev/null
+++ b/src/store/newapp/interface.ts
@@ -0,0 +1,8 @@
+import { Menu } from '../newuser/interface'
+
+export interface State {
+  currentPage: Menu | null,
+  cachePages: Array<Menu>,
+  expandMisMenu: boolean,
+  loading: boolean
+}
diff --git a/src/store/user.js b/src/store/newuser/index.ts
similarity index 51%
rename from src/store/user.js
rename to src/store/newuser/index.ts
index 692ae6f..e634e7b 100644
--- a/src/store/user.js
+++ b/src/store/newuser/index.ts
@@ -1,25 +1,21 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { State, CurrentUser } from './interface'
+import { Commit } from 'vuex'
 
-Vue.use(Vuex)
+const currentUser: CurrentUser = {
+  user: {},
+  menu: [],
+  dept: {}
+}
 
-const state = {
-  currentUser: {
-    user: {},
-    menu: [],
-    dept: {}
-  },
+const state: State = {
+  currentUser,
   isLogin: false
 }
 
 const getters = {
-  getUser (state) {
-    return state.currentUser.user
-  },
-  getMenu (state) {
-    return state.currentUser.menu
-  },
-  getMenuTree (state) {
+  getUser: (state: State) => state.currentUser.user,
+  getMenu: (state: State) => state.currentUser.menu,
+  getMenuTree: (state: State) => {
     let { menu } = { ...state.currentUser }
     // 找到一级菜单
     let menuTree = menu.filter(_menu => _menu.mlevel === 1)
@@ -29,39 +25,35 @@ const getters = {
     }
     return menuTree
   },
-  getDept (state) {
-    return state.currentUser.dept
-  },
-  getLogin (state) {
-    return state.isLogin
-  }
+  getDept: (state: State) => state.currentUser.dept,
+  getLogin: (state: State) => state.isLogin
 }
 
 const mutations = {
-  updateCurrentUser (state, currentUser) {
+  updateCurrentUser: (state: State, currentUser: CurrentUser) => {
     state.currentUser = currentUser
   },
-  changeLogin (state) {
+  changeLogin: (state: State) => {
     const { isLogin } = { ...state }
     state.isLogin = !isLogin
   }
 }
 
 const actions = {
-  UPDATECURRENTUSER (context, currentUser) {
+  UPDATECURRENTUSER (context: {commit: Commit}, currentUser: CurrentUser) {
     context.commit('updateCurrentUser', currentUser)
     context.commit('changeLogin', currentUser)
   },
-  CHANGELOGIN (context) {
+  CHANGELOGIN (context: {commit: Commit}) {
     context.commit('changeLogin')
   }
 }
 
-const usernew = {
+const newuser = {
   state,
   getters,
   mutations,
   actions
 }
 
-export default usernew
+export default newuser
diff --git a/src/store/newuser/interface.ts b/src/store/newuser/interface.ts
new file mode 100644
index 0000000..70df0f8
--- /dev/null
+++ b/src/store/newuser/interface.ts
@@ -0,0 +1,24 @@
+export interface Menu {
+  mid: number,
+  mkey: String,
+  mname: String,
+  micon: String,
+  mpath: String,
+  mtip: String,
+  mrender: String,
+  mpid: number,
+  mlevel: Number,
+  mstatus: Number,
+  child?: Array<Menu>
+}
+
+export interface CurrentUser {
+  user: any,
+  menu: Array<Menu>,
+  dept: any
+}
+
+export interface State {
+  currentUser: CurrentUser,
+  isLogin: boolean
+}
diff --git a/src/views/mis/MisContainer.vue b/src/views/mis/MisContainer.vue
index ad2606d..32b50c3 100644
--- a/src/views/mis/MisContainer.vue
+++ b/src/views/mis/MisContainer.vue
@@ -29,7 +29,7 @@
           </el-popover>
         </el-header>
         <el-main element-loading-spinner="iconfont mvloading loading-animation" v-loading="getLoading">
-          <mis-tab-navi />
+          <mis-tab-navi :navi-list="getCachePages" :active-navi="getCurrentPage" />
           <router-view v-if="getLogin" />
           <copy-right />
         </el-main>
@@ -56,8 +56,25 @@ export default {
       showSetting: false
     }
   },
+  watch: {
+    $route: {
+      handler (to, from) {
+        let getMenu = this.getMenu
+        let menu = false
+        for (let _menu of getMenu) {
+          if (_menu.mkey === to.name) {
+            menu = _menu
+          }
+        }
+        if (menu) {
+          this.$store.dispatch('UPDATECURRENTPAGE', menu)
+        }
+      },
+      immediate: true
+    }
+  },
   computed: {
-    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading'])
+    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading', 'getMenu', 'getCurrentPage', 'getCachePages'])
   },
   methods: {
     handleSiderTrigger () {
diff --git a/src/views/mis/components/MisMenu/MisMenu.vue b/src/views/mis/components/MisMenu/MisMenu.vue
index 3831fdb..e03affa 100644
--- a/src/views/mis/components/MisMenu/MisMenu.vue
+++ b/src/views/mis/components/MisMenu/MisMenu.vue
@@ -33,33 +33,27 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { State, Mutation, Getter } from 'vuex-class'
 
-export default {
-  name: 'MisMenu',
-  data () {
-    return {
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getExpandMisMenu',
-      'getMenuTree'
-    ])
-  },
-  methods: {
-    handleOpen (key, keyPath) {
-      console.log(key, keyPath)
-    },
-    handleClose (key, keyPath) {
-      console.log(key, keyPath)
-    },
-    handleSelect (index, indexPath, item) {
-      this.$router.push({
-        name: index
-      })
-    }
+@Component({
+  name: 'MisMenu'
+})
+export default class MisMenu extends Vue {
+  @Getter private getExpandMisMenu: Boolean
+  @Getter private getMenuTree: Boolean
+
+  private handleOpen (key: String, keyPath: String) {
+    console.log(key, keyPath)
+  }
+  private handleClose (key: String, keyPath: String) {
+    console.log(key, keyPath)
+  }
+  private handleSelect (index: any, indexPath: String, item: any) {
+    this.$router.push({
+      name: index
+    })
   }
 }
 </script>
diff --git a/src/views/mis/components/MisTab/MisTab.vue b/src/views/mis/components/MisTab/MisTab.vue
index 5fe87d4..1e21b8c 100644
--- a/src/views/mis/components/MisTab/MisTab.vue
+++ b/src/views/mis/components/MisTab/MisTab.vue
@@ -13,15 +13,12 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MisTab',
-  props: {
-    activeTab: {
-      type: String,
-      default: 'list'
-    }
-  }
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class MisTab extends Vue {
+  @Prop() private activeTab: String = 'list'
 }
 </script>
 
diff --git a/src/views/mis/components/MisTabNavi/MisTabNavi.vue b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
index 0933886..59b3956 100644
--- a/src/views/mis/components/MisTabNavi/MisTabNavi.vue
+++ b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
@@ -7,16 +7,15 @@
         </span>
         <div class="tab-navi-scroll">
           <div class="tab-navi">
-            <div class="tab-item">测试菜单1<Icon style="margin-right: -6px;" type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div :key="menu.mkey" @click="handleTabClick(menu)" v-for="(menu, index) of naviList" class="tab-item">{{menu.mname}}<Icon type="md-close" /></div>
+            <!-- <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
             <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
+            <div class="tab-item">测试菜单1<Icon type="md-close" /></div> -->
           </div>
         </div>
         <span @click="handleNext" class="tab-navi-next">
@@ -30,12 +29,25 @@
 <script>
 export default {
   name: 'MisTabNavi',
+  props: {
+    naviList: {
+      type: Array
+    },
+    activeNavi: {
+      type: Object
+    }
+  },
   methods: {
     handlePrev () {
 
     },
     handleNext () {
 
+    },
+    handleTabClick (menu) {
+      this.$router.push({
+        name: menu.mkey
+      })
     }
   }
 }
@@ -73,7 +85,7 @@ export default {
         position: relative;
         transition: transform 0.5s ease-in-out;
         .tab-item {
-          width: 100px;
+          min-width: 100px;
           margin-right: 10px;
           height: 32px;
           line-height: 32px;
diff --git a/src/views/mis/components/MisTable/MisTable.vue b/src/views/mis/components/MisTable/MisTable.vue
index f8b0959..22d9eea 100644
--- a/src/views/mis/components/MisTable/MisTable.vue
+++ b/src/views/mis/components/MisTable/MisTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mis-table">
     <el-table
-    :data="data"
+    :data="tabledata"
     style="width: 100%"
     border
     size="small"
@@ -9,8 +9,6 @@
     v-loading="loading"
     @select="handleSelect"
     @row-dblclick="handleDbclick">
-      <!-- <el-table-column v-for="(column, index) of columns" type="index" align="center" width="50">
-      </el-table-column> -->
       <el-table-column type="index" align="center" width="50"/>
       <el-table-column type="selection" align="center" width="55"/>
       <el-table-column prop="date" :formatter="dataFormat" label="日期" width="180"/>
@@ -21,55 +19,40 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import TableColumn from './TableColumn'
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { State, Getter, Mutation, Action } from 'vuex-class'
 import moment from 'moment'
+import TableColumn from './TableColumn'
 
-export default Vue.extend({
-  name: 'mis-table',
-  props: {
-    stripe: {
-      type: Boolean,
-      default: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => {}
-    },
-    data: {
-      type: Array,
-      default: () => {
-        return [
-        ]
-      }
-    }
-  },
-  data () {
-    return {}
-  },
-  methods: {
-    handleDbclick (row, column, event) {
-      console.log('双击被触发了')
-      this.$emit('handleDbclick', row, column, event)
-    },
-    handleSelect (selection, row) {
-      this.$emit('handleSelect', selection, row)
-    },
-    dataFormat (row, column, cellValue, index) {
-      return moment(cellValue).format('YYYY-MM-DD')
-    }
-  },
-  mounted () {
+@Component
+export default class MisTable extends Vue {
+  @Prop({ type: Boolean, default: true })
+  private stripe: Boolean = true
+  @Prop({ type: Boolean, default: false })
+  private loading: Boolean = false
+  @Prop({})
+  private columns: () => []
+  @Prop({ default: [] })
+  private tabledata: Array<any>
+
+  private handleDbclick (row: any, column: any, event: any) {
+    console.log('双击被触发了')
+    this.$emit('handleDbclick', row, column, event)
+  }
+  private handleSelect (selection: any, row: any) {
+    this.$emit('handleSelect', selection, row)
+  }
+  private dataFormat (row: any, column: any, cellValue: any, index: any) {
+    return moment(cellValue).format('YYYY-MM-DD')
+  }
+
+  private mounted () {
     let tableColumn: TableColumn = {
       prop: 'data',
       label: '日期'
     }
   }
-})
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/mis/sys/SysPage1.vue b/src/views/mis/sys/SysPage1.vue
index 10a8705..7e2bef5 100644
--- a/src/views/mis/sys/SysPage1.vue
+++ b/src/views/mis/sys/SysPage1.vue
@@ -29,7 +29,7 @@
             </FormItem>
           </Form>
         </div>
-        <mis-table :data="data" :columns="columns" @handleDbclick="handleDbclick" @handleSelect="handleSelect" :loading="searching" />
+        <mis-table :tabledata="data" :columns="columns" @handleDbclick="handleDbclick" @handleSelect="handleSelect" :loading="searching" />
         <white-space />
         <Page show-total @on-change="handlePageChange" :total="total" show-sizer />
       </div>
diff --git a/src/views/mis/sys/SysPage3.vue b/src/views/mis/sys/SysPage3.vue
index ed22341..b001a19 100644
--- a/src/views/mis/sys/SysPage3.vue
+++ b/src/views/mis/sys/SysPage3.vue
@@ -18,7 +18,7 @@
         </FormItem>
       </Form>
     </div>
-    <mis-table :data="data" :loading="searching" />
+    <mis-table :tabledata="data" :loading="searching" />
     <white-space />
     <Page @on-change="handlePageChange" :total="total" show-sizer />
   </mis-simple-list>
diff --git a/tsconfig.json b/tsconfig.json
index 34810b9..aa0b3d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": false, // FIXME 需要解决的问题
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
diff --git a/yarn.lock b/yarn.lock
index 2393a28..0605921 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1341,11 +1341,6 @@
   resolved "https://registry.npm.taobao.org/@xtuc/long/download/@xtuc/long-4.2.1.tgz#5c85d662f76fa1d34575766c5dcd6615abcd30d8"
   integrity sha1-XIXWYvdvodNFdXZsXc1mFavNMNg=
 
-D@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npm.taobao.org/D/download/D-1.0.0.tgz#c348a4e034f72847be51206fc530fc089e9cc2a9"
-  integrity sha1-w0ik4DT3KEe+USBvxTD8CJ6cwqk=
-
 abab@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/abab/download/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"