diff --git a/src/components/dashboard/ChartCard.vue b/src/components/card/ChartCard.vue
similarity index 100%
rename from src/components/dashboard/ChartCard.vue
rename to src/components/card/ChartCard.vue
diff --git a/src/components/check/Index.vue b/src/components/check/Index.vue
deleted file mode 100644
index 286bf17..0000000
--- a/src/components/check/Index.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div style="text-align: center; margin-top: 48px">
-    <color-check-box-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block">
-      <color-check-box color="rgb(245, 34, 45)" value="1" />
-      <color-check-box color="rgb(250, 84, 28)" value="2" />
-      <color-check-box color="rgb(250, 173, 20)" value="3" />
-      <color-check-box color="rgb(19, 194, 194)" value="4" />
-      <color-check-box color="rgb(82, 196, 26)" value="5" />
-      <color-check-box color="rgb(24, 144, 255)" value="6" />
-      <color-check-box color="rgb(47, 84, 235)" value="7" />
-      <color-check-box color="rgb(114, 46, 209)" value="8" />
-      <color-check-box color="rgb(256, 0, 0)" value="9" />
-      <color-check-box color="rgb(0, 256, 0)" value="10" />
-      <color-check-box color="rgb(0, 0, 256)" value="11" />
-      <color-check-box color="rgb(256, 256, 0)" value="12" />
-    </color-check-box-group>
-    <div></div>
-    <div class="view-color" :style="{backgroundColor: color}"/>
-  </div>
-</template>
-
-<script>
-import ColorCheckBox from './ColorCheckBox'
-
-const ColorCheckBoxGroup = ColorCheckBox.Group
-
-export default {
-  name: 'Index',
-  data () {
-    return {
-      color: 'rgb(245, 34, 45)'
-    }
-  },
-  components: {ColorCheckBox, ColorCheckBoxGroup},
-  methods: {
-    changeColor (values, colors) {
-      this.color = this.calculateColor(colors)
-    },
-    calculateColor (colors) {
-      let red = 0
-      let green = 0
-      let blue = 0
-      let values
-      colors.forEach(color => {
-        values = color.split('(')[1].split(')')[0].split(',')
-        red = Math.max(red, parseInt(values[0]))
-        green += Math.max(green, parseInt(values[1]))
-        blue += Math.max(blue, parseInt(values[2]))
-      })
-      return 'rgb(' + red + ',' + green + ',' + blue + ')'
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .view-color{
-    margin-top: 48px;
-    display: inline-block;
-    height: 96px;
-    width: 96px;
-    border-radius: 48px;
-    border: 1px dashed gray;
-  }
-</style>
diff --git a/src/components/check/ColorCheckBox.vue b/src/components/checkbox/ColorCheckbox.vue
similarity index 98%
rename from src/components/check/ColorCheckBox.vue
rename to src/components/checkbox/ColorCheckbox.vue
index 4983552..4763fa1 100644
--- a/src/components/check/ColorCheckBox.vue
+++ b/src/components/checkbox/ColorCheckbox.vue
@@ -8,7 +8,7 @@
 import AIcon from 'ant-design-vue/es/icon/icon'
 
 const Group = {
-  name: 'ColorCheckBoxGroup',
+  name: 'ColorCheckboxGroup',
   props: {
     defaultValues: {
       type: Array,
@@ -80,7 +80,7 @@ const Group = {
 }
 
 export default {
-  name: 'ColorCheckBox',
+  name: 'ColorCheckbox',
   Group: Group,
   components: {AIcon},
   props: {
diff --git a/src/components/check/ImgCheckBox.vue b/src/components/checkbox/ImgCheckbox.vue
similarity index 98%
rename from src/components/check/ImgCheckBox.vue
rename to src/components/checkbox/ImgCheckbox.vue
index 8800a23..034fcb5 100644
--- a/src/components/check/ImgCheckBox.vue
+++ b/src/components/checkbox/ImgCheckbox.vue
@@ -11,7 +11,7 @@
 import AIcon from 'ant-design-vue/es/icon/icon'
 
 const Group = {
-  name: 'ImgCheckBoxGroup',
+  name: 'ImgCheckboxGroup',
   props: {
     multiple: {
       type: Boolean,
@@ -73,7 +73,7 @@ const Group = {
 }
 
 export default {
-  name: 'ImgCheckBox',
+  name: 'ImgCheckbox',
   Group,
   props: {
     checked: {
diff --git a/src/components/layout/CommonPageLayout.vue b/src/components/layout/CommonPageLayout.vue
deleted file mode 100644
index 4ea20de..0000000
--- a/src/components/layout/CommonPageLayout.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div style="margin: -24px -24px 0px">
-    <page-header :breadcrumb="breadcrumb"/>
-    <div style="margin: 24px 24px 0px">
-      <router-view  ref="page"/>
-    </div>
-  </div>
-</template>
-
-<script>
-import PageHeader from '../page/PageHeader'
-export default {
-  name: 'CommonPageLayout',
-  components: {PageHeader},
-  data () {
-    return {
-      breadcrumb: []
-    }
-  },
-  mounted () {
-    this.getPageHeaderInfo()
-  },
-  beforeUpdate () {
-    this.getPageHeaderInfo()
-  },
-  methods: {
-    getPageHeaderInfo () {
-      this.breadcrumb = this.$route.matched
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/setting/Setting.vue b/src/components/setting/Setting.vue
index 1ef8ec7..7875ad3 100644
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@@ -1,29 +1,29 @@
 <template>
   <a-layout-sider class="sider" width="273">
     <setting-item title="整体风格设置">
-      <img-check-box-group @change="setTheme">
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
-      </img-check-box-group>
+      <img-checkbox-group @change="setTheme">
+        <img-checkbox img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
+        <img-checkbox img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
+      </img-checkbox-group>
     </setting-item>
     <setting-item title="主题色">
-      <color-check-box-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
-        <color-check-box ref="colorNode" color="rgb(245, 34, 45)" value="1" />
-        <color-check-box color="rgb(250, 84, 28)" value="2" />
-        <color-check-box color="rgb(250, 173, 20)" value="3" />
-        <color-check-box color="rgb(19, 194, 194)" value="4" />
-        <color-check-box color="rgb(82, 196, 26)" value="5" />
-        <color-check-box color="rgb(24, 144, 255)" value="6" />
-        <color-check-box color="rgb(47, 84, 235)" value="7" />
-        <color-check-box color="rgb(114, 46, 209)" value="8" />
-      </color-check-box-group>
+      <color-checkbox-group @change="onColorChange" :defaultValues="['1', '2', '3']" :multiple="false">
+        <color-checkbox ref="colorNode" color="rgb(245, 34, 45)" value="1" />
+        <color-checkbox color="rgb(250, 84, 28)" value="2" />
+        <color-checkbox color="rgb(250, 173, 20)" value="3" />
+        <color-checkbox color="rgb(19, 194, 194)" value="4" />
+        <color-checkbox color="rgb(82, 196, 26)" value="5" />
+        <color-checkbox color="rgb(24, 144, 255)" value="6" />
+        <color-checkbox color="rgb(47, 84, 235)" value="7" />
+        <color-checkbox color="rgb(114, 46, 209)" value="8" />
+      </color-checkbox-group>
     </setting-item>
     <a-divider/>
     <setting-item title="导航设置">
-      <img-check-box-group @change="setLayout">
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" value="side"/>
-        <img-check-box img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
-      </img-check-box-group>
+      <img-checkbox-group @change="setLayout">
+        <img-checkbox img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" :checked="true" value="side"/>
+        <img-checkbox img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
+      </img-checkbox-group>
     </setting-item>
     <setting-item>
       <a-list :split="false">
@@ -73,21 +73,21 @@ import AListItem from 'ant-design-vue/es/list/Item'
 import AButton from 'ant-design-vue/es/button/button'
 import ASwitch from 'ant-design-vue/es/switch/index'
 import ASelect from 'ant-design-vue/es/select/index'
-import ColorCheckBox from '../check/ColorCheckBox'
-import ImgCheckBox from '../check/ImgCheckBox'
+import ColorCheckbox from '../checkbox/ColorCheckbox'
+import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
 
 const ASelectOption = ASelect.Option
-const ColorCheckBoxGroup = ColorCheckBox.Group
-const ImgCheckBoxGroup = ImgCheckBox.Group
+const ColorCheckboxGroup = ColorCheckbox.Group
+const ImgCheckboxGroup = ImgCheckbox.Group
 
 export default {
   name: 'Setting',
   components: {
-    ImgCheckBoxGroup,
-    ImgCheckBox,
-    ColorCheckBoxGroup,
-    ColorCheckBox,
+    ImgCheckboxGroup,
+    ImgCheckbox,
+    ColorCheckboxGroup,
+    ColorCheckbox,
     ASelectOption,
     ASelect,
     ASwitch,
diff --git a/src/components/task/TaskCard.vue b/src/components/task/TaskGroup.vue
similarity index 96%
rename from src/components/task/TaskCard.vue
rename to src/components/task/TaskGroup.vue
index 975cbb0..aed813f 100644
--- a/src/components/task/TaskCard.vue
+++ b/src/components/task/TaskGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="task-card">
+  <div class="task-group">
     <div class="task-head">
       <h3 class="title"><span v-if="count">{{count}}</span>{{title}}</h3>
       <div class="actions" style="float: right">
@@ -30,7 +30,7 @@ const dragOptions = {
 }
 
 export default {
-  name: 'TaskCard',
+  name: 'TaskGroup',
   components: {AIcon, Draggable},
   props: ['title', 'group'],
   data () {
@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="less">
-  .task-card{
+  .task-group{
     width: 33.33%;
     padding: 8px 8px;
     background-color: #e1e4e8;
diff --git a/src/components/layout/GlobalFooter.vue b/src/layouts/GlobalFooter.vue
similarity index 100%
rename from src/components/layout/GlobalFooter.vue
rename to src/layouts/GlobalFooter.vue
diff --git a/src/components/layout/GlobalHeader.vue b/src/layouts/GlobalHeader.vue
similarity index 98%
rename from src/components/layout/GlobalHeader.vue
rename to src/layouts/GlobalHeader.vue
index 419ec57..bf8f0c2 100644
--- a/src/components/layout/GlobalHeader.vue
+++ b/src/layouts/GlobalHeader.vue
@@ -33,7 +33,7 @@ import HeaderNotice from './HeaderNotice'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
 import HeaderAvatar from './HeaderlAvatar'
 import ADivider from 'ant-design-vue/es/divider/index'
-import IMenu from '../menu/menu'
+import IMenu from '../components/menu/menu'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
diff --git a/src/components/layout/GlobalLayout.vue b/src/layouts/GlobalLayout.vue
similarity index 93%
rename from src/components/layout/GlobalLayout.vue
rename to src/layouts/GlobalLayout.vue
index 4e42547..12b1dbd 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.vue
@@ -26,11 +26,10 @@
 import ALayout from 'ant-design-vue/es/layout'
 import GlobalHeader from './GlobalHeader'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import IMenu from '../menu/menu'
 import GlobalFooter from './GlobalFooter'
-import Drawer from '../tool/Drawer'
-import SiderMenu from '../menu/SiderMenu'
-import Setting from '../setting/Setting'
+import Drawer from '../components/tool/Drawer'
+import SiderMenu from '../components/menu/SiderMenu'
+import Setting from '../components/setting/Setting'
 
 const ALayoutSider = ALayout.Sider
 const ALayoutHeader = ALayout.Header
@@ -53,8 +52,7 @@ export default {
     ALayoutSider,
     ALayoutHeader,
     ALayoutContent,
-    ALayoutFooter,
-    IMenu},
+    ALayoutFooter},
   data () {
     return {
       minHeight: minHeight + 'px',
diff --git a/src/components/layout/HeaderNotice.vue b/src/layouts/HeaderNotice.vue
similarity index 100%
rename from src/components/layout/HeaderNotice.vue
rename to src/layouts/HeaderNotice.vue
diff --git a/src/components/layout/HeaderSearch.vue b/src/layouts/HeaderSearch.vue
similarity index 100%
rename from src/components/layout/HeaderSearch.vue
rename to src/layouts/HeaderSearch.vue
diff --git a/src/components/layout/HeaderlAvatar.vue b/src/layouts/HeaderlAvatar.vue
similarity index 100%
rename from src/components/layout/HeaderlAvatar.vue
rename to src/layouts/HeaderlAvatar.vue
diff --git a/src/components/layout/MenuView.vue b/src/layouts/MenuView.vue
similarity index 100%
rename from src/components/layout/MenuView.vue
rename to src/layouts/MenuView.vue
diff --git a/src/components/layout/PageLayout.vue b/src/layouts/PageLayout.vue
similarity index 96%
rename from src/components/layout/PageLayout.vue
rename to src/layouts/PageLayout.vue
index 08c0990..c0acc9d 100644
--- a/src/components/layout/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import PageHeader from '../page/PageHeader'
+import PageHeader from '../components/page/PageHeader'
 import AIcon from 'ant-design-vue/es/icon/icon'
 export default {
   name: 'PageLayout',
diff --git a/src/components/layout/PageView.vue b/src/layouts/PageView.vue
similarity index 94%
rename from src/components/layout/PageView.vue
rename to src/layouts/PageView.vue
index 8dd6545..a153337 100644
--- a/src/components/layout/PageView.vue
+++ b/src/layouts/PageView.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import PageHeader from '../page/PageHeader'
+import PageHeader from '../components/page/PageHeader'
 import PageLayout from './PageLayout'
 export default {
   name: 'PageView',
diff --git a/src/components/layout/RouteView.vue b/src/layouts/RouteView.vue
similarity index 100%
rename from src/components/layout/RouteView.vue
rename to src/layouts/RouteView.vue
diff --git a/src/pages/components/Palette.vue b/src/pages/components/Palette.vue
new file mode 100644
index 0000000..1e659f4
--- /dev/null
+++ b/src/pages/components/Palette.vue
@@ -0,0 +1,65 @@
+<template>
+  <div style="text-align: center; margin-top: 48px">
+    <color-checkbox-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block">
+      <color-checkbox color="rgb(245, 34, 45)" value="1" />
+      <color-checkbox color="rgb(250, 84, 28)" value="2" />
+      <color-checkbox color="rgb(250, 173, 20)" value="3" />
+      <color-checkbox color="rgb(19, 194, 194)" value="4" />
+      <color-checkbox color="rgb(82, 196, 26)" value="5" />
+      <color-checkbox color="rgb(24, 144, 255)" value="6" />
+      <color-checkbox color="rgb(47, 84, 235)" value="7" />
+      <color-checkbox color="rgb(114, 46, 209)" value="8" />
+      <color-checkbox color="rgb(256, 0, 0)" value="9" />
+      <color-checkbox color="rgb(0, 256, 0)" value="10" />
+      <color-checkbox color="rgb(0, 0, 256)" value="11" />
+      <color-checkbox color="rgb(256, 256, 0)" value="12" />
+    </color-checkbox-group>
+    <div></div>
+    <div class="view-color" :style="{backgroundColor: color}"/>
+  </div>
+</template>
+
+<script>
+import ColorCheckbox from '../../components/checkbox/ColorCheckbox'
+
+const ColorCheckboxGroup = ColorCheckbox.Group
+
+export default {
+  name: 'Palette',
+  data () {
+    return {
+      color: 'rgb(245, 34, 45)'
+    }
+  },
+  components: {ColorCheckbox, ColorCheckboxGroup},
+  methods: {
+    changeColor (values, colors) {
+      this.color = this.calculateColor(colors)
+    },
+    calculateColor (colors) {
+      let red = 0
+      let green = 0
+      let blue = 0
+      let values
+      colors.forEach(color => {
+        values = color.split('(')[1].split(')')[0].split(',')
+        red = Math.max(red, parseInt(values[0]))
+        green += Math.max(green, parseInt(values[1]))
+        blue += Math.max(blue, parseInt(values[2]))
+      })
+      return 'rgb(' + red + ',' + green + ',' + blue + ')'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .view-color{
+    margin-top: 48px;
+    display: inline-block;
+    height: 96px;
+    width: 96px;
+    border-radius: 48px;
+    border: 1px dashed gray;
+  }
+</style>
diff --git a/src/components/task/Index.vue b/src/pages/components/TaskCard.vue
similarity index 65%
rename from src/components/task/Index.vue
rename to src/pages/components/TaskCard.vue
index 396ab67..9cefaa0 100644
--- a/src/components/task/Index.vue
+++ b/src/pages/components/TaskCard.vue
@@ -1,26 +1,26 @@
 <template>
   <div style="display: flex">
-    <task-card class="task-card" title="ToDo" group="task">
+    <task-group class="task-group" title="ToDo" group="task">
       <task-item :key="index" v-for="(item, index) in todoList" :content="item" />
-    </task-card>
-    <task-card class="task-card" title="In Progress" group="task">
+    </task-group>
+    <task-group class="task-group" title="In Progress" group="task">
       <task-item :key="index" v-for="(item, index) in inproList" :content="item" />
-    </task-card>
-    <task-card class="task-card" title="Done" group="task">
+    </task-group>
+    <task-group class="task-group" title="Done" group="task">
       <task-item :key="index" v-for="(item, index) in doneList" :content="item" />
-    </task-card>
+    </task-group>
   </div>
 </template>
 
 <script>
-import TaskCard from './TaskCard'
-import TaskItem from './TaskItem'
+import TaskGroup from '../../components/task/TaskGroup'
+import TaskItem from '../../components/task/TaskItem'
 const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
 const inproList = ['任务七', '任务八', '任务九', '任务十', '任务十一', '任务十二']
 const doneList = ['任务十三', '任务十四', '任务十五', '任务十六', '任务十七', '任务十八']
 export default {
-  name: 'Index',
-  components: {TaskItem, TaskCard},
+  name: 'TaskCard',
+  components: {TaskItem, TaskGroup},
   data () {
     return {
       todoList,
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .task-card{
+  .task-group{
     margin: 0 48px;
   }
 </style>
diff --git a/src/components/dashboard/Dashboard.vue b/src/pages/dashboard/Analysis.vue
similarity index 90%
rename from src/components/dashboard/Dashboard.vue
rename to src/pages/dashboard/Analysis.vue
index 87df5c8..1c21dde 100644
--- a/src/components/dashboard/Dashboard.vue
+++ b/src/pages/dashboard/Analysis.vue
@@ -105,19 +105,19 @@
 import ACol from 'ant-design-vue/es/grid/Col'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACard from 'ant-design-vue/es/card/Card'
-import ChartCard from './ChartCard'
+import ChartCard from '../../components/card/ChartCard'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import MiniArea from '../chart/MiniArea'
-import MiniBar from '../chart/MiniBar'
-import MiniProgress from '../chart/MiniProgress'
+import MiniArea from '../../components/chart/MiniArea'
+import MiniBar from '../../components/chart/MiniBar'
+import MiniProgress from '../../components/chart/MiniProgress'
 import ATabs from 'ant-design-vue/es/tabs'
 import ADatePicker from 'ant-design-vue/es/date-picker'
-import Bar from '../chart/Bar'
-import RankingList from '../chart/RankingList'
-import HotSearch from '../analysis/HotSearch'
-import SalesData from '../analysis/SalesData'
-import Trend from '../chart/Trend'
+import Bar from '../../components/chart/Bar'
+import RankingList from '../../components/chart/RankingList'
+import HotSearch from '../../components/analysis/HotSearch'
+import SalesData from '../../components/analysis/SalesData'
+import Trend from '../../components/chart/Trend'
 
 const rankList = []
 
@@ -131,7 +131,7 @@ for (let i = 0; i < 8; i++) {
 const ATabPane = ATabs.TabPane
 const ARangePicker = ADatePicker.RangePicker
 export default {
-  name: 'dashboard',
+  name: 'analysis',
   data () {
     return {
       rankList
diff --git a/src/components/dashboard/WorkPlace.vue b/src/pages/dashboard/WorkPlace.vue
similarity index 96%
rename from src/components/dashboard/WorkPlace.vue
rename to src/pages/dashboard/WorkPlace.vue
index a4e2110..18e8f2b 100644
--- a/src/components/dashboard/WorkPlace.vue
+++ b/src/pages/dashboard/WorkPlace.vue
@@ -87,10 +87,10 @@
 </template>
 
 <script>
-import PageHeader from '../page/PageHeader'
-import PageLayout from '../layout/PageLayout'
+import PageHeader from '../../components/page/PageHeader'
+import PageLayout from '../../layouts/PageLayout'
 import AAvatar from 'ant-design-vue/es/avatar/Avatar'
-import HeadInfo from '../tool/HeadInfo'
+import HeadInfo from '../../components/tool/HeadInfo'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import ACard from 'ant-design-vue/es/card/Card'
@@ -100,7 +100,7 @@ import AList from 'ant-design-vue/es/list/index'
 import AListItem from 'ant-design-vue/es/list/Item'
 import AButton from 'ant-design-vue/es/button/button'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import Radar from '../chart/Radar'
+import Radar from '../../components/chart/Radar'
 
 const AListItemMeta = AListItem.Meta
 
diff --git a/src/components/detail/AdvancedDetail.vue b/src/pages/detail/AdvancedDetail.vue
similarity index 97%
rename from src/components/detail/AdvancedDetail.vue
rename to src/pages/detail/AdvancedDetail.vue
index 50a102c..77af82a 100644
--- a/src/components/detail/AdvancedDetail.vue
+++ b/src/pages/detail/AdvancedDetail.vue
@@ -121,16 +121,16 @@
 </template>
 
 <script>
-import PageLayout from '../layout/PageLayout'
+import PageLayout from '../../layouts/PageLayout'
 import AButtonGroup from 'ant-design-vue/es/button/button-group'
 import AButton from 'ant-design-vue/es/button/button'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import DetailList from '../tool/DetailList'
+import DetailList from '../../components/tool/DetailList'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import ACard from 'ant-design-vue/es/card/Card'
 import ASteps from 'ant-design-vue/es/steps/index'
-import AStepItem from '../tool/AStepItem'
+import AStepItem from '../../components/tool/AStepItem'
 import ADivider from 'ant-design-vue/es/divider/index'
 import ATable from 'ant-design-vue/es/table'
 import {operation1, operation2, operation3, operationColumns} from '../../mock/common/tableData'
diff --git a/src/components/detail/BasicDetail.vue b/src/pages/detail/BasicDetail.vue
similarity index 97%
rename from src/components/detail/BasicDetail.vue
rename to src/pages/detail/BasicDetail.vue
index e5ce038..2aff809 100644
--- a/src/components/detail/BasicDetail.vue
+++ b/src/pages/detail/BasicDetail.vue
@@ -39,10 +39,10 @@
 import ACard from 'ant-design-vue/es/card/Card'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
 import AAvatar from 'ant-design-vue/es/avatar/Avatar'
-import DetailList from '../tool/DetailList'
+import DetailList from '../../components/tool/DetailList'
 import ADivider from 'ant-design-vue/es/divider/index'
 import ATable from 'ant-design-vue/es/table'
-import PageLayout from '../layout/PageLayout'
+import PageLayout from '../../layouts/PageLayout'
 
 const DetailListItem = DetailList.Item
 
diff --git a/src/components/exception/403.vue b/src/pages/exception/403.vue
similarity index 68%
rename from src/components/exception/403.vue
rename to src/pages/exception/403.vue
index e209577..cdb0f11 100644
--- a/src/components/exception/403.vue
+++ b/src/pages/exception/403.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ExceptionPage from './ExceptionPage'
+import ExceptionPage from '../../components/exception/ExceptionPage'
 export default {
   components: {ExceptionPage}
 }
diff --git a/src/components/exception/404.vue b/src/pages/exception/404.vue
similarity index 68%
rename from src/components/exception/404.vue
rename to src/pages/exception/404.vue
index 2ca74ec..c47f870 100644
--- a/src/components/exception/404.vue
+++ b/src/pages/exception/404.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ExceptionPage from './ExceptionPage'
+import ExceptionPage from '../../components/exception/ExceptionPage'
 export default {
   components: {ExceptionPage}
 }
diff --git a/src/components/exception/500.vue b/src/pages/exception/500.vue
similarity index 68%
rename from src/components/exception/500.vue
rename to src/pages/exception/500.vue
index 4bb36a4..d80ca2e 100644
--- a/src/components/exception/500.vue
+++ b/src/pages/exception/500.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ExceptionPage from './ExceptionPage'
+import ExceptionPage from '../../components/exception/ExceptionPage'
 export default {
   components: {ExceptionPage}
 }
diff --git a/src/components/form/BasicForm.vue b/src/pages/form/BasicForm.vue
similarity index 100%
rename from src/components/form/BasicForm.vue
rename to src/pages/form/BasicForm.vue
diff --git a/src/components/form/advancedForm/AdvancedForm.vue b/src/pages/form/advancedForm/AdvancedForm.vue
similarity index 95%
rename from src/components/form/advancedForm/AdvancedForm.vue
rename to src/pages/form/advancedForm/AdvancedForm.vue
index 3daee4c..2e002c2 100644
--- a/src/components/form/advancedForm/AdvancedForm.vue
+++ b/src/pages/form/advancedForm/AdvancedForm.vue
@@ -20,7 +20,7 @@ import ACard from 'ant-design-vue/es/card/Card'
 import RepositoryForm from './RepositoryForm'
 import TaskForm from './TaskForm'
 import TableForm from './TableForm'
-import FooterToolBar from '../../tool/FooterToolBar'
+import FooterToolBar from '../../../components/tool/FooterToolBar'
 import AButton from 'ant-design-vue/es/button/button'
 
 export default {
diff --git a/src/components/form/advancedForm/RepositoryForm.vue b/src/pages/form/advancedForm/RepositoryForm.vue
similarity index 100%
rename from src/components/form/advancedForm/RepositoryForm.vue
rename to src/pages/form/advancedForm/RepositoryForm.vue
diff --git a/src/components/form/advancedForm/TableForm.vue b/src/pages/form/advancedForm/TableForm.vue
similarity index 100%
rename from src/components/form/advancedForm/TableForm.vue
rename to src/pages/form/advancedForm/TableForm.vue
diff --git a/src/components/form/advancedForm/TaskForm.vue b/src/pages/form/advancedForm/TaskForm.vue
similarity index 100%
rename from src/components/form/advancedForm/TaskForm.vue
rename to src/pages/form/advancedForm/TaskForm.vue
diff --git a/src/components/form/stepForm/Step1.vue b/src/pages/form/stepForm/Step1.vue
similarity index 100%
rename from src/components/form/stepForm/Step1.vue
rename to src/pages/form/stepForm/Step1.vue
diff --git a/src/components/form/stepForm/Step2.vue b/src/pages/form/stepForm/Step2.vue
similarity index 100%
rename from src/components/form/stepForm/Step2.vue
rename to src/pages/form/stepForm/Step2.vue
diff --git a/src/components/form/stepForm/Step3.vue b/src/pages/form/stepForm/Step3.vue
similarity index 93%
rename from src/components/form/stepForm/Step3.vue
rename to src/pages/form/stepForm/Step3.vue
index f7acd0d..4414cd1 100644
--- a/src/components/form/stepForm/Step3.vue
+++ b/src/pages/form/stepForm/Step3.vue
@@ -14,7 +14,7 @@
 import AForm from 'ant-design-vue/es/form/Form'
 import AFormItem from 'ant-design-vue/es/form/FormItem'
 import AButton from 'ant-design-vue/es/button/button'
-import Result from '../../result/Result'
+import Result from '../../../components/result/Result'
 export default {
   name: 'Step3',
   components: {Result, AButton, AFormItem, AForm},
diff --git a/src/components/form/stepForm/StepForm.vue b/src/pages/form/stepForm/StepForm.vue
similarity index 100%
rename from src/components/form/stepForm/StepForm.vue
rename to src/pages/form/stepForm/StepForm.vue
diff --git a/src/components/list/CardList.vue b/src/pages/list/CardList.vue
similarity index 100%
rename from src/components/list/CardList.vue
rename to src/pages/list/CardList.vue
diff --git a/src/components/list/QueryList.vue b/src/pages/list/QueryList.vue
similarity index 99%
rename from src/components/list/QueryList.vue
rename to src/pages/list/QueryList.vue
index a1b1823..f3d754b 100644
--- a/src/components/list/QueryList.vue
+++ b/src/pages/list/QueryList.vue
@@ -114,7 +114,7 @@ import AInputNumber from 'ant-design-vue/es/input-number/index'
 import ADatePicker from 'ant-design-vue/es/date-picker/index'
 import AButton from 'ant-design-vue/es/button/button'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import StandardTable from '../table/StandardTable'
+import StandardTable from '../../components/table/StandardTable'
 import ADropdown from 'ant-design-vue/es/dropdown'
 import AMenu from 'ant-design-vue/es/menu/index'
 
diff --git a/src/components/list/StandardList.vue b/src/pages/list/StandardList.vue
similarity index 98%
rename from src/components/list/StandardList.vue
rename to src/pages/list/StandardList.vue
index f3ea939..afe4f5f 100644
--- a/src/components/list/StandardList.vue
+++ b/src/pages/list/StandardList.vue
@@ -70,7 +70,7 @@
 import ACard from 'ant-design-vue/es/card/Card'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
-import HeadInfo from '../tool/HeadInfo'
+import HeadInfo from '../../components/tool/HeadInfo'
 import AButton from 'ant-design-vue/es/button/button'
 import AList from 'ant-design-vue/es/list/index'
 import AListItem from 'ant-design-vue/es/list/Item'
diff --git a/src/components/list/search/ApplicationList.vue b/src/pages/list/search/ApplicationList.vue
similarity index 100%
rename from src/components/list/search/ApplicationList.vue
rename to src/pages/list/search/ApplicationList.vue
diff --git a/src/components/list/search/ArticleList.vue b/src/pages/list/search/ArticleList.vue
similarity index 100%
rename from src/components/list/search/ArticleList.vue
rename to src/pages/list/search/ArticleList.vue
diff --git a/src/components/list/search/ProjectList.vue b/src/pages/list/search/ProjectList.vue
similarity index 97%
rename from src/components/list/search/ProjectList.vue
rename to src/pages/list/search/ProjectList.vue
index 3a3defc..da1d2b3 100644
--- a/src/components/list/search/ProjectList.vue
+++ b/src/pages/list/search/ProjectList.vue
@@ -33,7 +33,7 @@ import AList from 'ant-design-vue/es/list'
 import AListItem from 'ant-design-vue/es/list/Item'
 import ACardMeta from 'ant-design-vue/es/card/Meta'
 import AAvatar from 'ant-design-vue/es/avatar/Avatar'
-import AvatarList from '../../tool/AvatarList'
+import AvatarList from '../../../components/tool/AvatarList'
 import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
 
 const AvatarListItem = AvatarList.Item
diff --git a/src/components/list/search/SearchForm.vue b/src/pages/list/search/SearchForm.vue
similarity index 96%
rename from src/components/list/search/SearchForm.vue
rename to src/pages/list/search/SearchForm.vue
index 258f893..c9bc11a 100644
--- a/src/components/list/search/SearchForm.vue
+++ b/src/pages/list/search/SearchForm.vue
@@ -72,8 +72,8 @@ import ACard from 'ant-design-vue/es/card/Card'
 import AForm from 'ant-design-vue/es/form/Form'
 import AFormItem from 'ant-design-vue/es/form/FormItem'
 import AInput from 'ant-design-vue/es/input/Input'
-import TagSelect from '../../tool/TagSelect'
-import FormRow from '../../form/FormRow'
+import TagSelect from '../../../components/tool/TagSelect'
+import FormRow from '../../../components/form/FormRow'
 import ASelect from 'ant-design-vue/es/select/index'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
diff --git a/src/components/list/search/SearchLayout.vue b/src/pages/list/search/SearchLayout.vue
similarity index 100%
rename from src/components/list/search/SearchLayout.vue
rename to src/pages/list/search/SearchLayout.vue
diff --git a/src/components/login/Login.vue b/src/pages/login/Login.vue
similarity index 99%
rename from src/components/login/Login.vue
rename to src/pages/login/Login.vue
index 62da9e8..345038b 100644
--- a/src/components/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -74,7 +74,7 @@
 <script>
 import AForm from 'ant-design-vue/es/form/Form'
 import ATabs from 'ant-design-vue/es/tabs'
-import GlobalFooter from '../layout/GlobalFooter'
+import GlobalFooter from '../../layouts/GlobalFooter'
 import AFormItem from 'ant-design-vue/es/form/FormItem'
 import AInput from 'ant-design-vue/es/input/Input'
 import AIcon from 'ant-design-vue/es/icon/icon'
diff --git a/src/components/result/Error.vue b/src/pages/result/Error.vue
similarity index 91%
rename from src/components/result/Error.vue
rename to src/pages/result/Error.vue
index 0d1b86b..ecd688c 100644
--- a/src/components/result/Error.vue
+++ b/src/pages/result/Error.vue
@@ -24,14 +24,13 @@
 </template>
 
 <script>
-import Result from './Result'
+import Result from '../../components/result/Result'
 import ACard from 'ant-design-vue/es/card/Card'
-import PageHeader from '../page/PageHeader'
 import AIcon from 'ant-design-vue/es/icon/icon'
 import AButton from 'ant-design-vue/es/button/button'
 export default {
   name: 'Error',
-  components: {AButton, AIcon, PageHeader, ACard, Result},
+  components: {AButton, AIcon, ACard, Result},
   data () {
     return {
       title: '提交失败',
diff --git a/src/components/result/Success.vue b/src/pages/result/Success.vue
similarity index 94%
rename from src/components/result/Success.vue
rename to src/pages/result/Success.vue
index f31059f..3149a5b 100644
--- a/src/components/result/Success.vue
+++ b/src/pages/result/Success.vue
@@ -35,16 +35,15 @@
 </template>
 
 <script>
-import Result from './Result'
+import Result from '../../components/result/Result'
 import ACard from 'ant-design-vue/es/card/Card'
-import PageHeader from '../page/PageHeader'
 import AButton from 'ant-design-vue/es/button/button'
 import ACol from 'ant-design-vue/es/grid/Col'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ASteps from 'ant-design-vue/es/steps/index'
 import AIcon from 'ant-design-vue/es/icon/icon'
-import DetailList from '../tool/DetailList'
-import AStepItem from '../tool/AStepItem'
+import DetailList from '../../components/tool/DetailList'
+import AStepItem from '../../components/tool/AStepItem'
 
 const AStep = ASteps.Step
 const AStepItemGroup = AStepItem.Group
@@ -62,7 +61,6 @@ export default {
     ARow,
     ACol,
     AButton,
-    PageHeader,
     ACard,
     Result},
   data () {
diff --git a/src/router/index.js b/src/router/index.js
index 6b04c58..aa1d2d6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,30 +1,30 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Dashboard from '@/components/dashboard/Dashboard'
-import NotFound from '@/components/exception/404'
-import NotPermit from '@/components/exception/403'
-import ServerError from '@/components/exception/500'
-import PageView from '@/components/layout/PageView'
-import RouteView from '@/components/layout/RouteView'
-import MenuView from '@/components/layout/MenuView'
-import BasicForm from '@/components/form/BasicForm'
-import StepForm from '@/components/form/stepForm/StepForm'
-import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
-import Success from '@/components/result/Success'
-import Error from '@/components/result/Error'
-import QueryList from '@/components/list/QueryList'
-import StandardList from '@/components/list/StandardList'
-import CardList from '@/components/list/CardList'
-import SearchLayout from '@/components/list/search/SearchLayout'
-import ArticleList from '@/components/list/search/ArticleList'
-import ApplicationList from '@/components/list/search/ApplicationList'
-import ProjectList from '@/components/list/search/ProjectList'
-import WorkPlace from '@/components/dashboard/WorkPlace'
-import Login from '@/components/login/Login'
-import BasicDetail from '@/components/detail/BasicDetail'
-import AdvancedDetail from '@/components/detail/AdvancedDetail'
-import TaskCard from '@/components/task/Index'
-import ColorBox from '@/components/check/Index'
+import Dashboard from '@/pages/dashboard/Analysis'
+import NotFound from '@/pages/exception/404'
+import NotPermit from '@/pages/exception/403'
+import ServerError from '@/pages/exception/500'
+import PageView from '@/layouts/PageView'
+import RouteView from '@/layouts/RouteView'
+import MenuView from '@/layouts/MenuView'
+import BasicForm from '@/pages/form/BasicForm'
+import StepForm from '@/pages/form/stepForm/StepForm'
+import AdvancedForm from '@/pages/form/advancedForm/AdvancedForm'
+import Success from '@/pages/result/Success'
+import Error from '@/pages/result/Error'
+import QueryList from '@/pages/list/QueryList'
+import StandardList from '@/pages/list/StandardList'
+import CardList from '@/pages/list/CardList'
+import SearchLayout from '@/pages/list/search/SearchLayout'
+import ArticleList from '@/pages/list/search/ArticleList'
+import ApplicationList from '@/pages/list/search/ApplicationList'
+import ProjectList from '@/pages/list/search/ProjectList'
+import WorkPlace from '@/pages/dashboard/WorkPlace'
+import Login from '@/pages/login/Login'
+import BasicDetail from '@/pages/detail/BasicDetail'
+import AdvancedDetail from '@/pages/detail/AdvancedDetail'
+import TaskCard from '@/pages/components/TaskCard'
+import ColorBox from '@/pages/components/Palette'
 
 Vue.use(Router)
 
@@ -209,20 +209,20 @@ export default new Router({
           ]
         },
         {
-          path: '/components',
-          redirect: '/components/taskcard',
+          path: '/pages',
+          redirect: '/pages/taskcard',
           name: '小组件',
           icon: 'appstore-o',
           component: PageView,
           children: [
             {
-              path: '/components/taskcard',
+              path: '/pages/taskcard',
               name: '任务卡片',
               icon: 'none',
               component: TaskCard
             },
             {
-              path: '/components/palette',
+              path: '/pages/palette',
               name: '颜色复选框',
               icon: 'none',
               component: ColorBox
diff --git a/src/router/lazy.js b/src/router/lazy.js
index 778dd40..7519736 100644
--- a/src/router/lazy.js
+++ b/src/router/lazy.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import PageView from '@/components/layout/PageView'
-import RouteView from '@/components/layout/RouteView'
-import MenuView from '@/components/layout/MenuView'
-import Login from '@/components/login/Login'
+import PageView from '@/layouts/PageView'
+import RouteView from '@/layouts/RouteView'
+import MenuView from '@/layouts/MenuView'
+import Login from '@/pages/login/Login'
 
 Vue.use(Router)
 
@@ -32,13 +32,13 @@ export default new Router({
             {
               path: '/dashboard/workplace',
               name: '工作台',
-              component: () => import('@/components/dashboard/WorkPlace'),
+              component: () => import('@/pages/dashboard/WorkPlace'),
               icon: 'none'
             },
             {
               path: '/dashboard/analysis',
               name: '分析页',
-              component: () => import('@/components/dashboard/Dashboard'),
+              component: () => import('@/pages/dashboard/Analysis'),
               icon: 'none'
             }
           ]
@@ -52,19 +52,19 @@ export default new Router({
             {
               path: '/form/basic',
               name: '基础表单',
-              component: () => import('@/components/form/BasicForm'),
+              component: () => import('@/pages/form/BasicForm'),
               icon: 'none'
             },
             {
               path: '/form/step',
               name: '分步表单',
-              component: () => import('@/components/form/stepForm/StepForm'),
+              component: () => import('@/pages/form/stepForm/StepForm'),
               icon: 'none'
             },
             {
               path: '/form/advanced',
               name: '高级表单',
-              component: () => import('@/components/form/advancedForm/AdvancedForm'),
+              component: () => import('@/pages/form/advancedForm/AdvancedForm'),
               icon: 'none'
             }
           ]
@@ -78,43 +78,43 @@ export default new Router({
             {
               path: '/list/query',
               name: '查询表格',
-              component: () => import('@/components/list/QueryList'),
+              component: () => import('@/pages/list/QueryList'),
               icon: 'none'
             },
             {
               path: '/list/primary',
               name: '标准列表',
-              component: () => import('@/components/list/StandardList'),
+              component: () => import('@/pages/list/StandardList'),
               icon: 'none'
             },
             {
               path: '/list/card',
               name: '卡片列表',
-              component: () => import('@/components/list/CardList'),
+              component: () => import('@/pages/list/CardList'),
               icon: 'none'
             },
             {
               path: '/list/search',
               name: '搜索列表',
-              component: () => import('@/components/list/search/SearchLayout'),
+              component: () => import('@/pages/list/search/SearchLayout'),
               icon: 'none',
               children: [
                 {
                   path: '/list/search/article',
                   name: '文章',
-                  component: () => import('@/components/list/search/ArticleList'),
+                  component: () => import('@/pages/list/search/ArticleList'),
                   icon: 'none'
                 },
                 {
                   path: '/list/search/application',
                   name: '应用',
-                  component: () => import('@/components/list/search/ApplicationList'),
+                  component: () => import('@/pages/list/search/ApplicationList'),
                   icon: 'none'
                 },
                 {
                   path: '/list/search/project',
                   name: '项目',
-                  component: () => import('@/components/list/search/ProjectList'),
+                  component: () => import('@/pages/list/search/ProjectList'),
                   icon: 'none'
                 }
               ]
@@ -131,13 +131,13 @@ export default new Router({
               path: '/detail/basic',
               name: '基础详情页',
               icon: 'none',
-              component: () => import('@/components/detail/BasicDetail')
+              component: () => import('@/pages/detail/BasicDetail')
             },
             {
               path: '/detail/advanced',
               name: '高级详情页',
               icon: 'none',
-              component: () => import('@/components/detail/AdvancedDetail')
+              component: () => import('@/pages/detail/AdvancedDetail')
             }
           ]
         },
@@ -151,13 +151,13 @@ export default new Router({
               path: '/result/success',
               name: '成功',
               icon: 'none',
-              component: () => import('@/components/result/Success')
+              component: () => import('@/pages/result/Success')
             },
             {
               path: '/result/error',
               name: '失败',
               icon: 'none',
-              component: () => import('@/components/result/Error')
+              component: () => import('@/pages/result/Error')
             }
           ]
         },
@@ -171,19 +171,19 @@ export default new Router({
               path: '/exception/404',
               name: '404',
               icon: 'none',
-              component: () => import('@/components/exception/404')
+              component: () => import('@/pages/exception/404')
             },
             {
               path: '/exception/403',
               name: '403',
               icon: 'none',
-              component: () => import('@/components/exception/403')
+              component: () => import('@/pages/exception/403')
             },
             {
               path: '/exception/500',
               name: '500',
               icon: 'none',
-              component: () => import('@/components/exception/500')
+              component: () => import('@/pages/exception/500')
             }
           ]
         },
@@ -198,13 +198,13 @@ export default new Router({
               path: '/components/taskcard',
               name: '任务卡片',
               icon: 'none',
-              component: () => import('@/components/task/Index')
+              component: () => import('@/pages/components/TaskCard')
             },
             {
               path: '/components/palette',
               name: '颜色复选框',
               icon: 'none',
-              component: () => import('@/components/check/Index')
+              component: () => import('@/pages/components/Palette')
             }
           ]
         }