diff --git a/package.json b/package.json
index 0d82ee3..52f0f0a 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
     "echarts": "^5.3.1",
     "element-plus": "^2.1.4",
     "nprogress": "^0.2.0",
+    "print-js": "^1.6.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.0-0",
+    "wangeditor": "^4.7.12"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.8",
diff --git a/src/assets/image/im1.jpeg b/src/assets/image/im1.jpeg
new file mode 100644
index 0000000..ea28337
Binary files /dev/null and b/src/assets/image/im1.jpeg differ
diff --git a/src/components/u-wangEdior/index.vue b/src/components/u-wangEdior/index.vue
new file mode 100644
index 0000000..af8df04
--- /dev/null
+++ b/src/components/u-wangEdior/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="u-wangEditor">
+    <div id="wangEditor"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+// 引入 wangEditor
+import wangEditor from 'wangeditor'
+import {onBeforeUnmount, onMounted, watch} from "vue";
+let editors = null
+
+let emit = defineEmits(['update:modelValue'])
+let props = defineProps({
+  modelValue:String
+})
+
+
+const getEditorData = () =>{
+  // 通过代码获取编辑器内容
+  let data = editors.txt.html()
+  alert(data)
+}
+
+onMounted(()=>{
+  watch(()=>props.modelValue,(value)=>{
+    editors.txt.html(value)
+  })
+  const editor = new wangEditor(`#wangEditor`)
+  // 配置 onchange 回调函数，将数据同步到 vue 中
+  editor.config.onchange = (newHtml) => {
+    emit('update:modelValue',newHtml)
+  }
+  // 创建编辑器
+  editor.create()
+
+  editors = editor
+})
+
+onBeforeUnmount(()=>{
+  // 调用销毁 API 对当前编辑器实例进行销毁
+  editors.destroy()
+  editors = null
+})
+
+</script>
+<style>
+
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index f05f211..4b301d9 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -3,9 +3,9 @@
     <logo :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
-          default-active="2"
+          :default-active="activeMenu"
           active-text-color="#ffd04b"
-          background-color="#545c64"
+          background-color="#304156"
           text-color="#fff"
           class="el-menu-vertical-demo"
           :collapse="isCollapse"
@@ -19,17 +19,29 @@
 <script lang="ts" setup>
   import SidebarItem from './SidebarItem.vue'
   import logo from './Logo.vue'
+  import {useRoute} from 'vue-router'
   import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
   import { ref,computed } from 'vue'
 
   // 在setup中获取store
   const store = useStore()
+  const route = useRoute()
 
+  console.log('route',route)
   // 获取路由
   const permission_routes = computed(()=>{
     return store.state.permission.routes
   })
 
+  const activeMenu = computed(()=>{
+    const { meta, path } = route
+    // if set path, the sidebar will highlight the path you set
+    if (meta.activeMenu) {
+      return meta.activeMenu
+    }
+    return path
+  })
+
   // 是否折叠
   const isCollapse = computed(()=>{
     return store.state.app.isCollapse
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/components/UHeader/index.vue
index cba525f..5a45d8f 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/components/UHeader/index.vue
@@ -93,6 +93,7 @@
 }
 .m-layout-header{
   height: 50px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/router/index.ts b/src/router/index.ts
index a6bea4e..4a1480b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,11 @@
 import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory } from 'vue-router'
 import Layout from "@/layout/index.vue";
 
-
-
+// 引入组件
 import chartsRouter from './modules/charts'
 import chatRouter from './modules/chat'
-
+import componentsRouter from './modules/components'
+import othersRouter from './modules/other'
 
 export const constantRoutes: Array<RouteRecordRaw> = [
   {
@@ -31,12 +31,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
 ]
 
-
+// 异步组件
 export const asyncRoutes = [
   chartsRouter,
-  chatRouter
+  chatRouter,
+  componentsRouter,
+  othersRouter
 ]
 
+
 const router = createRouter({
   // history: createWebHistory(process.env.BASE_URL), // history
   history: createWebHashHistory(), // hash
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
new file mode 100644
index 0000000..59d99f7
--- /dev/null
+++ b/src/router/modules/components.ts
@@ -0,0 +1,30 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const componentsRouter = {
+    path: '/components',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'components',
+    meta: {
+        title: '组件',
+        icon: 'chart'
+    },
+    children: [
+        {
+            path: 'editor',
+            component: () => import('@/views/components-demo/editor.vue'),
+            name: 'editor',
+            meta: { title: '富文本编辑器', noCache: true }
+        },
+        {
+            path: 'mark-down',
+            component: () => import('@/views/components-demo/mark-down.vue'),
+            name: 'mark-down',
+            meta: { title: 'markDown', noCache: true }
+        },
+    ]
+}
+
+export default componentsRouter
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
new file mode 100644
index 0000000..7b112cb
--- /dev/null
+++ b/src/router/modules/other.ts
@@ -0,0 +1,30 @@
+/** When your routing table is too long, you can split it into small modules**/
+
+import Layout from "@/layout/index.vue";
+
+const othersRouter = {
+    path: '/other',
+    component: Layout,
+    redirect: 'noRedirect',
+    name: 'other',
+    meta: {
+        title: '其他',
+        icon: 'chart'
+    },
+    children: [
+        {
+            path: 'print',
+            component: () => import('@/views/other/print.vue'),
+            name: 'print',
+            meta: { title: '打印', noCache: true }
+        },
+        {
+            path: 'cropper',
+            component: () => import('@/views/other/cropper.vue'),
+            name: 'cropper',
+            meta: { title: '头像裁剪', noCache: true }
+        },
+    ]
+}
+
+export default othersRouter
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index d087f8e..c0ea874 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,7 +1,6 @@
 import {Module} from "vuex";
 
 import { asyncRoutes, constantRoutes } from '@/router/index'
-
 /**
  * Use meta.role to determine if the current user has permission
  * @param roles
diff --git a/src/views/components-demo/editor.vue b/src/views/components-demo/editor.vue
index 8b13789..6f5ba47 100644
--- a/src/views/components-demo/editor.vue
+++ b/src/views/components-demo/editor.vue
@@ -1 +1,75 @@
+<template>
+  <el-form
+      ref="formRef"
+      :model="dynamicValidateForm"
+      label-width="80px"
+      class="demo-dynamic"
+  >
+    <el-form-item
+        prop="title"
+        label="标题"
+        :rules="[
+        {  required: true,  message: '请输入标题', trigger: 'blur',  },
 
+      ]"
+    >
+      <el-input v-model="dynamicValidateForm.title" />
+    </el-form-item>
+    <el-form-item
+        prop="content"
+        label="标题"
+        :rules="[
+        {  required: true,  message: '请输入内容', trigger: 'blur',  },
+
+      ]"
+    >
+      <u-wang-edior v-model="dynamicValidateForm.content"/>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
+<!--      <el-button @click="preview">预览</el-button>-->
+      <el-button @click="resetForm(formRef)">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import UWangEdior from '@/components/u-wangEdior/index.vue'
+import { reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+const formRef = ref<FormInstance>()
+const dynamicValidateForm = reactive<{
+  title: string,
+  content:string
+}>({
+  title: '',
+  content:''
+})
+
+
+
+
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    console.log('valid',valid)
+    if (valid) {
+      ElMessage.success('保存成功')
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+
+const preview = ()=>{
+
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 2ea7457..c9f8801 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -69,6 +69,7 @@
   const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return
     formEl.validate(async (valid) => {
+      console.log('valid==',valid)
       if (valid) {
         // 登录
         await store.dispatch('user/login',ruleForm)
diff --git a/src/views/other/print.vue b/src/views/other/print.vue
index e69de29..2b4864f 100644
--- a/src/views/other/print.vue
+++ b/src/views/other/print.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-button type="primary" @click="print(1)">打印图片</el-button>
+    <el-button type="primary" @click="print(2)">打印表格</el-button>
+  </div>
+  <div style="margin-top: 20px">
+    <img :src="im1" style="width: 50%;"/>
+  </div>
+  <div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="date" label="日期" width="180" />
+      <el-table-column prop="name" label="名字" width="180" />
+      <el-table-column prop="address" label="地址" />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import printJS from 'print-js'
+  import im1 from '@/assets/image/im1.jpeg'
+
+  const tableData = [
+    {
+      date: '2016-05-03',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-02',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-04',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+      date: '2016-05-01',
+      name: 'Tom',
+      address: 'No. 189, Grove St, Los Angeles',
+    },
+  ]
+
+  const print = (type)=>{
+    switch (type) {
+      case 1:
+        printJS({
+          type:'image',
+          printable:im1,
+          documentTitle: '打印图片'
+        })
+        break;
+      case 2:
+        printJS({
+          type:'json',
+          documentTitle: '打印表格',
+          printable: tableData,
+          gridStyle: 'text-align: center;border: 1px solid lightgray;font-size: 12px;',
+          properties: [
+            { field: 'date', displayName: '日期' },
+            { field: 'name', displayName: '名字' },
+            { field: 'address', displayName: '地址' },
+          ],
+        })
+        break;
+      case 3:
+        break;
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/yarn.lock b/yarn.lock
index c484911..5f36e15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -892,7 +892,15 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
+"@babel/runtime-corejs3@^7.11.2":
+  version "7.17.8"
+  resolved "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.8.tgz#d7dd49fb812f29c61c59126da3792d8740d4e284"
+  integrity sha512-ZbYSUvoSF6dXZmMl/CYTMOvzIFnbGfv4W3SEHYgMvNsFTeLaF2gkGAF4K2ddmtSK4Emej+0aYcnSC6N5dPCXUQ==
+  dependencies:
+    core-js-pure "^3.20.2"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
   integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@@ -2890,6 +2898,11 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.6.5:
     browserslist "^4.19.1"
     semver "7.0.0"
 
+core-js-pure@^3.20.2:
+  version "3.21.1"
+  resolved "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"
+  integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
+
 core-js@^3.6.5:
   version "3.21.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
@@ -6679,6 +6692,11 @@ pretty-error@^2.0.2:
     lodash "^4.17.20"
     renderkid "^2.0.4"
 
+print-js@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
+  integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -7941,6 +7959,11 @@ tslib@^1.8.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tslint@^5.20.1:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
@@ -8319,6 +8342,15 @@ vuex@^4.0.0-0:
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.11"
 
+wangeditor@^4.7.12:
+  version "4.7.12"
+  resolved "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.12.tgz#96fb73822a937588d82c3a84249549ae99cecf3e"
+  integrity sha512-5KOIpQ0+idKvDTkjZOp7RHYXA97FyJ9mjwy+zQUdMUCqZItlEXzvVOYtOlHkJr/HcbwgIz/7f/trGFggZK5X4g==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@babel/runtime-corejs3" "^7.11.2"
+    tslib "^2.1.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"