diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 00000000..23cdb0b0
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,33 @@
+<template>
+    <div id="app">
+        <transition name="fade">
+            <router-view />
+        </transition>
+    </div>
+</template>
+
+<style>
+img.image-sm {
+    max-width: 80px;
+    max-height: 80px;
+}
+.el-col .el-select,
+.el-col .el-date-editor {
+    width: 100%;
+}
+.demo-table-expand {
+    font-size: 0;
+}
+.demo-table-expand label {
+    width: 90px;
+    color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+}
+.text-warning {
+    color: #e6a23c;
+}
+</style>
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
new file mode 100644
index 00000000..92f92b67
--- /dev/null
+++ b/src/assets/css/common.css
@@ -0,0 +1,847 @@
+/* 常用辅助css */
+
+/* ==================
+          布局
+ ==================== */
+
+/*  -- flex弹性布局 -- */
+
+.flex {
+	display: flex;
+}
+
+.basis-xs {
+	flex-basis: 20%;
+}
+
+.basis-sm {
+	flex-basis: 40%;
+}
+
+.basis-df {
+	flex-basis: 50%;
+}
+
+.basis-lg {
+	flex-basis: 60%;
+}
+
+.basis-xl {
+	flex-basis: 80%;
+}
+
+.flex-sub {
+	flex: 1;
+}
+
+.flex-twice {
+	flex: 2;
+}
+
+.flex-treble {
+	flex: 3;
+}
+
+.flex-direction {
+	flex-direction: column;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.align-start {
+	align-items: flex-start;
+}
+
+.align-end {
+	align-items: flex-end;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.self-start {
+	align-self: flex-start;
+}
+
+.self-center {
+	align-self: flex-center;
+}
+
+.self-end {
+	align-self: flex-end;
+}
+
+.self-stretch {
+	align-self: stretch;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.justify-start {
+	justify-content: flex-start;
+}
+
+.justify-end {
+	justify-content: flex-end;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-between {
+	justify-content: space-between;
+}
+
+.justify-around {
+	justify-content: space-around;
+}
+
+/*  -- 内外边距 -- */
+
+.margin-0 {
+	margin: 0;
+}
+
+.margin-xs {
+	margin: 5px;
+}
+
+.margin-sm {
+	margin: 10px;
+}
+
+.margin {
+	margin: 15px;
+}
+
+.margin-lg {
+	margin: 20px;
+}
+
+.margin-xl {
+	margin: 25px;
+}
+
+.margin-top-xs {
+	margin-top: 5px;
+}
+
+.margin-top-sm {
+	margin-top: 10px;
+}
+
+.margin-top {
+	margin-top: 15px;
+}
+
+.margin-top-lg {
+	margin-top: 20px;
+}
+
+.margin-top-xl {
+	margin-top: 25px;
+}
+
+.margin-right-xs {
+	margin-right: 5px;
+}
+
+.margin-right-sm {
+	margin-right: 10px;
+}
+
+.margin-right {
+	margin-right: 15px;
+}
+
+.margin-right-lg {
+	margin-right: 20px;
+}
+
+.margin-right-xl {
+	margin-right: 25px;
+}
+
+.margin-bottom-xs {
+	margin-bottom: 5px;
+}
+
+.margin-bottom-sm {
+	margin-bottom: 10px;
+}
+
+.margin-bottom {
+	margin-bottom: 15px;
+}
+
+.margin-bottom-lg {
+	margin-bottom: 20px;
+}
+
+.margin-bottom-xl {
+	margin-bottom: 25px;
+}
+
+.margin-left-xs {
+	margin-left: 5px;
+}
+
+.margin-left-sm {
+	margin-left: 10px;
+}
+
+.margin-left {
+	margin-left: 15px;
+}
+
+.margin-left-lg {
+	margin-left: 20px;
+}
+
+.margin-left-xl {
+	margin-left: 25px;
+}
+
+.margin-lr-xs {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.margin-lr-sm {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.margin-lr {
+	margin-left: 15px;
+	margin-right: 15px;
+}
+
+.margin-lr-lg {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.margin-lr-xl {
+	margin-left: 25px;
+	margin-right: 25px;
+}
+
+.margin-tb-xs {
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.margin-tb-sm {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.margin-tb {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+
+.margin-tb-lg {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.margin-tb-xl {
+	margin-top: 25px;
+	margin-bottom: 25px;
+}
+
+.padding-0 {
+	padding: 0;
+}
+
+.padding-xs {
+	padding: 5px;
+}
+
+.padding-sm {
+	padding: 10px;
+}
+
+.padding {
+	padding: 15px;
+}
+
+.padding-lg {
+	padding: 20px;
+}
+
+.padding-xl {
+	padding: 25px;
+}
+
+.padding-top-xs {
+	padding-top: 5px;
+}
+
+.padding-top-sm {
+	padding-top: 10px;
+}
+
+.padding-top {
+	padding-top: 15px;
+}
+
+.padding-top-lg {
+	padding-top: 20px;
+}
+
+.padding-top-xl {
+	padding-top: 25px;
+}
+
+.padding-right-xs {
+	padding-right: 5px;
+}
+
+.padding-right-sm {
+	padding-right: 10px;
+}
+
+.padding-right {
+	padding-right: 15px;
+}
+
+.padding-right-lg {
+	padding-right: 20px;
+}
+
+.padding-right-xl {
+	padding-right: 25px;
+}
+
+.padding-bottom-xs {
+	padding-bottom: 5px;
+}
+
+.padding-bottom-sm {
+	padding-bottom: 10px;
+}
+
+.padding-bottom {
+	padding-bottom: 15px;
+}
+
+.padding-bottom-lg {
+	padding-bottom: 20px;
+}
+
+.padding-bottom-xl {
+	padding-bottom: 25px;
+}
+
+.padding-left-xs {
+	padding-left: 5px;
+}
+
+.padding-left-sm {
+	padding-left: 10px;
+}
+
+.padding-left {
+	padding-left: 15px;
+}
+
+.padding-left-lg {
+	padding-left: 20px;
+}
+
+.padding-left-xl {
+	padding-left: 25px;
+}
+
+.padding-lr-xs {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.padding-lr-sm {
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+.padding-lr {
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.padding-lr-lg {
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.padding-lr-xl {
+	padding-left: 25px;
+	padding-right: 25px;
+}
+
+.padding-tb-xs {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+.padding-tb-sm {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.padding-tb {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
+
+.padding-tb-lg {
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.padding-tb-xl {
+	padding-top: 25px;
+	padding-bottom: 25px;
+}
+
+/* -- 浮动 --  */
+
+.cf::after,
+.cf::before {
+	content: " ";
+	display: table;
+}
+
+.cf::after {
+	clear: both;
+}
+
+.fl {
+	float: left;
+}
+
+.fr {
+	float: right;
+}
+
+
+/* ==================
+          背景
+ ==================== */
+
+ .line-red::after,
+ .lines-red::after {
+     border-color: #e54d42;
+ }
+ 
+ .line-orange::after,
+ .lines-orange::after {
+     border-color: #f37b1d;
+ }
+ 
+ .line-yellow::after,
+ .lines-yellow::after {
+     border-color: #fbbd08;
+ }
+ 
+ .line-olive::after,
+ .lines-olive::after {
+     border-color: #8dc63f;
+ }
+ 
+ .line-green::after,
+ .lines-green::after {
+     border-color: #39b54a;
+ }
+ 
+ .line-cyan::after,
+ .lines-cyan::after {
+     border-color: #1cbbb4;
+ }
+ 
+ .line-blue::after,
+ .lines-blue::after {
+     border-color: #0081ff;
+ }
+ 
+ .line-purple::after,
+ .lines-purple::after {
+     border-color: #6739b6;
+ }
+ 
+ .line-mauve::after,
+ .lines-mauve::after {
+     border-color: #9c26b0;
+ }
+ 
+ .line-pink::after,
+ .lines-pink::after {
+     border-color: #e03997;
+ }
+ 
+ .line-brown::after,
+ .lines-brown::after {
+     border-color: #a5673f;
+ }
+ 
+ .line-grey::after,
+ .lines-grey::after {
+     border-color: #8799a3;
+ }
+ 
+ .line-gray::after,
+ .lines-gray::after {
+     border-color: #aaaaaa;
+ }
+ 
+ .line-black::after,
+ .lines-black::after {
+     border-color: #333333;
+ }
+ 
+ .line-white::after,
+ .lines-white::after {
+     border-color: #ffffff;
+ }
+ 
+ .bg-red {
+     background-color: #e54d42;
+     color: #ffffff;
+ }
+ 
+ .bg-orange {
+     background-color: #f37b1d;
+     color: #ffffff;
+ }
+ 
+ .bg-yellow {
+     background-color: #fbbd08;
+     color: #333333;
+ }
+ 
+ .bg-olive {
+     background-color: #8dc63f;
+     color: #ffffff;
+ }
+ 
+ .bg-green {
+     background-color: #39b54a;
+     color: #ffffff;
+ }
+ 
+ .bg-cyan {
+     background-color: #1cbbb4;
+     color: #ffffff;
+ }
+ 
+ .bg-blue {
+     background-color: #0081ff;
+     color: #ffffff;
+ }
+ 
+ .bg-purple {
+     background-color: #6739b6;
+     color: #ffffff;
+ }
+ 
+ .bg-mauve {
+     background-color: #9c26b0;
+     color: #ffffff;
+ }
+ 
+ .bg-pink {
+     background-color: #e03997;
+     color: #ffffff;
+ }
+ 
+ .bg-brown {
+     background-color: #a5673f;
+     color: #ffffff;
+ }
+ 
+ .bg-grey {
+     background-color: #8799a3;
+     color: #ffffff;
+ }
+ 
+ .bg-gray {
+     background-color: #f0f0f0;
+     color: #333333;
+ }
+ 
+ .bg-black {
+     background-color: #333333;
+     color: #ffffff;
+ }
+ 
+ .bg-white {
+     background-color: #ffffff;
+     color: #666666;
+ }
+ 
+ .bg-red.light {
+     color: #e54d42;
+     background-color: #fadbd9;
+ }
+ 
+ .bg-orange.light {
+     color: #f37b1d;
+     background-color: #fde6d2;
+ }
+ 
+ .bg-yellow.light {
+     color: #fbbd08;
+     background-color: #fef2ced2;
+ }
+ 
+ .bg-olive.light {
+     color: #8dc63f;
+     background-color: #e8f4d9;
+ }
+ 
+ .bg-green.light {
+     color: #39b54a;
+     background-color: #d7f0dbff;
+ }
+ 
+ .bg-cyan.light {
+     color: #1cbbb4;
+     background-color: #d2f1f0;
+ }
+ 
+ .bg-blue.light {
+     color: #0081ff;
+     background-color: #cce6ff;
+ }
+ 
+ .bg-purple.light {
+     color: #6739b6;
+     background-color: #e1d7f0;
+ }
+ 
+ .bg-mauve.light {
+     color: #9c26b0;
+     background-color: #ebd4ef;
+ }
+ 
+ .bg-pink.light {
+     color: #e03997;
+     background-color: #f9d7ea;
+ }
+ 
+ .bg-brown.light {
+     color: #a5673f;
+     background-color: #ede1d9;
+ }
+ 
+ .bg-grey.light {
+     color: #8799a3;
+     background-color: #e7ebed;
+ }
+ 
+ .bg-gradual-red {
+     background-image: linear-gradient(45deg, #f43f3b, #ec008c);
+     color: #ffffff;
+ }
+ 
+ .bg-gradual-orange {
+     background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+     color: #ffffff;
+ }
+ 
+ .bg-gradual-green {
+     background-image: linear-gradient(45deg, #39b54a, #8dc63f);
+     color: #ffffff;
+ }
+ 
+ .bg-gradual-purple {
+     background-image: linear-gradient(45deg, #9000ff, #5e00ff);
+     color: #ffffff;
+ }
+ 
+ .bg-gradual-pink {
+     background-image: linear-gradient(45deg, #ec008c, #6739b6);
+     color: #ffffff;
+ }
+ 
+ .bg-gradual-blue {
+     background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
+     color: #ffffff;
+ }
+ 
+/* ==================
+          文本
+ ==================== */
+
+.text-xs {
+	font-size: 10px;
+}
+
+.text-sm {
+	font-size: 12px;
+}
+
+.text-df {
+	font-size: 14px;
+}
+
+.text-lg {
+	font-size: 16px;
+}
+
+.text-xl {
+	font-size: 18px;
+}
+
+.text-xxl {
+	font-size: 22px;
+}
+
+.text-sl {
+	font-size: 40px;
+}
+
+.text-xsl {
+	font-size: 60px;
+}
+
+.text-Abc {
+	text-transform: Capitalize;
+}
+
+.text-ABC {
+	text-transform: Uppercase;
+}
+
+.text-abc {
+	text-transform: Lowercase;
+}
+
+
+.text-cut {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.text-bold {
+	font-weight: bold;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-content {
+	line-height: 1.6;
+}
+
+.text-left {
+	text-align: left;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-red,
+.line-red,
+.lines-red {
+	color: #e54d42;
+}
+
+.text-orange,
+.line-orange,
+.lines-orange {
+	color: #f37b1d;
+}
+
+.text-yellow,
+.line-yellow,
+.lines-yellow {
+	color: #fbbd08;
+}
+
+.text-olive,
+.line-olive,
+.lines-olive {
+	color: #8dc63f;
+}
+
+.text-green,
+.line-green,
+.lines-green {
+	color: #39b54a;
+}
+
+.text-cyan,
+.line-cyan,
+.lines-cyan {
+	color: #1cbbb4;
+}
+
+.text-blue,
+.line-blue,
+.lines-blue {
+	color: #0081ff;
+}
+
+.text-purple,
+.line-purple,
+.lines-purple {
+	color: #6739b6;
+}
+
+.text-mauve,
+.line-mauve,
+.lines-mauve {
+	color: #9c26b0;
+}
+
+.text-pink,
+.line-pink,
+.lines-pink {
+	color: #e03997;
+}
+
+.text-brown,
+.line-brown,
+.lines-brown {
+	color: #a5673f;
+}
+
+.text-grey,
+.line-grey,
+.lines-grey {
+	color: #8799a3;
+}
+
+.text-gray,
+.line-gray,
+.lines-gray {
+	color: #aaaaaa;
+}
+
+.text-black,
+.line-black,
+.lines-black {
+	color: #333333;
+}
+
+.text-white,
+.line-white,
+.lines-white {
+	color: #ffffff;
+}
\ No newline at end of file
diff --git a/src/assets/css/wx-menu.css b/src/assets/css/wx-menu.css
new file mode 100644
index 00000000..eebbb6e9
--- /dev/null
+++ b/src/assets/css/wx-menu.css
@@ -0,0 +1,365 @@
+@charset "utf-8";
+* {
+    box-sizing: border-box;
+}
+
+#app-menu ul {
+    padding: 0;
+}
+
+#app-menu li {
+    list-style: none;
+}
+
+#app-menu {
+    overflow: hidden;
+    width: 100%;
+}
+
+.weixin-preview {
+    position: relative;
+    width: 320px;
+    height: 540px;
+    float: left;
+    margin-right: 10px;
+    border: 1px solid #e7e7eb;
+}
+
+.weixin-preview a {
+    text-decoration: none;
+    color: #616161;
+}
+
+.weixin-preview .weixin-hd .weixin-title {
+    color: #fff;
+    font-size: 15px;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 33px;
+    left: 0px;
+}
+
+.weixin-preview .weixin-header{
+    text-align: center;
+    padding: 10px 0;
+    background-color: #616161;
+    color: #ffffff;   
+}
+
+.weixin-preview .weixin-menu {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #e7e7e7;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    margin-bottom: 0px;
+}
+
+/*一级*/
+.weixin-preview .weixin-menu .menu-item {
+    position: relative;
+    float: left;
+    line-height: 50px;
+    height: 50px;
+    text-align: center;
+    width: 33.33%;
+    border-left: 1px solid #e7e7e7;
+    cursor: pointer;
+    color: #616161;
+}
+
+/*二级*/
+.weixin-preview .weixin-sub-menu {
+    position: absolute;
+    bottom: 60px;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #d0d0d0;
+    margin-bottom: 0px;
+    background: #fafafa;
+    display: block;
+    padding: 0;
+}
+
+.weixin-preview .weixin-sub-menu .menu-sub-item {
+    line-height: 50px;
+    height: 50px;
+    text-align: center;
+    width: 100%;
+    border: 1px solid #d0d0d0;
+    border-top-width: 0px;
+    cursor: pointer;
+    position: relative;
+    color: #616161;
+}
+
+.weixin-preview .weixin-sub-menu .menu-sub-item.on-drag-over{
+    border-top: 2px solid #44b549;
+}
+
+.weixin-preview .menu-arrow {
+    position: absolute;
+    left: 50%;
+    margin-left: -6px;
+}
+
+.weixin-preview .arrow_in {
+    bottom: -4px;
+    display: inline-block;
+    width: 0px;
+    height: 0px;
+    border-width: 6px 6px 0px;
+    border-style: solid dashed dashed;
+    border-color: #fafafa transparent transparent;
+}
+
+.weixin-preview .arrow_out {
+    bottom: -5px;
+    display: inline-block;
+    width: 0px;
+    height: 0px;
+    border-width: 6px 6px 0px;
+    border-style: solid dashed dashed;
+    border-color: #d0d0d0 transparent transparent;
+}
+
+.weixin-preview .menu-item .menu-item-title, .weixin-preview .menu-sub-item .menu-item-title {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+}
+
+
+.weixin-preview .menu-item.current, .weixin-preview .menu-sub-item.current {
+    border: 1px solid #44b549;
+    background: #fff;
+    color: #44b549;
+}
+
+.weixin-preview .weixin-sub-menu.show {
+    display: block;
+}
+
+.weixin-preview .icon_menu_dot {
+    /* background: url(../images/index_z354723.png) 0px -36px no-repeat; */
+    width: 7px;
+    height: 7px;
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 2px;
+    margin-top: -2px;
+}
+
+.weixin-preview .icon14_menu_add {
+    /* background: url(../images/index_z354723.png) 0px 0px no-repeat; */
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+    display: inline-block;
+    margin-top: -2px;
+}
+
+.weixin-preview li:hover .icon14_menu_add {
+    /* background: url(../images/index_z354723.png) 0px -18px no-repeat; */
+}
+
+.weixin-preview .menu-item:hover {
+    color: #000;
+}
+
+.weixin-preview .menu-sub-item:hover {
+    background: #eee;
+}
+
+.weixin-preview li.current:hover {
+    background: #fff;
+    color: #44b549;
+}
+
+/*菜单内容*/
+.weixin-menu-detail {
+    width: 600px;
+    padding: 0px 20px 5px;
+    background-color: #f4f5f9;
+    border: 1px solid #e7e7eb;
+    float: left;
+    min-height: 540px;
+}
+
+.weixin-menu-detail .menu-name {
+    float: left;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px;
+}
+
+.weixin-menu-detail .menu-del {
+    float: right;
+    height: 40px;
+    line-height: 40px;
+    color: #459ae9;
+    cursor: pointer;
+}
+
+.weixin-menu-detail .menu-input-group {
+    width: 540px;
+    margin: 10px 0 30px 0;
+    overflow: hidden;
+}
+
+.weixin-menu-detail .menu-label {
+    float: left;
+    height: 30px;
+    line-height: 30px;
+    width: 80px;
+    text-align: right;
+}
+
+.weixin-menu-detail .menu-input {
+    float: left;
+    width: 380px
+}
+
+.weixin-menu-detail .menu-input-text {
+    border: 0px;
+    outline: 0px;
+    background: #fff;
+    width: 300px;
+    padding: 5px 0px 5px 0px;
+    margin-left: 10px;
+    text-indent: 10px;
+    height: 35px;
+}
+
+.weixin-menu-detail .menu-tips {
+    color: #8d8d8d;
+    padding-top: 4px;
+    margin: 0;
+}
+
+.weixin-menu-detail .menu-tips.cursor {
+    color: #459ae9;
+    cursor: pointer;
+}
+
+.weixin-menu-detail .menu-input .menu-tips {
+    margin: 0 0 0 10px;
+}
+
+.weixin-menu-detail .menu-content {
+    padding: 16px 20px;
+    border: 1px solid #e7e7eb;
+    background-color: #fff;
+}
+
+.weixin-menu-detail .menu-content .menu-input-group {
+    margin: 0px 0 10px 0;
+}
+
+.weixin-menu-detail .menu-content .menu-label {
+    text-align: left;
+    width: 100px;
+}
+
+.weixin-menu-detail .menu-content .menu-input-text {
+    border: 1px solid #e7e7eb;
+}
+
+.weixin-menu-detail .menu-content .menu-tips {
+    padding-bottom: 10px;
+}
+
+.weixin-menu-detail .menu-msg-content {
+    padding: 0;
+    border: 1px solid #e7e7eb;
+    background-color: #fff;
+}
+
+.weixin-menu-detail .menu-msg-content .menu-msg-head {
+    overflow: hidden;
+    border-bottom: 1px solid #e7e7eb;
+    line-height: 38px;
+    height: 38px;
+    padding: 0 20px;
+}
+
+.weixin-menu-detail .menu-msg-content .menu-msg-panel {
+    padding: 30px 50px;
+}
+
+.weixin-menu-detail .menu-msg-content .menu-msg-select {
+    padding: 40px 20px;
+    border: 2px dotted #d9dadc;
+    text-align: center;
+}
+
+.weixin-menu-detail .menu-msg-content .menu-msg-select:hover {
+    border-color: #b3b3b3;
+}
+
+.weixin-menu-detail .menu-msg-content strong {
+    display: block;
+    padding-top: 3px;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.weixin-menu-detail .menu-msg-content .menu-msg-title {
+    float: left;
+    width: 310px;
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.icon36_common {
+    width: 36px;
+    height: 36px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.icon_msg_sender {
+    margin-right: 3px;
+    margin-top: -2px;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    display: inline-block;
+    /* background: url(../images/msg_tab_z25df2d.png) 0 -270px no-repeat; */
+}
+
+.weixin-btn-group {
+    text-align: center;
+    width: 100%;
+    margin: 30px 0px;
+    overflow: hidden;
+}
+
+.weixin-btn-group .btn {
+    width: 100px;
+    border-radius: 0px;
+}
+
+#material-list {
+    padding: 20px;
+    overflow-y: scroll;
+    height: 558px;
+}
+
+#news-list {
+    padding: 20px;
+    overflow-y: scroll;
+    height: 558px;
+}
+
+#material-list table {
+    width: 100%;
+}
diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
new file mode 100644
index 00000000..366d5566
--- /dev/null
+++ b/src/assets/scss/_base.scss
@@ -0,0 +1,412 @@
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.15;
+    color: #303133;
+    background-color: #fff;
+}
+
+a {
+    color: mix(#fff, $--color-primary, 20%);
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+        color: $--color-primary;
+        text-decoration: underline;
+    }
+}
+
+img {
+    vertical-align: middle;
+}
+
+
+/* Utils
+------------------------------ */
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+
+/* Animation
+------------------------------ */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+
+/* Reset element-ui
+------------------------------ */
+.site-wrapper {
+    .el-pagination {
+        margin-top: 15px;
+        text-align: right;
+    }
+}
+
+
+/* Layout
+------------------------------ */
+.site-wrapper {
+    position: relative;
+    min-width: 1180px;
+}
+
+
+/* Sidebar fold
+------------------------------ */
+.site-sidebar--fold {
+    .site-navbar__header,
+    .site-navbar__brand,
+    .site-sidebar,
+    .site-sidebar__inner,
+    .el-menu.site-sidebar__menu {
+        width: 64px;
+    }
+
+    .site-navbar__body,
+    .site-content__wrapper {
+        margin-left: 64px;
+    }
+
+    .site-navbar__brand {
+        &-lg {
+            display: none;
+        }
+
+        &-mini {
+            display: inline-block;
+        }
+    }
+
+    .site-sidebar,
+    .site-sidebar__inner {
+        overflow: initial;
+    }
+
+    .site-sidebar__menu-icon {
+        margin-right: 0;
+        font-size: 20px;
+    }
+
+    .site-content--tabs > .el-tabs > .el-tabs__header {
+        left: 64px;
+    }
+}
+
+// animation
+.site-navbar__header,
+.site-navbar__brand,
+.site-navbar__body,
+.site-sidebar,
+.site-sidebar__inner,
+.site-sidebar__menu.el-menu,
+.site-sidebar__menu-icon,
+.site-content__wrapper,
+.site-content--tabs > .el-tabs .el-tabs__header {
+    transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s;
+}
+
+
+/* Navbar
+------------------------------ */
+.site-navbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+    height: 50px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
+    background-color: $navbar--background-color;
+
+    &--inverse {
+        .site-navbar__body {
+            background-color: transparent;
+        }
+
+        .el-menu {
+            > .el-menu-item,
+            > .el-submenu > .el-submenu__title {
+                color: #fff;
+
+                &:focus,
+                &:hover {
+                    color: #fff;
+                    background-color: mix(#000, $navbar--background-color, 15%);
+                }
+            }
+
+            > .el-menu-item.is-active,
+            > .el-submenu.is-active > .el-submenu__title {
+                border-bottom-color: mix(#fff, $navbar--background-color, 85%);
+            }
+
+            .el-menu-item i,
+            .el-submenu__title i,
+            .el-dropdown {
+                color: #fff;
+            }
+        }
+
+        .el-menu--popup-bottom-start {
+            background-color: $navbar--background-color;
+        }
+    }
+
+    &__header {
+        position: relative;
+        float: left;
+        width: 230px;
+        height: 50px;
+        overflow: hidden;
+    }
+
+    &__brand {
+        display: table-cell;
+        vertical-align: middle;
+        width: 230px;
+        height: 50px;
+        margin: 0;
+        line-height: 50px;
+        font-size: 20px;
+        text-align: center;
+        text-transform: uppercase;
+        white-space: nowrap;
+        color: #fff;
+
+        &-lg,
+        &-mini {
+            margin: 0 5px;
+            color: #fff;
+
+            &:focus,
+            &:hover {
+                color: #fff;
+                text-decoration: none;
+            }
+        }
+
+        &-mini {
+            display: none;
+        }
+    }
+
+    &__switch {
+        font-size: 18px;
+        border-bottom: none !important;
+    }
+
+    &__avatar {
+        border-bottom: none !important;
+
+        * {
+            vertical-align: inherit;
+        }
+
+        .el-dropdown-link {
+            > img {
+                width: 36px;
+                height: auto;
+                margin-right: 5px;
+                border-radius: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    &__body {
+        position: relative;
+        margin-left: 230px;
+        padding-right: 15px;
+        background-color: #fff;
+    }
+
+    &__menu {
+        float: left;
+        background-color: transparent;
+        border-bottom: 0;
+
+        &--right {
+            float: right;
+        }
+
+        a:focus,
+        a:hover {
+            text-decoration: none;
+        }
+
+        .el-menu-item,
+        .el-submenu > .el-submenu__title {
+            height: 50px;
+            line-height: 50px;
+        }
+
+        .el-submenu > .el-menu {
+            top: 55px;
+        }
+
+        .el-badge {
+            display: inline;
+            z-index: 2;
+
+            &__content {
+                line-height: 16px;
+            }
+        }
+    }
+}
+
+
+/* Sidebar
+------------------------------ */
+.site-sidebar {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    bottom: 0;
+    z-index: 1020;
+    width: 230px;
+    overflow: hidden;
+
+    &--dark,
+    &--dark-popper {
+        background-color: $sidebar--background-color-dark;
+
+        .site-sidebar__menu.el-menu,
+        > .el-menu--popup {
+            background-color: $sidebar--background-color-dark;
+
+            .el-menu-item,
+            .el-submenu > .el-submenu__title {
+                color: $sidebar--color-text-dark;
+
+                &:focus,
+                &:hover {
+                    color: mix(#fff, $sidebar--color-text-dark, 50%);
+                    background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+                }
+            }
+
+            .el-menu,
+            .el-submenu.is-opened {
+                background-color: mix(#000, $sidebar--background-color-dark, 15%);
+            }
+
+            .el-menu-item.is-active,
+            .el-submenu.is-active > .el-submenu__title {
+                color: mix(#fff, $sidebar--color-text-dark, 80%);
+            }
+        }
+    }
+
+    &__inner {
+        position: relative;
+        z-index: 1;
+        width: 250px;
+        height: 100%;
+        padding-bottom: 15px;
+        overflow-y: scroll;
+    }
+
+    &__menu.el-menu {
+        width: 230px;
+        border-right: 0;
+    }
+
+    &__menu-icon {
+        width: 24px;
+        margin-right: 5px;
+        text-align: center;
+        font-size: 16px;
+        color: inherit !important;
+    }
+}
+
+
+/* Content
+------------------------------ */
+.site-content {
+    position: relative;
+    padding: 15px;
+
+    &__wrapper {
+        position: relative;
+        padding-top: 50px;
+        margin-left: 230px;
+        min-height: 100%;
+        background: $content--background-color;
+    }
+
+    &--tabs {
+        padding: 55px 0 0;
+    }
+
+    > .el-tabs {
+        > .el-tabs__header {
+            position: fixed;
+            top: 50px;
+            left: 230px;
+            right: 0;
+            z-index: 930;
+            padding: 0 55px 0 15px;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+            background-color: #fff;
+
+            > .el-tabs__nav-wrap {
+                margin-bottom: 0;
+
+                &:after {
+                    display: none;
+                }
+            }
+        }
+
+        > .el-tabs__content {
+            padding: 0 15px 15px;
+
+            > .site-tabs__tools {
+                position: fixed;
+                top: 50px;
+                right: 0;
+                z-index: 931;
+                height: 40px;
+                padding: 0 12px;
+                font-size: 16px;
+                line-height: 40px;
+                background-color: $content--background-color;
+                cursor: pointer;
+
+                .el-icon--right {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}
+
+.el-table__expand-icon {
+    display: inline-block;
+    width: 14px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
diff --git a/src/assets/scss/_normalize.scss b/src/assets/scss/_normalize.scss
new file mode 100644
index 00000000..1dddea42
--- /dev/null
+++ b/src/assets/scss/_normalize.scss
@@ -0,0 +1,447 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+    display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+    background-color: transparent; /* 1 */
+    -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+    font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+    background-color: #ff0;
+    color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+    display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+    border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: sans-serif; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+    display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+    display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
new file mode 100644
index 00000000..b136ceec
--- /dev/null
+++ b/src/assets/scss/_variables.scss
@@ -0,0 +1,13 @@
+// 站点主色
+// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
+$--color-primary: #409EFF;
+
+// Navbar
+$navbar--background-color: $--color-primary;
+
+// Sidebar
+$sidebar--background-color-dark: #263238;
+$sidebar--color-text-dark: #8a979e;
+
+// Content
+$content--background-color: #f1f4f5;
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
new file mode 100644
index 00000000..0336d9aa
--- /dev/null
+++ b/src/assets/scss/index.scss
@@ -0,0 +1,5 @@
+@import "normalize";
+// api: https://github.com/necolas/normalize.css/
+@import "variables";
+// 站点变量
+@import "base";
diff --git a/src/components/icon-svg/index.vue b/src/components/icon-svg/index.vue
new file mode 100644
index 00000000..6d09ba00
--- /dev/null
+++ b/src/components/icon-svg/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg :class="getClassName" :width="width" :height="height" aria-hidden="true">
+        <use :xlink:href="getName"></use>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'icon-svg',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        className: {
+            type: String
+        },
+        width: {
+            type: String
+        },
+        height: {
+            type: String
+        }
+    },
+    computed: {
+        getName() {
+            return `#icon-${this.name}`
+        },
+        getClassName() {
+            return [
+                'icon-svg',
+                `icon-svg__${this.name}`,
+                this.className && /\S/.test(this.className) ? `${this.className}` : ''
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+.icon-svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    overflow: hidden;
+}
+</style>
diff --git a/src/components/table-tree-column/index.vue b/src/components/table-tree-column/index.vue
new file mode 100644
index 00000000..e8dd534c
--- /dev/null
+++ b/src/components/table-tree-column/index.vue
@@ -0,0 +1,84 @@
+<template>
+    <el-table-column :prop="prop" v-bind="$attrs">
+        <template slot-scope="scope">
+            <span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
+                <i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
+                {{ scope.row[prop] }}
+            </span>
+        </template>
+    </el-table-column>
+</template>
+
+<script>
+import isArray from 'lodash/isArray'
+export default {
+    name: 'table-tree-column',
+    props: {
+        prop: {
+            type: String
+        },
+        treeKey: {
+            type: String,
+            default: 'id'
+        },
+        parentKey: {
+            type: String,
+            default: 'parentId'
+        },
+        levelKey: {
+            type: String,
+            default: '_level'
+        },
+        childKey: {
+            type: String,
+            default: 'children'
+        }
+    },
+    methods: {
+        childStyles(row) {
+            return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
+        },
+        iconClasses(row) {
+            return [!row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom']
+        },
+        iconStyles(row) {
+            return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
+        },
+        hasChild(row) {
+            return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
+        },
+        // 切换处理
+        toggleHandle(index, row) {
+            if (this.hasChild(row)) {
+                var data = this.$parent.store.states.data.slice(0)
+                data[index]._expanded = !data[index]._expanded
+                if (data[index]._expanded) {
+                    data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
+                } else {
+                    data = this.removeChildNode(data, row[this.treeKey])
+                }
+                this.$parent.store.commit('setData', data)
+                this.$nextTick(() => {
+                    this.$parent.doLayout()
+                })
+            }
+        },
+        // 移除子节点
+        removeChildNode(data, parentId) {
+            var parentIds = isArray(parentId) ? parentId : [parentId]
+            if (parentId.length <= 0) {
+                return data
+            }
+            var ids = []
+            for (var i = 0; i < data.length; i++) {
+                if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
+                    data[i]._expanded = false
+                    ids.push(data.splice(i, 1)[0][this.treeKey])
+                    i--
+                }
+            }
+            return this.removeChildNode(data, ids)
+        }
+    }
+}
+</script>
diff --git a/src/components/tags-editor.vue b/src/components/tags-editor.vue
new file mode 100644
index 00000000..65e670d0
--- /dev/null
+++ b/src/components/tags-editor.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="panel  flex flex-wrap">
+        <el-tag v-for="tag in dynamicTags" closable @close="handleClose(tag)" :disable-transitions="false" :key="tag">
+            {{tag}}
+        </el-tag>
+        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
+        </el-input>
+        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
+    </div>
+</template>
+<script>
+/**
+ * 标签编辑器
+ */
+let touchMoved = false;
+export default {
+    name: 'tags-editor',
+    props: {
+        value: {
+            type: String,
+            required: true,
+            default: ""
+        },
+        size: {//标签大小：[small:小,large:大]
+            type: String,
+            default: 'small'
+        }
+    },
+    data() {
+        return {
+            inputVisible: false,
+            inputValue: ''
+        }
+    },
+    computed: {
+        dynamicTags() {
+            if (this.value != "") return this.value.split(',')
+            return []
+        }
+    },
+    methods: {
+        handleClose(tag) {
+            let newTags = this.dynamicTags;
+            newTags.splice(newTags.indexOf(tag), 1);
+            this.$emit('input', newTags.join(","));
+        },
+        showInput() {
+            this.inputVisible = true;
+            this.$nextTick(_ => {
+                this.$refs.saveTagInput.$refs.input.focus();
+            });
+        },
+        handleInputConfirm() {
+            let inputValue = this.inputValue;
+            let newTags = this.dynamicTags;
+            if (inputValue && newTags.indexOf(inputValue) < 0) {
+                newTags.push(inputValue);
+            }
+            this.inputVisible = false;
+            this.inputValue = '';
+            this.$emit('input', newTags.join(","));
+        }
+
+    }
+}
+</script>
+<style scoped>
+.panel {
+    flex: 1;
+}
+.el-tag,.button-new-tag{
+    margin: 5px;
+}
+.input-new-tag {
+    width: inherit;
+}
+</style>
diff --git a/src/components/template-msg-task.vue b/src/components/template-msg-task.vue
new file mode 100644
index 00000000..eea9a9c3
--- /dev/null
+++ b/src/components/template-msg-task.vue
@@ -0,0 +1,189 @@
+<template>
+    <el-dialog title="筛选模板消息目标用户" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :inline="true" :model="dataForm" ref="dataForm" clearable @keyup.enter.native="getWxUsers()">
+            <el-form-item>
+                <el-select v-model="dataForm.tagid" filterable placeholder="用户标签" @change="getWxUsers()">
+                    <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.nickname" placeholder="昵称" @change="getWxUsers()" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.province" placeholder="省份" @change="getWxUsers()" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.city" placeholder="城市" @change="getWxUsers()" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.remark" placeholder="备注" @change="getWxUsers()" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.qrScene" placeholder="扫码场景值" @change="getWxUsers()" clearable></el-input>
+            </el-form-item>
+        </el-form>
+        <div class="text-bold">本消息将发送给：</div>
+        <div class="user-list"  v-loading="wxUsersLoading">
+            <div class="user-card" v-for="item in wxUserList" :key="item.openid">
+                <el-avatar :src="item.headimgurl"></el-avatar>
+                <div class="nickname">{{item.nickname}}</div>
+            </div>
+            <div class="text-bold">
+                <span v-show="totalCount>10">...</span>
+                等共<span class="text-success">{{totalCount}}</span>个用户
+            </div>
+        </div>
+        <div class="margin-top text-bold">消息预览：</div>
+        <div class="margin-top-xs">
+            <el-input type="textarea" disabled autosize v-model="msgReview" placeholder="模版"></el-input>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="send" type="success" :disabled="totalCount<=0 || sending">{{sending?'发送中...':'发送'}}</el-button>
+            <el-button @click="visible=false">关闭</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    name:'template-msg-task',
+    props:{
+        wxUserTagName:{
+            type:String,
+            required:false
+        }
+    },
+    data(){
+        return{
+            visible:false,
+            wxUsersLoading:false,
+            sending:false,
+            msgTemplate:{},
+            dataForm: {
+                page:1,
+                sidx: 'subscribe_time',
+                order: 'desc',
+                tagid:'',
+                nickname: '',
+                city:'',
+                province:'',
+                remark:'',
+                qrScene:''
+            },
+            wxUserList:[],
+            totalCount:0
+        }
+    },
+    computed: mapState({
+        wxUserTags:state=>state.wxUserTags.tags,
+        msgReview(){
+            if(!this.msgTemplate.data) return ""
+            let content = this.msgTemplate.content
+            this.msgTemplate.data.forEach(item=>{
+                content = content.replace("{{"+item.name+".DATA}}",item.value)
+            })
+            return content
+        }
+    }),
+    mounted() {
+        this.getWxUserTags().then((taglist)=>{
+            if(this.wxUserTagName){
+                let tagItem = taglist.find(tag=>tag.name==this.wxUserTagName)
+                console.log(tagItem)
+                if(tagItem) {
+                    this.dataForm.tagid=tagItem.id+''
+                }
+            }
+            this.getWxUsers()
+        });
+    },
+    methods:{
+        init(msgTemplate){
+            if(!msgTemplate || !msgTemplate.templateId){
+                this.$message.error('消息模板无效')
+                return
+            }
+            if(!msgTemplate.data || !(msgTemplate.data instanceof Array)){
+                this.$message.error('请现配置此模板填充数据')
+                return
+            }
+            this.msgTemplate=msgTemplate
+            this.visible=true;
+        },
+        getWxUserTags() {
+            return new Promise((resolve,reject)=>{
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxUserTags/list'),
+                    method: 'get',
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$store.commit('wxUserTags/updateTags', data.list)
+                        resolve(data.list)
+                    } else {
+                        this.$message.error(data.msg)
+                        reject(data.msg)
+                    }
+                }).catch(err=>reject(err))
+            })
+        },
+        getWxUsers() {
+            this.wxUsersLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUser/list'),
+                method: 'get',
+                params: this.$http.adornParams(this.dataForm)
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.wxUserList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.$message.error(data.msg)
+                }
+                this.wxUsersLoading = false
+            })
+        },
+        send(){
+            if(this.sending)return
+            this.sending=true
+            this.$http({
+                url: this.$http.adornUrl('/manage/msgTemplate/sendMsgBatch'),
+                method: 'post',
+                data:this.$http.adornData({
+                    wxUserFilterParams : this.dataForm,
+                    templateId : this.msgTemplate.templateId,
+                    url : this.msgTemplate.url,
+                    miniprogram : this.msgTemplate.miniprogram,
+                    data : this.msgTemplate.data,
+                })
+            }).then(({ data }) => {
+                this.sending = false
+                if (data && data.code === 200) {
+                    this.$message.success("消息将在后台发送")
+                    this.visible=false
+                } else {
+                    this.$message.error(data.msg)
+                }
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.user-list{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.user-card{
+    overflow: hidden;
+    max-width: 60px;
+    margin: 5px;
+    text-align: center;
+}
+.nickname{
+    color: #999999;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tinymce-editor.vue b/src/components/tinymce-editor.vue
new file mode 100644
index 00000000..8fe1a71e
--- /dev/null
+++ b/src/components/tinymce-editor.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="tinymce-editor">
+        <editor v-model="myValue" :init="init" @onExecCommand="onExecCommand"></editor>
+    </div>
+</template>
+<script>
+import Editor from "@tinymce/tinymce-vue";
+
+var cos;
+export default {
+    name: "tinymce-editor",
+    components: {
+        Editor
+    },
+    props: {
+        value: {
+            type: String,
+            default: ""
+        }
+    },
+    data() {
+        return {
+            init: {
+                language_url: "./tinymce/zh_CN.js", //public目录下
+                language: "zh_CN",
+                height: 500,
+                plugins: "lists image media table paste link searchreplace anchor code preview pagebreak importcss",
+                toolbar: "undo redo searchreplace |  formatselect pagebreak | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link anchor image media table | removeformat code preview", //工具栏展示项
+                toolbar_drawer: false,
+                image_advtab: true,
+                object_resizing: false,
+                paste_data_images: true,
+                content_css: "./tinymce/article.css",
+                images_upload_handler: (blobInfo, success, failure) => {
+                    this.uploadFile(blobInfo.blob()).then(fileUrl => success(fileUrl)).catch(err => failure(err))
+                }
+            },
+            myValue: this.value,
+            uploading: false,
+            cosConfig: []
+        };
+    },
+    mounted() {
+        // console.log('tinymce-editor mounted:',this.value)
+        tinymce.init({});
+        this.cosInit();
+    },
+    methods: {
+        cosInit() {
+            this.$http({
+                url: this.$http.adornUrl("/sys/oss/config"),
+                method: "get",
+                params: this.$http.adornParams()
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.cosConfig = data.config;
+                } else {
+                    this.$message.error("请先配置云存储相关信息！");
+                }
+            });
+        },
+        onExecCommand(e) {
+            //console.log(e)
+        },
+        uploadFile(file) {
+            this.uploading = true;
+            return new Promise((resolve, reject) => {
+                let formData = new FormData();
+                formData.append("file", file);
+                this.$http({
+                    url: this.$http.adornUrl('/sys/oss/upload'),
+                    method: 'post',
+                    data: formData
+                }).then(({ data }) => {
+                    console.log(data)
+                    if (data && data.code === 200) {
+                        this.$emit('uploaded', data.url)
+                        resolve(data.url)
+                    } else {
+                        this.$message.error("文件上传失败：" + data.msg)
+                        reject(data.msg)
+                    }
+                    this.uploading = false;
+                }).catch(err=>reject(err))
+            });
+            
+            
+        }
+    },
+    watch: {
+        value(newValue) {
+            this.myValue = newValue;
+        },
+        myValue(newValue) {
+            this.$emit("input", newValue);
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/wx-account-selector.vue b/src/components/wx-account-selector.vue
new file mode 100644
index 00000000..614773d8
--- /dev/null
+++ b/src/components/wx-account-selector.vue
@@ -0,0 +1,45 @@
+<template>
+    <el-select v-model="selectedAppid" size="small" v-loading="dataListLoading"  @change="selectAccount" filterable>
+        <el-option v-for="item in accountList" :key="item.appid" :label="item.name+'（'+ACCOUNT_TYPES[item.type]+'）'" :value="item.appid"></el-option>
+    </el-select>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    data() {
+        return {
+            dataListLoading: false
+        }
+    },
+    computed: mapState({
+        accountList: state=>state.wxAccount.accountList,
+        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES,
+        selectedAppid:state=>state.wxAccount.selectedAppid
+    }),
+    mounted(){
+        this.getDataList()
+    },
+    methods:{
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxAccount/list'),
+                method: 'get'
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.$store.commit('wxAccount/updateAccountList', data.list)
+                    if(!data.list.length){
+                        this.$message.info("公众号列表为空，请先添加")
+                    }
+                }
+                this.dataListLoading = false
+            })
+        },
+        selectAccount(appid){
+            if(this.selectedAppid!=appid){
+                this.$store.commit('wxAccount/selectAccount', appid)
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/wx-msg-preview.vue b/src/components/wx-msg-preview.vue
new file mode 100644
index 00000000..84d73ab9
--- /dev/null
+++ b/src/components/wx-msg-preview.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="panel">
+        <el-tooltip class="item" effect="dark" :content="msg.inOut?'公众号发出的消息':'来自用户的消息'" placement="right">
+            <el-tag size="mini" v-if="msg.inOut" class="margin-right el-icon-upload2"  type="info"></el-tag>
+            <el-tag size="mini" v-else class="margin-right el-icon-download"></el-tag>
+        </el-tooltip>
+        <span class="panel-content">
+            <span v-if="msg.msgType=='text'" v-html="msg.detail.content"></span>
+            <span v-else-if="msg.msgType=='event'" >
+                <el-tag size="mini" type="warning" effect="plain">事件</el-tag>
+                <el-tag size="mini" type="info" effect="plain">{{msg.detail.event}}</el-tag>
+                {{msg.detail.eventKey}}
+            </span>
+            <span v-else-if="msg.msgType=='transfer_customer_service'">
+                <el-tag size="mini" type="warning" effect="plain">事件</el-tag>
+                <el-tag size="mini" type="info" effect="plain">消息转客服</el-tag>
+            </span>
+            <span v-else>
+                <el-tag size="mini" effect="plain">{{XmlMsgType[msg.msgType]}}</el-tag>
+                后台不支持预览
+            </span>
+        </span>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    name:'wx-msg-preview',
+    props:{
+        msg:Object
+    },
+    computed:mapState({
+        XmlMsgType:state=>state.message.XmlMsgType,
+    })
+}
+</script>
+<style scoped>
+.panel,.panel a{
+    color: #999;
+    word-break: break-all;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/wx-user-tags-manager.vue b/src/components/wx-user-tags-manager.vue
new file mode 100644
index 00000000..d9107e52
--- /dev/null
+++ b/src/components/wx-user-tags-manager.vue
@@ -0,0 +1,139 @@
+<template>
+    <el-dialog title="公众号用户标签管理" :close-on-click-modal="false" :visible.sync="dialogVisible">
+        <div class="panel  flex flex-wrap" v-loading="submitting">
+            <el-tag v-for="tag in wxUserTags" closable @click="editTag(tag.id,tag.name)" @close="deleteTag(tag.id)" :disable-transitions="false" :key="tag.id">
+                {{tag.id}} {{tag.name}}
+            </el-tag>
+            <el-input class="input-new-tag" v-if="inputVisible" placeholder="回车确认" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="addTag">
+            </el-input>
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible=false">关闭</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    name: 'wx-user-tags-manager',
+    props: {
+        visible: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            dialogVisible:false,
+            inputVisible: false,
+            inputValue: '',
+            submitting:false,
+        }
+    },
+    computed: mapState({
+        wxUserTags:state=>state.wxUserTags.tags
+    }),
+    mounted() {
+        this.getWxUserTags();
+    },
+    methods: {
+        show(){
+            this.dialogVisible=true;
+        },
+        getWxUserTags() {
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUserTags/list'),
+                method: 'get',
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.$store.commit('wxUserTags/updateTags', data.list)
+                } else {
+                    this.$message.error(data.msg)
+                }
+            })
+        },
+        deleteTag(tagid) {
+            if(this.submitting){
+                return
+            }
+            this.$confirm(`确定删除标签?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.submitting=true
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxUserTags/delete/'+tagid),
+                    method: 'post',
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.getWxUserTags();
+                        this.$emit('change');
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                    this.submitting=false;
+                })
+            })
+        },
+        showInput() {
+            this.inputVisible = true;
+            this.$nextTick(_ => {
+                this.$refs.saveTagInput.$refs.input.focus();
+            });
+        },
+        addTag() {
+            let newTagName = this.inputValue;
+            this.saveTag(newTagName)
+            this.inputVisible = false;
+            this.inputValue = '';
+        },
+        editTag(tagid,orignName=''){
+            this.$prompt('请输入新标签名称', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputValue:orignName,
+                inputPattern: /^.{1,30}$/,
+                inputErrorMessage: '名称1-30字符'
+            }).then(({ value }) => {
+                console.log(value)
+                this.saveTag(value,tagid)
+            })
+        },
+        saveTag(name,tagid){
+            if(this.submitting){
+                return
+            }
+            this.submitting=true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUserTags/save'),
+                method: 'post',
+                data:this.$http.adornData({
+                    id : tagid?tagid:undefined,
+                    name : name
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.getWxUserTags();
+                    this.$emit('change');
+                } else {
+                    this.$message.error(data.msg)
+                }
+                this.submitting=false;
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.panel {
+    flex: 1;
+}
+.el-tag,.button-new-tag {
+    margin: 5px;
+}
+.input-new-tag {
+    width: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..304e5839
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import VueCookie from 'vue-cookie'
+import ElementUI from 'element-ui';
+import moment from 'moment'
+
+import 'element-ui/lib/theme-chalk/index.css';
+import './assets/css/common.css'
+import './assets/scss/index.scss'
+import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
+import { isAuth } from '@/utils'
+import VueClipboard from 'vue-clipboard2'
+
+Vue.use(ElementUI);
+Vue.use(VueClipboard)
+Vue.use(VueCookie)
+Vue.config.productionTip = false
+
+// 挂载全局
+Vue.prototype.$http = httpRequest // ajax请求方法
+Vue.prototype.isAuth = isAuth     // 权限方法
+
+moment.locale('zh-cn');
+Vue.prototype.$moment = moment; //时间处理
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/import-views.js b/src/router/import-views.js
new file mode 100644
index 00000000..331acba4
--- /dev/null
+++ b/src/router/import-views.js
@@ -0,0 +1 @@
+module.exports = file => () => import('@/views/' + file + '.vue')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 00000000..84cd1aed
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,154 @@
+/**
+ * 全站路由配置
+ *
+ * 建议:
+ * 1. 代码中路由统一使用name属性跳转(不使用path属性)
+ */
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import http from '@/utils/httpRequest'
+import { isURL } from '@/utils/validate'
+import { clearLoginInfo } from '@/utils'
+
+Vue.use(VueRouter)
+
+const _import = require('./import-views')
+// 全局路由(无需嵌套上左右整体布局)
+const globalRoutes = [
+  { path: '/404', component: () => import('@/views/common/404'), name: '404', meta: { title: '404未找到' } },
+  { path: '/login', component: () => import('@/views/common/login'), name: 'login', meta: { title: '登录' } }
+]
+
+// 主入口路由(需嵌套上左右整体布局)
+const mainRoutes = {
+  path: '/',
+  component: () => import('@/views/main'),
+  name: 'main',
+  redirect: { name: 'home' },
+  meta: { title: '主入口整体布局' },
+  children: [
+    // 通过meta对象设置路由展示方式
+    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
+    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
+    // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
+    { path: '/home', component: () => import('@/views/common/home'), name: 'home', meta: { title: '首页' } },
+    { path: '/theme', component: () => import('@/views/common/theme'), name: 'theme', meta: { title: '主题' } },
+  ],
+  beforeEnter(to, from, next) {
+    let token = Vue.cookie.get('token')
+    if (!token || !/\S/.test(token)) {
+      clearLoginInfo()
+      next({ name: 'login' })
+    }
+    next()
+  }
+}
+
+const router = new VueRouter({
+  mode: 'hash',
+  scrollBehavior: () => ({ y: 0 }),
+  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
+  routes: globalRoutes.concat(mainRoutes)
+})
+
+router.beforeEach((to, from, next) => {
+  // 添加动态(菜单)路由
+  // 1. 已经添加 or 全局路由, 直接访问
+  // 2. 获取菜单列表, 添加并保存本地存储
+  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
+    next()
+  } else {
+    http({
+      url: http.adornUrl('/sys/menu/nav'),
+      method: 'get',
+      params: http.adornParams()
+    }).then(({ data }) => {
+      if (data && data.code === 200) {
+        fnAddDynamicMenuRoutes(data.menuList)
+        router.options.isAddDynamicMenuRoutes = true
+        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
+        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
+        next({ ...to, replace: true })
+      } else {
+        sessionStorage.setItem('menuList', '[]')
+        sessionStorage.setItem('permissions', '[]')
+        next()
+      }
+    }).catch((e) => {
+      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
+      router.push({ name: 'login' })
+    })
+  }
+})
+
+/**
+ * 判断当前路由类型, global: 全局路由, main: 主入口路由
+ * @param {*} route 当前路由
+ */
+function fnCurrentRouteType(route, globalRoutes = []) {
+  var temp = []
+  for (var i = 0; i < globalRoutes.length; i++) {
+    if (route.path === globalRoutes[i].path) {
+      return 'global'
+    } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
+      temp = temp.concat(globalRoutes[i].children)
+    }
+  }
+  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
+}
+
+/**
+ * 添加动态(菜单)路由
+ * @param {*} menuList 菜单列表
+ * @param {*} routes 递归创建的动态(菜单)路由
+ */
+function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
+  var temp = []
+  for (var i = 0; i < menuList.length; i++) {
+    if (menuList[i].list && menuList[i].list.length >= 1) {
+      temp = temp.concat(menuList[i].list)
+    } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
+      menuList[i].url = menuList[i].url.replace(/^\//, '')
+      var route = {
+        path: menuList[i].url.replace('/', '-'),
+        component: null,
+        name: menuList[i].url.replace('/', '-'),
+        meta: {
+          menuId: menuList[i].menuId,
+          title: menuList[i].name,
+          isDynamic: true,
+          isTab: true,
+          iframeUrl: ''
+        }
+      }
+      // url以http[s]://开头, 通过iframe展示
+      if (isURL(menuList[i].url)) {
+        route['path'] = `i-${menuList[i].menuId}`
+        route['name'] = `i-${menuList[i].menuId}`
+        route['meta']['iframeUrl'] = menuList[i].url
+      } else {
+        try {
+          route['component'] = _import(`modules/${menuList[i].url}`) || null
+          // route['component'] = ()=>import(`@/views/modules/${menuList[i].url}.vue`) || null
+        } catch (e) { }
+      }
+      routes.push(route)
+    }
+  }
+  if (temp.length >= 1) {
+    fnAddDynamicMenuRoutes(temp, routes)
+  } else {
+    mainRoutes.name = 'main-dynamic'
+    mainRoutes.children = routes
+    router.addRoutes([
+      mainRoutes,
+      { path: '*', redirect: { name: '404' } }
+    ])
+    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
+    console.log('\n')
+    console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
+    console.log(mainRoutes.children)
+    console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue')
+  }
+}
+export default router
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 00000000..ebf0d802
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+// 引入各个模块的 Vuex 状态管理文件
+import common from './modules/common'
+import user from './modules/user'
+import article from './modules/article'
+import message from './modules/message'
+import wxUserTags from './modules/wxUserTags'
+import wxAccount from './modules/wxAccount'
+
+// 注册 Vuex 插件，使其可用于 Vue 中
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+// 使用 modules 来组织不同的子模块
+modules: {
+// 引入并注册各个模块
+common, // 公共模块，可能用于存储一些通用的状态
+user, // 用户模块，存储用户信息相关的状态
+article, // 文章模块，存储与文章相关的状态
+message, // 消息模块，存储消息相关的状态
+wxUserTags, // 微信用户标签模块，管理微信用户标签的状态
+wxAccount // 微信账号模块，管理微信账号相关的状态
+},
+
+// mutations 用于同步修改状态，这里没有定义任何 mutations（可根据需求进行扩展）
+mutations: {
+// 这里可以添加全局的 mutation，但目前没有定义
+},
+
+// 启用严格模式，开发环境下会对状态的修改进行检查，确保只能通过 mutation 修改状态
+strict: true
+})
diff --git a/src/store/modules/article.js b/src/store/modules/article.js
new file mode 100644
index 00000000..1308ab36
--- /dev/null
+++ b/src/store/modules/article.js
@@ -0,0 +1,12 @@
+export default {
+  namespaced: true,
+  state: {
+    ARTICLE_TYPES: {
+      1: '普通文章',
+      5: '帮助中心',
+    }
+  },
+  mutations: {
+
+  }
+}
diff --git a/src/store/modules/common.js b/src/store/modules/common.js
new file mode 100644
index 00000000..467e447f
--- /dev/null
+++ b/src/store/modules/common.js
@@ -0,0 +1,70 @@
+import router from '@/router'
+
+export default {
+    namespaced: true,
+    state: {
+        // 页面文档可视高度(随窗口改变大小)
+        documentClientHeight: 0,
+        // 导航条, 布局风格, defalut(默认) / inverse(反向)
+        navbarLayoutType: 'default',
+        // 侧边栏, 布局皮肤, light(浅色) / dark(黑色)
+        sidebarLayoutSkin: 'dark',
+        // 侧边栏, 折叠状态
+        sidebarFold: false,
+        // 侧边栏, 菜单
+        menuList: [],
+        menuActiveName: '',
+        // 内容, 是否需要刷新
+        contentIsNeedRefresh: false,
+        // 主入口标签页
+        mainTabs: [],
+        mainTabsActiveName: ''
+    },
+    mutations: {
+        updateDocumentClientHeight(state, height) {
+            state.documentClientHeight = height
+        },
+        updateNavbarLayoutType(state, type) {
+            state.navbarLayoutType = type
+        },
+        updateSidebarLayoutSkin(state, skin) {
+            state.sidebarLayoutSkin = skin
+        },
+        updateSidebarFold(state, fold) {
+            state.sidebarFold = fold
+        },
+        updateMenuList(state, list) {
+            state.menuList = list
+        },
+        updateMenuActiveName(state, name) {
+            state.menuActiveName = name
+        },
+        updateContentIsNeedRefresh(state, status) {
+            state.contentIsNeedRefresh = status
+        },
+        updateMainTabs(state, tabs) {
+            state.mainTabs = tabs
+        },
+        updateMainTabsActiveName(state, name) {
+            state.mainTabsActiveName = name
+        },
+        removeTab(state, tabName) {
+            state.mainTabs = state.mainTabs.filter(item => item.name !== tabName)
+            if (state.mainTabs.length >= 1) {
+                // 当前选中tab被删除
+                if (tabName === state.mainTabsActiveName) {
+                    var tab = state.mainTabs[state.mainTabs.length - 1]
+                    router.push({ name: tab.name, query: tab.query, params: tab.params }, () => {
+                        state.mainTabsActiveName = tab.name
+                    })
+                }
+            } else {
+                state.menuActiveName = ''
+                router.push({ name: 'home' })
+            }
+        },
+        closeCurrentTab(state) {
+            this.commit('common/removeTab', state.mainTabsActiveName)
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/store/modules/message.js b/src/store/modules/message.js
new file mode 100644
index 00000000..9b689651
--- /dev/null
+++ b/src/store/modules/message.js
@@ -0,0 +1,33 @@
+export default {
+    namespaced: true,
+    state: {
+        XmlMsgType:{
+            "text":"文字",
+            "image":"图片",
+            "voice":"语音",
+            "shortvideo":"短视频",
+            "video":"视频",
+            "news":"图文",
+            "music":"音乐",
+            "location":"位置",
+            "link":"链接",
+            "event":"事件",
+            "transfer_customer_service":"转客服"
+        },
+        KefuMsgType: {
+            "text": "文本消息",
+            "image": "图片消息",
+            "voice": "语音消息",
+            "video": "视频消息",
+            "music": "音乐消息",
+            "news": "文章链接",
+            "mpnews": "公众号图文消息",
+            "wxcard": "卡券消息",
+            "miniprogrampage": "小程序消息",
+            "msgmenu": "菜单消息"
+        }
+    },
+    mutations: {
+
+    }
+}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 00000000..6f3798d0
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,15 @@
+export default {
+  namespaced: true,
+  state: {
+    id: 0,
+    name: ''
+  },
+  mutations: {
+    updateId(state, id) {
+      state.id = id
+    },
+    updateName(state, name) {
+      state.name = name
+    }
+  }
+}
diff --git a/src/store/modules/wxAccount.js b/src/store/modules/wxAccount.js
new file mode 100644
index 00000000..78903d08
--- /dev/null
+++ b/src/store/modules/wxAccount.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+
+export default {
+// Vuex模块启用命名空间
+namespaced: true,
+
+// Vuex的state，用来存储应用状态
+state: {
+// 账户类型，映射数字ID到账户类型名称
+ACCOUNT_TYPES: {
+1: '订阅号',
+2: '服务号'
+},
+
+// 存储账户列表
+accountList: [],
+
+// 当前选中的Appid，用来标识选择的账号
+selectedAppid: ''
+},
+
+// Vuex的mutations，用来修改state
+mutations: {
+// 更新账户列表
+updateAccountList (state, list) {
+// 更新state中的accountList
+state.accountList = list;
+
+// 如果列表为空，直接返回
+if (!list.length) return;
+
+// 如果当前没有选中的Appid，则从cookie或列表中选择一个默认Appid
+if (!state.selectedAppid) {
+let appidCookie = Vue.cookie.get('appid');
+// 获取cookie中的appid，如果有则使用cookie中的appid，否则使用列表中的第一个Appid
+let selectedAppid = appidCookie ? appidCookie : list[0].appid;
+// 通过commit调用mutation更新选中的账号
+this.commit('wxAccount/selectAccount', selectedAppid);
+}
+},
+
+// 选择某个账号（切换Appid）
+selectAccount (state, appid) {
+// 更新cookie中的appid，保存选中的Appid
+Vue.cookie.set('appid', appid);
+
+// 记录上一个选中的Appid
+let oldAppid = state.selectedAppid;
+
+// 更新当前选中的Appid
+state.selectedAppid = appid;
+
+// 如果选中的Appid发生变化，则刷新页面
+if (oldAppid) {
+location.reload();
+}
+}
+}
+};
diff --git a/src/store/modules/wxUserTags.js b/src/store/modules/wxUserTags.js
new file mode 100644
index 00000000..6cb02ef4
--- /dev/null
+++ b/src/store/modules/wxUserTags.js
@@ -0,0 +1,20 @@
+export default {
+  // 启用 Vuex 模块的命名空间，避免命名冲突
+  namespaced: true,
+  
+  // state 存储模块的状态
+  state: {
+  // tags 用来存储标签数据的数组
+  tags: []
+  },
+  
+  // mutations 用来修改 state 中的状态
+  mutations: {
+  // 更新 tags 数组的内容
+  updateTags (state, tags) {
+  // 将传入的 tags 更新到 state 中
+  state.tags = tags;
+  }
+  }
+  };
+  
\ No newline at end of file
diff --git a/src/utils/httpRequest.js b/src/utils/httpRequest.js
new file mode 100644
index 00000000..9a5ad605
--- /dev/null
+++ b/src/utils/httpRequest.js
@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import axios from 'axios'
+import router from '@/router'
+import qs from 'qs'
+import merge from 'lodash/merge'
+import { clearLoginInfo } from '@/utils'
+
+const baseUrl = '/wx' // 设置请求的基础路径
+
+// 创建axios实例
+const http = axios.create({
+timeout: 1000 * 30, // 设置请求超时为30秒
+withCredentials: true, // 允许携带跨域请求的cookie
+headers: {
+'Content-Type': 'application/json; charset=utf-8' // 默认请求头为json格式
+}
+})
+
+/**
+* 请求拦截器
+* 在每个请求发送之前，加入token（从cookie中获取）
+*/
+http.interceptors.request.use(config => {
+config.headers['token'] = Vue.cookie.get('token') // 在请求头中加入token
+return config // 返回请求配置
+}, error => {
+return Promise.reject(error) // 请求出错时，返回Promise拒绝
+})
+
+/**
+* 响应拦截器
+* 对响应数据进行拦截处理
+* 如果返回的状态码为401（未授权），则清除登录信息并跳转到登录页
+*/
+http.interceptors.response.use(response => {
+if (response.data && response.data.code === 401) { // 判断返回的code是否为401，代表token失效
+clearLoginInfo() // 清除登录信息
+router.push({ name: 'login' }) // 跳转到登录页面
+}
+return response // 返回响应数据
+}, error => {
+return Promise.reject(error) // 响应出错时，返回Promise拒绝
+})
+
+/**
+* 请求地址处理函数
+* @param {*} actionName 接口的名称，拼接成完整的URL
+* @returns {string} 拼接后的完整URL
+*/
+http.adornUrl = (actionName) => {
+// 在开发环境下，如果开启了代理，则请求路径会带上代理前缀
+return baseUrl + actionName // 返回完整的请求URL
+}
+
+/**
+* get请求的参数处理
+* @param {*} params 请求的参数对象
+* @param {*} openDefultParams 是否开启默认参数
+* @returns {object} 处理后的参数对象
+*/
+http.adornParams = (params = {}, openDefultParams = true) => {
+const defaults = {
+'t': new Date().getTime() // 添加时间戳参数，防止缓存
+}
+return openDefultParams ? merge(defaults, params) : params // 合并默认参数和传入的参数
+}
+
+/**
+* post请求的数据处理
+* @param {*} data 请求的数据对象
+* @param {*} openDefultdata 是否开启默认数据
+* @param {*} contentType 数据格式类型（'json'或'form'）
+* @returns {string} 处理后的数据
+*/
+http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
+const defaults = {
+'t': new Date().getTime() // 添加时间戳参数，防止缓存
+}
+data = openDefultdata ? merge(defaults, data) : data // 合并默认数据和传入的数据
+// 根据不同的contentType，处理数据格式
+return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+}
+
+export default http // 导出axios实例，供其他模块使用
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 00000000..aa52b209
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,78 @@
+import Vue from 'vue'
+import router from '@/router'
+import store from '@/store'
+
+/**
+* 获取UUID
+* 生成一个标准的UUID（例如：xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx）
+* 使用随机数和指定格式的规则生成UUID
+*/
+export function getUUID() {
+return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
+})
+}
+
+/**
+* 检查是否有某个权限
+* @param {*} key 权限的标识符
+* @returns {boolean} 如果权限列表中包含该权限返回true，否则返回false
+*/
+export function isAuth(key) {
+// 从 sessionStorage 中获取权限列表，并转换为数组，如果没有权限列表，默认返回空数组
+return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
+}
+
+/**
+* 将平面数据转换为树形数据
+* @param {*} data 原始平面数据
+* @param {*} id 唯一标识符字段，默认为'id'
+* @param {*} pid 父级标识符字段，默认为'parentId'
+* @returns {Array} 转换后的树形数据
+*/
+export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
+var res = [] // 存储最终的树形结构
+var temp = {} // 临时存储每个节点，以便快速查找父节点
+
+// 将数据转换为临时对象，key为节点的id，值为节点本身
+for (var i = 0; i < data.length; i++) {
+temp[data[i][id]] = data[i]
+}
+
+// 遍历数据，根据pid将节点组织成树形结构
+for (var k = 0; k < data.length; k++) {
+// 如果节点的父节点存在，并且当前节点的id不等于父节点的id
+if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
+// 如果父节点没有'children'属性，则初始化为数组
+if (!temp[data[k][pid]]['children']) {
+temp[data[k][pid]]['children'] = []
+}
+// 如果父节点没有'_level'属性，则设置为1
+if (!temp[data[k][pid]]['_level']) {
+temp[data[k][pid]]['_level'] = 1
+}
+// 当前节点的级别为父节点的级别+1
+data[k]['_level'] = temp[data[k][pid]]._level + 1
+// 将当前节点推送到父节点的children数组中
+temp[data[k][pid]]['children'].push(data[k])
+} else {
+// 如果当前节点是根节点，直接推送到结果数组中
+res.push(data[k])
+}
+}
+
+return res // 返回转换后的树形数据
+}
+
+/**
+* 清除登录信息
+* 用于用户退出时，清理本地存储的登录信息
+*/
+export function clearLoginInfo() {
+// 删除cookie中的'token'
+Vue.cookie.delete('token')
+// 目前注释掉了重置store的操作，若需要可以解除注释
+// store.commit('resetStore')
+// 重置动态菜单路由标志
+router.options.isAddDynamicMenuRoutes = false
+}
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 00000000..c25e3f44
--- /dev/null
+++ b/src/utils/validate.js
@@ -0,0 +1,36 @@
+/**
+* 验证邮箱格式
+* @param {*} s - 需要验证的邮箱地址
+* @returns {boolean} - 返回是否是有效的邮箱地址
+*/
+export function isEmail(s) {
+  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
+  }
+  
+  /**
+  * 验证手机号码格式（中国手机号）
+  * @param {*} s - 需要验证的手机号
+  * @returns {boolean} - 返回是否是有效的手机号码
+  */
+  export function isMobile(s) {
+  return /^1[0-9]{10}$/.test(s)
+  }
+  
+  /**
+  * 验证固定电话号码格式
+  * @param {*} s - 需要验证的电话号码
+  * @returns {boolean} - 返回是否是有效的电话号码（包括区号和本地号码）
+  */
+  export function isPhone(s) {
+  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
+  }
+  
+  /**
+  * 验证URL地址格式
+  * @param {*} s - 需要验证的URL地址
+  * @returns {boolean} - 返回是否是有效的URL地址（包括http或https协议）
+  */
+  export function isURL(s) {
+  return /^http[s]?:\/\/.*/.test(s)
+  }
+  
\ No newline at end of file
diff --git a/src/views/common/404.vue b/src/views/common/404.vue
new file mode 100644
index 00000000..c96b106e
--- /dev/null
+++ b/src/views/common/404.vue
@@ -0,0 +1,81 @@
+<template>
+    <!-- 404 错误页面的模板 -->
+    <div class="site-wrapper site-page--not-found">
+    <div class="site-content__wrapper">
+    <div class="site-content">
+    <!-- 错误代码 -->
+    <h2 class="not-found-title">400</h2>
+    <!-- 错误描述 -->
+    <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p >
+    <!-- 返回上一页按钮 -->
+    <el-button @click="$router.go(-1)">返回上一页</el-button>
+    <!-- 返回首页按钮 -->
+    <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
+    </div>
+    </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+    // 这里可以添加相关的 JavaScript 逻辑
+    }
+    </script>
+    
+    <style lang="scss">
+    /* 整个404页面的外部容器 */
+    .site-wrapper.site-page--not-found {
+    position: absolute; /* 定位到页面的绝对位置 */
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden; /* 防止内容溢出 */
+    
+    /* 内容包裹层 */
+    .site-content__wrapper {
+    padding: 0;
+    margin: 0;
+    background-color: #fff; /* 设置背景色为白色 */
+    }
+    
+    /* 页面内容容器 */
+    .site-content {
+    position: fixed; /* 固定位置 */
+    top: 15%; /* 距离顶部15% */
+    left: 50%; /* 距离左边50% */
+    z-index: 2; /* 确保内容在其他元素之上 */
+    padding: 30px;
+    text-align: center; /* 内容居中 */
+    transform: translate(-50%, 0); /* 将内容水平居中 */
+    }
+    
+    /* 错误标题 */
+    .not-found-title {
+    margin: 20px 0 15px;
+    font-size: 10em; /* 大字体 */
+    font-weight: 400;
+    color: rgb(55, 71, 79); /* 文字颜色 */
+    }
+    
+    /* 错误描述 */
+    .not-found-desc {
+    margin: 0 0 30px;
+    font-size: 26px;
+    text-transform: uppercase; /* 将文本转换为大写 */
+    color: rgb(118, 131, 143); /* 文字颜色 */
+    
+    /* 强调标签 <em> 样式 */
+    > em {
+    font-style: normal;
+    color: #ee8145; /* 设置颜色 */
+    }
+    }
+    
+    /* 返回首页按钮的左边距 */
+    .not-found-btn-gohome {
+    margin-left: 30px;
+    }
+    }
+    </style>
+    
\ No newline at end of file
diff --git a/src/views/common/home.vue b/src/views/common/home.vue
new file mode 100644
index 00000000..fe655f7e
--- /dev/null
+++ b/src/views/common/home.vue
@@ -0,0 +1,18 @@
+<template>
+    <!-- 模块容器 div -->
+    <div class="mod-home">
+    <!-- 欢迎标题 -->
+    <h3>欢迎使用微信管理系统</h3>
+    </div>
+    </template>
+    
+    <style>
+    /* 样式部分 */
+    .mod-home {
+    /* 设置行高，增加文本的可读性 */
+    line-height: 2.5;
+    /* 使文本水平居中对齐 */
+    text-align: center;
+    }
+    </style>
+    
\ No newline at end of file
diff --git a/src/views/common/login.vue b/src/views/common/login.vue
new file mode 100644
index 00000000..1914a120
--- /dev/null
+++ b/src/views/common/login.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="site-wrapper site-page--login">
+    <!-- 页面容器，背景层 -->
+    <div class="site-content__wrapper">
+    <!-- 页面内容容器 -->
+    <div class="site-content">
+    <!-- 品牌信息部分 -->
+    <div class="brand-info">
+    <h2 class="brand-info__text">微信后台管理系统</h2>
+    <p class="brand-info__intro">微信公众号后台管理系统。</p >
+    </div>
+    
+    <!-- 登录表单 -->
+    <div class="login-main">
+    <h3 class="login-title">管理员登录</h3>
+    <!-- 表单，绑定了 model 和 validation 规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
+    
+    <!-- 用户名输入框 -->
+    <el-form-item prop="userName">
+    <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+    </el-form-item>
+    
+    <!-- 密码输入框 -->
+    <el-form-item prop="password">
+    <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+    </el-form-item>
+    
+    <!-- 验证码输入框 -->
+    <el-form-item prop="captcha">
+    <el-row :gutter="20">
+    <el-col :span="14">
+    <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
+    </el-col>
+    <el-col :span="10" class="login-captcha">
+    <!-- 验证码图片，点击刷新验证码 -->
+    < img :src="captchaPath" @click="getCaptcha()" alt="">
+    </el-col>
+    </el-row>
+    </el-form-item>
+    
+    <!-- 登录按钮 -->
+    <el-form-item>
+    <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+    </el-form-item>
+    </el-form>
+    </div>
+    </div>
+    </div>
+    </div>
+    </template>
+<script>
+import { getUUID } from '@/utils' // 引入工具函数获取UUID
+export default {
+data() {
+return {
+// 存储表单数据
+dataForm: {
+userName: '', // 用户名
+password: '', // 密码
+uuid: '', // UUID，用于生成验证码
+captcha: '' // 验证码
+},
+// 表单验证规则
+dataRule: {
+userName: [
+{ required: true, message: '帐号不能为空', trigger: 'blur' }
+],
+password: [
+{ required: true, message: '密码不能为空', trigger: 'blur' }
+],
+captcha: [
+{ required: true, message: '验证码不能为空', trigger: 'blur' }
+]
+},
+captchaPath: '' // 存储验证码的图片路径
+}
+},
+created() {
+// 在组件创建时获取验证码
+this.getCaptcha()
+},
+methods: {
+// 提交表单
+dataFormSubmit() {
+// 验证表单是否有效
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 如果表单验证通过，发送登录请求
+this.$http({
+url: this.$http.adornUrl('/sys/login'), // 登录接口路径
+method: 'post',
+data: this.$http.adornData({
+'username': this.dataForm.userName,
+'password': this.dataForm.password,
+'uuid': this.dataForm.uuid,
+'captcha': this.dataForm.captcha
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 如果登录成功，存储 token 并跳转到主页
+this.$cookie.set('token', data.token)
+this.$router.replace({ name: 'home' })
+} else {
+// 如果登录失败，重新获取验证码并显示错误消息
+this.getCaptcha()
+this.$message.error(data.msg)
+}
+})
+}
+})
+},
+// 获取验证码，生成新的 UUID
+getCaptcha() {
+this.dataForm.uuid = getUUID() // 获取新的 UUID
+// 更新验证码的路径
+this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`)
+}
+}
+}
+</script>
+<style lang="scss">
+.site-wrapper.site-page--login {
+position: absolute;
+top: 0;
+right: 0;
+bottom: 0;
+left: 0;
+background-color: rgba(38, 50, 56, 0.5); /* 半透明背景 */
+overflow: hidden;
+
+/* 页面背景渐变效果 */
+&:before {
+position: fixed;
+top: 0;
+left: 0;
+z-index: -1; /* 确保背景层在最底层 */
+width: 100%;
+height: 100%;
+content: "";
+background-color: #fa8bff;
+background-image: linear-gradient(
+45deg,
+#fa8bff 0%,
+#2bd2ff 52%,
+#2bff88 90%
+);
+background-size: cover;
+}
+
+.site-content__wrapper {
+position: absolute;
+top: 0;
+right: 0;
+bottom: 0;
+left: 0;
+padding: 0;
+margin: 0;
+overflow-x: hidden;
+overflow-y: auto;
+background-color: transparent;
+}
+
+.site-content {
+min-height: 100%;
+padding: 30px 500px 30px 30px;
+}
+
+/* 品牌信息样式 */
+.brand-info {
+margin: 220px 100px 0 90px;
+color: #fff;
+}
+
+.brand-info__text {
+margin: 0 0 22px 0;
+font-size: 48px;
+font-weight: 400;
+text-transform: uppercase;
+}
+
+.brand-info__intro {
+margin: 10px 0;
+font-size: 16px;
+line-height: 1.58;
+opacity: 0.6;
+}
+
+/* 登录表单样式 */
+.login-main {
+position: absolute;
+top: 0;
+right: 0;
+padding: 150px 60px 180px;
+width: 470px;
+min-height: 100%;
+background-color: #fff;
+}
+
+.login-title {
+font-size: 16px;
+}
+
+/* 验证码图片样式 */
+.login-captcha {
+overflow: hidden;
+> img {
+width: 100%;
+cursor: pointer; /* 鼠标指针变成手形，表示可以点击 */
+}
+}
+
+/* 登录按钮样式 */
+.login-btn-submit {
+width: 100%;
+margin-top: 38px;
+}
+}
+</style>
+    
\ No newline at end of file
diff --git a/src/views/common/theme.vue b/src/views/common/theme.vue
new file mode 100644
index 00000000..388b2ff6
--- /dev/null
+++ b/src/views/common/theme.vue
@@ -0,0 +1,53 @@
+<template>
+    <el-form>
+    <!-- 布局设置表单标题 -->
+    <h2>布局设置</h2>
+    
+    <!-- 导航条类型设置项 -->
+    <el-form-item label="导航条类型">
+    <!-- 导航条类型选择框，使用 radio 按钮选择 'default' 或 'inverse' -->
+    <el-radio-group v-model="navbarLayoutType">
+    <el-radio label="default" border>default</el-radio>
+    <el-radio label="inverse" border>inverse</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 侧边栏皮肤设置项 -->
+    <el-form-item label="侧边栏皮肤">
+    <!-- 侧边栏皮肤选择框，使用 radio 按钮选择 'light' 或 'dark' -->
+    <el-radio-group v-model="sidebarLayoutSkin">
+    <el-radio label="light" border>light</el-radio>
+    <el-radio label="dark" border>dark</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    </el-form>
+    </template>
+<script>
+export default {
+computed: {
+// 计算属性：获取并设置导航条类型
+navbarLayoutType: {
+// getter：从 Vuex 中获取 navbarLayoutType 的当前值
+get() { 
+return this.$store.state.common.navbarLayoutType 
+},
+// setter：将新的值提交到 Vuex 中，更新 navbarLayoutType
+set(val) { 
+this.$store.commit('common/updateNavbarLayoutType', val) 
+}
+},
+// 计算属性：获取并设置侧边栏皮肤
+sidebarLayoutSkin: {
+// getter：从 Vuex 中获取 sidebarLayoutSkin 的当前值
+get() { 
+return this.$store.state.common.sidebarLayoutSkin 
+},
+// setter：将新的值提交到 Vuex 中，更新 sidebarLayoutSkin
+set(val) { 
+this.$store.commit('common/updateSidebarLayoutSkin', val) 
+}
+}
+}
+}
+</script>
+    
\ No newline at end of file
diff --git a/src/views/main-content.vue b/src/views/main-content.vue
new file mode 100644
index 00000000..987dcd84
--- /dev/null
+++ b/src/views/main-content.vue
@@ -0,0 +1,103 @@
+<template>
+    <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
+        <!-- 主入口标签页 s -->
+        <el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
+            <el-dropdown class="site-tabs__tools" :show-timeout="0">
+                <i class="el-icon-arrow-down el-icon--right"></i>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
+                    <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+            <el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
+                <el-card :body-style="siteContentViewHeight">
+                    <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
+                    </iframe>
+                    <keep-alive v-else>
+                        <router-view v-if="item.name === mainTabsActiveName" />
+                    </keep-alive>
+                </el-card>
+            </el-tab-pane>
+        </el-tabs>
+        <!-- 主入口标签页 e -->
+        <el-card v-else :body-style="siteContentViewHeight">
+            <keep-alive>
+                <router-view />
+            </keep-alive>
+        </el-card>
+    </main>
+</template>
+
+<script>
+import { isURL } from '@/utils/validate'
+export default {
+    inject: ['refresh'],
+    data() {
+        return {
+        }
+    },
+    computed: {
+        documentClientHeight: {
+            get() { return this.$store.state.common.documentClientHeight }
+        },
+        menuActiveName: {
+            get() { return this.$store.state.common.menuActiveName },
+            set(val) { this.$store.commit('common/updateMenuActiveName', val) }
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        },
+        mainTabsActiveName: {
+            get() { return this.$store.state.common.mainTabsActiveName },
+            set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+        },
+        siteContentViewHeight() {
+            var height = this.documentClientHeight - 50 - 30 - 2
+            if (this.$route.meta.isTab) {
+                height -= 40
+                return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
+            }
+            return { minHeight: height + 'px' }
+        }
+    },
+    methods: {
+        // tabs, 选中tab
+        selectedTabHandle(tab) {
+            tab = this.mainTabs.filter(item => item.name === tab.name)
+            if (tab.length >= 1) {
+                this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
+            }
+        },
+        // tabs, 删除tab
+        removeTabHandle(tabName) {
+            this.$store.commit('common/removeTab', tabName)
+        },
+        // tabs, 关闭当前
+        tabsCloseCurrentHandle() {
+            this.removeTabHandle(this.mainTabsActiveName)
+        },
+        // tabs, 关闭其它
+        tabsCloseOtherHandle() {
+            this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
+        },
+        // tabs, 关闭全部
+        tabsCloseAllHandle() {
+            this.mainTabs = []
+            this.menuActiveName = ''
+            this.$router.push({ name: 'home' })
+        },
+        // tabs, 刷新当前
+        tabsRefreshCurrentHandle() {
+            var tab = this.$route
+            this.removeTabHandle(tab.name)
+            this.$nextTick(() => {
+                this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
+            })
+        }
+    }
+}
+</script>
+
diff --git a/src/views/main-navbar-update-password.vue b/src/views/main-navbar-update-password.vue
new file mode 100644
index 00000000..4c2cd4a7
--- /dev/null
+++ b/src/views/main-navbar-update-password.vue
@@ -0,0 +1,109 @@
+<template>
+    <el-dialog title="修改密码" :visible.sync="visible" :append-to-body="true">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+            <el-form-item label="账号">
+                <span>{{ userName }}</span>
+            </el-form-item>
+            <el-form-item label="原密码" prop="password">
+                <el-input type="password" v-model="dataForm.password"></el-input>
+            </el-form-item>
+            <el-form-item label="新密码" prop="newPassword">
+                <el-input type="password" v-model="dataForm.newPassword"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码" prop="confirmPassword">
+                <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { clearLoginInfo } from '@/utils'
+export default {
+    data() {
+        var validateConfirmPassword = (rule, value, callback) => {
+            if (this.dataForm.newPassword !== value) {
+                callback(new Error('确认密码与新密码不一致'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            visible: false,
+            dataForm: {
+                password: '',
+                newPassword: '',
+                confirmPassword: ''
+            },
+            dataRule: {
+                password: [
+                    { required: true, message: '原密码不能为空', trigger: 'blur' }
+                ],
+                newPassword: [
+                    { required: true, message: '新密码不能为空', trigger: 'blur' }
+                ],
+                confirmPassword: [
+                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
+                    { validator: validateConfirmPassword, trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    computed: {
+        userName: {
+            get() { return this.$store.state.user.name }
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        }
+    },
+    methods: {
+        // 初始化
+        init() {
+            this.visible = true
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+            })
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl('/sys/user/password'),
+                        method: 'post',
+                        data: this.$http.adornData({
+                            'password': this.dataForm.password,
+                            'newPassword': this.dataForm.newPassword
+                        })
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    this.$nextTick(() => {
+                                        this.mainTabs = []
+                                        clearLoginInfo()
+                                        this.$router.replace({ name: 'login' })
+                                    })
+                                }
+                            })
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
+
diff --git a/src/views/main-navbar.vue b/src/views/main-navbar.vue
new file mode 100644
index 00000000..75364b13
--- /dev/null
+++ b/src/views/main-navbar.vue
@@ -0,0 +1,102 @@
+<template>
+    <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
+        <div class="site-navbar__header">
+            <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
+                <a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a>
+                <a class="site-navbar__brand-mini" href="javascript:;">W</a>
+            </h1>
+        </div>
+        <div class="site-navbar__body clearfix">
+            <el-menu class="site-navbar__menu" mode="horizontal">
+                <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
+                    <i :class="sidebarFold?'el-icon-s-unfold':'el-icon-s-fold'"></i>
+                </el-menu-item>
+            </el-menu>
+            <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
+                <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
+                    <template slot="title">
+                        <i class="el-icon-setting"></i>
+                    </template>
+                </el-menu-item>
+                <el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')">
+                    <template slot="title">
+                        <wx-account-selector></wx-account-selector>
+                    </template>
+                </el-menu-item>
+                <el-menu-item class="site-navbar__avatar" index="3">
+                    <el-dropdown :show-timeout="0" placement="bottom">
+                        <span class="el-dropdown-link">
+                            {{ userName }}
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                            <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
+                            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </el-menu-item>
+            </el-menu>
+        </div>
+        <!-- 弹窗, 修改密码 -->
+        <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
+    </nav>
+</template>
+
+<script>
+import UpdatePassword from './main-navbar-update-password'
+import WxAccountSelector from '@/components/wx-account-selector'
+import { clearLoginInfo } from '@/utils'
+export default {
+    data() {
+        return {
+            updatePassowrdVisible: false
+        }
+    },
+    components: {
+        UpdatePassword,WxAccountSelector
+    },
+    computed: {
+        navbarLayoutType: {
+            get() { return this.$store.state.common.navbarLayoutType }
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold },
+            set(val) { this.$store.commit('common/updateSidebarFold', val) }
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        },
+        userName: {
+            get() { return this.$store.state.user.name }
+        }
+    },
+    methods: {
+        // 修改密码
+        updatePasswordHandle() {
+            this.updatePassowrdVisible = true
+            this.$nextTick(() => {
+                this.$refs.updatePassowrd.init()
+            })
+        },
+        // 退出
+        logoutHandle() {
+            this.$confirm(`确定进行[退出]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/sys/logout'),
+                    method: 'post',
+                    data: this.$http.adornData()
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        clearLoginInfo()
+                        this.$router.push({ name: 'login' })
+                    }
+                })
+            }).catch(() => { })
+        }
+    }
+}
+</script>
diff --git a/src/views/main-sidebar-sub-menu.vue b/src/views/main-sidebar-sub-menu.vue
new file mode 100644
index 00000000..b45b1b61
--- /dev/null
+++ b/src/views/main-sidebar-sub-menu.vue
@@ -0,0 +1,50 @@
+<template>
+    <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''" :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
+        <template slot="title">
+            <i class="site-sidebar__menu-icon" :class="menu.icon"></i>
+            <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
+            <span>{{ menu.name }}</span>
+        </template>
+        <sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes">
+        </sub-menu>
+    </el-submenu>
+    <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
+        <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
+        <i class="site-sidebar__menu-icon fa" :class="menu.icon"></i>
+        <span>{{ menu.name }}</span>
+    </el-menu-item>
+</template>
+
+<script>
+import SubMenu from './main-sidebar-sub-menu'
+export default {
+    name: 'sub-menu',
+    props: {
+        menu: {
+            type: Object,
+            required: true
+        },
+        dynamicMenuRoutes: {
+            type: Array,
+            required: true
+        }
+    },
+    components: {
+        SubMenu
+    },
+    computed: {
+        sidebarLayoutSkin: {
+            get() { return this.$store.state.common.sidebarLayoutSkin }
+        }
+    },
+    methods: {
+        // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+        gotoRouteHandle(menu) {
+            var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
+            if (route.length >= 1) {
+                this.$router.push({ name: route[0].name })
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/main-sidebar.vue b/src/views/main-sidebar.vue
new file mode 100644
index 00000000..795a07d0
--- /dev/null
+++ b/src/views/main-sidebar.vue
@@ -0,0 +1,90 @@
+<template>
+    <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
+        <div class="site-sidebar__inner">
+            <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
+                <el-menu-item index="home" @click="$router.push({ name: 'home' })">
+                    <i class="site-sidebar__menu-icon el-icon-s-home"></i>
+                    <span slot="title">首页</span>
+                </el-menu-item>
+                <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes">
+                </sub-menu>
+            </el-menu>
+        </div>
+    </aside>
+</template>
+
+<script>
+import SubMenu from './main-sidebar-sub-menu'
+import { isURL } from '@/utils/validate'
+export default {
+    data() {
+        return {
+            dynamicMenuRoutes: []
+        }
+    },
+    components: {
+        SubMenu
+    },
+    computed: {
+        sidebarLayoutSkin: {
+            get() { return this.$store.state.common.sidebarLayoutSkin }
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold }
+        },
+        menuList: {
+            get() { return this.$store.state.common.menuList },
+            set(val) { this.$store.commit('common/updateMenuList', val) }
+        },
+        menuActiveName: {
+            get() { return this.$store.state.common.menuActiveName },
+            set(val) { this.$store.commit('common/updateMenuActiveName', val) }
+        },
+        mainTabs: {
+            get() { return this.$store.state.common.mainTabs },
+            set(val) { this.$store.commit('common/updateMainTabs', val) }
+        },
+        mainTabsActiveName: {
+            get() { return this.$store.state.common.mainTabsActiveName },
+            set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+        }
+    },
+    watch: {
+        $route: 'routeHandle'
+    },
+    created() {
+        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
+        this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
+        this.routeHandle(this.$route)
+    },
+    methods: {
+        // 路由操作
+        routeHandle(route) {
+            if (route.meta.isTab) {
+                // tab选中, 不存在先添加
+                var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+                if (!tab) {
+                    if (route.meta.isDynamic) {
+                        route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
+                        if (!route) {
+                            return console.error('未能找到可用标签页!')
+                        }
+                    }
+                    tab = {
+                        menuId: route.meta.menuId || route.name,
+                        name: route.name,
+                        title: route.meta.title,
+                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
+                        iframeUrl: route.meta.iframeUrl || '',
+                        params: route.params,
+                        query: route.query
+                    }
+                    this.mainTabs = this.mainTabs.concat(tab)
+                }
+                this.menuActiveName = tab.menuId + ''
+                this.mainTabsActiveName = tab.name
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/main.vue b/src/views/main.vue
new file mode 100644
index 00000000..2b044f4b
--- /dev/null
+++ b/src/views/main.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
+        <template v-if="!loading">
+            <main-navbar />
+            <main-sidebar />
+            <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
+                <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import MainNavbar from './main-navbar'
+import MainSidebar from './main-sidebar'
+import MainContent from './main-content'
+export default {
+    provide() {
+        return {
+            // 刷新
+            refresh() {
+                this.$store.commit('common/updateContentIsNeedRefresh', true)
+                this.$nextTick(() => {
+                    this.$store.commit('common/updateContentIsNeedRefresh', false)
+                })
+            }
+        }
+    },
+    data() {
+        return {
+            loading: true
+        }
+    },
+    components: {
+        MainNavbar,
+        MainSidebar,
+        MainContent
+    },
+    computed: {
+        documentClientHeight: {
+            get() { return this.$store.state.common.documentClientHeight },
+            set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
+        },
+        sidebarFold: {
+            get() { return this.$store.state.common.sidebarFold }
+        },
+        userId: {
+            get() { return this.$store.state.user.id },
+            set(val) { this.$store.commit('user/updateId', val) }
+        },
+        userName: {
+            get() { return this.$store.state.user.name },
+            set(val) { this.$store.commit('user/updateName', val) }
+        }
+    },
+    created() {
+        this.getUserInfo()
+    },
+    mounted() {
+        this.resetDocumentClientHeight()
+    },
+    methods: {
+        // 重置窗口可视高度
+        resetDocumentClientHeight() {
+            this.documentClientHeight = document.documentElement['clientHeight']
+            window.onresize = () => {
+                this.documentClientHeight = document.documentElement['clientHeight']
+            }
+        },
+        // 获取当前管理员信息
+        getUserInfo() {
+            this.$http({
+                url: this.$http.adornUrl('/sys/user/info'),
+                method: 'get',
+                params: this.$http.adornParams()
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.loading = false
+                    this.userId = data.user.userId
+                    this.userName = data.user.username
+                }
+            })
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/oss/oss-config.vue b/src/views/modules/oss/oss-config.vue
new file mode 100644
index 00000000..ae429ca5
--- /dev/null
+++ b/src/views/modules/oss/oss-config.vue
@@ -0,0 +1,150 @@
+<template>
+    <!-- Dialog弹框，用于配置云存储 -->
+    <el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible">
+    
+    <!-- 表单组件，model 绑定 dataForm，rules 绑定 dataRule -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
+    
+    <!-- 存储类型选择项 -->
+    <el-form-item size="mini" label="存储类型">
+    <el-radio-group v-model="dataForm.type">
+    <el-radio :label="1">七牛</el-radio>
+    <el-radio :label="2">阿里云</el-radio>
+    <el-radio :label="3">腾讯云</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 当选择七牛云时显示七牛相关配置项 -->
+    <template v-if="dataForm.type === 1">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKey">
+    <el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretKey">
+    <el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
+    </el-form-item>
+    <el-form-item label="空间名">
+    <el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
+    </el-form-item>
+    </template>
+    
+    <!-- 当选择阿里云时显示阿里云相关配置项 -->
+    <template v-else-if="dataForm.type === 2">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="EndPoint">
+    <el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKeyId">
+    <el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKeySecret">
+    <el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
+    </el-form-item>
+    <el-form-item label="BucketName">
+    <el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
+    </el-form-item>
+    </template>
+    
+    <!-- 当选择腾讯云时显示腾讯云相关配置项 -->
+    <template v-else-if="dataForm.type === 3">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="AppId">
+    <el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretId">
+    <el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretKey">
+    <el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
+    </el-form-item>
+    <el-form-item label="BucketName">
+    <el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input>
+    </el-form-item>
+    <el-form-item label="Bucket所属地区">
+    <el-input v-model="dataForm.qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input>
+    </el-form-item>
+    </template>
+    </el-form>
+    
+    <!-- 弹窗底部按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+    </template>
+<script>
+export default {
+// 定义组件的数据
+data() {
+return {
+// 控制弹框显示/隐藏
+visible: false,
+// 存储表单数据
+dataForm: {},
+// 存储表单验证规则
+dataRule: {}
+}
+},
+methods: {
+// 初始化方法，用于根据 id 获取配置
+init(id) {
+this.visible = true // 显示弹框
+// 发送请求获取存储配置
+this.$http({
+url: this.$http.adornUrl('/sys/oss/config'), // 请求路径
+method: 'get', // GET 请求
+params: this.$http.adornParams() // 参数
+}).then(({ data }) => {
+// 如果获取成功，则填充表单数据
+this.dataForm = data && data.code === 200 ? data.config : []
+})
+},
+// 表单提交方法
+dataFormSubmit() {
+// 验证表单是否有效
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 提交表单数据
+this.$http({
+url: this.$http.adornUrl('/sys/oss/saveConfig'), // 请求保存配置
+method: 'post', // POST 请求
+data: this.$http.adornData(this.dataForm) // 提交表单数据
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 如果操作成功，显示成功提示并关闭弹框
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => {
+this.visible = false // 关闭弹框
+}
+})
+} else {
+// 显示错误信息
+this.$message.error(data.msg)
+}
+})
+}
+})
+}
+}
+}
+</script>
+    
\ No newline at end of file
diff --git a/src/views/modules/oss/oss-uploader-tencent.vue b/src/views/modules/oss/oss-uploader-tencent.vue
new file mode 100644
index 00000000..81e3ddb2
--- /dev/null
+++ b/src/views/modules/oss/oss-uploader-tencent.vue
@@ -0,0 +1,105 @@
+<template>
+	<!-- 触发文件选择的区域，点击时触发 selectFile 方法 -->
+	<div @click="selectFile">
+	<!-- 隐藏的文件输入框，通过 click 触发文件选择 -->
+	<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
+	<!-- 显示上传状态文本，如果正在上传则显示 infoText，否则显示 "上传文件" -->
+	<div>{{uploading ? infoText : '上传文件'}}</div>
+	</div>
+	</template>
+	
+	<script>
+	// 腾讯云对象存储组件，允许文件直接上传到腾讯云，适合后端没有外网权限时使用
+	// 使用本组件时需引入腾讯云对象存储 SDK，具体请参考：https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js
+	var cos;
+	export default {
+	name: "oss-uploader", // 组件名称
+	data() {
+	return {
+	uploading: false, // 上传状态，默认未上传
+	infoText: "上传中...", // 上传中显示的提示文本
+	cosConfig: [] // 腾讯云 COS 配置数据
+	}
+	},
+	mounted() {
+	// 组件加载完毕后，发起请求获取 COS 配置数据
+	this.$http({
+	url: this.$http.adornUrl('/sys/oss/config'),
+	method: 'get',
+	params: this.$http.adornParams() // 传递请求参数
+	}).then(({ data }) => {
+	if (data && data.code === 200) {
+	// 如果获取成功，保存配置数据
+	this.cosConfig = data.config;
+	// 初始化腾讯云 COS 实例
+	cos = new COS({
+	SecretId: data.config.qcloudSecretId,
+	SecretKey: data.config.qcloudSecretKey,
+	});
+	} else {
+	// 配置获取失败，提示错误信息
+	this.$message.error('请先配置云存储相关信息！');
+	}
+	})
+	},
+	methods: {
+	// 选择文件的方法
+	selectFile() {
+	// 如果当前没有文件正在上传，点击触发文件选择框
+	if (!this.uploading) {
+	this.$refs.fileInput.click();
+	}
+	},
+	// 文件选择后触发的回调方法
+	onFileChange() {
+	let file = this.$refs.fileInput.files[0]; // 获取选中的文件
+	this.uploading = true; // 设置上传状态为 true
+	let now = new Date();
+	// 生成上传文件的存储路径（包括日期和时间戳确保路径唯一）
+	let path = now.toISOString().slice(0, 10) + '/' + now.getTime() + file.name.substr(file.name.lastIndexOf('.'));
+	
+	// 调用腾讯云 COS 上传文件方法
+	cos.putObject({
+	Bucket: this.cosConfig.qcloudBucketName, // 必须指定的桶名称
+	Region: this.cosConfig.qcloudRegion, // 必须指定的区域
+	Key: path, // 文件存储路径（文件名）
+	Body: file, // 上传的文件对象
+	onProgress: (progressData) => { // 上传进度回调
+	// 更新上传进度提示文本
+	this.infoText = '上传中：' + (progressData.percent * 100).toFixed(2) + '%';
+	}
+	}, (err, data) => {
+	// 上传完成后回调，处理成功和失败的情况
+	console.log(err || data);
+	this.uploading = false; // 上传状态恢复为 false
+	if (data) {
+	// 上传成功，更新提示文本
+	this.infoText = '上传文件';
+	// 生成文件访问的 URL
+	let fileUrl = 'https://' + this.cosConfig.qcloudBucketName + '.cos.' + this.cosConfig.qcloudRegion + '.myqcloud.com/' + path;
+	this.saveUploadResult(fileUrl); // 保存上传结果
+	} else {
+	// 上传失败，显示错误消息
+	this.$message.error('文件上传失败', err);
+	}
+	});
+	},
+	// 保存上传结果（上传成功后调用，传入文件的访问 URL）
+	saveUploadResult(url) {
+	this.$http({
+	url: this.$http.adornUrl('/sys/oss/upload'),
+	method: 'post',
+	data: { url: url } // 将上传的文件 URL 传给服务器
+	}).then(({ data }) => {
+	// 上传成功后，触发 `uploaded` 事件，将文件 URL 传递给父组件
+	this.$emit('uploaded', url);
+	})
+	}
+	}
+	}
+	</script>
+	
+	<style scoped>
+	/* 样式部分为空 */
+	</style>
+	
\ No newline at end of file
diff --git a/src/views/modules/oss/oss-uploader.vue b/src/views/modules/oss/oss-uploader.vue
new file mode 100644
index 00000000..64bc5914
--- /dev/null
+++ b/src/views/modules/oss/oss-uploader.vue
@@ -0,0 +1,73 @@
+<template>
+    <!-- 点击外部div触发文件选择操作 -->
+    <div @click="selectFile">
+    <!-- 隐藏的文件上传input，选择文件后触发onFileChange方法 -->
+    <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
+    <!-- 显示上传中的状态或默认的“上传文件”文本 -->
+    <div>{{uploading ? infoText : '上传文件'}}</div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+    name: "oss-uploader", // 组件名称为 "oss-uploader"
+    data() {
+    return {
+    uploading: false, // 上传状态，默认为false
+    infoText: "上传中...", // 上传中文本，上传中时显示此文本
+    cosConfig: [] // 存储云存储配置
+    }
+    },
+    mounted() {
+    // 组件挂载后请求获取云存储的配置
+    this.$http({
+    url: this.$http.adornUrl('/sys/oss/config'), // 获取配置的API接口
+    method: 'get', // 使用GET请求
+    params: this.$http.adornParams() // 请求参数
+    }).then(({ data }) => {
+    // 请求成功后处理返回数据
+    if (data && data.code === 200 && data.config.type) {
+    this.cosConfig = data.config // 设置云存储配置
+    } else {
+    // 如果配置不存在，弹出错误提示
+    this.$message.error('请先配置云存储相关信息！')
+    }
+    })
+    },
+    methods: {
+    // 选择文件的事件处理函数
+    selectFile() {
+    if (!this.uploading) {
+    // 如果当前不是上传中状态，则模拟点击隐藏的input元素，打开文件选择框
+    this.$refs.fileInput.click();
+    }
+    },
+    // 文件选择后触发的事件处理函数
+    onFileChange() {
+    let file = this.$refs.fileInput.files[0]; // 获取文件对象
+    this.uploading = true; // 设置上传状态为true，表示正在上传
+    let formData = new FormData();
+    formData.append("file", file); // 将文件添加到formData对象中
+    
+    // 发起POST请求上传文件
+    this.$http({
+    url: this.$http.adornUrl('/sys/oss/upload'), // 上传文件的API接口
+    method: 'post', // 使用POST请求
+    data: formData // 上传的文件数据
+    }).then(({ data }) => {
+    // 请求成功后处理返回的数据
+    console.log(data); // 输出返回的数据，便于调试
+    if (data && data.code === 200) {
+    // 上传成功，触发父组件的'uploaded'事件，传递上传后的文件url
+    this.$emit('uploaded', data.url)
+    } else {
+    // 上传失败，弹出错误提示，显示错误信息
+    this.$message.error("文件上传失败：" + data.msg)
+    }
+    this.uploading = false; // 上传完成，设置上传状态为false
+    })
+    }
+    }
+    }
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/modules/oss/oss.vue b/src/views/modules/oss/oss.vue
new file mode 100644
index 00000000..4c403ce3
--- /dev/null
+++ b/src/views/modules/oss/oss.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="mod-oss">
+        <el-form :inline="true" :model="dataForm">
+            <el-form-item>
+                <el-button type="primary" @click="configHandle()">云存储配置</el-button>
+                <el-button type="primary">
+                    <OssUploader @uploaded="getDataList"></OssUploader>
+                </el-button>
+                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
+            </el-table-column>
+            <el-table-column prop="url" header-align="center" align="center" label="URL地址">
+                <div slot-scope="scope">
+                    <img class="image-sm" v-if="isImageUrl(scope.row.url)" :src="scope.row.url" />
+                    <a :href="scope.row.url" target="_blank" v-else>{{scope.row.url}}</a>
+                </div>
+            </el-table-column>
+            <el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间">
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 云存储配置 -->
+        <config v-show="configVisible" ref="config"></config>
+        <!-- 弹窗, 上传文件 -->
+        <upload v-show="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
+    </div>
+</template>
+
+<script>
+export default {
+data() {
+return {
+// 表单数据模型
+dataForm: {},
+// 文件列表数据
+dataList: [],
+// 当前页码
+pageIndex: 1,
+// 每页显示数量
+pageSize: 10,
+// 总记录数
+totalCount: 0,
+// 表格加载状态
+dataListLoading: false,
+// 存储已选中项
+dataListSelections: [],
+// 云存储配置弹窗是否显示
+configVisible: false,
+// 上传文件弹窗是否显示
+uploadVisible: false
+}
+},
+components: {
+// 动态引入云存储配置组件
+Config: () => import('./oss-config'),
+// 动态引入文件上传组件
+OssUploader: () => import('./oss-uploader')
+},
+// 组件激活时加载数据列表
+activated() {
+this.getDataList();
+},
+methods: {
+// 获取数据列表
+getDataList() {
+this.dataListLoading = true;
+this.$http({
+url: this.$http.adornUrl('/sys/oss/list'),
+method: 'get',
+params: this.$http.adornParams({
+'page': this.pageIndex, // 当前页
+'limit': this.pageSize, // 每页条数
+'sidx': 'id', // 排序字段
+'order': 'desc' // 排序方式
+})
+}).then(({ data }) => {
+// 如果请求成功，设置dataList和totalCount
+if (data && data.code === 200) {
+this.dataList = data.page.list;
+this.totalCount = data.page.totalCount;
+} else {
+// 如果请求失败，清空列表
+this.dataList = [];
+this.totalCount = 0;
+}
+this.dataListLoading = false; // 隐藏加载状态
+});
+},
+// 改变每页显示的数量时触发
+sizeChangeHandle(val) {
+this.pageSize = val;
+this.pageIndex = 1; // 重置为第一页
+this.getDataList(); // 重新获取数据
+},
+// 改变当前页时触发
+currentChangeHandle(val) {
+this.pageIndex = val;
+this.getDataList(); // 重新获取数据
+},
+// 多选时，记录选中的项
+selectionChangeHandle(val) {
+this.dataListSelections = val;
+},
+}
+}
+</script>
diff --git a/src/views/modules/sys/config-add-or-update.vue b/src/views/modules/sys/config-add-or-update.vue
new file mode 100644
index 00000000..898bfb61
--- /dev/null
+++ b/src/views/modules/sys/config-add-or-update.vue
@@ -0,0 +1,117 @@
+<template>
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+<!-- 弹窗组件，显示标题是“新增”或“修改”取决于dataForm.id -->
+<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+<!-- 表单组件，绑定数据模型为dataForm，表单校验规则为dataRule，按回车键提交表单 -->
+
+<el-form-item label="参数名" prop="paramKey">
+<!-- 参数名输入框，验证参数名 -->
+<el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
+</el-form-item>
+
+<el-form-item label="参数值" prop="paramValue">
+<!-- 参数值输入框，验证参数值 -->
+<el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
+</el-form-item>
+
+<el-form-item label="备注" prop="remark">
+<!-- 备注输入框 -->
+<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+</el-form-item>
+
+</el-form>
+
+<span slot="footer" class="dialog-footer">
+<!-- 弹窗底部按钮 -->
+<el-button @click="visible = false">取消</el-button>
+<!-- 取消按钮，点击时关闭弹窗 -->
+<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+<!-- 确定按钮，点击时提交表单 -->
+</span>
+</el-dialog>
+
+</template>
+
+<script>
+export default {
+data() {
+return {
+visible: false, // 控制弹窗的显示与隐藏
+dataForm: {
+id: 0, // 数据表单的ID，新增时为0，修改时为已有的ID
+paramKey: '', // 参数名
+paramValue: '',// 参数值
+remark: '' // 备注
+},
+dataRule: {
+paramKey: [
+{ required: true, message: '参数名不能为空', trigger: 'blur' }
+],
+paramValue: [
+{ required: true, message: '参数值不能为空', trigger: 'blur' }
+]
+}
+}
+},
+methods: {
+// 初始化表单，设置ID并请求数据（如果是编辑状态）
+init(id) {
+this.dataForm.id = id || 0
+this.visible = true
+this.$nextTick(() => {
+this.$refs['dataForm'].resetFields() // 重置表单字段
+if (this.dataForm.id) {
+// 如果是编辑，发送请求获取已有数据
+this.$http({
+url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
+method: 'get',
+params: this.$http.adornParams()
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.dataForm.paramKey = data.config.paramKey
+this.dataForm.paramValue = data.config.paramValue
+this.dataForm.remark = data.config.remark
+}
+})
+}
+})
+},
+// 表单提交方法
+dataFormSubmit() {
+// 验证表单是否合法
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 请求提交数据
+this.$http({
+url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
+method: 'post',
+data: this.$http.adornData({
+'id': this.dataForm.id || undefined, // 如果是编辑，传ID；如果是新增，ID为空
+'paramKey': this.dataForm.paramKey,
+'paramValue': this.dataForm.paramValue,
+'remark': this.dataForm.remark
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 操作成功，显示成功消息并关闭弹窗
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => {
+this.visible = false
+this.$emit('refreshDataList') // 向父组件发送刷新数据的事件
+}
+})
+} else {
+// 显示错误消息
+this.$message.error(data.msg)
+}
+})
+}
+})
+}
+}
+}
+
+</script>
diff --git a/src/views/modules/sys/config.vue b/src/views/modules/sys/config.vue
new file mode 100644
index 00000000..b20162c1
--- /dev/null
+++ b/src/views/modules/sys/config.vue
@@ -0,0 +1,172 @@
+<template>
+    <div class="mod-config">
+<!-- 表单部分，包含参数名的查询框和操作按钮 -->
+<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+<!-- 表单项，使用 inline 布局，按回车触发查询 -->
+<el-form-item>
+<el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
+<!-- 输入框，绑定 model 为 dataForm.paramKey，允许清除内容 -->
+</el-form-item>
+<el-form-item>
+<!-- 查询按钮，点击时触发 getDataList 方法 -->
+<el-button @click="getDataList()">查询</el-button>
+<!-- 新增按钮，点击时触发 addOrUpdateHandle 方法 -->
+<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
+<!-- 批量删除按钮，点击时触发 deleteHandle 方法，只有当有选中的数据时可用 -->
+<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+</el-form-item>
+</el-form>
+
+<!-- 表格部分，用于显示数据列表 -->
+<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+<!-- 多选列 -->
+<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+
+<!-- ID列 -->
+<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
+
+<!-- 参数名列 -->
+<el-table-column prop="paramKey" header-align="center" align="center" label="参数名"></el-table-column>
+
+<!-- 参数值列 -->
+<el-table-column prop="paramValue" header-align="center" align="center" label="参数值"></el-table-column>
+
+<!-- 备注列 -->
+<el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
+
+<!-- 操作列，包含修改和删除按钮 -->
+<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+<template slot-scope="scope">
+<!-- 修改按钮，点击时触发 addOrUpdateHandle 方法，传入当前行的 id -->
+<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+<!-- 删除按钮，点击时触发 deleteHandle 方法，传入当前行的 id -->
+<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+</template>
+</el-table-column>
+</el-table>
+
+<!-- 分页组件 -->
+<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+</el-pagination>
+
+<!-- 弹窗组件，用于新增或修改数据 -->
+<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+</div>
+
+</template>
+
+<script>
+import AddOrUpdate from './config-add-or-update'
+
+export default {
+data() {
+return {
+// 表单数据
+dataForm: {
+paramKey: ''
+},
+// 数据列表
+dataList: [],
+// 当前页
+pageIndex: 1,
+// 每页显示条数
+pageSize: 10,
+// 总数据条数
+totalCount: 0,
+// 数据加载状态
+dataListLoading: false,
+// 表格选中的数据
+dataListSelections: [],
+// 新增/修改弹窗是否可见
+addOrUpdateVisible: false
+}
+},
+components: {
+AddOrUpdate
+},
+activated() {
+// 组件激活时，初始化数据列表
+this.getDataList()
+},
+methods: {
+// 获取数据列表
+getDataList() {
+this.dataListLoading = true
+this.$http({
+url: this.$http.adornUrl('/sys/config/list'),
+method: 'get',
+params: this.$http.adornParams({
+'page': this.pageIndex,
+'limit': this.pageSize,
+'paramKey': this.dataForm.paramKey
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.dataList = data.page.list
+this.totalCount = data.page.totalCount
+} else {
+this.dataList = []
+this.totalCount = 0
+}
+this.dataListLoading = false
+})
+},
+
+// 每页显示条数变化时的处理
+sizeChangeHandle(val) {
+this.pageSize = val
+this.pageIndex = 1
+this.getDataList()
+},
+
+// 当前页变化时的处理
+currentChangeHandle(val) {
+this.pageIndex = val
+this.getDataList()
+},
+
+// 表格选中项变化时的处理
+selectionChangeHandle(val) {
+this.dataListSelections = val
+},
+
+// 新增/修改处理
+addOrUpdateHandle(id) {
+this.addOrUpdateVisible = true
+this.$nextTick(() => {
+// 弹窗显示时，初始化新增/修改数据
+this.$refs.addOrUpdate.init(id)
+})
+},
+
+// 删除操作
+deleteHandle(id) {
+var ids = id ? [id] : this.dataListSelections.map(item => item.id)
+// 弹窗确认删除
+this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+confirmButtonText: '确定',
+cancelButtonText: '取消',
+type: 'warning'
+}).then(() => {
+this.$http({
+url: this.$http.adornUrl('/sys/config/delete'),
+method: 'post',
+data: this.$http.adornData(ids, false)
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => this.getDataList()
+})
+} else {
+this.$message.error(data.msg)
+}
+})
+}).catch(() => { })
+}
+}
+}
+
+</script>
diff --git a/src/views/modules/sys/log.vue b/src/views/modules/sys/log.vue
new file mode 100644
index 00000000..5223704c
--- /dev/null
+++ b/src/views/modules/sys/log.vue
@@ -0,0 +1,107 @@
+<template>
+    <div class="mod-log">
+<!-- 搜索表单部分 -->
+<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+<!-- 输入框，绑定到 dataForm.key，用于搜索用户操作或者用户名 -->
+<el-form-item>
+<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
+</el-form-item>
+<el-form-item>
+<!-- 查询按钮，点击时触发 getDataList 方法 -->
+<el-button @click="getDataList()">查询</el-button>
+</el-form-item>
+</el-form>
+
+<!-- 表格显示数据 -->
+<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
+<!-- 表格的列定义 -->
+<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
+<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
+<el-table-column prop="operation" header-align="center" align="center" label="用户操作"></el-table-column>
+<el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法"></el-table-column>
+<el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数"></el-table-column>
+<el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)"></el-table-column>
+<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
+<el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间"></el-table-column>
+</el-table>
+
+<!-- 分页组件 -->
+<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+</el-pagination>
+</div>
+
+</template>
+
+<script>
+export default {
+data() {
+return {
+// 表单数据，包含一个搜索条件 'key'
+dataForm: {
+key: ''
+},
+// 数据列表，存储表格数据
+dataList: [],
+// 当前页
+pageIndex: 1,
+// 每页显示的数据条数
+pageSize: 10,
+// 总数据条数
+totalCount: 0,
+// 数据加载状态
+dataListLoading: false,
+// 选中的数据（当前表格中未使用）
+selectionDataList: []
+}
+},
+created() {
+// 组件创建时，获取数据列表
+this.getDataList()
+},
+methods: {
+// 获取数据列表
+getDataList() {
+// 启动加载状态
+this.dataListLoading = true
+this.$http({
+url: this.$http.adornUrl('/sys/log/list'), // 请求日志列表接口
+method: 'get',
+params: this.$http.adornParams({
+// 请求参数，包含分页、搜索关键字、排序字段、排序方式等
+'page': this.pageIndex,
+'limit': this.pageSize,
+'key': this.dataForm.key, // 搜索条件
+'sidx': 'id', // 排序字段，按照 id 排序
+'order': 'desc' // 排序方式，降序
+})
+}).then(({ data }) => {
+// 处理返回的数据
+if (data && data.code === 200) {
+this.dataList = data.page.list // 数据列表
+this.totalCount = data.page.totalCount // 总条数
+} else {
+// 如果返回数据无效，清空数据和总数
+this.dataList = []
+this.totalCount = 0
+}
+// 完成加载
+this.dataListLoading = false
+})
+},
+
+// 每页显示条数变化时触发的函数
+sizeChangeHandle(val) {
+this.pageSize = val // 更新每页显示条数
+this.pageIndex = 1 // 重置为第一页
+this.getDataList() // 重新获取数据
+},
+
+// 当前页变化时触发的函数
+currentChangeHandle(val) {
+this.pageIndex = val // 更新当前页
+this.getDataList() // 重新获取数据
+}
+}
+}
+
+</script>
diff --git a/src/views/modules/sys/menu-add-or-update.vue b/src/views/modules/sys/menu-add-or-update.vue
new file mode 100644
index 00000000..ccee5e29
--- /dev/null
+++ b/src/views/modules/sys/menu-add-or-update.vue
@@ -0,0 +1,253 @@
+<template>
+    <!-- 弹窗组件，标题根据dataForm.id判断是新增还是修改 -->
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+    <!-- 表单组件，绑定数据模型和验证规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    
+    <!-- 菜单类型选择 -->
+    <el-form-item label="类型" prop="type">
+    <el-radio-group v-model="dataForm.type">
+    <!-- 循环渲染可选择的菜单类型 -->
+    <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 菜单名称输入框 -->
+    <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
+    <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+    </el-form-item>
+    
+    <!-- 上级菜单选择 -->
+    <el-form-item label="上级菜单" prop="parentName">
+    <!-- 弹出菜单树选择 -->
+    <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
+    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" 
+    @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true" 
+    :highlight-current="true" :expand-on-click-node="false">
+    </el-tree>
+    </el-popover>
+    <!-- 显示上级菜单选择 -->
+    <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" 
+    placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
+    </el-form-item>
+    
+    <!-- 菜单路由（仅在选择菜单类型时显示） -->
+    <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
+    <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+    </el-form-item>
+    
+    <!-- 授权标识（仅在类型不为目录时显示） -->
+    <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
+    <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+    </el-form-item>
+    
+    <!-- 菜单图标（仅在类型不为按钮时显示） -->
+    <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
+    <el-row>
+    <el-col :span="12">
+    <el-input v-model="dataForm.icon" placeholder="菜单图标名称" class="icon-list__input"></el-input>
+    </el-col>
+    <el-col :span="12" class="icon-list__tips">
+    <!-- 排序号输入框（仅在类型不为按钮时显示） -->
+    <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
+    <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
+    </el-form-item>
+    </el-col>
+    </el-row>
+    </el-form-item>
+    
+    <!-- 提示用户参考图标库 -->
+    <div>参考ElementUI图标库, 找图标</div>
+    </el-form>
+    
+    <!-- 弹窗底部按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+    </template>
+    
+    <script>
+    // 引入工具函数，用于处理树形数据
+    import { treeDataTranslate } from '@/utils'
+    export default {
+    data() {
+    // 验证URL的函数
+    var validateUrl = (rule, value, callback) => {
+    // 如果类型是菜单且URL为空，返回错误
+    if (this.dataForm.type === 1 && !/\S/.test(value)) {
+    callback(new Error('菜单URL不能为空'))
+    } else {
+    callback() // 验证通过
+    }
+    }
+    return {
+    visible: false, // 控制弹窗的显示与隐藏
+    dataForm: {
+    id: 0, // 菜单ID，新增时为0
+    type: 1, // 菜单类型（0-目录，1-菜单，2-按钮）
+    typeList: ['目录', '菜单', '按钮'], // 菜单类型列表
+    name: '', // 菜单名称
+    parentId: 0, // 上级菜单ID
+    parentName: '', // 上级菜单名称
+    url: '', // 菜单路由
+    perms: '', // 授权标识
+    orderNum: 0, // 排序号
+    icon: '', // 菜单图标
+    },
+    // 表单验证规则
+    dataRule: {
+    name: [
+    { required: true, message: '菜单名称不能为空', trigger: 'blur' } // 菜单名称必填
+    ],
+    parentName: [
+    { required: true, message: '上级菜单不能为空', trigger: 'change' } // 上级菜单必填
+    ],
+    url: [
+    { validator: validateUrl, trigger: 'blur' } // URL验证
+    ]
+    },
+    menuList: [], // 菜单列表，供菜单树使用
+    menuListTreeProps: {
+    label: 'name', // 树节点显示的字段名称
+    children: 'children' // 树节点的子节点字段
+    }
+    }
+    },
+    methods: {
+    // 初始化方法，用于新增或修改菜单
+    init(id) {
+    this.dataForm.id = id || 0 // 设置菜单ID
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/select'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 获取菜单列表并转换为树形结构
+    this.menuList = treeDataTranslate(data.menuList, 'menuId')
+    }).then(() => {
+    this.visible = true // 显示弹窗
+    this.$nextTick(() => {
+    this.$refs['dataForm'].resetFields() // 重置表单字段
+    })
+    }).then(() => {
+    if (!this.dataForm.id) {
+    // 新增时，设置当前选中的上级菜单
+    this.menuListTreeSetCurrentNode()
+    } else {
+    // 修改时，获取原数据
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 设置表单字段为获取到的原数据
+    this.dataForm.id = data.menu.menuId
+    this.dataForm.type = data.menu.type
+    this.dataForm.name = data.menu.name
+    this.dataForm.parentId = data.menu.parentId
+    this.dataForm.url = data.menu.url
+    this.dataForm.perms = data.menu.perms
+    this.dataForm.orderNum = data.menu.orderNum
+    this.dataForm.icon = data.menu.icon
+    this.menuListTreeSetCurrentNode() // 设置当前选中的菜单树节点
+    })
+    }
+    })
+    },
+    // 处理菜单树节点选择事件
+    menuListTreeCurrentChangeHandle(data, node) {
+    this.dataForm.parentId = data.menuId // 更新上级菜单ID
+    this.dataForm.parentName = data.name // 更新上级菜单名称
+    },
+    // 设置菜单树当前选中节点
+    menuListTreeSetCurrentNode() {
+    this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId) // 设置当前选中的树节点
+    this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 更新上级菜单名称
+    },
+    // 表单提交方法
+    dataFormSubmit() {
+    this.$refs['dataForm'].validate((valid) => {
+    if (valid) {
+    // 提交表单数据到后台
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
+    method: 'post',
+    data: this.$http.adornData({
+    'menuId': this.dataForm.id || undefined,
+    'type': this.dataForm.type,
+    'name': this.dataForm.name,
+    'parentId': this.dataForm.parentId,
+    'url': this.dataForm.url,
+    'perms': this.dataForm.perms,
+    'orderNum': this.dataForm.orderNum,
+    'icon': this.dataForm.icon
+    })
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 操作成功提示
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => {
+    this.visible = false // 关闭弹窗
+    this.$emit('refreshDataList') // 触发数据列表刷新事件
+    }
+    })
+    } else {
+    // 提示错误信息
+    this.$message.error(data.msg)
+    }
+    })
+    }
+    })
+    }
+    }
+    }
+    </script>
+    
+    <style lang="scss">
+    .mod-menu {
+    .menu-list__input,
+    .icon-list__input {
+    > .el-input__inner {
+    cursor: pointer; // 鼠标悬停时显示为手型
+    }
+    }
+    &__icon-popover {
+    width: 458px; // 图标选择器的宽度
+    overflow: hidden; // 超出部分隐藏
+    }
+    &__icon-inner {
+    width: 478px; // 内部图标容器的宽度
+    max-height: 258px; // 最大高度
+    overflow-x: hidden; // 水平溢出隐藏
+    overflow-y: auto; // 垂直溢出滚动
+    }
+    &__icon-list {
+    width: 458px; // 图标列表宽度
+    padding: 0; // 内边距
+    margin: -8px 0 0 -8px; // 外边距调整
+    > .el-button {
+    padding: 8px; // 按钮内边距
+    margin: 8px 0 0 8px; // 按钮外边距
+    > span {
+    display: inline-block; // 使图标显示为行内块元素
+    vertical-align: middle; // 垂直居中对齐
+    width: 18px; // 图标宽度
+    height: 18px; // 图标高度
+    font-size: 18px; // 图标字体大小
+    }
+    }
+    }
+    .icon-list__tips {
+    font-size: 18px; // 提示字体大小
+    text-align: center; // 内容置中
+    color: #e6a23c; // 提示字体颜色
+    cursor: pointer; // 鼠标悬停时显示为手型
+    }
+    }
+    </style>
+    
\ No newline at end of file
diff --git a/src/views/modules/sys/menu.vue b/src/views/modules/sys/menu.vue
new file mode 100644
index 00000000..bcdbd004
--- /dev/null
+++ b/src/views/modules/sys/menu.vue
@@ -0,0 +1,148 @@
+<template>
+    <!-- 菜单管理模块 -->
+    <div class="mod-menu">
+    <!-- 表单组件，内联布局 -->
+    <el-form :inline="true" :model="dataForm">
+    <el-form-item>
+    <!-- 如果有新增权限，显示新增按钮 -->
+    <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+    </el-form-item>
+    </el-form>
+    
+    <!-- 菜单数据表格 -->
+    <el-table :data="dataList" row-key="menuId" border style="width: 100%;">
+    <!-- 菜单名称列 -->
+    <el-table-column prop="name" header-align="center" min-width="150" label="名称">
+    </el-table-column>
+    
+    <!-- 上级菜单列 -->
+    <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
+    </el-table-column>
+    
+    <!-- 菜单图标列 -->
+    <el-table-column header-align="center" align="center" label="图标">
+    <template slot-scope="scope">
+    <!-- 根据图标类渲染图标 -->
+    <i :class="scope.row.icon"></i>
+    </template>
+    </el-table-column>
+    
+    <!-- 菜单类型列 -->
+    <el-table-column prop="type" header-align="center" align="center" label="类型">
+    <template slot-scope="scope">
+    <!-- 根据菜单类型渲染不同的标签 -->
+    <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
+    <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
+    <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
+    </template>
+    </el-table-column>
+    
+    <!-- 排序号列 -->
+    <el-table-column prop="orderNum" header-align="center" align="center" label="排序号">
+    </el-table-column>
+    
+    <!-- 菜单URL列，支持溢出提示 -->
+    <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
+    </el-table-column>
+    
+    <!-- 授权标识列，支持溢出提示 -->
+    <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识">
+    </el-table-column>
+    
+    <!-- 操作列，显示修改和删除按钮 -->
+    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+    <template slot-scope="scope">
+    <!-- 如果有修改权限，显示修改按钮 -->
+    <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
+    <!-- 如果有删除权限，显示删除按钮 -->
+    <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
+    </template>
+    </el-table-column>
+    </el-table>
+    
+    <!-- 弹窗组件，用于新增或修改菜单 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+    </template>
+    
+    <script>
+    // 导入新增/修改组件和工具函数
+    import AddOrUpdate from './menu-add-or-update'
+    import { treeDataTranslate } from '@/utils'
+    
+    export default {
+    data() {
+    return {
+    dataForm: {}, // 表单数据
+    dataList: [], // 菜单数据列表
+    dataListLoading: false, // 数据加载状态
+    addOrUpdateVisible: false // 弹窗显示控制
+    }
+    },
+    components: {
+    AddOrUpdate // 引入新增/修改组件
+    },
+    activated() {
+    // 页面激活时获取菜单数据列表
+    this.getDataList()
+    },
+    methods: {
+    // 获取菜单数据列表
+    getDataList() {
+    this.dataListLoading = true // 开始加载数据
+    // 发起HTTP请求获取菜单列表数据
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/list'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 使用工具函数将数据转换为树形结构
+    this.dataList = treeDataTranslate(data, 'menuId')
+    this.dataListLoading = false // 数据加载完成
+    })
+    },
+    
+    // 新增或修改菜单
+    addOrUpdateHandle(id) {
+    this.addOrUpdateVisible = true // 显示新增/修改弹窗
+    this.$nextTick(() => {
+    // 弹窗渲染完成后，初始化数据
+    this.$refs.addOrUpdate.init(id)
+    })
+    },
+    
+    // 删除菜单
+    deleteHandle(id) {
+    // 显示确认弹窗，提示用户是否确认删除操作
+    this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning' // 警告类型的弹窗
+    }).then(() => {
+    // 发起删除请求
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
+    method: 'post',
+    data: this.$http.adornData()
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 删除成功，显示成功提示并刷新菜单列表
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => this.getDataList() // 删除后刷新数据列表
+    })
+    } else {
+    // 删除失败，显示错误提示
+    this.$message.error(data.msg)
+    }
+    })
+    }).catch(() => {
+    // 如果用户取消删除，什么也不做
+    })
+    }
+    }
+    }
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/modules/sys/role-add-or-update.vue b/src/views/modules/sys/role-add-or-update.vue
new file mode 100644
index 00000000..c02f64e5
--- /dev/null
+++ b/src/views/modules/sys/role-add-or-update.vue
@@ -0,0 +1,148 @@
+<template>
+    <!-- 弹窗组件，显示角色的新增或修改表单 -->
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+    <!-- 表单组件，绑定数据和验证规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    
+    <!-- 角色名称输入框 -->
+    <el-form-item label="角色名称" prop="roleName">
+    <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+    </el-form-item>
+    
+    <!-- 备注输入框 -->
+    <el-form-item label="备注" prop="remark">
+    <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+    </el-form-item>
+    
+    <!-- 授权菜单树 -->
+    <el-form-item size="mini" label="授权">
+    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
+    </el-tree>
+    </el-form-item>
+    
+    </el-form>
+    
+    <!-- 弹窗底部按钮，取消和确认按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+    </template>
+    
+    <script>
+    // 导入工具函数，用于将树形数据转换
+    import { treeDataTranslate } from '@/utils'
+    
+    export default {
+    data() {
+    return {
+    // 弹窗显示状态
+    visible: false,
+    // 菜单列表，用于树形展示
+    menuList: [],
+    // 用于el-tree组件的树形数据配置
+    menuListTreeProps: {
+    label: 'name', // 显示名称字段
+    children: 'children' // 子节点字段
+    },
+    // 表单数据
+    dataForm: {
+    id: 0, // 角色ID，新增时为0
+    roleName: '', // 角色名称
+    remark: '' // 备注
+    },
+    // 表单验证规则
+    dataRule: {
+    roleName: [
+    { required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
+    ]
+    }
+    }
+    },
+    methods: {
+    // 初始化方法，传入角色ID来初始化表单
+    init(id) {
+    this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
+    
+    // 获取菜单列表并转换为树形结构
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/list'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
+    }).then(() => {
+    // 显示弹窗
+    this.visible = true
+    
+    // 在下一次DOM更新后执行
+    this.$nextTick(() => {
+    // 重置表单字段
+    this.$refs['dataForm'].resetFields()
+    // 清除选中的菜单
+    this.$refs.menuListTree.setCheckedKeys([])
+    })
+    }).then(() => {
+    // 如果是修改操作（有ID），获取角色详细信息
+    if (this.dataForm.id) {
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 填充表单数据
+    this.dataForm.roleName = data.role.roleName
+    this.dataForm.remark = data.role.remark
+    // 设置菜单树选中的节点
+    data.role.menuIdList.forEach(item => {
+    this.$refs.menuListTree.setChecked(item, true)
+    })
+    }
+    })
+    }
+    })
+    },
+    
+    // 表单提交方法
+    dataFormSubmit() {
+    // 校验表单数据
+    this.$refs['dataForm'].validate((valid) => {
+    if (valid) {
+    // 提交数据
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
+    method: 'post',
+    data: this.$http.adornData({
+    'roleId': this.dataForm.id || undefined, // 角色ID
+    'roleName': this.dataForm.roleName, // 角色名称
+    'remark': this.dataForm.remark, // 备注
+    // 获取已选中的菜单ID列表
+    'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
+    })
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 操作成功，显示提示消息
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => {
+    // 关闭弹窗并触发刷新列表事件
+    this.visible = false
+    this.$emit('refreshDataList')
+    }
+    })
+    } else {
+    // 显示错误提示
+    this.$message.error(data.msg)
+    }
+    })
+    }
+    })
+    }
+    }
+    }
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/modules/sys/role.vue b/src/views/modules/sys/role.vue
new file mode 100644
index 00000000..c02f64e5
--- /dev/null
+++ b/src/views/modules/sys/role.vue
@@ -0,0 +1,148 @@
+<template>
+    <!-- 弹窗组件，显示角色的新增或修改表单 -->
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+    <!-- 表单组件，绑定数据和验证规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    
+    <!-- 角色名称输入框 -->
+    <el-form-item label="角色名称" prop="roleName">
+    <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+    </el-form-item>
+    
+    <!-- 备注输入框 -->
+    <el-form-item label="备注" prop="remark">
+    <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+    </el-form-item>
+    
+    <!-- 授权菜单树 -->
+    <el-form-item size="mini" label="授权">
+    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
+    </el-tree>
+    </el-form-item>
+    
+    </el-form>
+    
+    <!-- 弹窗底部按钮，取消和确认按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+    </template>
+    
+    <script>
+    // 导入工具函数，用于将树形数据转换
+    import { treeDataTranslate } from '@/utils'
+    
+    export default {
+    data() {
+    return {
+    // 弹窗显示状态
+    visible: false,
+    // 菜单列表，用于树形展示
+    menuList: [],
+    // 用于el-tree组件的树形数据配置
+    menuListTreeProps: {
+    label: 'name', // 显示名称字段
+    children: 'children' // 子节点字段
+    },
+    // 表单数据
+    dataForm: {
+    id: 0, // 角色ID，新增时为0
+    roleName: '', // 角色名称
+    remark: '' // 备注
+    },
+    // 表单验证规则
+    dataRule: {
+    roleName: [
+    { required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
+    ]
+    }
+    }
+    },
+    methods: {
+    // 初始化方法，传入角色ID来初始化表单
+    init(id) {
+    this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
+    
+    // 获取菜单列表并转换为树形结构
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/list'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
+    }).then(() => {
+    // 显示弹窗
+    this.visible = true
+    
+    // 在下一次DOM更新后执行
+    this.$nextTick(() => {
+    // 重置表单字段
+    this.$refs['dataForm'].resetFields()
+    // 清除选中的菜单
+    this.$refs.menuListTree.setCheckedKeys([])
+    })
+    }).then(() => {
+    // 如果是修改操作（有ID），获取角色详细信息
+    if (this.dataForm.id) {
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 填充表单数据
+    this.dataForm.roleName = data.role.roleName
+    this.dataForm.remark = data.role.remark
+    // 设置菜单树选中的节点
+    data.role.menuIdList.forEach(item => {
+    this.$refs.menuListTree.setChecked(item, true)
+    })
+    }
+    })
+    }
+    })
+    },
+    
+    // 表单提交方法
+    dataFormSubmit() {
+    // 校验表单数据
+    this.$refs['dataForm'].validate((valid) => {
+    if (valid) {
+    // 提交数据
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
+    method: 'post',
+    data: this.$http.adornData({
+    'roleId': this.dataForm.id || undefined, // 角色ID
+    'roleName': this.dataForm.roleName, // 角色名称
+    'remark': this.dataForm.remark, // 备注
+    // 获取已选中的菜单ID列表
+    'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
+    })
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 操作成功，显示提示消息
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => {
+    // 关闭弹窗并触发刷新列表事件
+    this.visible = false
+    this.$emit('refreshDataList')
+    }
+    })
+    } else {
+    // 显示错误提示
+    this.$message.error(data.msg)
+    }
+    })
+    }
+    })
+    }
+    }
+    }
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/modules/sys/user-add-or-update.vue b/src/views/modules/sys/user-add-or-update.vue
new file mode 100644
index 00000000..7db0c06e
--- /dev/null
+++ b/src/views/modules/sys/user-add-or-update.vue
@@ -0,0 +1,177 @@
+<template>
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+            <el-form-item label="用户名" prop="userName">
+                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
+                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
+                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="mobile">
+                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+            </el-form-item>
+            <el-form-item label="角色" size="mini" prop="roleIdList">
+                <el-checkbox-group v-model="dataForm.roleIdList">
+                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="状态" size="mini" prop="status">
+                <el-radio-group v-model="dataForm.status">
+                    <el-radio :label="0">禁用</el-radio>
+                    <el-radio :label="1">正常</el-radio>
+                </el-radio-group>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { isEmail, isMobile } from '@/utils/validate'
+export default {
+    data() {
+        var validatePassword = (rule, value, callback) => {
+            if (!this.dataForm.id && !/\S/.test(value)) {
+                callback(new Error('密码不能为空'))
+            } else {
+                callback()
+            }
+        }
+        var validateComfirmPassword = (rule, value, callback) => {
+            if (!this.dataForm.id && !/\S/.test(value)) {
+                callback(new Error('确认密码不能为空'))
+            } else if (this.dataForm.password !== value) {
+                callback(new Error('确认密码与密码输入不一致'))
+            } else {
+                callback()
+            }
+        }
+        var validateEmail = (rule, value, callback) => {
+            if (!isEmail(value)) {
+                callback(new Error('邮箱格式错误'))
+            } else {
+                callback()
+            }
+        }
+        var validateMobile = (rule, value, callback) => {
+            if (!isMobile(value)) {
+                callback(new Error('手机号格式错误'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            visible: false,
+            roleList: [],
+            dataForm: {
+                id: 0,
+                userName: '',
+                password: '',
+                comfirmPassword: '',
+                salt: '',
+                email: '',
+                mobile: '',
+                roleIdList: [],
+                status: 1
+            },
+            dataRule: {
+                userName: [
+                    { required: true, message: '用户名不能为空', trigger: 'blur' }
+                ],
+                password: [
+                    { validator: validatePassword, trigger: 'blur' }
+                ],
+                comfirmPassword: [
+                    { validator: validateComfirmPassword, trigger: 'blur' }
+                ],
+                email: [
+                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
+                    { validator: validateEmail, trigger: 'blur' }
+                ],
+                mobile: [
+                    { required: true, message: '手机号不能为空', trigger: 'blur' },
+                    { validator: validateMobile, trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        init(id) {
+            this.dataForm.id = id || 0
+            this.$http({
+                url: this.$http.adornUrl('/sys/role/select'),
+                method: 'get',
+                params: this.$http.adornParams()
+            }).then(({ data }) => {
+                this.roleList = data && data.code === 200 ? data.list : []
+            }).then(() => {
+                this.visible = true
+                this.$nextTick(() => {
+                    this.$refs['dataForm'].resetFields()
+                })
+            }).then(() => {
+                if (this.dataForm.id) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
+                        method: 'get',
+                        params: this.$http.adornParams()
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.dataForm.userName = data.user.username
+                            this.dataForm.salt = data.user.salt
+                            this.dataForm.email = data.user.email
+                            this.dataForm.mobile = data.user.mobile
+                            this.dataForm.roleIdList = data.user.roleIdList
+                            this.dataForm.status = data.user.status
+                        }
+                    })
+                }
+            })
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
+                        method: 'post',
+                        data: this.$http.adornData({
+                            'userId': this.dataForm.id || undefined,
+                            'username': this.dataForm.userName,
+                            'password': this.dataForm.password,
+                            'salt': this.dataForm.salt,
+                            'email': this.dataForm.email,
+                            'mobile': this.dataForm.mobile,
+                            'status': this.dataForm.status,
+                            'roleIdList': this.dataForm.roleIdList
+                        })
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    this.$emit('refreshDataList')
+                                }
+                            })
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/sys/user.vue b/src/views/modules/sys/user.vue
new file mode 100644
index 00000000..6454a769
--- /dev/null
+++ b/src/views/modules/sys/user.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="mod-user">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
+            </el-table-column>
+            <el-table-column prop="username" header-align="center" align="center" label="用户名">
+            </el-table-column>
+            <el-table-column prop="email" header-align="center" align="center" label="邮箱">
+            </el-table-column>
+            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">
+            </el-table-column>
+            <el-table-column prop="status" header-align="center" align="center" label="状态">
+                <template slot-scope="scope">
+                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
+                    <el-tag v-else size="small">正常</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
+                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './user-add-or-update'
+export default {
+    data() {
+        return {
+            dataForm: {
+                userName: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false
+        }
+    },
+    components: {
+        AddOrUpdate
+    },
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/sys/user/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'username': this.dataForm.userName
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id)
+            })
+        },
+        // 删除
+        deleteHandle(id) {
+            var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)
+            this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/sys/user/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(userIds, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.getDataList()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            }).catch(() => { })
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/account/wx-account-access-info.vue b/src/views/modules/wx/account/wx-account-access-info.vue
new file mode 100644
index 00000000..fb1f853e
--- /dev/null
+++ b/src/views/modules/wx/account/wx-account-access-info.vue
@@ -0,0 +1,54 @@
+<template>
+    <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">
+        <div>
+            <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>
+            <div class="list-item"><span class="label">token:</span>{{account.token}}</div>
+            <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>
+            <div class="list-item">
+                <span class="label">接入链接:</span>
+                <span v-html="accessUrl"></span>
+            </div>
+            
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            account: {},
+        }
+    },
+    computed: {
+        accessUrl() {
+            let host = location.host;
+            if(/^(\d(.\d){3})|localhost/.test(host)){
+                host='<span class="text-red">正式域名</span>'
+            }
+            return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid
+        }
+    },
+    methods: {
+        init(item) {
+            this.visible = true
+            if (item && item.appid) {
+                this.account = item
+            }
+        },
+    }
+}
+</script>
+<style scoped>
+.list-item{
+    line-height: 30px;
+}
+.label{
+    width: 100px;
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: bold;
+    text-align: right;
+}
+</style>
diff --git a/src/views/modules/wx/account/wx-account-add-or-update.vue b/src/views/modules/wx/account/wx-account-add-or-update.vue
new file mode 100644
index 00000000..27090997
--- /dev/null
+++ b/src/views/modules/wx/account/wx-account-add-or-update.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    title="新增/修改"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
+    <el-form-item label="公众号名称" prop="name">
+      <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>
+    </el-form-item>
+    <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>
+    <el-row>
+        <el-col :span="12">
+            <el-form-item label="公众号类型" prop="type">
+                <el-select v-model="dataForm.type" placeholder="公众号类型">
+                    <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-col>
+        <el-col :span="12">
+            <el-form-item label="是否认证" prop="verified">
+                <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>
+            </el-form-item>
+        </el-col>
+    </el-row>
+    
+    <el-form-item label="appid" prop="appid">
+      <el-input v-model="dataForm.appid" placeholder="appid"></el-input>
+    </el-form-item>
+    <el-form-item label="appsecret" prop="secret">
+      <el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>
+    </el-form-item>
+    <el-form-item label="token" prop="token">
+      <el-input v-model="dataForm.token" placeholder="token"></el-input>
+    </el-form-item>
+    <el-form-item label="aesKey" prop="aesKey">
+      <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>
+    </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+  export default {
+    data () {
+      return {
+        visible: false,
+        dataForm: {  
+          appid: '',
+          name: '',
+          type:'2',
+          verified:true,
+          secret: '',
+          token: 'my_weixin_token_',
+          aesKey: ''
+        },
+        dataRule: {
+          name: [
+            { required: true, message: '公众号名称不能为空', trigger: 'blur' }
+          ],
+          appid: [
+            { required: true, message: 'appid不能为空', trigger: 'blur' }
+          ],
+          secret: [
+            { required: true, message: 'appsecret不能为空', trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    computed: mapState({
+        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
+    }),
+    methods: {
+      init (item) {
+        this.visible = true
+        if(item && item.appid){
+            this.dataForm = item
+            this.dataForm.type = item.type+''
+        }else{
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+            })
+        }
+        
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`/manage/wxAccount/save`),
+              method: 'post',
+           data: this.$http.adornData(this.dataForm)
+            }).then(({data}) => {
+              if (data && data.code === 200) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
diff --git a/src/views/modules/wx/article-add-or-update.vue b/src/views/modules/wx/article-add-or-update.vue
new file mode 100644
index 00000000..f400a3a8
--- /dev/null
+++ b/src/views/modules/wx/article-add-or-update.vue
@@ -0,0 +1,155 @@
+<template>
+    <div v-show="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px">
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="文章标题" prop="title" required>
+                        <el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="文章类型" prop="type" required>
+                        <el-select v-model="dataForm.type" placeholder="选择文章类型">
+                            <el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key" allow-create></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="一级目录" prop="category">
+                        <el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="二级分类" prop="subCategory">
+                        <el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item label="指向外链" prop="targetLink">
+                <el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input>
+            </el-form-item>
+            <el-form-item label="摘要" prop="summary">
+                <el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="标签" prop="tags">
+                <tags-editor v-model="dataForm.tags"></tags-editor>
+            </el-form-item>
+            <el-form-item label="封面图" prop="image">
+                <el-input v-model="dataForm.image" placeholder="图片链接">
+                    <OssUploader slot="append" @uploaded="dataForm.image=$event"></OssUploader>
+                </el-input>
+            </el-form-item>
+            <tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor>
+        </el-form>
+        <div class="margin-top text-right">
+            <el-button @click="$emit('hide')">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    name:'article-add-or-update',
+    components: {
+        TinymceEditor: () => import("@/components/tinymce-editor"),
+        tagsEditor: () => import("@/components/tags-editor"),
+        OssUploader: () => import('../oss/oss-uploader')
+    },
+    props:{
+        visible:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            dataForm: {
+                id: "",
+                type: '1',
+                title: "",
+                content: "",
+                category: "",
+                subCategory: "",
+                summary: "",
+                tags: "",
+                openCount: 0,
+                targetLink: location.origin + "/client/#/article/${articleId}",
+                image: ""
+            },
+            dataRule: {
+                type: [
+                    { required: true, message: "文章类型不能为空", trigger: "blur" }
+                ],
+                title: [
+                    { required: true, message: "标题不能为空", trigger: "blur" }
+                ],
+                category: [
+                    { required: true, message: "分类不能为空", trigger: "blur" }
+                ]
+            }
+        };
+    },
+    computed: mapState({
+        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+    }),
+    methods: {
+        init(id) {
+            this.dataForm.id = id || "";
+            this.$nextTick(() => {
+                this.$refs["dataForm"].resetFields();
+                if (id > 0) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/article/info/${this.dataForm.id}`),
+                        method: "get",
+                        params: this.$http.adornParams()
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.dataForm=data.article;
+                            this.dataForm.type = data.article.type + "";
+                        }
+                    });
+                }
+            });
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs["dataForm"].validate(valid => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/article/save`),
+                        method: "post",
+                        data: this.$http.adornData(this.dataForm)
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: "操作成功",
+                                type: "success",
+                                duration: 1500,
+                                onClose: () => {
+                                    this.$emit("refreshDataList");
+                                    this.$emit('hide')
+                                }
+                            });
+                        } else {
+                            this.$message.error(data.msg);
+                        }
+                    });
+                }
+            });
+        },
+        imgUploadSuccess(response, file, fileList) {
+            console.log(response);
+            if (response.code == 200) {
+                this.dataForm.image = response.data;
+                console.log("this.article", this.article);
+            } else {
+                this.$message.warning(response.msg);
+            }
+        }
+    }
+};
+</script>
diff --git a/src/views/modules/wx/article.vue b/src/views/modules/wx/article.vue
new file mode 100644
index 00000000..076d1606
--- /dev/null
+++ b/src/views/modules/wx/article.vue
@@ -0,0 +1,157 @@
+<template>
+    <div>
+        <div v-show="!addOrUpdateVisible">
+            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+                <el-form-item>
+                    <el-select v-model="dataForm.type" placeholder="选择文章类型">
+                        <el-option v-for="(name,key) in ARTICLE_TYPES" :key="key" :label="name" :value="key" allow-create></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="pageIndex=1;getDataList()">查询</el-button>
+                    <el-button v-if="isAuth('wx:article:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                    <el-button v-if="isAuth('wx:article:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+                <el-table-column type="selection" header-align="center" align="center" width="50">
+                </el-table-column>
+                <el-table-column prop="id" header-align="center" align="center" label="ID">
+                </el-table-column>
+                <el-table-column prop="type" header-align="center" align="center" :formatter="articleTypeFormat" label="文章类型">
+                </el-table-column>
+                <el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="标题">
+                    <a :href="scope.row.targetLink" slot-scope="scope">{{scope.row.title}}</a>
+                </el-table-column>
+                <el-table-column prop="category" header-align="center" align="center" label="一级分类">
+                </el-table-column>
+                <el-table-column prop="subCategory" header-align="center" align="center" label="二级分类">
+                </el-table-column>
+                <el-table-column prop="openCount" header-align="center" align="center" label="打开次数">
+                </el-table-column>
+                <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                    <template slot-scope="scope">
+                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+                        <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </div>
+         <!-- 新增 / 修改  -->
+        <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './article-add-or-update'
+import { mapState } from 'vuex'
+export default {
+    components: {
+        AddOrUpdate
+    },
+    data() {
+        return {
+            dataForm: {
+                title: '',
+                type: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false
+        }
+    },
+    computed: mapState({
+        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+    }),
+    mounted() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/article/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'title': this.dataForm.title,
+                    'type': this.dataForm.type,
+                    'sidx': 'id',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id)
+            })
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/article/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.getDataList()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        articleTypeFormat(row, column, cellValue) {
+            return this.ARTICLE_TYPES[cellValue];
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/assets/assets-selector.vue b/src/views/modules/wx/assets/assets-selector.vue
new file mode 100644
index 00000000..1123ea88
--- /dev/null
+++ b/src/views/modules/wx/assets/assets-selector.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-dialog title="选择素材"  :visible.sync="dataVisible" :modal="true" append-to-body  @close="onClose">
+        <material-news v-if="selectType=='news'" @selected="onSelect" selectMode></material-news>
+        <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>
+    </el-dialog>
+</template>
+<script>
+export default {
+    name:"assets-selector",
+    data:function (){
+        return {
+            dataVisible : this.visible
+        }
+    },
+    components:{
+        MaterialFile:()=>import('./material-file'),
+        MaterialNews:()=>import('./material-news')
+    },
+    props:{
+        selectType:{// image、voice、video、news
+            type:String,
+            default:'image'
+        },
+        visible:{
+            type:Boolean,
+            default:false
+        }
+    },
+    methods:{
+        onSelect(itemInfo){
+            this.$emit('selected', itemInfo)
+        },
+        onClose(){
+            this.$emit('onClose')
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-file-add-or-update.vue b/src/views/modules/wx/assets/material-file-add-or-update.vue
new file mode 100644
index 00000000..5f7c8d02
--- /dev/null
+++ b/src/views/modules/wx/assets/material-file-add-or-update.vue
@@ -0,0 +1,103 @@
+<template>
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+            <el-form-item label="媒体文件">
+                <el-button type="primary">
+                    选择文件
+                    <input type="file" style="opacity: 0;height: 100%;position: absolute;left: 0;top: 0;" @change="onFileChange" />
+                </el-button>
+                <div>{{dataForm.file.name}}</div>
+            </el-form-item>
+            <el-form-item label="媒体类型" prop="mediaType">
+                <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">
+                    <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>
+                    <el-option label="视频（10M以内，只支持MP4）" value="video"></el-option>
+                    <el-option label="语音（2M、60s以内，支持AMR\MP3）" value="voice"></el-option>
+                    <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="素材名称" prop="fileName">
+                <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'提交中...':'提交'}}</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            uploading:false,
+            dataForm: {
+                mediaId: '',
+                file: '',
+                fileName: '',
+                mediaType: 'image'
+            },
+            dataRule: {
+                fileName: [
+                    { required: true, message: '素材名称不能为空', trigger: 'blur' }
+                ],
+                mediaType: [
+                    { required: true, message: '素材类型不能为空', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        init(fileType) {
+            if(fileType)this.dataForm.mediaType=fileType
+            this.visible = true
+        },
+        // 表单提交
+        dataFormSubmit() {
+            if(this.uploading)return
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.uploading=true
+                    console.log(this.dataForm)
+                    let form = new FormData();
+                    form.append('mediaId', this.dataForm.mediaId || '')
+                    form.append('file', this.dataForm.file)
+                    form.append('fileName', this.dataForm.fileName)
+                    form.append('mediaType', this.dataForm.mediaType)
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`),
+                        method: 'post',
+                        data: form,
+                        headers: { 'Content-Type': 'multipart/form-data' }
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    this.$emit('refreshDataList')
+                                }
+                            })
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                        this.uploading=false
+                    })
+                }
+            })
+        },
+        onFileChange(e) {
+            let file = event.currentTarget.files[0]
+            this.dataForm.file = file;
+            this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.'))
+            let mediaType = file.type.substring(0, file.type.lastIndexOf('/'))
+            if (mediaType == 'audio') mediaType = 'voice'
+            this.dataForm.mediaType = mediaType
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/assets/material-file.vue b/src/views/modules/wx/assets/material-file.vue
new file mode 100644
index 00000000..cc0b0180
--- /dev/null
+++ b/src/views/modules/wx/assets/material-file.vue
@@ -0,0 +1,185 @@
+<template>
+    <div class="mod-menu">
+        <el-form :inline="true" :model="dataForm">
+            <el-form-item v-show="!selectMode">
+                <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+            </el-form-item>
+        </el-form>
+        <div v-loading="dataListLoading">
+            <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">
+                <el-image v-if="fileType=='image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>
+                <div v-else class="card-preview">
+                    <div v-if="fileType=='voice'" class="card-preview-icon el-icon-microphone"></div>
+                    <div v-if="fileType=='video'" class="card-preview-icon el-icon-video-camera-solid"></div>
+                    <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>
+                </div>
+                <div class="card-footer">
+                    <div class="text-cut-name">{{item.name}}</div>
+                    <div>{{$moment(item.updateTime).calendar()}}</div>
+                    <div class="flex justify-between align-center" v-show="!selectMode">
+                        <el-button size="mini" type="text" icon="el-icon-copy-document"  v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-delete"  @click="deleteHandle(item.mediaId)" >删除</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev,pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>
+    </div>
+</template>
+<script>
+import AddOrUpdate from './material-file-add-or-update'
+export default {
+    name:'material-file',
+    props:{
+        fileType:{// image、voice、video
+            type:String,
+            default:'image'
+        },
+        selectMode:{// 是否选择模式，选择模式下点击素材选中，不可新增和删除
+            type:Boolean,
+            default:false
+        }
+    },
+    components: {
+        AddOrUpdate
+    },
+    data() {
+        return {
+            dataForm: {},
+            addOrUpdateVisible: false,
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 20,
+            totalCount: 0,
+            dataListLoading: false,
+        }
+    },
+    mounted(){
+        this.init()
+    },
+    methods: {
+        init(){
+            if(!this.dataList.length){
+                this.getDataList()
+            }
+        },
+        getDataList() {
+            if(this.dataListLoading) return
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'),
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'type': this.fileType
+                })
+            }).then(({ data }) => {
+                if (data && data.code == 200) {
+                    this.dataList = data.data.items
+                    this.totalCount = data.data.totalCount
+                     this.pageIndex++;
+                } else {
+                    this.$message.error(data.msg);
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 新增 / 修改
+        addOrUpdateHandle() {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(this.fileType)
+            })
+        },
+        onSelect(itemInfo){
+            if(!this.selectMode)return
+            this.$emit('selected',itemInfo)
+        },
+        //删除
+        deleteHandle(id) {
+            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
+                    method: 'post',
+                    data: { mediaId: id }
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () =>  this.onChange()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        onCopySuccess(){
+            this.$message.success('已复制')
+        },
+        onCopyError(err){
+            this.$message.error('复制失败,可能是此浏览器不支持复制')
+        },
+        onChange(){
+            this.pageIndex=1
+            this.getDataList()
+            this.$emit('change')
+        }
+
+    }
+}
+</script>
+<style scoped>
+.card{
+    width: 170px;
+    display: inline-block;
+    background: #FFFFFF;
+    border: 1px solid #EBEEF5;
+    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
+    margin: 0 10px 10px 0;
+    vertical-align: top;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+.card:hover{
+    border: 2px solid #66b1ff;
+    margin-bottom: 6px;
+}
+.card-image{
+    line-height: 170px;
+    max-height: 170px;
+    width: 100%;
+}
+.card-preview{
+    padding: 20px 0;
+    color: #d9d9d9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card-preview-icon{
+    font-size: 30px;
+    margin-right: 5px;
+}
+.card-preview-text{
+    font-size: 12px;
+}
+.card-footer{
+    color: #ccc;
+    font-size: 12px;
+    padding: 15px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-news-add-or-update.vue b/src/views/modules/wx/assets/material-news-add-or-update.vue
new file mode 100644
index 00000000..c2df6169
--- /dev/null
+++ b/src/views/modules/wx/assets/material-news-add-or-update.vue
@@ -0,0 +1,221 @@
+<template>
+    <div  v-show="visible">
+        <div class="flex">
+            <div class="card-list">
+                <div class="text-center margin-bottom">图文列表</div>
+                <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
+                    <div class="text-cut-name">{{item.title}}</div>
+                </div>
+                <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
+            </div>
+            <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
+                <el-form-item label="标题" prop="title">
+                    <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
+                </el-form-item>
+                <el-form-item label="封面图" prop="thumbMediaId">
+                    <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
+                        <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="摘要" prop="digest">
+                    <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
+                </el-form-item>
+                <el-form-item label="原文地址" prop="contentSourceUrl">
+                    <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
+                </el-form-item>
+                <el-row>
+                    <el-col :span="9">
+                        <el-form-item label="作者" prop="author">
+                            <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                        <el-form-item label="显示封面" prop="showCoverPic">
+                            <el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                        <el-form-item label="允许评论" prop="needOpenComment">
+                            <el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                        <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
+                            <el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item label="内容" prop="content">
+                    <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="dialog-footer">
+            <el-button @click="$emit('hide')">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
+        </div>
+        <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector>
+    </div>
+</template>
+
+<script>
+const articleTemplate={
+    templateId: 0,
+    title: '',
+    content: '',
+    author: '',
+    showCoverPic: true,
+    contentSourceUrl: '',
+    digest: '',
+    thumbMediaId: '',
+    needOpenComment: false,
+    onlyFansCanComment: false
+}
+export default {
+    components: {
+        TinymceEditor: () => import('@/components/tinymce-editor'),
+        AssetsSelector:()=>import('./assets-selector')
+    },
+    props:{
+        visible:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            assetsSelectorVisible:false,
+            mediaId:'',
+            selectedIndex:0,
+            articles:[],
+            uploading:false,
+            dataRule: {
+                title: [
+                    { required: true, message: '标题不能为空', trigger: 'blur' }
+                ],
+                content: [
+                    { required: true, message: '内容不能为空', trigger: 'blur' }
+                ],
+                thumbMediaId: [
+                    { required: true, message: '封面图media_id不能为空', trigger: 'blur' }
+                ],
+                contentSourceUrl: [
+                    { required: true, message: '原文地址不得为空', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        init(news){
+            if(news && news.mediaId){
+                this.mediaId=news.mediaId
+                this.articles = news.content.articles
+            }else{
+                this.mediaId=''
+                this.articles=[{...articleTemplate}]
+            }
+        },
+        // 表单提交
+        dataFormSubmit() {
+            if(this.uploading)return
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    if(this.mediaId){// 编辑，只能一次修改一篇
+                        this.materialArticleUpdate();
+                    }else{ // 新增，全部文章一起保存
+                        this.materialNewsUpload();
+                    }
+                }
+            })
+        },
+        materialNewsUpload(){
+            this.uploading=true
+            this.$http({
+                url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`),
+                method: 'post',
+                data: this.$http.adornData(this.articles,false)
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                        duration: 1500,
+                        onClose: () => {
+                            this.$emit("refreshDataList");
+                            this.emit('hide')
+                        }
+                    });
+                } else {
+                    this.$message.error(data.msg)
+                }
+                this.uploading=false
+            })
+        },
+        materialArticleUpdate(){
+            this.uploading=true
+            this.$http({
+                url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`),
+                method: 'post',
+                data: this.$http.adornData({
+                    'mediaId':this.mediaId,
+                    'index':this.selectedIndex,
+                    'articles':this.articles[this.selectedIndex]
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.$message.success('操作成功')
+                } else {
+                    this.$message.error(data.msg)
+                }
+                this.uploading=false
+            })
+        },
+        addArticle(){
+            this.articles.push({...articleTemplate})
+            this.selectedIndex=this.articles.length-1
+        },
+        onAssetsSelect(assetsInfo){
+            Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId)
+            this.assetsSelectorVisible=false
+        }
+    }
+}
+</script>
+<style scoped>
+.card-list{
+    width: 300px;
+    padding-right: 10px;
+    border-right: 1px solid #eeeeee;
+}
+.card-item{
+    margin-top: 2px;
+    padding: 20px 5px;
+    border: 1px solid #ddd;
+    font-size: 12px;
+    line-height: 15px;
+}
+.card-item.selected{
+    border: 2px solid #409EFF;
+}
+.text-cut-name{
+    display: -webkit-box;
+    word-wrap:break-word;
+    word-break:break-all;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.card-add{
+    margin-top: 2px;
+    display: block;
+    border: 1px dotted #ddd;
+    color: #ddd;
+    text-align: center;
+    font-size: 30px;
+    line-height: 50px;
+}
+.dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-news.vue b/src/views/modules/wx/assets/material-news.vue
new file mode 100644
index 00000000..42836b75
--- /dev/null
+++ b/src/views/modules/wx/assets/material-news.vue
@@ -0,0 +1,206 @@
+<template>
+    <div class="panel">
+        <div v-show="!addOrUpdateVisible">
+            <el-form :inline="true" :model="dataForm">
+                <el-form-item v-show="!selectMode">
+                    <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                </el-form-item>
+            </el-form>
+            <div  class="flex justify-start" v-loading="dataListLoading">
+                <div v-for="n in rows" :key="n">
+                    <template v-for="(item,i) in dataList">
+                        <div class="card"  :key="item.mediaId" v-if="i%rows==n-1" @click="onSelect(item)">
+                            <div class="card-preview">
+                                <a v-for="(article,k) in item.content.articles" :key="k" :href="article.url" class="article-item" target="_blank">
+                                    <div class="article-title">{{article.title}}</div>
+                                    <el-image class="article-thumb" :src="article.thumbUrl"></el-image>
+                                </a>
+                            </div>
+                            <div class="card-footer">
+                                <div>{{$moment(item.updateTime).calendar()}}</div>
+                                <div class="flex justify-between align-center"  v-show="!selectMode">
+                                    <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
+                                    <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(item)">编辑</el-button>
+                                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="totalCount" layout="total, prev,pager, next, jumper">
+            </el-pagination>
+        </div>
+        <!-- 新增 / 修改 -->
+        <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange" @hide="addOrUpdateVisible=false"></add-or-update>
+    </div>
+</template>
+<script>
+import AddOrUpdate from './material-news-add-or-update'
+export default {
+    name: 'material-news',
+    components: { 
+        AddOrUpdate
+    },
+    props: {
+        selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除
+            type: Boolean,
+            default: false
+        },
+        rows: {
+            type: Number,
+            default: 4
+        }
+    },
+    data() {
+        return {
+            dataForm: {},
+            addOrUpdateVisible: false,
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 20,
+            totalCount: 0,
+            dataListLoading: false
+        }
+    },
+    mounted(){
+        this.init();
+    },
+    methods: {
+        init() {
+            if (!this.dataList.length) {
+                this.getDataList()
+            }
+        },
+        getDataList() {
+            if (this.dataListLoading) return
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxAssets/materialNewsBatchGet'),
+                params: this.$http.adornParams({
+                    'page': this.pageIndex
+                })
+            }).then(({ data }) => {
+
+                if (data.code == 200) {
+                    this.dataList = data.data.items
+                    this.totalCount = data.data.totalCount
+                } else {
+                    this.$message.error(data.msg);
+                }
+                this.dataListLoading = false
+            })
+        },
+        onSelect(itemInfo) {
+            if (!this.selectMode) return
+            this.$emit('selected', itemInfo)
+        },
+        //删除
+        deleteHandle(id) {
+            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
+                    method: 'post',
+                    data: { mediaId: id }
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.onChange()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(news) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(news || '')
+            })
+        },
+        onCopySuccess() {
+            this.$message.success('已复制')
+        },
+        onCopyError(err) {
+            this.$message.error('复制失败,可能是此浏览器不支持复制')
+        },
+        onChange() {
+            this.pageIndex=1
+            this.getDataList()
+            this.$emit('change')
+        }
+    }
+}
+</script>
+<style scoped>
+.card {
+    width: 240px;
+    min-height: 120px;
+    display: inline-block;
+    background: #FFFFFF;
+    border: 1px solid #EBEEF5;
+    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
+    margin: 0 10px 10px 0;
+    border-radius: 5px;
+    vertical-align: top;
+    height: fit-content;
+}
+.card:hover {
+    border: 2px solid #66b1ff;
+    margin-bottom: 6px;
+}
+.card-preview {
+    color: #d9d9d9;
+    padding-left: 10px;
+    padding-top: 15px;
+}
+.article-item {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 10px 0;
+    cursor: pointer;
+}
+.article-item::after{
+    width: 168px;
+    border-bottom: 1px solid #eee;
+}
+.article-title {
+    display: -webkit-box;
+    word-wrap: break-word;
+    word-break: break-all;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    flex: 1;
+    color: #333333;
+    padding-right: 10px;
+    line-height: 20px;
+    font-size: 13px;
+    
+}
+.article-thumb {
+    width: 50px;
+    height: 50px;
+    display: inline-block;
+}
+.card-footer {
+    font-size: 12px;
+    color: #ccc;
+    padding: 15px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/msg-reply-rule-add-or-update.vue b/src/views/modules/wx/msg-reply-rule-add-or-update.vue
new file mode 100644
index 00000000..0a3e5ab4
--- /dev/null
+++ b/src/views/modules/wx/msg-reply-rule-add-or-update.vue
@@ -0,0 +1,211 @@
+<template>
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
+            <el-form-item label="规则名称" prop="ruleName">
+                <el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input>
+            </el-form-item>
+            <el-form-item label="匹配词" prop="matchValue">
+                <tags-editor v-model="dataForm.matchValue"></tags-editor>
+            </el-form-item>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="作用范围" prop="appid">
+                        <el-select v-model="dataForm.appid" placeholder="作用范围">
+                            <el-option label="全部公众号" value=""></el-option>
+                            <el-option label="当前公众号" :value="selectedAppid"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="精确匹配" prop="exactMatch">
+                        <el-switch v-model="dataForm.exactMatch" :active-value="true" :inactive-value="false"></el-switch>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="回复类型" prop="replyType">
+                        <el-select v-model="dataForm.replyType" @change="onReplyTypeChange">
+                            <el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="是否启用" prop="status">
+                        <el-switch v-model="dataForm.status" :active-value="true" :inactive-value="false"></el-switch>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="生效时间" prop="effectTimeStart">
+                        <el-time-picker v-model="dataForm.effectTimeStart" value-format="HH:mm:ss"></el-time-picker>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="失效时间" prop="effectTimeEnd">
+                        <el-time-picker v-model="dataForm.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item label="回复内容" prop="replyContent">
+                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="文本、图文ID、media_id、json配置"></el-input>
+                <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+                <el-button type="text" v-show="assetsType" @click="assetsSelectorVisible=true">
+                    从素材库中选择<span v-if="'miniprogrampage'==dataForm.replyType || 'music'==dataForm.replyType">缩略图</span>
+                </el-button>
+            </el-form-item>
+            <el-form-item label="备注说明" prop="desc">
+                <el-input v-model="dataForm.desc" placeholder="备注说明"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+        <assets-selector v-if="assetsSelectorVisible && assetsType" :visible="assetsSelectorVisible" :selectType="assetsType" @selected="onAssetsSelect" @onClose="assetsSelectorVisible=false"></assets-selector>
+    </el-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    components: {
+        tagsEditor: () => import('@/components/tags-editor'),
+        AssetsSelector:()=>import('./assets/assets-selector')
+    },
+    data() {
+        return {
+            visible: false,
+            assetsSelectorVisible:false,
+            dataForm: {
+                ruleId: 0,
+                appid:'',
+                ruleName: "",
+                exactMatch: false,
+                matchValue: "",
+                replyType: 'text',
+                replyContent: "",
+                status: true,
+                desc: "",
+                effectTimeStart: "00:00:00",
+                effectTimeEnd: "23:59:59"
+            },
+            dataRule: {
+                ruleName: [
+                    { required: true, message: "规则名称不能为空", trigger: "blur" }
+                ],
+                matchValue: [
+                    { required: true, message: "匹配的关键词、事件等不能为空", trigger: "blur" }
+                ],
+                replyType: [
+                    { required: true, message: "回复类型（1:文本2:图文3媒体）不能为空", trigger: "blur" }
+                ],
+                replyContent: [
+                    { required: true, message: "回复内容不能为空", trigger: "blur" }
+                ],
+                status: [
+                    { required: true, message: "是否有效不能为空", trigger: "blur" }
+                ],
+                effectTimeStart: [
+                    { required: true, message: "生效起始时间不能为空", trigger: "blur" }
+                ],
+                effectTimeEnd: [
+                    { required: true, message: "生效结束时间不能为空", trigger: "blur" }
+                ]
+            }
+        };
+    },
+    computed: mapState({
+        KefuMsgType: state=>state.message.KefuMsgType,
+        selectedAppid:state=>state.wxAccount.selectedAppid,
+        assetsType(){
+            const config={//消息类型与选择素材类型对应关系
+                'image':'image',
+                'voice':'voice',
+                'video':'video',
+                'mpnews':'news',
+                'miniprogrampage':'image',//小程序需选择卡片图
+                'music':'image'
+            }
+            return config[this.dataForm.replyType] || ''
+        }
+    }),
+    methods: {
+        init(id) {
+            this.dataForm.ruleId = id || 0;
+            this.visible = true;
+            this.$nextTick(() => {
+                this.$refs["dataForm"].resetFields();
+                if (this.dataForm.ruleId) {
+                    this.$http({
+                        url: this.$http.adornUrl( `/manage/msgReplyRule/info/${this.dataForm.ruleId}` ),
+                        method: "get",
+                        params: this.$http.adornParams()
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.dataForm = data.msgReplyRule;
+                        }
+                    });
+                }
+            });
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs["dataForm"].validate(valid => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId ? "save" : "update"}`),
+                        method: "post",
+                        data: this.$http.adornData(this.dataForm)
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: "操作成功",
+                                type: "success",
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false;
+                                    this.$emit("refreshDataList");
+                                }
+                            });
+                        } else {
+                            this.$message.error(data.msg);
+                        }
+                    });
+                }
+            });
+        },
+        addLink() {
+            this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
+        },
+        onReplyTypeChange(value) {
+            if ("miniprogrampage" == value) {
+                let demo = { title: "标题", appid: "小程序APPID", pagepath: "页面地址", thumb_media_id: "缩略图media_id" };
+                this.dataForm.replyContent = JSON.stringify(demo, null, 4)
+            } else if ("music" == value) {
+                let demo = { musicurl: "音乐链接", hqmusicurl: "高品质链接", title: "标题", description: "描述", thumb_media_id: "缩略图media_id" }
+                this.dataForm.replyContent = JSON.stringify(demo, null, 4)
+            } else if ("msgmenu" == value) {
+                let demo = { head_content: "开头文字", list: [{ id: "菜单1ID", content: "菜单2内容" }, { id: "菜单2ID", content: "菜单2内容" }, { id: "菜单nID", content: "菜单n内容" }], tail_content: "结尾文字" }
+                this.dataForm.replyContent = JSON.stringify(demo, null, 4)
+            } else if ("news" == value) {
+                let demo={title:"文章标题",description:"文章简介",url:"链接URL",picUrl:"缩略图URL"}
+                this.dataForm.replyContent = JSON.stringify(demo, null, 4)
+            } else {
+                this.dataForm.replyContent = '媒体素材media_id'
+            }
+        },
+        onAssetsSelect(assetsInfo){
+            if(this.dataForm.replyType=='miniprogrampage' || this.dataForm.replyType=='music'){
+                let data = JSON.parse(this.dataForm.replyContent)
+                if(data && data.thumb_media_id)data.thumb_media_id=assetsInfo.mediaId
+                this.dataForm.replyContent = JSON.stringify(data, null, 4)
+            }else{
+                this.dataForm.replyContent = assetsInfo.mediaId
+            }
+            this.assetsSelectorVisible=false
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/msg-reply-rule.vue b/src/views/modules/wx/msg-reply-rule.vue
new file mode 100644
index 00000000..c728b4da
--- /dev/null
+++ b/src/views/modules/wx/msg-reply-rule.vue
@@ -0,0 +1,166 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.matchValue" placeholder="匹配关键词" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:msgreplyrule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <el-button v-if="isAuth('wx:msgreplyrule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border type="expand" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="expand">
+                <template slot-scope="props">
+                    <el-form label-position="left" inline class="demo-table-expand">
+                        <el-form-item label="作用范围">
+                            <span>{{ props.row.appid?'当前公众号':'全部公众号' }}</span>
+                        </el-form-item>
+                        <el-form-item label="精确匹配">
+                            <span>{{ props.row.exactMatch?'是':'否' }}</span>
+                        </el-form-item>
+                        <el-form-item label="是否有效">
+                            <span>{{ props.row.status?'是':'否' }}</span>
+                        </el-form-item>
+                        <el-form-item label="备注说明">
+                            <span>{{ props.row.desc }}</span>
+                        </el-form-item>
+                        <el-form-item label="生效时间">
+                            <span>{{ props.row.effectTimeStart }}</span>
+                        </el-form-item>
+                        <el-form-item label="失效时间">
+                            <span>{{ props.row.effectTimeEnd }}</span>
+                        </el-form-item>
+                    </el-form>
+                </template>
+            </el-table-column>
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="ruleName" header-align="center" align="center" show-overflow-tooltip label="规则名称">
+            </el-table-column>
+            <el-table-column prop="matchValue" header-align="center" align="center" show-overflow-tooltip label="匹配关键词">
+            </el-table-column>
+            <el-table-column prop="replyType" header-align="center" align="center" :formatter="replyTypeFormat" label="消息类型">
+            </el-table-column>
+            <el-table-column prop="replyContent" header-align="center" align="center" show-overflow-tooltip label="回复内容">
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">修改</el-button>
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.ruleId)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './msg-reply-rule-add-or-update'
+import { mapState } from 'vuex'
+export default {
+    components: {
+        AddOrUpdate
+    },
+    data() {
+        return {
+            dataForm: {
+                matchValue: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false
+        }
+    },
+    computed: mapState({
+        KefuMsgType: state=>state.message.KefuMsgType
+    }),
+
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/msgReplyRule/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'matchValue': this.dataForm.matchValue
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id)
+            })
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.ruleId)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/msgReplyRule/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.getDataList()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        replyTypeFormat(row, column, cellValue) {
+            return this.KefuMsgType[cellValue];
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/msg-template-add-or-update.vue b/src/views/modules/wx/msg-template-add-or-update.vue
new file mode 100644
index 00000000..199aed64
--- /dev/null
+++ b/src/views/modules/wx/msg-template-add-or-update.vue
@@ -0,0 +1,165 @@
+<template>
+    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">
+            <el-form-item label="标题" prop="title">
+                <el-input v-model="dataForm.title" placeholder="标题"></el-input>
+            </el-form-item>
+            <el-form-item label="链接" prop="url">
+                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>
+            </el-form-item>
+            <div>
+                <el-form-item label="小程序appid" prop="miniprogram.appid">
+                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>
+                </el-form-item>
+                <el-form-item label="小程序路径" prop="miniprogram.pagePath">
+                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>
+                </el-form-item>
+            </div>
+            <el-row>
+                <el-col :span="16">
+                    <el-form-item label="模版名称" prop="name">
+                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="有效" prop="status">
+                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div class="form-group-area">
+                <el-form-item  class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>
+                <el-form-item>
+                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>
+                </el-form-item>
+                <el-row v-for="(item,index) in dataForm.data" :key="item.name">
+                    <el-col :span="16">
+                        <el-form-item :label="item.name" :prop="'data.'+index+'.value'" :rules="[{required: true,message: '填充内容不得为空', trigger: 'blur' }]">
+                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"  ></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="颜色" >
+                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </div>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            dataForm: {
+                id: 0,
+                templateId: '',
+                title: '',
+                data: [],
+                url: '',
+                miniprogram:{appid:'',pagePath:''},
+                content: '',
+                status: true,
+                name: ''
+            },
+            dataRule: {
+                title: [
+                    { required: true, message: '标题不能为空', trigger: 'blur' }
+                ],
+                data: [
+                    { required: true, message: '内容不能为空', trigger: 'blur' }
+                ],
+                name: [
+                    { required: true, message: '模版名称不能为空', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        init(id) {
+            console.log('init',id)
+            this.dataForm.id = id || 0
+            this.visible = true
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+                if (this.dataForm.id) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),
+                        method: 'get',
+                        params: this.$http.adornParams()
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.transformTemplate(data.msgTemplate)
+                        }else{
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        },
+        /**
+         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)
+         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'
+         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]
+         * 展示表单让管理员给对应的字段填充内容
+         */
+        transformTemplate(template){
+            if(!template.miniprogram)template.miniprogram={appid:'',pagePath:''}
+            if(template.data instanceof Array) {//已经配置过了，直接读取
+                this.dataForm =  template
+                return
+            }
+            
+            template.data=[]
+            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || [] //示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]
+            keysArray.map(item=>{
+                name=item.replace('{{','').replace('.DATA}}','')
+                template.data.push({"name":name,"value":"",color:"#000000"})
+            })
+            this.dataForm = template
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),
+                        method: 'post',
+                        data: this.$http.adornData(this.dataForm)
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    this.$emit('refreshDataList')
+                                }
+                            })
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.form-group-area{
+    border:1px dotted gray;
+}
+.form-group-title{
+    color: gray;
+    font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/msg-template.vue b/src/views/modules/wx/msg-template.vue
new file mode 100644
index 00000000..49e12606
--- /dev/null
+++ b/src/views/modules/wx/msg-template.vue
@@ -0,0 +1,215 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button>
+                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!=1">推送消息</el-button>
+                <el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+            <el-form-item class="fr">
+                <el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate?'同步中...':'同步公众号模板'}}</el-button>
+                <el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button>
+            </el-form-item>
+        </el-form>
+        
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID">
+            </el-table-column>
+            <el-table-column prop="title" header-align="center" align="center" label="标题">
+                <a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a>
+            </el-table-column>
+            <el-table-column prop="name" header-align="center" align="center" label="模版名称">
+            </el-table-column>
+            <el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200">
+            </el-table-column>
+            <el-table-column prop="status" header-align="center" align="center" label="是否有效">
+                <span slot-scope="scope">{{scope.row.status?"是":"否"}}</span>
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button>
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './msg-template-add-or-update'
+import TemplateMsgTask from '@/components/template-msg-task'
+export default {
+    data() {
+        return {
+            dataForm: {
+                title: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false,
+            templateMsgTaskVisible:false,
+            synchonizingWxTemplate:false
+        }
+    },
+    components: {
+        AddOrUpdate,TemplateMsgTask
+    },
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/msgTemplate/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'title': this.dataForm.title,
+                    'sidx': 'id',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id)
+            })
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/msgTemplate/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList()
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        syncWxTemplate(){
+            if(this.synchonizingWxTemplate)return
+            this.synchonizingWxTemplate=true
+            this.$http({
+                    url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
+                    method: 'post',
+                }).then(({ data }) => {
+                    this.synchonizingWxTemplate=false
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '同步完成',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList()
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                }).catch(()=>this.synchonizingWxTemplate=false)
+        },
+        templateMsgTaskHandle(){
+            this.templateMsgTaskVisible = true
+            this.$nextTick(() => {
+                this.$refs.templateMsgTask.init(this.dataListSelections[0])
+            })
+        },
+        async copyHandle(){
+            let loading;
+            for (let i = 0; i < this.dataListSelections.length; i++) {
+                let item = this.dataListSelections[i];
+                loading=this.$loading({
+                    lock: true,
+                    text: "复制模板："+item.title,
+                    spinner: 'el-icon-loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                });
+                item.id='';
+                item.updateTime=new Date()
+                item.name+='_COPY'
+                await this.addMsgTemplate(item).catch(()=>loading.close())
+                loading.close()
+            }
+            loading.close()
+            this.getDataList()
+        },
+        addMsgTemplate(msgTemplate){
+            return new Promise((resolve, reject) => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/msgTemplate/save'),
+                    method: 'post',
+                    data: this.$http.adornData(msgTemplate)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        resolve()
+                    } else {
+                        this.$message.error(data.msg)
+                        reject(data.msg)
+                    }
+                }).catch(err=>reject(err))
+            }) 
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/template-msg-log.vue b/src/views/modules/wx/template-msg-log.vue
new file mode 100644
index 00000000..13422461
--- /dev/null
+++ b/src/views/modules/wx/template-msg-log.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.touser" placeholder="openid" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:templatemsglog:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="touser" header-align="center" align="center" label="openid" width="100">
+            </el-table-column>
+            <el-table-column prop="data" header-align="center" align="center" :formatter="tableJsonFormat" label="内容"  width="300">
+            </el-table-column>
+            <el-table-column prop="sendResult" header-align="center" align="center" show-overflow-tooltip label="发送结果" width="150">
+            </el-table-column>
+            <el-table-column prop="sendTime" header-align="center" align="center" width="100" label="发送时间">
+            </el-table-column>
+            <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="链接">
+            </el-table-column>
+            <el-table-column prop="miniprogram" header-align="center" align="center" :formatter="tableJsonFormat" show-overflow-tooltip label="小程序">
+            </el-table-column>
+            <el-table-column prop="templateId" header-align="center" align="center" label="模板ID"  width="150">
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.logId)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dataForm: {
+                touser: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false
+        }
+    },
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/templateMsgLog/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'touser': this.dataForm.touser,
+                    'sidx': 'send_time',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.logId)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/templateMsgLog/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList()
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        tableJsonFormat(row, column, cellValue){
+            if (!cellValue) {
+                return '';
+            }
+            return JSON.stringify(cellValue)
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/wx-account.vue b/src/views/modules/wx/wx-account.vue
new file mode 100644
index 00000000..541164e5
--- /dev/null
+++ b/src/views/modules/wx/wx-account.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="appid" header-align="center" align="center" label="appid">
+            </el-table-column>
+            <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
+            </el-table-column>
+            <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
+            </el-table-column>
+            <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
+                <span slot-scope="scope">{{scope.row.verified?"是":"否"}}</span>
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
+                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.appid)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './account/wx-account-add-or-update'
+import AccountAccess from './account/wx-account-access-info'
+import { mapState } from 'vuex'
+export default {
+    data() {
+        return {
+            dataForm: {
+                key: ''
+            },
+            dataList: [],
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false,
+            accountAccessVisible:false
+        }
+    },
+    components: {
+        AddOrUpdate,AccountAccess
+    },
+    computed: mapState({
+        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
+    }),
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxAccount/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'key': this.dataForm.key
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.list
+                    this.$store.commit('wxAccount/updateAccountList', data.list)
+                } else {
+                    this.dataList = []
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(item) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(item)
+            })
+        },
+        accessInfo(item){
+            this.accountAccessVisible = true
+            this.$nextTick(() => {
+                this.$refs.accountAccessDialog.init(item)
+            })
+        },
+        // 删除
+        deleteHandle(appid) {
+            var ids = appid ? [appid] : this.dataListSelections.map(item => {
+                return item.appid
+            })
+            this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxAccount/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList()
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        accountTypeFormat(row, column, cellValue) {
+            return this.ACCOUNT_TYPES[cellValue];
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/wx-assets.vue b/src/views/modules/wx/wx-assets.vue
new file mode 100644
index 00000000..65acd980
--- /dev/null
+++ b/src/views/modules/wx/wx-assets.vue
@@ -0,0 +1,57 @@
+<template>
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
+            <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
+        </el-tab-pane>
+        <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
+            <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
+        </el-tab-pane>
+        <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
+            <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
+        </el-tab-pane>
+        <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
+            <material-news ref="newsPanel" @change="materialCount"></material-news>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            activeTab: 'image',
+            assetsCount:{
+                imageCount:'..',
+                videoCount:'..',
+                voiceCount:'..',
+                newsCount:'..'
+            }
+        };
+    },
+    components: {
+        MaterialFile:()=>import('./assets/material-file'),
+        MaterialNews:()=>import('./assets/material-news')
+    },
+    mounted(){
+        this.materialCount();
+    },
+    methods: {
+        handleTabClick(tab, event) {
+            this.$nextTick(()=>{
+                this.$refs[tab.name+'Panel'].init()
+            })
+        },
+        materialCount(){
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxAssets/materialCount')
+            }).then(({ data }) => {
+                if (data && data.code == 200) {
+                    this.assetsCount=data.data
+                } else {
+                    this.$message.error(data.msg);
+                }
+            })
+        }
+
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-menu-button-editor.vue b/src/views/modules/wx/wx-menu-button-editor.vue
new file mode 100644
index 00000000..2ec9cab2
--- /dev/null
+++ b/src/views/modules/wx/wx-menu-button-editor.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
+            <div class="menu-name">{{button.name}}</div>
+            <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
+        </div>
+        <div class="menu-input-group">
+            <div class="menu-label">菜单名称</div>
+            <div class="menu-input">
+                <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" @input="checkMenuName(button.name)">
+                <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
+                <p class="menu-tips">字数不超过{{selectedMenuLevel==1?'5':'8'}}个汉字</p>
+            </div>
+        </div>
+        <div v-show="!button.subButtons || button.subButtons.length==0">
+            <div class="menu-input-group">
+                <div class="menu-label">菜单内容</div>
+                <div class="menu-input">
+                    <select v-model="button.type" name="type" class="menu-input-text">
+                        <option value="view">跳转网页(view)</option>
+                        <option value="media_id">发送消息(media_id)</option>
+                        <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
+                        <option value="miniprogram">打开指定小程序(miniprogram)</option>
+                        <option value="click">自定义点击事件(click)</option>
+                        <option value="scancode_push">扫码上传消息(scancode_push)</option>
+                        <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
+                        <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
+                        <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
+                        <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
+                        <option value="location_select">弹出地理位置选择器(location_select)</option>
+                    </select>
+                </div>
+            </div>
+            <div class="menu-content" v-if="button.type=='view'">
+                <div class="menu-input-group">
+                    <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
+                    <div class="menu-label">页面地址</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
+                    </div>
+                </div>
+            </div>
+            <div class="menu-content" v-else-if="button.type=='media_id'">
+                <div class="menu-input-group">
+                    <p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p>
+                    <div class="menu-label">media_id</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId">
+                    </div>
+                </div>
+            </div>
+            <div class="menu-content" v-else-if="button.type=='miniprogram'">
+                <div class="menu-input-group">
+                    <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
+                    <div class="menu-label">小程序appId</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" v-model="button.appId">
+                    </div>
+                </div>
+                <div class="menu-input-group">
+                    <div class="menu-label">小程序路径</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text" v-model="button.pagePath">
+                    </div>
+                </div>
+                <div class="menu-input-group">
+                    <div class="menu-label">备用网页</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
+                        <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
+                    </div>
+                </div>
+            </div>
+            <div class="menu-content" v-else>
+                <div class="menu-input-group">
+                    <p class="menu-tips">用于消息接口推送，不超过128字节</p>
+                    <div class="menu-label">菜单KEY值</div>
+                    <div class="menu-input">
+                        <input type="text" placeholder="" class="menu-input-text" v-model="button.key">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        selectedMenuLevel: {
+            type: Number,
+            default: 1
+        },
+        button: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            menuNameBounds: false,//菜单长度是否过长
+        }
+    },
+    methods: {
+        //检查菜单名称长度
+        checkMenuName: function (val) {
+            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
+                this.menuNameBounds = false
+            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
+                this.menuNameBounds = false
+            } else {
+                this.menuNameBounds = true
+            }
+        },
+        //获取菜单名称长度
+        getMenuNameLen: function (val) {
+            var len = 0;
+            for (var i = 0; i < val.length; i++) {
+                var a = val.charAt(i);
+                a.match(/[^\x00-\xff]/ig) != null ? len += 2 : len += 1;
+            }
+            return len;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-menu.vue b/src/views/modules/wx/wx-menu.vue
new file mode 100644
index 00000000..cc7d8dd8
--- /dev/null
+++ b/src/views/modules/wx/wx-menu.vue
@@ -0,0 +1,159 @@
+<template>
+    <div>
+        <div id="app-menu">
+            <!-- 预览窗 -->
+            <div class="weixin-preview">
+                <div class="weixin-bd">
+                    <div class="weixin-header">公众号菜单</div>
+                    <ul class="weixin-menu" id="weixin-menu">
+                        <li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item" :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)">
+                            <div class="menu-item-title">
+                                <span>{{ btn.name }}</span>
+                            </div>
+                            <ul class="weixin-sub-menu">
+                                <li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}" @click.stop="selectSubMenu(i,i2)"  draggable="true"  @dragstart="selectSubMenu(i,i2)" @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)">
+                                    <div class="menu-item-title">
+                                        <span>{{sub.name}}</span>
+                                    </div>
+                                </li>
+                                <li v-if="btn.subButtons.length<5" class="menu-sub-item" :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}" @click.stop="addMenu(2,i)" @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)" @drop="onDrop(i,btn.subButtons.length)">
+                                    <div class="menu-item-title">
+                                        <i class="el-icon-plus"></i>
+                                    </div>
+                                </li>
+                                <i class="menu-arrow arrow_out"></i>
+                                <i class="menu-arrow arrow_in"></i>
+                            </ul>
+                        </li>
+                        <li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)"> <i class="el-icon-plus"></i></li>
+                    </ul>
+                </div>
+            </div>
+            <!-- 菜单编辑器 -->
+            <div class="weixin-menu-detail" v-if="selectedMenuLevel>0">
+                <wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
+            </div>
+        </div>
+        <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
+            <el-button type="success" icon="el-icon-upload">发布</el-button>
+            <el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    components: {
+        wxMenuButtonEditor: () => import('./wx-menu-button-editor')
+    },
+    data() {
+        return {
+            menu: { 'buttons': [] },//当前菜单
+            selectedMenuIndex: '',//当前选中菜单索引
+            selectedSubMenuIndex: '',//当前选中子菜单索引
+            selectedMenuLevel: 0,//选中菜单级别
+            selectedButton: '',//选中的菜单按钮
+            onDragOverMenu:'' //当前鼠标拖动到的位置
+        }
+    },
+    mounted() {
+        this.getWxMenu();
+    },
+    methods: {
+        getWxMenu() {
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMenu/getMenu')
+            }).then(({ data }) => {
+                if (data.code == 200) {
+                    this.menu = data.data.menu;
+                } else {
+                    this.$message({
+                        type: 'error',
+                        message: data.msg
+                    });
+                }
+
+            });
+        },
+        //选中主菜单
+        selectMenu(i) {
+            this.selectedMenuLevel = 1
+            this.selectedSubMenuIndex = ''
+            this.selectedMenuIndex = i
+            this.selectedButton = this.menu.buttons[i]
+        },
+        //选中子菜单
+        selectSubMenu(i,i2) {
+            this.selectedMenuLevel = 2
+            this.selectedMenuIndex = i
+            this.selectedSubMenuIndex = i2
+            this.selectedButton = this.menu.buttons[i].subButtons[i2]
+        },
+        //添加菜单
+        addMenu(level,i) {
+            if (level == 1 && this.menu.buttons.length < 3) {
+                this.menu.buttons.push({
+                    "type": "view",
+                    "name": "菜单名称",
+                    "subButtons": [],
+                    "url": ""
+                })
+                this.selectMenu(this.menu.buttons.length - 1)
+            }
+            if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
+                this.menu.buttons[i].subButtons.push({
+                    "type": "view",
+                    "name": "子菜单名称",
+                    "url": ""
+                })
+                this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
+            }
+        },
+        //删除菜单
+        delMenu() {
+            if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
+                this.menu.buttons.splice(this.selectedMenuIndex, 1);
+                this.unSelectMenu()
+            } else if (this.selectedMenuLevel == 2) {
+                this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
+                this.unSelectMenu()
+            }
+        },
+        unSelectMenu(){//不选中任何菜单
+            this.selectedMenuLevel = 0
+            this.selectedMenuIndex = ''
+            this.selectedSubMenuIndex = ''
+            this.selectedButton = ''
+        },
+        updateWxMenu() {
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
+                data: this.menu,
+                method: 'post'
+            }).then(({ data }) => {
+                if (data.code == 200) {
+                    this.$message.success('操作成功')
+                } else {
+                    this.$message.error(data.msg);
+                }
+
+            });
+        },
+        onDrop(i,i2){//拖拽移动位置
+            this.onDragOverMenu='';
+            if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
+                return 
+            if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
+                this.$message.error('目标组已满');
+                return
+            }
+            this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
+            let delSubIndex = this.selectedSubMenuIndex
+            if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex) 
+                delSubIndex++
+            this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
+            this.unSelectMenu()
+        }
+    }
+}
+</script>
+<style src="@/assets/css/wx-menu.css"></style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg-reply.vue b/src/views/modules/wx/wx-msg-reply.vue
new file mode 100644
index 00000000..7721aeb3
--- /dev/null
+++ b/src/views/modules/wx/wx-msg-reply.vue
@@ -0,0 +1,84 @@
+<template>
+    <el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
+            <el-form-item prop="replyContent">
+                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
+                <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'发送中...':'发送'}}</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            uploading: false,
+            dataForm: {
+                openid:'',
+                replyType:'text',
+                replyContent:''
+            },
+            dataRule: {
+                replyContent: [
+                    { required: true, message: "回复内容不能为空", trigger: "blur" }
+                ]
+            }
+        }
+    },
+    components:{
+        WxMsgPreview:()=>import('@/components/wx-msg-preview')
+    },
+    methods: {
+        init(openid) {
+            if(!openid)throw '参数异常'
+            this.dataForm.openid=openid
+            this.visible = true
+        },
+        // 表单提交
+        dataFormSubmit() {
+            if(this.uploading)return
+            this.uploading=true
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/wxMsg/reply`),
+                        method: 'post',
+                        data: this.$http.adornData(this.dataForm)
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '回复成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    
+                                }
+                            })
+                            this.$emit("success",{...this.dataForm});
+                            this.dataForm.replyContent=''
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                        this.uploading=false
+                    })
+                }
+            })
+        },
+        addLink() {
+            this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
+        }
+    }
+}
+</script>
+<style scoped>
+.msg-container{
+    background: #eee;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg.vue b/src/views/modules/wx/wx-msg.vue
new file mode 100644
index 00000000..eec873d2
--- /dev/null
+++ b/src/views/modules/wx/wx-msg.vue
@@ -0,0 +1,184 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-select v-model="dataForm.startTime" placeholder="时间">
+                    <el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="dataForm.msgTypes" placeholder="消息类型">
+                    <el-option value="" label="不限类型"></el-option>
+                    <el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option>
+                    <el-option value="event,transfer_customer_service" label="事件"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div class="text-gray">
+            24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用
+            <a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a>
+        </div>
+        <div v-loading="dataListLoading">
+            <div class="msg-item" v-for="(msg,index) in  dataList" :key="index">
+                <div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
+                <div class="item-content">
+                    <div class="flex justify-between margin-bottom">
+                        <div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div>
+                        <div>{{$moment(msg.createTime).calendar()}}</div>
+                        <div class="reply-btn">
+                            <div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div>
+                        </div>
+                    </div>
+                    <wx-msg-preview :msg="msg" singleLine></wx-msg-preview>
+                </div>
+            </div>
+        </div>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 消息回复 -->
+        <wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply>
+    </div>
+</template>
+
+<script>
+const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss'
+export default {
+    data() {
+        return {
+            timeSelections:{
+                '近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT),
+                '近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT),
+                '近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT),
+                '近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT),
+            },
+            dataForm: {
+                startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT),
+                msgTypes: ''
+            },
+            dataList: [],
+            userDataList:[],
+            pageIndex: 1,
+            pageSize: 20,
+            totalCount: 0,
+            dataListLoading: false,
+            dataListSelections: []
+        }
+    },
+    components: {
+        WxMsgReply:()=>import('./wx-msg-reply'),
+        WxMsgPreview:()=>import('@/components/wx-msg-preview')
+    },
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxMsg/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'msgTypes': this.dataForm.msgTypes,
+                    'startTime':this.dataForm.startTime,
+                    'sidx': 'create_time',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalCount = data.page.totalCount
+                    this.refreshUserList(this.dataList)
+                } else {
+                    this.dataList = []
+                    this.totalCount = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        refreshUserList(msgList){
+            let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid))
+            if(!openidList.length)return
+            openidList = Array.from(new Set(openidList))//去重
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUser/listByIds'),
+                method: 'post',
+                data: this.$http.adornParams(openidList,false)
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.userDataList = this.userDataList.concat(data.data)
+                }
+            })
+        },
+        getUserInfo(openid){
+            return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''}
+        },
+        // 是否可回复，24小时内可回复
+        canReply(time){
+            return new Date(time).getTime()>new Date().getTime()-24*60*60*1000
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 回复消息
+        replyHandle(openid) {
+            this.$nextTick(() => {
+                this.$refs.wxMsgReply.init(openid)
+            })
+        },
+        onReplyed(replyMsg){
+            this.dataList.unshift({
+                openid : replyMsg.openid,
+                msgType : replyMsg.replyType,
+                detail : {
+                    content : replyMsg.replyContent
+                },
+                inOut : 1,
+                createTime : new Date()
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.msg-item{
+    border: 1px solid #DCDFE6;
+    display: flex;
+    justify-content: flex-start;
+    align-items: top;
+    margin-top: 20px;
+    padding: 10px 20px;
+}
+.avatar{
+    flex: 0;
+    display: inline-block;
+    min-width: 60px;
+    margin-right: 20px;
+}
+.item-content{
+    flex: 1;
+    line-height: 20px;
+    max-width: 100%;
+    overflow: hidden;
+}
+.reply-btn{
+    width: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-qrcode-add-or-update.vue b/src/views/modules/wx/wx-qrcode-add-or-update.vue
new file mode 100644
index 00000000..a3a42383
--- /dev/null
+++ b/src/views/modules/wx/wx-qrcode-add-or-update.vue
@@ -0,0 +1,86 @@
+<template>
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
+            <el-form-item label="二维码类型" prop="isTemp">
+                <el-radio v-model="dataForm.isTemp" :label="true">临时</el-radio>
+                <el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio>
+                <div>
+                    <a class="text-warning" v-show="!dataForm.isTemp" target="_blank" href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">注意永久二维码上限10万个，且暂时无法删除旧的二维码</a>
+                </div>
+            </el-form-item>
+
+            <el-form-item label="场景值" prop="sceneStr">
+                <el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input>
+            </el-form-item>
+            <el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp">
+                <el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input>
+                <div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="visible = false">取消</el-button>
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            dataForm: {
+                isTemp: true,
+                sceneStr: '',
+                expireSeconds: 2592000
+            },
+            dataRule: {
+                isTemp: [
+                    { required: true, message: '二维码类型不能为空', trigger: 'blur' }
+                ],
+                sceneStr: [
+                    { required: true, message: '场景值ID不能为空', trigger: 'blur' }
+                ],
+                expireSeconds: [
+                    { required: true, message: '该二维码失效时间不能为空', trigger: 'blur' }
+                ]
+            }
+        }
+    },
+    methods: {
+        init(id) {
+            this.dataForm.id = id || 0
+            this.visible = true
+            this.$nextTick(() => {
+                this.$refs['dataForm'].resetFields()
+            })
+        },
+        // 表单提交
+        dataFormSubmit() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    this.$http({
+                        url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`),
+                        method: 'post',
+                        data: this.$http.adornData(this.dataForm)
+                    }).then(({ data }) => {
+                        if (data && data.code === 200) {
+                            this.$message({
+                                message: '操作成功',
+                                type: 'success',
+                                duration: 1500,
+                                onClose: () => {
+                                    this.visible = false
+                                    this.$emit('refreshDataList')
+                                }
+                            })
+                        } else {
+                            this.$message.error(data.msg)
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/wx-qrcode.vue b/src/views/modules/wx/wx-qrcode.vue
new file mode 100644
index 00000000..38ce9fa9
--- /dev/null
+++ b/src/views/modules/wx/wx-qrcode.vue
@@ -0,0 +1,142 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:wxqrcode:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <el-button v-if="isAuth('wx:wxqrcode:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="id" header-align="center" align="center" label="ID">
+            </el-table-column>
+            <el-table-column prop="isTemp" header-align="center" align="center" label="类型">
+                <span slot-scope="scope">{{scope.row.isTemp?'临时':'永久'}}</span>
+            </el-table-column>
+            <el-table-column prop="sceneStr" header-align="center" align="center" label="场景值">
+            </el-table-column>
+            <el-table-column prop="ticket" header-align="center" align="center" show-overflow-tooltip label="二维码图片">
+                <a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+scope.row.ticket" slot-scope="scope">{{scope.row.ticket}}</a>
+            </el-table-column>
+            <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址">
+                <a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a>
+            </el-table-column>
+            <el-table-column prop="expireTime" header-align="center" align="center" width="100" label="失效时间">
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <!-- 弹窗, 新增 / 修改 -->
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+</template>
+
+<script>
+import AddOrUpdate from './wx-qrcode-add-or-update'
+export default {
+    data() {
+        return {
+            dataForm: {
+                sceneStr: ''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalPage: 0,
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false
+        }
+    },
+    components: {
+        AddOrUpdate
+    },
+    activated() {
+        this.getDataList()
+    },
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxQrCode/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'sceneStr': this.dataForm.sceneStr,
+                    'sidx': 'id',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalPage = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalPage = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 新增 / 修改
+        addOrUpdateHandle(id) {
+            this.addOrUpdateVisible = true
+            this.$nextTick(() => {
+                this.$refs.addOrUpdate.init(id)
+            })
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxQrCode/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => this.getDataList()
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        }
+    }
+}
+</script>
diff --git a/src/views/modules/wx/wx-user-tagging.vue b/src/views/modules/wx/wx-user-tagging.vue
new file mode 100644
index 00000000..ff4b2664
--- /dev/null
+++ b/src/views/modules/wx/wx-user-tagging.vue
@@ -0,0 +1,102 @@
+<template>
+    <el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible">
+        <div>
+            <el-select v-model="selectedTagid" filterable placeholder="请选择标签" style="width:100%">
+                <el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" :value="tagid"></el-option>
+            </el-select>
+            <div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible=false">关闭</el-button>
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    name:'wx-user-tagging',
+    props:{
+        wxUsers:Array,
+    },
+    data(){
+        return{
+            mode:'tagging',//操作，tagging | untagging
+            modeDesc:{
+                'tagging':'绑定',
+                'untagging':'解绑'
+            },
+            selectedTagid:'',
+            dialogVisible:false,
+            submitting:false
+        }
+    },
+    computed: mapState({
+        wxUserTags:state=>state.wxUserTags.tags,
+        /**
+         * 返回下拉选择框中的选项列表
+         * 假设 all= 全部标签，intersection = 用户标签交集（即所有用户都有的） ，union=用户标签并集（即至少一个用户的）
+         * 那么绑定时可选：all-intersection的差集，即所有用户都有的就不列出来了
+         *     解绑时可选：，union ，即用户有的标签都列出来
+         */
+        tagidsInOption(){
+            let userTags=this.wxUsers.map(u=>u.tagidList || [])//示例：[[1,2],[],[1,3]]
+            if(this.mode=='tagging'){//绑定标签时可选：所有标签 - 用户标签交集
+                let all = this.wxUserTags.map(item=>item.id)
+                return all.filter(tagid=>!userTags.every(tagsIdArray=>tagsIdArray.indexOf(tagid)>-1))
+            }else if(this.mode=='untagging'){//解绑标签时可选：用户标签的并集
+                let unionSet = new Set();
+                userTags.forEach(tagsIdArray=>{
+                    tagsIdArray.forEach(tagid => unionSet.add(tagid))
+                });//将用户的标签放到unionSet中去重
+                return Array.from(unionSet);//unionSet转为数组
+            }
+            return []
+        }
+        
+    }),
+    methods:{
+        init(mode){
+            if('tagging'==mode || 'untagging'==mode){
+                this.mode=mode;
+                this.dialogVisible=true
+            }else{
+                throw('mode参数有误')
+            }
+        },
+        getTagName(tagid){
+            let tag = this.wxUserTags.find(item=>item.id==tagid)
+            return tag?tag.name : "?"
+        },
+        dataFormSubmit(){
+            if(this.submitting)return
+            if(!this.selectedTagid){
+                this.$message.error('未选择标签')
+                return
+            }
+            this.submitting=true
+            let openidList=this.wxUsers.map(u=>u.openid)
+            this.$http({
+                url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode=='tagging'?'batchTagging':'batchUnTagging'}`),
+                method: 'post',
+                data:this.$http.adornData({
+                    tagid : this.selectedTagid,
+                    openidList : openidList
+                })
+            }).then(({ data }) => {
+                this.submitting=false
+                if (data && data.code === 200) {
+                    this.$message({
+                        message: '操作成功,列表数据需稍后刷新查看',
+                        type: 'success',
+                        onClose: () =>this.dialogVisible=false
+                    })
+                } else {
+                    this.$message.error(data.msg)
+                }
+                
+            })
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-user.vue b/src/views/modules/wx/wx-user.vue
new file mode 100644
index 00000000..963425cd
--- /dev/null
+++ b/src/views/modules/wx/wx-user.vue
@@ -0,0 +1,209 @@
+<template>
+    <div class="mod-config">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签">
+                    <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.city" placeholder="城市" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="getDataList()">查询</el-button>
+                <el-button v-if="isAuth('wx:wxuser:save')"  type="primary" @click="$refs.wxUserTagging.init('tagging')" :disabled="dataListSelections.length <= 0">绑定标签</el-button>
+                <el-button v-if="isAuth('wx:wxuser:save')"  type="primary" @click="$refs.wxUserTagging.init('untagging')" :disabled="dataListSelections.length <= 0">解绑标签</el-button>
+                <el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+            </el-form-item>
+            <el-form-item class="fr">
+                <el-button  icon="el-icon-price-tag" type="success" @click="$refs.wxUserTagsEditor.show()">标签管理</el-button>
+                <el-button  icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <el-table-column type="selection" header-align="center" align="center" width="50">
+            </el-table-column>
+            <el-table-column prop="openid" header-align="center" align="center" label="openid">
+            </el-table-column>
+            <el-table-column prop="nickname" header-align="center" align="center" label="昵称">
+            </el-table-column>
+            <el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat">
+            </el-table-column>
+            <el-table-column prop="city" header-align="center" align="center" label="城市">
+            </el-table-column>
+            <el-table-column prop="headimgurl" header-align="center" align="center" label="头像">
+                <img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" />
+            </el-table-column>
+            <el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
+                <template slot-scope="scope">
+                    <span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
+                <template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template>
+            </el-table-column>
+            <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值">
+            </el-table-column>
+            <el-table-column prop="subscribe" header-align="center" align="center" label="是否关注">
+                <span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span>
+            </el-table-column>
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="deleteHandle(scope.row.openid)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+        <wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false"></wx-user-tags-manager>
+        <wx-user-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging>
+    </div>
+</template>
+
+<script>
+import WxUserTagsManager from '@/components/wx-user-tags-manager'
+import WxUserTagging from './wx-user-tagging'
+import { mapState } from 'vuex'
+export default {
+    data() {
+        return {
+            dataForm: {
+                tagid:'',
+                nickname: '',
+                city:'',
+                qrSceneStr:''
+            },
+            dataList: [],
+            pageIndex: 1,
+            pageSize: 10,
+            totalPage: 0,
+            showWxUserTagsEditor:false,
+            dataListLoading: false,
+            dataListSelections: [],
+        }
+    },
+    components: {
+        WxUserTagsManager,WxUserTagging
+    },
+    activated() {
+        this.getDataList()
+    },
+    computed: mapState({
+        wxUserTags:state=>state.wxUserTags.tags
+    }),
+    methods: {
+        // 获取数据列表
+        getDataList() {
+            this.dataListLoading = true
+            this.$http({
+                url: this.$http.adornUrl('/manage/wxUser/list'),
+                method: 'get',
+                params: this.$http.adornParams({
+                    'page': this.pageIndex,
+                    'limit': this.pageSize,
+                    'nickname': this.dataForm.nickname,
+                    'tagid': this.dataForm.tagid,
+                    'city': this.dataForm.city,
+                    'qrSceneStr': this.dataForm.qrSceneStr,
+                    'sidx': 'subscribe_time',
+                    'order': 'desc'
+                })
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.dataList = data.page.list
+                    this.totalPage = data.page.totalCount
+                } else {
+                    this.dataList = []
+                    this.totalPage = 0
+                }
+                this.dataListLoading = false
+            })
+        },
+        // 每页数
+        sizeChangeHandle(val) {
+            this.pageSize = val
+            this.pageIndex = 1
+            this.getDataList()
+        },
+        // 当前页
+        currentChangeHandle(val) {
+            this.pageIndex = val
+            this.getDataList()
+        },
+        // 多选
+        selectionChangeHandle(val) {
+            this.dataListSelections = val
+        },
+        // 删除
+        deleteHandle(id) {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.openid)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$http({
+                    url: this.$http.adornUrl('/manage/wxUser/delete'),
+                    method: 'post',
+                    data: this.$http.adornData(ids, false)
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1500,
+                            onClose: () => {
+                                this.getDataList()
+                            }
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+            })
+        },
+        syncWxUsers(){
+            this.$http({
+                    url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
+                    method: 'post',
+                }).then(({ data }) => {
+                    if (data && data.code === 200) {
+                        this.$message({
+                            message: '同步任务已建立，请稍候刷新查看列表',
+                            type: 'success',
+                            duration: 1500
+                        })
+                    } else {
+                        this.$message.error(data.msg)
+                    }
+                })
+        },
+        
+        sexFormat(row, column, cellValue) {
+            let sexType = {
+                0: '未知',
+                1: '男',
+                2: '女'
+            }
+            return sexType[cellValue];
+        },
+        getTagName(tagid){
+            let tag = this.wxUserTags.find(item=>item.id==tagid)
+            return tag?tag.name : "?"
+        }
+    }
+}
+</script>
+<style scoped>
+.headimg{
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+}
+</style>
\ No newline at end of file