Merge branch '4.7.0' of https://gitee.com/sunxinone/MCMS.git into 4.7.0

src/main/webapp/WEB-INF/manager/include/head-file.ftl

@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_847907_mkdvd7gopsg.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_974973_42u7cwycwta.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1035189_ddqz6fpwzxb.css">
+    <!--自定义模型-->
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_997125_lflqkedj6s9.css">
+
     <!-- 引入样式 -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     <!-- 引入组件库 -->
@@ -43,12 +46,20 @@
         ms.manager = "${managerPath}";
         ms.web = ms.base;
 
-        // ms.base = "http://192.168.0.54:85";
-        // ms.manager = "http://192.168.0.54:85/apis/ms";
-        // ms.web = "http://192.168.0.54:85/apis";
+        // ms.base = "http://192.168.0.54:82";
+        // ms.manager = "http://192.168.0.54:82/apis/ms";
+        // ms.web = "http://192.168.0.54:82/apis";
         //图片懒加载
 		  Vue.use(VueLazyload, {
 		    error: ms.base + '/images/ic_image_deault.png',
 		    loading: ms.base + '/images/ic_image_deault.png',
-		  })
+          })
+
+         // 测试使用 ==> 微信其他接口走之前需要先走这个接口
+         ms.http.get(ms.manager + "/mweixin/11/function.do")
+            .then((res) => {
+                console.log('微信登录接口', true);
+            }, (err) => {
+                console.log(err)
+        })
     </script>

src/main/webapp/WEB-INF/manager/mdiy/diy-model/form.ftl

@@ -0,0 +1,423 @@
+<link rel="stylesheet" href="../../../static/mdiy/css/model-form.css">
+<div id="model-form" class="ms-mdiy-model-form" v-if="modelListVue.href == '表单'">
+   <el-container>
+      <el-header class="ms-header" height="50px">
+         <el-row class="ms-row">
+            <el-button class="ms-fr" type="success" size="small" icon="el-icon-back" @click="modelListVue.href = '列表'">返回</el-button>
+            <el-button class="ms-fr" size="small" icon="el-icon-plus">保存</el-button>
+         </el-row>
+      </el-header>
+      <el-container>
+         <el-aside class="ms-editor-type-layout">
+            <div class="ms-header-title">自定义表单项</div>
+            <div id="ms-type-list" class="ms-type-list">
+               <li v-for="type in typeList" :data-type="type.id" :data-title="type.title" @click="formItemList.push({type: type.id,title: type.title,downList: [],downActiveList: [],set: [],unit: '',fieldType: ''})">
+                  <i class="iconfont" :class="type.icon"></i>
+                  <span v-text="type.title"></span>
+               </li>
+            </div>
+         </el-aside>
+         <el-main class="ms-editor-body-layout">
+            <el-form id="ms-input-list" size="mini" class="form">
+               <!--控件类型下拉-->
+               <!--绑定一个自增长ID否则富文本会无法渲染-->
+               <el-form-item @click.native="formItemActive = formItem;formItemActive.id = index" class="ms-form-item" :class="{'active':formItemActive == formItem}" :label="formItem.title" :label-width="'90px'" v-for="(formItem,index) in formItemList">
+                  <!--单行-->
+                  <el-input v-if="formItem.type == '1' && formItem.fieldType != '1-2' && formItem.fieldType != '1-3'" maxlength="20" type="text" v-model="formItem.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                  <!--多行-->
+                  <el-input v-if="formItem.fieldType == '1-2'" maxlength="20" type="textarea" :rows="4" v-model="formItem.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                  <div v-show="formItem.fieldType == '1-3'" style="width: 100%;">
+                     <script :id="'ms-ueditor-'+formItemActive.id" type="text/plain" name="taskDescription"></script>
+                  </div>
+                  <!--号码-->
+                  <el-input v-if="formItem.type == '2'" maxlength="11" type="text" v-model="formItem.default" placeholder="选填，1-11，数字" autocomplete="off"></el-input>
+                  <!--金额-->
+                  <el-input class="unit-input" v-if="formItem.type == '3'" maxlength="20" type="number" v-model="formItem.default" placeholder="选填" autocomplete="off">
+                     <template :slot="formItem.fieldType == '3-1'?'prepend':'append'">{{formItem.unit}}</template>
+                  </el-input>
+
+                  <!--数值-->
+                  <el-input v-if="formItem.type == '4'" max="9999" type="number" v-model="formItem.default" placeholder="选填，数字" autocomplete="off"></el-input>
+
+                  <!--日期和时间-->
+                  <el-date-picker v-if="formItem.type == '5' && formItem.fieldType != '5-2' && formItem.fieldType != '5-3'" style="width: 100%;" v-model="formItem.default" type="datetime" placeholder="选择日期时间">
+                  </el-date-picker>
+                  <!--仅日期-->
+                  <el-date-picker v-if="formItem.fieldType == '5-2'" style="width: 100%;" v-model="formItem.default" type="date" placeholder="选择日期">
+                  </el-date-picker>
+                  <!--仅时间-->
+                  <el-time-picker v-if="formItem.fieldType == '5-3'" style="width: 100%;" v-model="formItem.default" placeholder="选择时间">
+                  </el-time-picker>
+
+                  <!--选项-->
+                  <!--单选-->
+                  <template v-if="formItem.type == '6' && formItem.fieldType != '6-2'">
+                     <el-radio v-for="(down,index) in formItem.downList" v-model="formItem.downActive" :label="index">{{down.value}}</el-radio>
+                  </template>
+
+                  <!--多选-->
+                  <el-checkbox-group v-model="formItem.downActiveList" v-if="formItem.fieldType == '6-2'">
+                     <el-checkbox v-for="(down,index) in formItem.downList" :label="index">{{down.value}}</el-checkbox>
+                  </el-checkbox-group>
+                  <!--下拉菜单-->
+                  <!--单选-->
+                  <el-select style="width: 100%;" v-model="formItem.downActive" placeholder="请选择" v-if="formItem.type == '7' && formItem.fieldType != '7-2'">
+                     <el-option v-for="(down,index) in formItem.downList" :value="index" :label="down.value">
+                     </el-option>
+                  </el-select>
+
+                  <!--多选-->
+                  <el-select style="width: 100%;" multiple v-model="formItem.downActiveList" placeholder="请选择" v-if="formItem.fieldType == '7-2'">
+                     <el-option v-for="(down,index) in formItem.downList" :value="index" :label="down.value">
+                     </el-option>
+                  </el-select>
+
+                  <!--上传图片-->
+                  <el-upload v-if="formItem.type == '8'" action="https://jsonplaceholder.typicode.com/posts/" multiple>
+                     <el-button icon="el-icon-upload">上传附件</el-button>
+                  </el-upload>
+
+                  <!--上传附件-->
+                  <el-upload v-if="formItem.type == '9'" action="https://jsonplaceholder.typicode.com/posts/" multiple list-type="picture-card">
+                     <i class="el-icon-plus"></i>
+                  </el-upload>
+                  <!--删除按钮-->
+                  <el-button class="del-but" type="text" @click.stop="formItemList.splice(index,1)">删除</el-button>
+               </el-form-item>
+            </el-form>
+         </el-main>
+         <el-aside class="ms-editor-attr-layout">
+            <div id="ms-editor-attr" class="ms-editor-attr">
+               <el-form label-position="top" size="mini" class="form">
+                  <!--字段名-->
+                  <el-form-item label="标题" :label-width="'70px'">
+                     <el-input maxlength="5" v-model="formItemActive.title" placeholder="选填，1-5，字符" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--数字类型-->
+                  <!--数值-->
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.type === '4'">
+                     <el-input max="9999" type="number" v-model="formItemActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--时间类型-->
+                  <el-form-item label="字段类型" :label-width="'70px'" v-if="formItemActive.type === '5'">
+                     <el-radio v-model="formItemActive.fieldType" label="5-1">日期和时间</el-radio>
+                     <el-radio v-model="formItemActive.fieldType" label="5-2">仅日期</el-radio>
+                     <el-radio v-model="formItemActive.fieldType" label="5-3">仅时间</el-radio>
+                  </el-form-item>
+                  <!--日期和时间-->
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.type === '5' && formItemActive.fieldType != '5-2' && formItemActive.fieldType != '5-3'">
+                     <el-date-picker style="width: 100%;" v-model="formItemActive.default" type="datetime" placeholder="选择日期时间">
+                     </el-date-picker>
+                  </el-form-item>
+                  <!--仅日期-->
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.fieldType == '5-2'">
+                     <el-date-picker style="width: 100%;" v-model="formItemActive.default" type="date" placeholder="选择日期">
+                     </el-date-picker>
+                  </el-form-item>
+                  <!--仅时间-->
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.fieldType == '5-3'">
+                     <el-time-picker style="width: 100%;" v-model="formItemActive.default" placeholder="选择时间">
+                     </el-time-picker>
+                  </el-form-item>
+
+                  <!--字符串类型-->
+                  <!--文本-->
+                  <el-form-item label="字段类型" :label-width="'70px'" v-if="formItemActive.type === '1'">
+                     <el-radio v-model="formItemActive.fieldType" label="1-1">单行</el-radio>
+                     <el-radio v-model="formItemActive.fieldType" label="1-2">多行</el-radio>
+                     <el-radio v-model="formItemActive.fieldType" label="1-3">带格式</el-radio>
+                  </el-form-item>
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.type === '1'">
+                     <!--输入框判断选中的是多行还是单行-->
+                     <el-input v-if="formItemActive.fieldType != '1-2' && formItemActive.fieldType != '1-3'" maxlength="20" type="text" v-model="formItemActive.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                     <el-input v-if="formItemActive.fieldType == '1-2' || formItemActive.fieldType == '1-3'" maxlength="20" type="textarea" :rows="4" v-model="formItemActive.default" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--号码-->
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.type === '2'">
+                     <el-input maxlength="11" type="text" v-model="formItemActive.default" placeholder="选填，1-11，数字" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--金额-->
+                  <el-form-item label="单位" :label-width="'70px'" v-if="formItemActive.type === '3'">
+                     <el-input autocomplete="off" placeholder="选填" maxlength="20" type="text" v-model="formItemActive.unit" class="input-with-select">
+                        <el-select v-model="formItemActive.fieldType" slot="append" placeholder="请选择">
+                           <el-option label="前缀" value="3-1"></el-option>
+                           <el-option label="后缀" value="3-2"></el-option>
+                        </el-select>
+                     </el-input>
+                  </el-form-item>
+                  <el-form-item label="保留几位小数" :label-width="'70px'" v-if="formItemActive.type === '3'">
+                     <el-input min="0" max="9" type="number" v-model="formItemActive.data4" placeholder="选填，数字" autocomplete="off"></el-input>
+                  </el-form-item>
+                  <el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive.type === '3'">
+                     <el-input max="9999" type="number" v-model="formItemActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--选项和下拉菜单-->
+                  <el-form-item label="字段类型" :label-width="'70px'" v-if="formItemActive.type === '6' || formItemActive.type === '7'">
+                     <el-radio v-model="formItemActive.fieldType" :label="formItemActive.type+'-1'">单选</el-radio>
+                     <el-radio v-model="formItemActive.fieldType" :label="formItemActive.type+'-2'">多选</el-radio>
+                  </el-form-item>
+
+                  <el-form-item label="添加选项" :label-width="'70px'" v-show="(formItemActive.type === '6' || formItemActive.type === '7') && (formItemActive.fieldType == formItemActive.type+'-1' || formItemActive.fieldType == formItemActive.type+'-2')">
+                     <ul class="ms-down-list" id="ms-down-list">
+                        <!--单选-->
+                        <li class="ms-down-item" v-for="(down,index) in formItemActive.downList" v-show="formItemActive.fieldType == formItemActive.type+'-1'">
+                           <i class="iconfont icon-tuodong"></i>
+                           <el-radio class="ms-radio" v-model="formItemActive.downActive" :label="index">默认</el-radio>
+                           <el-input maxlength="20" class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                           <i class="el-icon-delete" @click="formItemActive.downList.splice(index,1)"></i>
+                        </li>
+                        <!--多选-->
+                        <el-checkbox-group id="ms-down-checkbox-list" v-model="formItemActive.downActiveList" v-show="formItemActive.fieldType == formItemActive.type+'-2'">
+                           <li class="ms-down-item" v-for="(down,index) in formItemActive.downList">
+                              <i class="iconfont icon-tuodong"></i>
+                              <el-checkbox class="ms-radio" :label="index">默认</el-checkbox>
+                              <el-input maxlength="20" class="ms-input" v-model="down.value" placeholder="选填，1-20，字符" autocomplete="off"></el-input>
+                              <i class="el-icon-delete" @click="formItemActive.downList.splice(index,1)"></i>
+                           </li>
+                        </el-checkbox-group>
+                        <div class="ms-plus" @click="formItemActive.downList.push({})" v-if="formItemActive.fieldType == formItemActive.type+'-1' || formItemActive.fieldType == formItemActive.type+'-2'">
+                           <i class="el-icon-plus"></i>添加
+                        </div>
+                     </ul>
+                  </el-form-item>
+
+                  <!--上传图片-->
+                  <el-form-item label="图片数量限制" :label-width="'70px'" v-if="formItemActive.type === '9'">
+                     <el-input max="9" type="number" v-model="formItemActive.default" placeholder="选填，数字" autocomplete="off"></el-input>
+                  </el-form-item>
+
+                  <!--上传附件-->
+                  <!--<el-form-item label="默认值" :label-width="'70px'" v-if="formItemActive === '3-7'">
+            </el-form-item>-->
+
+                  <!--设置-->
+                  <el-form-item label="设置" :label-width="'70px'">
+                     <el-checkbox-group v-model="formItemActive.set">
+                        <el-checkbox label="必填"></el-checkbox>
+                        <el-checkbox label="唯一" v-if="formItemActive.type != 5"></el-checkbox>
+                     </el-checkbox-group>
+                  </el-form-item>
+
+                  <!--说明-->
+                  <el-form-item label="填写说明" :label-width="'70px'">
+                     <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formItemActive.explain">
+                     </el-input>
+                  </el-form-item>
+               </el-form>
+
+               <div class="footer">
+                  <el-button size="mini" type="primary">保存</el-button>
+               </div>
+            </div>
+         </el-aside>
+      </el-container>
+   </el-container>
+</div>
+
+<script>
+   var modelFormVue = new Vue({
+      el: "#model-form",
+      data: {
+         typeList: [{
+            title: "文本",
+            icon: "icon-guidang",
+            id: "1",
+         }, {
+            title: "号码",
+            icon: "icon-plus-numberfill",
+            id: "2",
+         }, {
+            title: "金额",
+            icon: "icon-jine",
+            id: "3",
+         }, {
+            title: "数值",
+            icon: "icon-sifaleizhibanshi",
+            id: "4",
+         }, {
+            title: "日期和时间",
+            icon: "icon-riqi",
+            id: "5",
+         }, {
+            title: "选项",
+            icon: "icon-shaixuan",
+            id: "6",
+         }, {
+            title: "下拉菜单",
+            icon: "icon-xiala",
+            id: "7",
+         }, {
+            title: "附件",
+            icon: "icon-fujian",
+            id: "8",
+         }, {
+            title: "图片",
+            icon: "icon-tupian",
+            id: "9",
+         }], //右侧表单项类型
+         formItemList: [{
+            title: "文本", //标题
+            value: "", //内容
+            type: "1", //表单项的类型
+            downList: [], //下拉列表
+            downActiveList: [], //多选列表
+            set: [], //设置
+            unit: '', //金额单位
+            fieldType: '', //字段类型
+         }, {
+            title: "号码",
+            value: "",
+            type: "2",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "金额",
+            value: "",
+            type: "3",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "数值",
+            value: "",
+            type: "4",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "日期和时间",
+            value: "",
+            type: "5",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "选项",
+            value: "",
+            type: "6",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "下拉菜单",
+            value: "",
+            type: "7",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "附件",
+            value: "",
+            type: "8",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, {
+            title: "图片",
+            value: "",
+            type: "9",
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }], //表单项列表
+         formItemActive: {
+            downList: [],
+            downActiveList: [],
+            set: [],
+            unit: '',
+            fieldType: '',
+         }, //选中表单项
+      },
+
+      computed: {
+         //辅助监听对象的属性
+         fieldType() {　　　　
+            return this.formItemActive.fieldType;
+         }
+      },
+
+      watch: {
+         //监听切换表单字段类型
+         fieldType: function(data) {
+            //监听如果切换到发布选项卡
+            if(data == '1-3') {
+               let that = this;
+               //富文本加载
+               var URL = window.UEDITOR_HOME_URL || "http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/";
+               if(this.formItemActive.editor == null) {
+                  //保存这个示例以免在次执行
+                  this.formItemActive.editor = UE.getEditor('ms-ueditor-' + this.formItemActive.id, {
+                     toolbars: [
+                        ['fullscreen', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough',
+                           'removeformat', 'blockquote',
+                           '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|', 'attachment', 'simpleupload', 'link'
+                        ]
+                     ],
+                     imageScaleEnabled: true,
+                     // 服务器统一请求接口路径
+                     serverUrl: URL + "jsp/msController.jsp?jsonConfig=%7BvideoUrlPrefix:'http://mpm.mingsoft.net/',fileUrlPrefix:'http://mpm.mingsoft.net/',imageUrlPrefix:'http://mpm.mingsoft.net/',imagePathFormat:'/upload/pm/editor/%7Btime%7D',filePathFormat:'/upload/pm/editor/%7Btime%7D',videoPathFormat:'/upload/pm/editor/%7Btime%7D'%7D",
+                     autoHeightEnabled: true,
+                     autoFloatEnabled: true,
+                     scaleEnabled: false,
+                     compressSide: 0,
+                     maxImageSideLength: 2000,
+                     maximumWords: 80000,
+                     zIndex: 10000,
+                     elementPathEnabled: false,
+                     wordCount: false,
+                     initialFrameWidth: '100%',
+                     initialFrameHeight: 160,
+                  });
+               }
+            }
+         },
+         //监听切换表单元素
+         formItemActive: function(data) {
+            //切换控件类型时
+            if(data.type == '6' || data.type == '7') {
+               this.$nextTick(function() {
+                  if(this.downListSortable == null) {
+                     this.downListSortable = new Sortable(document.getElementById("ms-down-list"), {
+                        animation: 150,
+                        draggable: '.ms-down-item',
+                        handle: '.icon-tuodong', //设置只有小图标可以拖动
+                        ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
+                     });
+                  }
+                  if(this.downListCheckboxSortable == null) {
+                     this.downListCheckboxSortable = new Sortable(document.getElementById("ms-down-checkbox-list"), {
+                        animation: 150,
+                        draggable: '.ms-down-item',
+                        handle: '.icon-tuodong', //设置只有小图标可以拖动
+                        ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
+                     });
+                  }
+               })
+            }
+         }
+      },
+      methods: {},
+   })
+</script>

src/main/webapp/WEB-INF/manager/mdiy/diy-model/index.ftl

@@ -0,0 +1,100 @@
+<link rel="stylesheet" href="../../../static/mdiy/css/model-list.css">
+
+<div id="model-list" class="ms-mdiy-model-list" v-if="href == '列表'">
+   <el-container>
+      <el-header class="ms-header" height="50px">
+         <el-row>
+            <el-button size="small" icon="el-icon-plus" type="primary">保存</el-button>
+            <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
+            <el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
+         </el-row>
+      </el-header>
+      <el-container>
+         <el-header class="ms-tr ms-header">
+            <el-select v-model="value" placeholder="请选择" size="small">
+            </el-select>
+            <el-button size="small" icon="el-icon-search" type="primary">查询</el-button>
+         </el-header>
+         <el-main>
+            <el-table :data="tableData" border style="width: 100%">
+               <el-table-column label="规则名">
+                  <template slot-scope="scope">
+                     <el-button type="text" v-text="scope.row.data" @click="href='表单'"></el-button>
+                  </template>
+               </el-table-column>
+               <el-table-column prop="name" label="发送对象">
+               </el-table-column>
+            </el-table>
+         </el-main>
+      </el-container>
+   </el-container>
+</div>
+
+<script>
+   var modelListVue = new Vue({
+      el: "#model-list",
+      data: {
+         value: "", //
+         tableData: [{
+            data: '项目玩法',
+            name: '王小虎',
+         }, {
+            data: '综合评估',
+            name: '王小虎',
+         }, {
+            data: '产权出售',
+            name: '王小虎',
+         }, {
+            data: '兵不匹配移动端',
+            name: '王小虎',
+         }],
+         href: '列表', //切换页面
+         addInputType: {}, //添加中的表单项
+      },
+      watch: {
+         href: function(data) {
+            var that = this;
+            if(data == '表单') {
+               this.$nextTick(function() {
+                  new Sortable(document.getElementById("ms-type-list"), {
+                     group: {
+                        name: 'shared',
+                        pull: 'clone',
+                        ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
+                     },
+                     animation: 150,
+                     sort: false,
+                     onStart: function(event) {
+                        //准备拖动时保存拖动选项的数据
+                        that.addInputType = {
+                           type: event.item.dataset.type,
+                           title: event.item.dataset.title,
+                           downList: [], //下拉列表
+                           downActiveList: [], //多选列表
+                           set: [], //设置
+                           unit: '', //金额单位
+                           fieldType: '', //字段类型
+                        };
+                     },
+                  });
+                  new Sortable(document.getElementById("ms-input-list"), {
+                     group: {
+                        name: 'shared',
+                        pull: false,
+                        ghostClass: 'sortable-ghost', //设置拖动时候显示的样式
+                     },
+                     animation: 150,
+                     onAdd: function(event) {
+                        //拖动成功后删除拖动过来的元素
+                        event.item.parentNode.removeChild(event.item);
+                        //想素组添加拖动过来的选项选项
+                        modelFormVue.formItemList.splice(event.newIndex, 0, that.addInputType);
+                     },
+                  });
+               })
+            }
+         }
+      },
+      methods: {},
+   })
+</script>

src/main/webapp/WEB-INF/manager/mdiy/diy.ftl

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <meta charset="UTF-8">
+      <title></title>
+      <!--#include virtual="../include/head-file.ftl" -->
+   </head>
+   <body>
+      <!--#include virtual="diy-model/index.ftl" -->
+      <!--#include virtual="diy-model/form.ftl" -->
+   </body>
+</html>

src/main/webapp/WEB-INF/manager/mweixin/menu.ftl

@@ -16,9 +16,9 @@
          <el-menu class="ms-admin-menu-menu" default-active="0-0">
             <template v-for="(menu,i) in menuList">
                <!--单个选项-->
-               <el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title"></el-menu-item>
+               <el-menu-item :index="i" @click="menuActive = menu.title" v-if="!menu.sub" v-text="menu.title" class="ms-admin-menu-menu-item"></el-menu-item>
                <!--多个选项-->
-               <el-submenu :index="i+''" v-if="menu.sub">
+               <el-submenu :index="i+''" v-if="menu.sub" class="ms-admin-submenu">
                   <template slot="title">
                      <span v-text="menu.title"></span>
                   </template>

src/main/webapp/WEB-INF/manager/mweixin/menu/index.ftl

@@ -1,94 +1,320 @@
 <!-- 自定义菜单 -->
-<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css">
+<link rel="stylesheet" href="../../../../static/mweixin/css/custom-menu.css" />
 <div id="custom-menu" class="ms-custom-menu ms-weixin-content" v-if="menuVue.menuActive == '自定义菜单'">
-   <el-container class="ms-custom-container">
-      <el-header class="ms-header" height="50px">
-         <el-row>
-            <el-button type="danger" size="small" icon="el-icon-delet">删除</el-button>
-            <el-button class="ms-fr" size="small" icon="el-icon-refresh">重置</el-button>
-            <el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets">保存</el-button>
-         </el-row>
-      </el-header>
-      <el-container class="ms-container">
-         <el-aside>
-            <el-container>
-               <el-header>公众号</el-header>
-               <el-main></el-main>
-               <el-footer>
-                  <el-button icon="el-icon-date"></el-button>
-                  <div class="ms-create-menu">
-                     <div class="ms-create-sub-menu">
-                        <el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button>
-                        <el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button>
-                     </div>
-                     <el-button icon="el-icon-plus"></el-button>
-                  </div>
-               </el-footer>
-            </el-container>
-         </el-aside>
-         <el-main>
-            <el-card class="custom-menu-card" shadow="never">
-               <div slot="header" class="clearfix">
-                  <span>新建菜单</span>
-               </div>
-               <el-form ref="customMenuForm" :rule='customMenuFormRules' :model="customMenuForm" label-width="80px">
-                  <el-form-item label="菜单名称" prop='name' class="ms-custom-menu-name">
-                     <el-input v-model="customMenuForm.name" size='mini'></el-input>
-                     <span>菜单名称字数不多于5个汉字或10个字母</span>
-                  </el-form-item>
-                  <el-form-item label="菜单内容" class="ms-custom-menu-content">
-                     <el-tabs v-model="activeName" @tab-click="">
-                        <el-tab-pane label="图片" name="picture">
-                           <span slot="label">
-                              <i class="el-icon-picture"></i>图片</span>
-                           <div onclick="materialBankFormVue.open()">
-                              <i class="el-icon-picture-outline"></i>
-                              <span>从素材库选择</span>
-                           </div>
-                           <div onclick="newPicFormVue.open()">
-                              <i class="el-icon-plus"></i>
-                              <span>新建图片</span>
-                           </div>
-                        </el-tab-pane>
-                        <el-tab-pane label="图文管理" name="article">
-                           <span slot="label">
-                              <i class="el-icon-picture"></i>图文管理</span>
-                        </el-tab-pane>
-                     </el-tabs>
-                  </el-form-item>
-               </el-form>
-            </el-card>
-         </el-main>
-      </el-container>
-   </el-container>
+	<el-container class="ms-custom-container">
+		<el-header class="ms-header" height="50px">
+			<el-row>
+				<el-button type="danger" size="small" icon="el-icon-delet" @click='menuDel'>删除</el-button>
+				<el-button size="small" @click="menuSort">菜单排序</el-button>
+				<el-button class="ms-fr" size="small" icon="el-icon-refresh" @click='resetForm'>重置</el-button>
+				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuSave'>保存</el-button>
+				<el-button type="success" class="ms-fr" size="small" icon="el-icon-tickets" @click='menuCreate'>发布菜单</el-button>
+			</el-row>
+		</el-header>
+		<el-container class="ms-container">
+			<el-aside>
+				<el-container>
+					<el-header>公众号</el-header>
+					<el-main></el-main>
+					<el-footer>
+						<el-button icon="el-icon-date"></el-button>
+						<div class="ms-create-menu">
+							<div class="ms-create-sub-menu" v-for="(menu,index) of mainMenuList" :key="index">
+								<!-- 父菜单 -->
+								<el-button type="primary" @click="openSubMenu(index,menu);menu.addSubMenuShow = !menu.addSubMenuShow;$forceUpdate()">{{
+									menu.menuTitle }}</el-button>
+								<div class="sub-menu-list" v-show="menu.addSubMenuShow">
+									<!-- 子菜单 -->
+									<el-button v-for="(sub,index) of currentSubMenuList" :key="index" v-text="sub.menuTitle" class="sub-menu-item"
+									 @click='customMenuForm = sub;$forceUpdate();'></el-button>
+									<!-- 添加子菜单的加号按钮 -->
+									<el-button icon="el-icon-plus" class="ms-create-btn" @click="addSubMenu"></el-button>
+								</div>
+							</div>
+							<!-- 添加父菜单的加号按钮 -->
+							<el-button icon="el-icon-plus" @click="addMenu" v-show="addMenuBtn && mainMenuList.length<3" class="add-menu"></el-button>
+						</div>
+					</el-footer>
+				</el-container>
+			</el-aside>
+			<el-main>
+				<el-card class="custom-menu-card" shadow="never">
+					<div slot="header" class="clearfix">
+						<span v-text="customMenuForm.menuId ? '修改菜单' : '新建菜单'"></span>
+					</div>
+					<el-form ref="customMenuForm" :rules="customMenuFormRules" :model="customMenuForm" label-width="81px">
+						<el-form-item label="菜单名称" prop="menuTitle" class="ms-custom-menu-name">
+							<el-input v-model="customMenuForm.menuTitle" size="medium"></el-input>
+							<span>菜单名称字数不多于5个汉字或10个字母</span>
+						</el-form-item>
+						<el-form-item label="菜单内容" class="ms-custom-menu-content" prop='menuUrl'>
+							<el-input v-model="customMenuForm.menuUrl" size="medium"></el-input>
+							<span>请输入菜单地址</span>
+							<!-- <el-tabs v-model="activeName" @tab-click="">
+								<el-tab-pane label="图片" name="picture">
+									<span slot="label">
+										<i class="el-icon-picture"></i>图片</span>
+									<div onclick="materialBankFormVue.open()">
+										<i class="el-icon-picture-outline"></i>
+										<span>从素材库选择</span>
+									</div>
+									<div onclick="newPicFormVue.open()">
+										<i class="el-icon-plus"></i>
+										<span>新建图片</span>
+									</div>
+								</el-tab-pane>
+								<el-tab-pane label="图文管理" name="article">
+									<span slot="label">
+										<i class="el-icon-picture"></i>图文管理</span>
+									<div onclick="materialBankFormVue.open()">
+										<i class="el-icon-picture-outline"></i>
+										<span>从素材库选择</span>
+									</div>
+									<div onclick="newPicFormVue.open()">
+										<i class="el-icon-plus"></i>
+										<span>新建图文</span>
+									</div>
+								</el-tab-pane>
+							</el-tabs> -->
+						</el-form-item>
+					</el-form>
+				</el-card>
+			</el-main>
+		</el-container>
+	</el-container>
 </div>
 <script>
-   var customMenuVue = new Vue({
-      el: "#custom-menu",
-      data: {
-         customMenuForm: {
-            name: '',
-         },
-         customMenuFormRules: {
-            name: [{
-                  required: true,
-                  message: '请输入菜单名称',
-                  trigger: ['blur', 'change']
-               },
-               {
-                  min: 1,
-                  max: 5,
-                  message: '长度在 1 到 5 个字符',
-                  trigger: ['blur', 'change']
-               }
-            ],
-         },
-         addSubMenuShow: false, //子菜单添加弹窗
-         activeName: 'picture'
-      },
-      methods: {
-
-      }
-
-   })
+	var customMenuVue = new Vue({
+		el: "#custom-menu",
+		data: {
+			customMenuForm: {
+				menuTitle: "",
+				menuUrl: "",
+				menuId: "",
+				menuMenuId: "", //父菜单编号
+				menuStatus: "", //菜单状态 0：不启用 1：启用
+				menuStyle: "", //类型：1文本 2图文 4外链接
+				menuType: "", //菜单属性 0:链接 1:回复
+			},
+			customMenuFormRules: {
+				menuTitle: [{
+						required: true,
+						message: "请输入菜单名称",
+						trigger: ["blur", "change"]
+					},
+					{
+						min: 1,
+						max: 5,
+						message: "长度在 1 到 5 个字符",
+						trigger: ["blur", "change"]
+					}
+				],
+				menuUrl: [{
+					required: true,
+					message: '请输入菜单地址',
+					trigger: 'change'
+				}, {
+					validator: function (rule, value, callback) {
+						/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
+							callback() : callback('链接不合法')
+					}
+				}]
+			},
+			addMenuBtn: true, //添加菜单按钮
+			activeName: "picture", //导航切换  当前激活面板
+			mainMenuList: [],
+			subMenuList: [], //所有的子菜单
+			currentSubMenuList: [], //打开当前父菜单的子菜单列表
+			currentMenuMenuId: '', //打开当前父菜单的菜单ID
+		},
+		methods: {
+			menuList: function () {
+				var that = this;
+				ms.http.get(ms.manager + "/mweixin/menu/list.do")
+					.then((res) => {
+						console.log('res菜单', res);
+						that.mainMenuList = []
+						that.subMenuList = []
+						res.rows && res.rows.forEach(function (item, index) {
+							item.menuMenuId == null && that.mainMenuList.push(item)
+							item.menuMenuId != null && that.subMenuList.push(item)
+						})
+						// 初始化显示第一个菜单
+						if(that.mainMenuList.length){
+							that.customMenuForm = that.mainMenuList[0]
+						}else{
+							that.mainMenuList.push(that.customMenuForm)
+							// 没有一个菜单的时候
+							that.mainMenuList[0].menuTitle = '新建菜单'
+						}
+					}, (err) => {
+						console.log(err)
+					})
+			},
+			// 菜单排序
+			menuSort: function () {
+				event.target.innerText = "完成";
+			},
+			// 添加菜单
+			addMenu: function () {
+				this.mainMenuList.push({
+					menuTitle: "新建菜单"
+				});
+				this.$nextTick(function () {
+					var that = this;
+					Array.prototype.forEach.call(
+						document.querySelectorAll(".ms-create-sub-menu"),
+						function (item, index) {
+							item.style.width = '80px';
+						}
+					);
+					document.querySelector(".add-menu").style.width = '80px';
+				});
+				if (this.mainMenuList.length == 3) {
+					return (this.addMenuBtn = false);
+				}
+			},
+			// 添加子菜单
+			addSubMenu: function () {
+				if(!this.currentMenuMenuId){
+					return this.$message.error("创建子菜单前，必须先创建父菜单");
+				}
+				if (this.currentSubMenuList.length > 4) {
+					return this.$message.error("子菜单最多5项");
+				}
+				var that = this;
+				console.log('that.currentMenuMenuId', that.currentMenuMenuId);
+				this.currentSubMenuList.push({
+					menuTitle: "新建子菜单",
+					menuMenuId: that.currentMenuMenuId,
+				});
+				console.log('currentSubMenuList', this.currentSubMenuList);
+			},
+			openSubMenu(index, menu) {
+				console.log('menu', menu);
+				var that = this;
+				that.customMenuForm = menu
+				that.closeAllSubMenu(index);
+				that.currentSubMenuList = [];
+				that.currentMenuMenuId = menu.menuId;
+				console.log('that.subMenuList', that.subMenuList);
+				that.subMenuList.forEach(function (item, index) {
+					item.menuMenuId == menu.menuId && that.currentSubMenuList.push(item)
+				})
+			},
+			// 关闭所有的子菜单弹出层
+			closeAllSubMenu: function (num) {
+				// 确保当前的菜单不被重置成false
+				this.mainMenuList.forEach(function (item, index) {
+					num != index && (item.addSubMenuShow = false)
+				})
+			},
+			// 保存菜单
+			menuSave: function () {
+				// 表单校验
+				var that = this;
+				this.$refs.customMenuForm.validate(function (ispass, object) {
+					if (ispass) {
+						// 判断保存的菜单类型，这里先简单处理，写死
+						that.customMenuForm.menuStatus = 1
+						that.customMenuForm.menuStyle = 4 //类型：1文本 2图文 4外链接
+						that.customMenuForm.menuType = 0 //菜单属性 0:链接 1:回复
+						ms.http.post(ms.manager + "/mweixin/menu/save.do", that.customMenuForm)
+							.then(function (res) {
+								that.customMenuForm.menuStatus = that.customMenuForm.menuStyle = that.customMenuForm.menuType = ''
+								if(res.menuId){
+									that.$message.success('菜单保存成功')
+									that.menuList();
+								}else{
+									that.$message.error(res.resultMsg)
+								}
+							}, function (err) {
+								console.log(err)
+							})
+					}
+				})
+			},
+			// 删除菜单
+			menuDel: function () {
+				var that = this;
+				// 当存在子菜单的时候，不得删除菜单
+				if(that.customMenuForm.menuMenuId == null && that.currentSubMenuList.length){
+					return that.$message.error('当前菜单存在子菜单，不得删除')
+				}
+				if(!that.customMenuForm.menuId){
+					return that.$message.error('请新建菜单之后，再进行删除')
+				}
+				this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					ms.http.post(ms.manager + "/mweixin/menu/delete.do", {
+							ids: that.customMenuForm.menuId
+						})
+						.then(function (res) {
+							that.$message({
+								type: 'success',
+								message: '删除成功!'
+							});
+							// 清空表单值
+							that.resetForm();
+							// 刷新菜单列表
+							that.menuList();
+						}, function (err) {
+							console.log(err)
+						})
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除'
+					});
+				})
+			},
+			// 发布菜单
+			menuCreate: function () {
+				var that = this;
+				this.$confirm('此操作将发布公众号菜单, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					ms.http.get(ms.manager + "/mweixin/menu/create.do")
+						.then(function (res) {
+							if(res.result){
+								that.$message({
+									type: 'success',
+									message: '发布成功!，菜单将于2小时后生效'
+								});
+							}else{
+								that.$message({
+									type: 'error',
+									message: '发布失败！'
+								});
+							}
+						}, function (err) {
+							console.log(err)
+						})
+				}).catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除'
+					});
+				})
+			},
+			// 重置
+			resetForm:function(){
+				// this.$refs.customMenuForm.resetFields();未在表单中，清空不了
+				this.customMenuForm.menuStatus = 
+				this.customMenuForm.menuStyle = 
+				this.customMenuForm.menuType = 
+				this.customMenuForm.menuTitle = 
+				this.customMenuForm.menuUrl = 
+				''
+			}
+		},
+		mounted: function () {
+			this.menuList();
+		},
+	});
 </script>

src/main/webapp/WEB-INF/manager/mweixin/menu/new-pic-form.ftl

@@ -4,11 +4,7 @@
     <el-dialog title="选择图片" :visible.sync="isShow" custom-class='ms-weixin-dialog'>
         <el-form :model="newPicForm">
             <el-form-item label="上传图片" label-width="100px">
-                    <el-upload
-                    class="new-pic-upload"
-                    :on-preview="handlePreview"
-                    :on-remove="handleRemove"
-                    :file-list="picList"
+                <el-upload class="new-pic-upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="picList"
                     list-type="picture">
                     <el-button size="small" type="primary">本地上传</el-button>
                     <div slot="tip" class="el-upload__tip">
@@ -16,12 +12,22 @@
                             <dt>注意：1.图片上传仅支持bmp、png、jpeg、jpg、gif格式</dt>
                             <dd>2.同步至微信公众平台的图片最大2M,存在铭飞本地，最大支持5M的图片</dd>
                         </dl>
-                        
                     </div>
-                  </el-upload>
+                </el-upload>
             </el-form-item>
             <el-form-item label="选择分组" label-width="100px">
-                <el-button icon='el-icon-plus' size='mini'>添加分组</el-button>
+                <el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
+                    <el-form label-width="81px" :model="groupForm" ref="groupForm" :rules='groupRule'>
+                        <el-form-item label="创建分组" prop='name'>
+                            <el-input v-model="groupForm.name" size='mini'></el-input>
+                        </el-form-item>
+                        <div class="dialog-footer" style="float:right">
+                            <el-button @click="cancel" size='mini'>取消</el-button>
+                            <el-button type="primary" @click="saveGroup" size='mini'>确定</el-button>
+                        </div>
+                    </el-form>
+                    <el-button slot="reference" icon='el-icon-plus' size='mini'>添加分组</el-button>
+                </el-popover>
                 <el-select v-model="selectedOption" placeholder="请选择分组" size='mini'>
                     <el-option v-for="item in picGroup" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
@@ -35,40 +41,73 @@
     </el-dialog>
 </div>
 <script>
-var newPicFormVue = new Vue({
-    el: '#new-pic-form',
-    data: {
-        isShow: false,
-        newPicForm: {
+    var newPicFormVue = new Vue({
+        el: '#new-pic-form',
+        data: {
+            isShow: false,
+            newPicForm: {
 
-        },
-        picGroup: [{
-                value: 'default',
-                label: '默认分组'
-            }, {
-                value: 'yun',
-                label: '云创'
             },
-            {
-                value: 'pm',
-                label: 'PM管理系统'
-            }],
-        selectedOption:'',//被选中的选项
-        picList:[],//图片列表
-    },
-    methods: {
-        // 表单打开
-        open: function () {
-            this.isShow = true;
+            picGroup: [{
+                    value: 'default',
+                    label: '默认分组'
+                }, {
+                    value: 'yun',
+                    label: '云创'
+                },
+                {
+                    value: 'pm',
+                    label: 'PM管理系统'
+                }
+            ],
+            selectedOption: '', //被选中的选项
+            picList: [], //图片列表
+            popoverShow: false,
+            groupForm: { //创建分组
+                name: ''
+            },
+            // 规则
+            groupRule: {
+                name: [{
+                        required: true,
+                        message: '请输入分组名称',
+                        trigger: ['blur', 'change']
+                    },
+                    {
+                        min: 1,
+                        max: 5,
+                        message: '长度在 1 到 5 个字符',
+                        trigger: ['blur', 'change']
+                    }
+                ]
+            }
         },
-        // 图片刚加载完
-        handlePreview:function(){
+        methods: {
+            // 表单打开
+            open: function () {
+                this.isShow = true;
+            },
+            // 图片刚加载完
+            handlePreview: function () {
 
-        },
-        // 图片删除
-        handleRemove:function(){
+            },
+            // 图片删除
+            handleRemove: function () {
+
+            },
+            saveGroup: function () {
+                var that = this;
+                that.$refs.groupForm.validate(function (pass, object) {
+                    if (pass) {
+                        // 校验成功
+                    }
+                })
+            },
+            cancel: function () {
+                this.popoverShow = false
+                this.$refs.groupForm.resetFields()
+            },
 
         },
-    },
-})
+    })
 </script>

src/main/webapp/WEB-INF/manager/mweixin/message/index.ftl

@@ -24,15 +24,52 @@
                         <i class="el-icon-delete" @click="messageReplyForm.reply = ''"></i>
                         <div class="footer">
                            <i class="el-icon-star-off"></i>
-                           <a>插入超链接</a>
+                           <!-- 插入超链接 -->
+                           <el-popover placement="top-start" width="350" trigger="click" v-model='popoverShow'>
+                              <el-form label-width="81px" :model="hyperlinkForm" ref="hyperlinkForm" :rules='hyperlinkRule'>
+                                 <el-form-item label="文本内容" prop='text'>
+                                    <el-input v-model="hyperlinkForm.text" size='mini'></el-input>
+                                 </el-form-item>
+                                 <el-form-item label="链接地址" prop='link'>
+                                    <el-input v-model="hyperlinkForm.link" size='mini'></el-input>
+                                 </el-form-item>
+                                 <el-form-item style="margin:0">
+                                    <el-row type='flex' justify='end'>
+                                       <el-col span='6'>
+                                          <el-button type="primary" @click="saveLink" size='mini'>保存</el-button>
+                                       </el-col>
+                                       <el-col span='6'>
+                                          <el-button @click="cancelLink" size='mini'>取消</el-button>
+                                       </el-col>
+                                    </el-row>
+                                 </el-form-item>
+                              </el-form>
+                              <a slot="reference">插入超链接</a>
+                           </el-popover>
                         </div>
                      </el-form-item>
                   </el-form>
                   </el-form>
                </el-tab-pane>
-               <el-tab-pane label="图片" name="picture">
+               <el-tab-pane label="图片" name="picture" class="message-reply-picture">
+                  <div onclick="materialBankFormVue.open()">
+                     <i class="el-icon-picture-outline"></i>
+                     <span>从素材库选择</span>
+                  </div>
+                  <div onclick="newPicFormVue.open()">
+                     <i class="el-icon-plus"></i>
+                     <span>新建图片</span>
+                  </div>
                </el-tab-pane>
-               <el-tab-pane label="图文" name="article">
+               <el-tab-pane label="图文" name="article" class="message-reply-article">
+                  <div onclick="materialBankFormVue.open()">
+                     <i class="el-icon-picture-outline"></i>
+                     <span>从素材库选择</span>
+                  </div>
+                  <div onclick="newPicFormVue.open()">
+                     <i class="el-icon-plus"></i>
+                     <span>新建图文</span>
+                  </div>
                </el-tab-pane>
             </el-tabs>
          </em-main>
@@ -61,9 +98,54 @@
             ],
          },
          activeName: 'text',
+         // 超链接
+         hyperlinkForm: {
+            text: "",
+            link: "",
+         },
+         hyperlinkRule: {
+            text: [{
+                  required: true,
+                  message: '请输入超链接显示的文本内容',
+                  trigger: 'blur'
+               },
+               {
+                  min: 1,
+                  max: 50,
+                  message: '长度在 1 到 50 个字符',
+                  trigger: 'blur'
+               }
+            ],
+            link: [{
+               required: true,
+               message: '请输入超链接地址',
+               trigger: 'change'
+            }, {
+               validator: function(rule, value, callback) {
+                  /^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?$/.test(value) ?
+                     callback() : callback('链接不合法')
+               }
+            }],
+         },
+         popoverShow: false, //弹出层显示与否的状态值
       },
       methods: {
-
+         // 保存超链接
+         saveLink: function() {
+            var that = this;
+            that.$refs.hyperlinkForm.validate(function(boolean, object) {
+               if(boolean) {
+                  // 校验成功
+                  that.messageReplyForm.reply = that.messageReplyForm.reply + `<a href=${that.hyperlinkForm.link}>${that.hyperlinkForm.text}</a>`
+                  that.cancelLink()
+               }
+            })
+         },
+         // 取消超链接
+         cancelLink: function() {
+            this.$refs.hyperlinkForm.resetFields();
+            this.popoverShow = false
+         },
       }
 
    })

src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl

@@ -5,25 +5,28 @@
       <!--右侧头部-->
       <el-header class="ms-header" height="50px">
          <el-row>
+            <!-- 添加隐藏按钮，主要是为了产生间距 -->
+            <el-button size="small" type="text"></el-button>
             <el-button class="ms-fr" size="small" icon="el-icon-arrow-left" @click="menuVue.menuActive = '关键词回复'">返回</el-button>
             <el-button class="ms-fr" size="small" icon="el-icon-refresh">更新</el-button>
             <el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
          </el-row>
       </el-header>
-      <el-container class=" ms-container">
+      <el-container class="ms-container">
          <el-aside width="280px">
              <!-- 主图文章 -->
-            <div class="ms-main-article">
-               <img :src="mainArticle.basicPic ||　ms.base+'/WEB-INF/manager/images/data/article-default.png'">
+            <div class="ms-main-article" @click='openMainArticle'>
+               <img :src="mainArticle.thumbnailUrl ||　ms.base+'/WEB-INF/manager/images/article-default.png'">
                <div class="ms-article-mask"></div>
                <span v-text='mainArticle.basicTitle'></span>
             </div>
             <draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
-               <div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='addOrUpdateSubArticle(element)'>
+               <div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='updateSubArticle(element,index)'>
                   <p>
                      <span v-text='element.basicTitle'></span>
                   </p>
-                  <img :src='element.basicThumbnails'>
+                  <img :src="element.basicThumbnails ||　ms.base+'/WEB-INF/manager/images/article-default-thumb.jpg'">
+                  <div class="ms-article-item-mask"><i class="el-icon-delete" @click='subArticleList.splice(index,1)'></i></div>
                </div>
             </draggable>
             <div class="ms-article-footer">
@@ -43,9 +46,9 @@
                     :data={uploadFloderPath:"/mweixin/news"}
                 >
                 <div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
-                    <i class="el-icon-delete" @click="thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
+                    <i class="el-icon-delete" @click="articleForm.thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
                 </div>
-                <img v-if="thumbnailShow" :src="thumbnailUrl"
+                <img v-if="thumbnailShow" :src="articleForm.thumbnailUrl"
                 class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
                 <template v-else>
                     <i class="el-icon-picture"></i>
@@ -54,12 +57,12 @@
                </el-upload>
                <el-form label-width='40px'>
                   <el-form-item label="标题" prop="">
-                     <el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('basicTitle',64)">
+                     <el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.self="resetWordNum('basicTitle',64)">
                         <span slot='suffix' v-text="titleWordNumber+'/64'"></span>
                      </el-input>
                   </el-form-item>
                   <el-form-item label="作者" prop="">
-                     <el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('articleAuthor',8)">
+                     <el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.self="resetWordNum('articleAuthor',8)">
                         <span slot='suffix' v-text="authorWordNumber+'/8'"></span>
                      </el-input>
                   </el-form-item>
@@ -84,8 +87,12 @@
       el: '#article',
       data: {
          mainArticle: {
-            basicPic: '', //主图
             basicTitle: '', //标题
+            articleAuthor: '', //作者
+            basicDescription: '', //摘要
+            articleContent: '', //正文
+            basicThumbnails:'',//上传封面图片的url
+            thumbnailUrl:'',//缩略图全路径
          },
          defaultMainArticle:'',//拷贝主图信息
          subArticleList: [],// 子文章列表
@@ -99,10 +106,13 @@
             articleAuthor: '', //作者
             basicDescription: '', //摘要
             articleContent: '', //正文
+            basicThumbnails:'',//上传封面图片的url
+            thumbnailUrl:'',//缩略图全路径
          },
+        //  文章素材，包括主图文，子图文
+         articleList:[],
          defaultArticleForm:'',//拷贝表单值
          thumbnailShow:false,//显示缩略图
-         thumbnailUrl:'',//缩略图路径
          headMask:false,//缩略图删除
          uploadDisable:false,//是否禁止上传
          newsCategoryId:'',//微信分类编号
@@ -110,13 +120,24 @@
       watch:{
             articleForm:{
                 handler:function(n,o){
-                    this.mainArticle.basicTitle = n.basicTitle
+                    this.articleList.length || (this.mainArticle.basicTitle = n.basicTitle)
+                    console.log('n文章',n);
+                },
+                deep:true,
+            },
+            editorCurrentContent:{
+                handler:function(n,o){
+                    console.log('n文章',n);
+                    this.articleForm.articleContent = n
+                },
+                deep:true,
+            },
+            mainArticle:{
+                handler:function(n,o){
+                    console.log('n文章444444444444444',n);
                 },
                 deep:true,
             },
-            editorCurrentContent:function(n,o){
-                
-            }
       },
       methods: {
           open:function(material){
@@ -135,37 +156,68 @@
         //   图片上传成功函数
         basicPicSuccess:function(url){
             this.thumbnailShow = this.uploadDisable = true
-            this.thumbnailUrl = ms.web + url
-            this.mainArticle.basicPic = this.thumbnailUrl
+            this.mainArticle.thumbnailUrl = this.articleForm.thumbnailUrl = ms.web + url
+            this.articleForm.basicThumbnails = url
         },
          // 添加文章
          addArticle: function() {
+            console.log('this.articleForm1111111',this.articleForm);
             if(this.subArticleList.length > 6) {
-               this.$notify({
+                return this.$notify({
                   title: '添加失败',
                   message: '最大图文数量为7',
                   type: 'warning'
                });
-               return;
             }
+            // 将主图文单独存于数组中
+            if(!this.articleList.length){
+                this.mainArticle = this.articleForm
+            }
+            console.log('this.articleForm99999999999999',this.articleForm);
+            // 清空百度编辑器
+            this.editor.setContent('')
+            // 将左侧表单的内容存放到数组中
+            this.articleList.push(this.articleForm)
+            // 清空表单
+            console.log('this.articleForm',this.articleForm);
+            console.log('this.articleList',this.articleList);
+            this.articleForm = {
+                basicTitle: '', 
+                articleAuthor: '', 
+                basicDescription: '', 
+                articleContent: '', 
+                basicThumbnails:'',
+                thumbnailUrl:'',
+            }
+            this.thumbnailShow = false //显示上传图标
             this.subArticleList.push({
-               basicTitle: '新增文章标题',
-               basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
+                basicTitle: '', 
+                articleAuthor: '', 
+                basicDescription: '', 
+                articleContent: '', 
+                basicThumbnails:'',
+                thumbnailUrl:'',
             })
          },
-        //  更新或修改子文章
-         addOrUpdateSubArticle:function(element){
-             if(element.articleBasicId>0){
-                 
-             }
+        // 打开修改子文章
+         updateSubArticle:function(element,index){
+             this.articleForm = element
          },
+          // 打开 主文章
+        openMainArticle:function(){
+            this.thumbnailShow = true //显示上传图标
+            this.articleForm = this.mainArticle
+        },
          // 计算剩余字数
          resetWordNum: function(type,limit) {
+             var target = event.target
              type.indexOf('Title') > -1 ? this.titleWordNumber = limit - event.target.value.length : this.authorWordNumber = limit - event.target.value.length
              if(event.target.value.length >= limit){
                  this.$message.error('超出字数限制，请输入不超过'+limit+'字符');
                  this.$nextTick(function(){
-                     this.articleForm[type] = event.target.value.slice(0,limit);
+                    //  这里的event的type是message
+                     this.articleForm[type] = target.value.slice(0,limit-1);
+                     console.log('this.articleForm[type]',this.articleForm[type]);
                  })
              }
          },
@@ -188,10 +240,10 @@
                 that.$message.error(err);
             })
         },
-        // 表单重置
+        // 表单重置 新建和修改场景
         resetForm:function(material){
             this.thumbnailShow = material ? true : false
-            this.thumbnailUrl = material ?  material.newsArticle.basicPic : ''
+            this.articleForm.thumbnailUrl = material ?  material.newsArticle.basicPic : ''
 
             this.mainArticle.basicPic = material ? material.newsArticle.basicPic : ''
             this.mainArticle.basicTitle = material ? material.newsArticle.basicTitle : ''
@@ -206,7 +258,7 @@
 
             this.subArticleList = material ? material.articleList : [];
             this.$forceUpdate();  
-        }
+        },
       },
       mounted: function() {
          let that = this;

src/main/webapp/WEB-INF/manager/mweixin/metarial/index.ftl

@@ -12,7 +12,7 @@
 		</el-header>
 		<el-container>
 			<!--内容头部-->
-			<el-header class="ms-tr ms-header">
+			<el-header class="ms-tr ms-header ms-header-select">
 				<el-select v-model="value1" placeholder="请选择" size="small">
 					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
 					</el-option>

src/main/webapp/WEB-INF/manager/mweixin/picture/index.ftl

@@ -1,100 +1,100 @@
-<!--图文素材页-->
+<!--图片素材页-->
 <link rel="stylesheet" href="../../../static/mweixin/css/picture-list.css">
 <div id="picture-list-vue" v-if="menuVue.menuActive == '图片'" class="ms-weixin-content">
-   <el-container class="ms-admin-picture">
-      <!--右侧头部-->
-      <el-header class="ms-header" height="50px">
-         <el-row>
-            <el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
-            <el-button class="ms-fr" size="small" icon="el-icon-refresh">刷新</el-button>
-            <el-button class="ms-fr" size="small">同步微信素材</el-button>
-         </el-row>
-      </el-header>
-      <el-container>
-         <!--内容头部-->
-         <el-header class="ms-tr ms-header">
-            <el-select v-model="value1" placeholder="请选择" size="small">
-               <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
-               </el-option>
-            </el-select>
-            <el-select v-model="value2" placeholder="请选择" size="small">
-               <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
-               </el-option>
-            </el-select>
-            <el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
-         </el-header>
-         <!--素材列表-->
-         <el-main class="ms-admin-picture-list">
-            <el-container>
-               <el-aside class="ms-admin-picture-item">
-                  <div v-for="picture in pictureList">
-                     <div class="body">
-                        <img :src="picture.img" />
-                        <div>
-                           <input type="checkbox" />
-                           <span v-text="picture.title"></span>
-                        </div>
-                     </div>
-                     <div class="footer">
-                        <i class="el-icon-edit"></i>
-                        <em></em>
-                        <i class="el-icon-download"></i>
-                        <em></em>
-                        <i class="el-icon-delete"></i>
-                     </div>
-                  </div>
-               </el-aside>
-               <el-main class="ms-admin-picture-show">
-                  <span>全部图片（6）</span>
-                  <div>
-                     <span>小米（1）</span>
-                     <i class="el-icon-edit"></i>
-                     <i class="el-icon-delete"></i>
-                  </div>
-                  <div>
-                     <span>小米（1）</span>
-                     <i class="el-icon-edit"></i>
-                     <i class="el-icon-delete"></i>
-                  </div>
-                  <p>
-                     <i class="el-icon-plus"></i>新建分组</p>
-               </el-main>
-            </el-container>
+	<el-container class="ms-admin-picture">
+		<!--右侧头部-->
+		<el-header class="ms-header" height="50px">
+			<el-row>
+				<el-button type="primary" size="small" icon="el-icon-plus">添加</el-button>
+				<el-button size="small" icon="el-icon-refresh" class="ms-fr">刷新</el-button>
+				<el-button size="small" class="ms-fr">同步微信素材</el-button>
+			</el-row>
+		</el-header>
+		<el-container>
+			<!--内容头部-->
+			<el-header class="ms-tr ms-header ms-header-select">
+				<el-select v-model="value1" placeholder="请选择" size="small">
+					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-select v-model="value2" placeholder="请选择" size="small">
+					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-button type="primary" icon="el-icon-search" size="small">查询</el-button>
+			</el-header>
+			<!--素材列表-->
+			<el-main class="ms-admin-picture-list">
+				<el-container>
+					<el-aside class="ms-admin-picture-item">
+						<div v-for="picture in pictureList">
+							<div class="body">
+								<img :src="picture.img" />
+								<div>
+									<input type="checkbox" />
+									<span v-text="picture.title"></span>
+								</div>
+							</div>
+							<div class="footer">
+								<i class="el-icon-edit"></i>
+								<em></em>
+								<i class="el-icon-download"></i>
+								<em></em>
+								<i class="el-icon-delete"></i>
+							</div>
+						</div>
+					</el-aside>
+					<el-main class="ms-admin-picture-show">
+						<span>全部图片（6）</span>
+						<div>
+							<span>小米（1）</span>
+							<i class="el-icon-edit"></i>
+							<i class="el-icon-delete"></i>
+						</div>
+						<div>
+							<span>小米（1）</span>
+							<i class="el-icon-edit"></i>
+							<i class="el-icon-delete"></i>
+						</div>
+						<p>
+							<i class="el-icon-plus"></i>新建分组</p>
+					</el-main>
+				</el-container>
 
-         </el-main>
-      </el-container>
-   </el-container>
+			</el-main>
+		</el-container>
+	</el-container>
 </div>
 
 <script>
-   new Vue({
-      el: "#picture-list-vue",
-      data: {
-         options1: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         options2: [{
-            value: '全部图片',
-            label: '全部图片'
-         }],
-         value1: '全部图片',
-         value2: '',
-         pictureList: [{
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/ms-bg_1.jpg',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            },
-            {
-               date: '12月27日',
-               title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
-               img: '../images/data/ms-bg_1.jpg',
-               det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
-            }
-         ],
-      },
-      methods: {},
-      mounted: function() {}
-   })
+	new Vue({
+		el: "#picture-list-vue",
+		data: {
+			options1: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			options2: [{
+				value: '全部图片',
+				label: '全部图片'
+			}],
+			value1: '全部图片',
+			value2: '',
+			pictureList: [{
+					date: '12月27日',
+					title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+					img: '../images/data/ms-bg_1.jpg',
+					det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+				},
+				{
+					date: '12月27日',
+					title: 'HUAWEI Mate 20 6GB+64GB 全网最低价...',
+					img: '../images/data/ms-bg_1.jpg',
+					det: '传播名HUAWEI Mate 20 6GB+64GB 全网最低价，后置摄像头后置莱卡散射，12000万亿像素（光脚，1/1.6光圈）+1200万像素（超广角），......'
+				}
+			],
+		},
+		methods: {},
+		mounted: function () {}
+	})
 </script>

src/main/webapp/WEB-INF/manager/mweixin/weixin.ftl

@@ -1,32 +1,24 @@
 <!DOCTYPE html>
 <html>
-   <head>
-      <meta charset="UTF-8">
-      <title></title>
-      <!-- <#include "/include/head-file.ftl"/> -->
-      <!--#include virtual="../include/head-file.ftl" -->
-   </head>
-   <body>
-      <!--#include virtual="menu.ftl" -->
-      <!--#include virtual="metarial/index.ftl" -->
-      <!--#include virtual="metarial/form.ftl" -->
-      <!--#include virtual="picture/index.ftl" -->
-      <!--#include virtual="keyword/index.ftl" -->
-      <!--#include virtual="keyword/form.ftl" -->
-      <!--#include virtual="menu/index.ftl" -->
-      <!--#include virtual="menu/new-pic-form.ftl" -->
-      <!--#include virtual="menu/material-bank-form.ftl" -->
-      <!--#include virtual="message/index.ftl" -->
-   </body>
-</html>
-<script>
-    // 测试使用 ==> 微信其他接口走之前需要先走这几个接口
-    (function(){
-        ms.http.get(ms.manager + "/mweixin/11/function.do")
-        .then((res)=>{
-            console.log('res',true);
-        }, (err) => {
-            console.log(err)
-        })
-    })()
-</script>
+
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <!-- <#include "/include/head-file.ftl"/> -->
+    <!--#include virtual="../include/head-file.ftl" -->
+</head>
+
+<body>
+    <!--#include virtual="menu.ftl" -->
+    <!--#include virtual="metarial/index.ftl" -->
+    <!--#include virtual="metarial/form.ftl" -->
+    <!--#include virtual="picture/index.ftl" -->
+    <!--#include virtual="keyword/index.ftl" -->
+    <!--#include virtual="keyword/form.ftl" -->
+    <!--#include virtual="menu/index.ftl" -->
+    <!--#include virtual="menu/new-pic-form.ftl" -->
+    <!--#include virtual="menu/material-bank-form.ftl" -->
+    <!--#include virtual="message/index.ftl" -->
+</body>
+
+</html>

src/main/webapp/static/mdiy/css/model-form.css

@@ -0,0 +1,305 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #e6e6e6;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-header button {
+  height: 30px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #e6e6e6;
+  padding: 15px !important;
+}
+.ms-hover {
+  cursor: pointer;
+}
+.ms-hover:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
+.sortable-ghost {
+  opacity: 0.3;
+  background: #ccc !important;
+  border-color: transparent !important;
+  color: transparent !important;
+}
+.sortable-ghost * {
+  background: #ccc !important;
+  border-color: transparent !important;
+  color: transparent !important;
+}
+.ms-mdiy-model-form {
+  width: 100vw;
+  height: 100vh;
+}
+.ms-mdiy-model-form .el-container {
+  height: 100%;
+}
+.ms-mdiy-model-form .ms-row button {
+  margin-left: 10px;
+}
+.ms-mdiy-model-form .ms-header-title {
+  margin-bottom: 15px;
+}
+.ms-mdiy-model-form .el-checkbox-group {
+  font-size: inherit !important;
+}
+.ms-mdiy-model-form .ms-editor-type-layout {
+  background: #fff;
+  min-width: 15%;
+  padding: 20px;
+  border-right: 1px solid #e6e6e6;
+}
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li {
+  width: calc(50% - 5px);
+  margin: 0 0 5px 0;
+  padding: 5px;
+  list-style: none;
+  background: #E6F7FF;
+  border: 1px solid #e6e6e6;
+  cursor: pointer;
+}
+.ms-mdiy-model-form .ms-editor-type-layout .ms-type-list li i {
+  font-weight: initial;
+  font-size: 1em;
+  color: #999;
+  margin: 0 5px;
+}
+.ms-mdiy-model-form .ms-editor-body-layout {
+  background: #fff;
+  margin: 8px;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item {
+  padding: 6px 20px 6px 20px;
+  border: 1px solid transparent;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .unit-input {
+  width: calc(100% - 41px) !important;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content {
+  display: flex;
+  align-items: flex-start;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-form-item__content .del-but {
+  visibility: hidden;
+  padding-left: 20px;
+  margin-left: auto;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .ms-form-item .el-radio {
+  line-height: inherit;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active {
+  border-color: #0099ff;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .active .del-but {
+  visibility: visible !important;
+}
+.ms-mdiy-model-form .ms-editor-body-layout .sortable-ghost {
+  margin-bottom: 18px;
+  min-height: 40px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout {
+  background: #fff;
+  min-width: 20%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-header-title {
+  border-left: 1px solid #e6e6e6;
+  width: 100%;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form {
+  padding: 15px;
+  height: calc(100vh - 200px);
+  overflow: auto;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item__label {
+  line-height: 1.4em;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item {
+  margin-bottom: 14px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item .input-with-select .el-input-group__append {
+  width: 90px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .el-form-item .input-with-select .el-input-group__append .el-input input {
+  background-color: #fff;
+  border-top: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list {
+  margin: 0;
+  padding: 0;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin-bottom: 12px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i {
+  cursor: pointer;
+  font-size: 14px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li i:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-input,
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .ms-radio,
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list li .icon-tuodong {
+  margin-right: 6px;
+  line-height: initial;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus {
+  cursor: pointer;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .form .ms-down-list .ms-plus i {
+  margin-right: 6px;
+}
+.ms-mdiy-model-form .ms-editor-attr-layout .ms-editor-attr .footer {
+  margin-top: auto;
+  border-top: 1px solid #e6e6e6;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10px;
+}

src/main/webapp/static/mdiy/css/model-list.css

@@ -0,0 +1,141 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #e6e6e6;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-header button {
+  height: 30px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #e6e6e6;
+  padding: 15px !important;
+}
+.ms-hover {
+  cursor: pointer;
+}
+.ms-hover:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
+.ms-mdiy-model-list {
+  width: 100%;
+}

src/main/webapp/static/mdiy/less/model-form.less

@@ -0,0 +1,153 @@
+@import "../../ms-admin/4.7.0/less/app.less";
+//表单页
+.ms-mdiy-model-form {
+    .ms-width-height(100vw, 100vh);
+    .el-container {
+        height: 100%;
+    }
+    .ms-row {
+        button {
+            margin-left: 10px;
+        }
+    }
+    .ms-header-title {
+        margin-bottom: 15px;
+    }
+    .el-checkbox-group {
+        font-size: inherit !important;
+    }
+    //左侧自定义表单项
+    .ms-editor-type-layout {
+        background: #fff;
+        min-width: 15%;
+        padding: 20px;
+        border-right: 1px solid @borderColor;
+        .ms-type-list {
+            .ms-margin-padding(0);
+            .ms-flex();
+            flex-wrap: wrap;
+            li {
+                width: ~'calc(50% - 5px)';
+                .ms-margin-padding(0 0 5px 0, 5px);
+                list-style: none;
+                background: #E6F7FF;
+                border: 1px solid @borderColor;
+                cursor: pointer;
+                i {
+                    .ms-font(1em, #999);
+                    margin: 0 5px;
+                }
+            }
+        }
+    }
+    //中间排序
+    .ms-editor-body-layout {
+        background: #fff;
+        margin: 8px;
+        .ms-form-item {
+            padding: 6px 20px 6px 20px;
+            border: 1px solid transparent;
+            //单位输入框
+            .unit-input {
+                width: ~'calc(100% - 41px)' !important;
+            }
+            .el-form-item__content {
+                display: flex;
+                align-items: flex-start;
+                .del-but {
+                    visibility: hidden;
+                    padding-left: 20px;
+                    margin-left: auto;
+                }
+            }
+            .el-radio {
+                line-height: inherit;
+            }
+        }
+        //选中的表单元素
+        .active {
+            border-color: @themeColor;
+            .del-but {
+                visibility: visible !important;
+            }
+        }
+        //表单颜色默认下边距
+        .sortable-ghost {
+            margin-bottom: 18px;
+            min-height: 40px;
+        }
+    }
+    //右侧选项属性
+    .ms-editor-attr-layout {
+        background: #fff;
+        min-width: 20%;
+        display: flex;
+        flex-wrap: wrap;
+        .ms-header-title {
+            border-left: 1px solid @borderColor;
+            width: 100%;
+        }
+        .ms-editor-attr {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            .form {
+                padding: 15px;
+                height: ~'calc(100vh - 200px)';
+                overflow: auto;
+                .el-form-item__label {
+                    line-height: 1.4em;
+                }
+                .el-form-item {
+                    margin-bottom: 14px;
+                    .input-with-select {
+                        .el-input-group__append {
+                            width: 90px;
+                            .el-input {
+                                input {
+                                    background-color: #fff;
+                                    border-top: 1px solid #dcdfe6;
+                                    border-bottom: 1px solid #dcdfe6;
+                                }
+                            }
+                        }
+                    }
+                }
+                //下拉排序添加选项
+                .ms-down-list {
+                    .ms-margin-padding(0);
+                    li {
+                        .ms-align-center;
+                        list-style: none;
+                        margin-bottom: 12px;
+                        i {
+                            cursor: pointer;
+                            .ms-hover;
+                            font-size: 14px;
+                        }
+                        .ms-input,
+                        .ms-radio,
+                        .icon-tuodong {
+                            margin-right: 6px;
+                            line-height: initial;
+                        }
+                    }
+                    .ms-plus {
+                        .ms-hover;
+                        i {
+                            margin-right: 6px;
+                        }
+                    }
+                }
+            }
+            .footer {
+                margin-top: auto;
+                border-top: 1px solid @borderColor;
+                height: 60px;
+                .ms-align-center;
+                justify-content: flex-end;
+                padding-right: 10px;
+            }
+        }
+    }
+}

src/main/webapp/static/mdiy/less/model-list.less

@@ -0,0 +1,4 @@
+@import "../../ms-admin/4.7.0/less/app.less";
+.ms-mdiy-model-list {
+    width: 100%;
+}

src/main/webapp/static/ms-admin/4.7.0/css/app.css

@@ -0,0 +1,149 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #e6e6e6;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-header button {
+  height: 30px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #e6e6e6;
+  padding: 15px !important;
+}
+.ms-hover {
+  cursor: pointer;
+}
+.ms-hover:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
+.sortable-ghost {
+  opacity: 0.3;
+  background: #ccc !important;
+  border-color: transparent !important;
+  color: transparent !important;
+}
+.sortable-ghost * {
+  background: #ccc !important;
+  border-color: transparent !important;
+  color: transparent !important;
+}

src/main/webapp/static/ms-admin/4.7.0/less/app.less

@@ -93,8 +93,9 @@ textarea::-webkit-input-placeholder {
     text-align: right;
 }
 
+// 按钮组之间的间距
 .el-button+.el-button {
-//  margin-left: 0
+    // margin-left: 5px;
 }
 
 .ms-weixin-content{
@@ -127,3 +128,36 @@ textarea::-webkit-input-placeholder {
         border-color: @themeColor;
     }
 }
+
+// 头部下拉选择区域间距
+.ms-header-select{
+    font-size: 0;
+    >.el-select:nth-of-type(2){
+        margin: 0 10px;
+    }
+}
+
+.el-submenu{
+    // margin: 0 12px;
+    // 菜单选中样式
+    .el-menu-item.is-active{
+        border-radius: 4px;
+    }
+}
+// 卡片样式
+.el-card, .el-message{
+    border-radius:0 !important; 
+}
+
+//拖拽样式
+.sortable-ghost {
+    opacity: .3;
+    background: #ccc !important;
+    border-color: transparent !important;
+    color: transparent !important;
+    * {
+        background: #ccc !important;
+        border-color: transparent !important;
+        color: transparent !important;
+    }
+}

src/main/webapp/static/mweixin/article.less

@@ -5,13 +5,22 @@
     width: 100%;
     background: transparent !important;
     padding: 0 !important;
-    .ms-article-mask {
-        background: #000;
-        opacity: .2;
-        .ms-width-height(100%, 146px);
-        position: absolute;
-        top: 0;
-        left: 0;
+    // 主图文章
+    .ms-main-article{
+        &:hover{
+            cursor: pointer;
+        }
+        .ms-article-mask {
+            background: #000;
+            opacity: .2;
+            .ms-width-height(100%, 146px);
+            position: absolute;
+            top: 0;
+            left: 0;
+            &:hover{
+                cursor: pointer;
+            }
+        }
     }
     .el-container {
         .ms-container {
@@ -32,9 +41,10 @@
                 span {
                     position: absolute;
                     bottom: 0;
-                    padding: 15px;
+                    margin: 15px;
                     color: #fff;
                     .ms-ellipsis-clamp(2);
+                    word-break: break-all;//数字单词的情况
                 }
             } // 子文章
             .ms-article-item {
@@ -42,6 +52,7 @@
                 .ms-flex();
                 padding: 10px 0;
                 border-bottom: 1px solid @borderColor;
+                position: relative;
                 p {
                     margin: 0 10px 0 0;
                     .ms-flex();
@@ -55,9 +66,34 @@
                 img {
                     .ms-width-height(50px);
                 }
+                // 遮罩
+                .ms-article-item-mask{
+                    visibility: hidden;
+                    background: rgb(126, 126, 126);
+                    opacity: .8;
+                    .ms-width-height(100%,50%);
+                    position: absolute;
+                    bottom:0;
+                    .ms-flex(flex-end);
+                    align-items: center;
+                    >i{
+                        .ms-font(14px,#fff);
+                        margin:0 10px 0 auto;
+                        display: none;
+
+                    }
+                }
                 &:hover {
                     cursor: pointer;
                 }
+                &:hover{
+                    .ms-article-item-mask{
+                        visibility: visible;
+                        >i{
+                            display: block;
+                        }
+                    }
+                }
             } // 尾部
             .ms-article-footer {
                 background: #fff;
@@ -86,7 +122,7 @@
                 box-sizing: border-box;
                 border-bottom: 1px solid @borderColor; // 图片上传
                 .ms-pic-upload {
-                    .ms-width-height(140px);
+                    .ms-width-height(140px,100%);
                     border-radius: 4px;
                     border: 1px dashed @borderColor;
                     .ms-flex(center);
@@ -135,18 +171,34 @@
                                 padding-right: 50px !important;
                             }
                         }
+                        // 标题输入框预留边距
+                        .basic-title-input{
+                            >.el-input__inner{
+                                padding-right:54px !important;
+                            }
+                        }
+                    }
+                    .el-form-item:last-child{
+                        padding-top: 4px;
                     }
                 }
             }
             .ms-main-body {
                 height: calc(~'100% - 180px');
                 background: #fff;
+                .edui-editor-toolbarbox{
+                    border: none !important;
+                    box-shadow: none !important;
+                }
                 .edui-default {
-                    border: none;
+                    // 设置edui-default的class样式会导致选择工具栏会出现抖动，是因为这个class类是通用样式
                     .edui-editor {
+                        border: none !important;
                         .edui-editor-toolbarboxouter {
                             background-color: none !important;
                             background-image: none !important;
+                            box-shadow: none !important;
+                            border-bottom: none !important;
                         } // 编辑器样式
                         .edui-editor {
                             border: none !important;
@@ -163,6 +215,9 @@
                         }
                     }
                 }
+                .edui-editor-toolbarboxinner{
+                    background: #fff;
+                }
             }
         }
     }

src/main/webapp/static/mweixin/css/app.css

@@ -0,0 +1,138 @@
+/*
+*这里的值严格按照UI设计图标注值来进行设置
+*/
+/*
+*颜色
+*/
+/*
+*页面的边距
+*/
+/*
+*字体
+*/
+/*
+*头像
+*/
+/*
+ * 按钮
+ */
+/*
+*对常见的多行样式进行了方法封装，方便调用，加快开发效率
+*/
+html,
+body {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #eee;
+  margin: 0;
+  display: flex;
+  font-weight: initial !important;
+  font-size: 14px !important;
+  color: #333 !important;
+}
+html *,
+body * {
+  text-decoration: none !important;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+}
+.ms-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.ms-align-center {
+  display: flex;
+  align-items: center;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  resize: none;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+  /*滚动条的背景区域的圆角*/
+  background-color: #eee;
+  /*滚动条的背景颜色*/
+}
+/*定义滑块 内阴影+圆角*/
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  /*滚动条的圆角*/
+  background-color: #e6e6e6;
+  /*滚动条的背景颜色*/
+}
+.ms-container {
+  margin: 12px;
+  height: calc(100% - 24px);
+  padding: 14px;
+  background: #fff;
+}
+.ms-header {
+  padding: 10px;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  height: 50px;
+}
+.ms-header button {
+  height: 30px;
+}
+.ms-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+.ms-fr {
+  float: right;
+}
+.ms-tr {
+  text-align: right;
+}
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
+.ms-weixin-dialog .el-dialog__header {
+  height: 55px;
+  box-sizing: border-box;
+  padding: 10px 10px 25px 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.ms-weixin-dialog .el-dialog__header .el-dialog__title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+.ms-weixin-dialog .el-dialog__footer {
+  border-top: 1px solid #e6e6e6;
+  padding: 15px !important;
+}
+.ms-hover {
+  cursor: pointer;
+}
+.ms-hover:hover {
+  color: #0099ff;
+  background: #fff;
+  border-color: #0099ff;
+}
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}

src/main/webapp/static/mweixin/css/article.css

@@ -123,6 +123,19 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
 .ms-article {
   display: flex;
   justify-content: space-between;
@@ -130,7 +143,10 @@ textarea::-webkit-input-placeholder {
   background: transparent !important;
   padding: 0 !important;
 }
-.ms-article .ms-article-mask {
+.ms-article .ms-main-article:hover {
+  cursor: pointer;
+}
+.ms-article .ms-main-article .ms-article-mask {
   background: #000;
   opacity: .2;
   width: 100%;
@@ -139,6 +155,9 @@ textarea::-webkit-input-placeholder {
   top: 0;
   left: 0;
 }
+.ms-article .ms-main-article .ms-article-mask:hover {
+  cursor: pointer;
+}
 .ms-article .el-container .ms-container {
   padding: 0;
   background: transparent;
@@ -158,13 +177,14 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-aside .ms-main-article span {
   position: absolute;
   bottom: 0;
-  padding: 15px;
+  margin: 15px;
   color: #fff;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 .ms-article .el-container .el-aside .ms-article-item {
   width: 100%;
@@ -173,6 +193,7 @@ textarea::-webkit-input-placeholder {
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px solid #e6e6e6;
+  position: relative;
 }
 .ms-article .el-container .el-aside .ms-article-item p {
   margin: 0 10px 0 0;
@@ -193,9 +214,34 @@ textarea::-webkit-input-placeholder {
   width: 50px;
   height: 50px;
 }
+.ms-article .el-container .el-aside .ms-article-item .ms-article-item-mask {
+  visibility: hidden;
+  background: #7e7e7e;
+  opacity: .8;
+  width: 100%;
+  height: 50%;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.ms-article .el-container .el-aside .ms-article-item .ms-article-item-mask > i {
+  font-weight: initial;
+  font-size: 14px;
+  color: #fff;
+  margin: 0 10px 0 auto;
+  display: none;
+}
 .ms-article .el-container .el-aside .ms-article-item:hover {
   cursor: pointer;
 }
+.ms-article .el-container .el-aside .ms-article-item:hover .ms-article-item-mask {
+  visibility: visible;
+}
+.ms-article .el-container .el-aside .ms-article-item:hover .ms-article-item-mask > i {
+  display: block;
+}
 .ms-article .el-container .el-aside .ms-article-footer {
   background: #fff;
   padding-top: 20px;
@@ -228,7 +274,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-article .el-container .el-main .ms-main-header .ms-pic-upload {
   width: 140px;
-  height: 140px;
+  height: 100%;
   border-radius: 4px;
   border: 1px dashed #e6e6e6;
   display: flex;
@@ -289,16 +335,28 @@ textarea::-webkit-input-placeholder {
 .ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .el-input__suffix > input {
   padding-right: 50px !important;
 }
+.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item .basic-title-input > .el-input__inner {
+  padding-right: 54px !important;
+}
+.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item:last-child {
+  padding-top: 4px;
+}
 .ms-article .el-container .el-main .ms-main-body {
   height: calc(100% - 180px);
   background: #fff;
 }
-.ms-article .el-container .el-main .ms-main-body .edui-default {
-  border: none;
+.ms-article .el-container .el-main .ms-main-body .edui-editor-toolbarbox {
+  border: none !important;
+  box-shadow: none !important;
+}
+.ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor {
+  border: none !important;
 }
 .ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor .edui-editor-toolbarboxouter {
   background-color: none !important;
   background-image: none !important;
+  box-shadow: none !important;
+  border-bottom: none !important;
 }
 .ms-article .el-container .el-main .ms-main-body .edui-default .edui-editor .edui-editor {
   border: none !important;
@@ -313,3 +371,6 @@ textarea::-webkit-input-placeholder {
   border-radius: 0 !important;
   box-shadow: none !important;
 }
+.ms-article .el-container .el-main .ms-main-body .edui-editor-toolbarboxinner {
+  background: #fff;
+}

src/main/webapp/static/mweixin/css/custom-menu.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
   margin: 12px;
   height: calc(100% - 24px);
-  padding: 14px 14px 0 14px;
+  padding: 14px;
   background: #fff;
 }
 .ms-header {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -123,6 +123,18 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu {
+  margin: 0 12px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
 .ms-custom-menu {
   color: #f2f2f6;
 }
@@ -139,6 +151,9 @@ textarea::-webkit-input-placeholder {
   width: 280px !important;
   height: 470px !important;
 }
+.ms-custom-menu .ms-custom-container .el-aside .el-container {
+  overflow: hidden;
+}
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-header {
   height: 40px !important;
   line-height: 40px !important;
@@ -151,7 +166,7 @@ textarea::-webkit-input-placeholder {
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-main {
   padding: 0;
   width: 280px !important;
-  height: 379px !important;
+  height: 380px !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer {
   white-space: nowrap;
@@ -162,14 +177,15 @@ textarea::-webkit-input-placeholder {
   height: 50px !important;
   display: flex;
   justify-content: flex-start;
-  border-top: 1px solid #ddd !important;
+  border-top: 1px solid #e6e6e6 !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer > .el-button {
   width: 40px !important;
   height: 50px !important;
+  min-width: 40px;
   padding: 0 !important;
   border: none !important;
-  border-right: 1px solid #ddd !important;
+  border-right: 1px solid #e6e6e6 !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .el-button {
   border-radius: 0 !important;
@@ -177,7 +193,7 @@ textarea::-webkit-input-placeholder {
   background: transparent !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu {
-  flex: 1;
+  width: 240px;
   font-size: 0;
   display: flex;
   justify-content: space-between;
@@ -196,16 +212,41 @@ textarea::-webkit-input-placeholder {
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:first-child {
   width: 100%;
+  border-right: 1px solid #e6e6e6 !important;
+  padding: 10px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
-.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu > .el-button:last-child {
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list {
   position: absolute;
-  top: -60px;
+  bottom: 60px;
   left: 0;
-  border: 1px solid #ddd !important;
+  border: 1px solid #e6e6e6 !important;
   width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list > button {
+  margin-left: 0 !important;
+  border: none !important;
+  border-bottom: 1px solid #e6e6e6 !important;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list .ms-create-btn {
+  border-bottom: none !important;
+}
+.ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .ms-create-sub-menu .sub-menu-list .sub-menu-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  padding: 10px !important;
 }
 .ms-custom-menu .ms-custom-container .el-aside .el-container .el-footer .ms-create-menu .el-button--default {
-  border-left: 1px solid #ddd !important;
   padding: 0 !important;
   flex: 1;
 }
@@ -218,22 +259,29 @@ textarea::-webkit-input-placeholder {
 .ms-custom-menu .ms-custom-container .el-main .custom-menu-card {
   height: 100%;
 }
-.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content {
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content,
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-form-item__content {
   display: flex;
   justify-content: flex-start;
 }
-.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content .el-input {
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content .el-input,
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-form-item__content .el-input {
   width: 153px !important;
   height: 30px !important;
 }
-.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content span {
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-name .el-form-item__content span,
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-form-item__content span {
   margin-left: 10px;
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
+}
+.ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-form-item__content .el-input {
+  width: 306px !important;
+  height: 30px !important;
 }
 .ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs {
-  border: 1px solid #ddd;
+  border: 1px solid #e6e6e6;
 }
 .ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tabs__header {
   background: #f2f2f6;
@@ -255,7 +303,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-custom-menu .ms-custom-container .el-main .custom-menu-card .ms-custom-menu-content .el-tabs .el-tab-pane > div {
   flex: 1;
-  border: 1px dashed #ddd;
+  border: 1px dashed #e6e6e6;
   display: flex;
   justify-content: center;
   align-items: center;

src/main/webapp/static/mweixin/css/material-bank-form.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -123,6 +123,19 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
 .material-bank-form > .el-dialog__wrapper > .el-dialog {
   width: 895px !important;
   height: 587px !important;
@@ -143,6 +156,13 @@ textarea::-webkit-input-placeholder {
 .material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll {
   padding: 20px 10px;
 }
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll .el-tabs__nav .el-tabs__active-bar {
+  background-color: transparent !important;
+}
+.material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-scroll .el-tabs__nav .is-active {
+  color: #409EFF !important;
+  background-color: #ecf5ff;
+}
 .material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .el-tabs__header .el-tabs__nav-wrap::after {
   width: 1px !important;
 }
@@ -161,7 +181,6 @@ textarea::-webkit-input-placeholder {
   flex: 1;
 }
 .material-bank-form > .el-dialog__wrapper > .el-dialog > .el-dialog__body > .el-tabs .is-active {
-  background-color: #e9eaf0;
   font-weight: initial;
   font-size: 14px;
   color: #333;

src/main/webapp/static/mweixin/css/material-list.css

@@ -123,6 +123,12 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
 .ms-weixin-content .ms-header > .el-select--small:first-child {
   width: 100px !important;
 }

src/main/webapp/static/mweixin/css/menu.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -123,6 +123,19 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
+.el-submenu .el-menu-item.is-active {
+  border-radius: 4px;
+}
+.el-card,
+.el-message {
+  border-radius: 0 !important;
+}
 .ms-admin-menu {
   min-height: 100vh;
   min-width: 140px;

src/main/webapp/static/mweixin/css/message-reply.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -125,6 +125,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-admin-message-reply .ms-container {
   display: flex;
+  height: 256px;
 }
 .ms-admin-message-reply .ms-container .message-reply-tabs {
   padding-left: 12px;
@@ -148,10 +149,11 @@ textarea::-webkit-input-placeholder {
 }
 .ms-message-reply .message-reply-tabs .el-tabs__header .el-tabs__nav-scroll {
   padding: 0 20px;
-  border: 1px solid #ddd;
+  border: 1px solid #e6e6e6;
 }
 .ms-message-reply .message-reply-tabs .el-tabs__content {
-  border: 1px solid #ddd;
+  border: 1px solid #e6e6e6;
+  height: calc(100% - 42px);
 }
 .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane {
   padding: 0 !important;
@@ -174,7 +176,7 @@ textarea::-webkit-input-placeholder {
   bottom: 66px;
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   cursor: pointer;
 }
 .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .el-icon-delete:hover {
@@ -185,7 +187,7 @@ textarea::-webkit-input-placeholder {
 .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content textarea {
   height: 127px !important;
   border: none !important;
-  border-bottom: 1px solid #ddd !important;
+  border-bottom: 1px solid #e6e6e6 !important;
 }
 .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer {
   height: 58px;
@@ -213,3 +215,36 @@ textarea::-webkit-input-placeholder {
 .ms-message-reply .message-reply-tabs .el-tabs__content .el-tab-pane > .el-form .ms-message-reply-content .el-form-item__content .footer a:hover {
   cursor: pointer;
 }
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article {
+  padding: 20px !important;
+  height: 100%;
+}
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div {
+  flex: 1;
+  border: 1px dashed #e6e6e6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div i,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div i {
+  font-weight: bolder;
+  font-size: 20px;
+  color: #0099ff;
+}
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div span,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div span {
+  margin-top: 8px;
+  line-height: 1;
+}
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:hover,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:hover {
+  cursor: pointer;
+}
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-picture > div:last-child,
+.ms-message-reply .message-reply-tabs .el-tabs__content .message-reply-article > div:last-child {
+  margin-left: 20px;
+}

src/main/webapp/static/mweixin/css/new-pic-form.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,7 +68,7 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -131,7 +131,7 @@ textarea::-webkit-input-placeholder {
   line-height: 1;
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
 }
 .new-pic-form dt {
   display: inline-block;

src/main/webapp/static/mweixin/css/picture-list.css

@@ -50,7 +50,7 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   font-weight: initial;
   font-size: 12px;
-  color: #aaa;
+  color: #999;
   resize: none;
 }
 *::-webkit-scrollbar {
@@ -68,13 +68,13 @@ textarea::-webkit-input-placeholder {
 *::-webkit-scrollbar-thumb {
   border-radius: 10px;
   /*滚动条的圆角*/
-  background-color: #ddd;
+  background-color: #e6e6e6;
   /*滚动条的背景颜色*/
 }
 .ms-container {
   margin: 12px;
   height: calc(100% - 24px);
-  padding: 14px 14px 0 14px;
+  padding: 14px;
   background: #fff;
 }
 .ms-header {
@@ -104,7 +104,7 @@ textarea::-webkit-input-placeholder {
   height: 55px;
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #e6e6e6;
 }
 .ms-weixin-dialog .el-dialog__header .el-dialog__title {
   font-weight: bold;
@@ -112,7 +112,7 @@ textarea::-webkit-input-placeholder {
   color: #333;
 }
 .ms-weixin-dialog .el-dialog__footer {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #e6e6e6;
   padding: 15px !important;
 }
 .ms-hover {
@@ -123,6 +123,12 @@ textarea::-webkit-input-placeholder {
   background: #fff;
   border-color: #0099ff;
 }
+.ms-header-select {
+  font-size: 0;
+}
+.ms-header-select > .el-select:nth-of-type(2) {
+  margin: 0 10px;
+}
 .ms-admin-picture {
   height: 100%;
 }
@@ -179,7 +185,7 @@ textarea::-webkit-input-placeholder {
   padding: 14px 0;
 }
 .ms-admin-picture-list .ms-admin-picture-item > div .footer i {
-  color: #999;
+  color: #333;
   margin: auto;
   cursor: pointer;
 }

src/main/webapp/static/mweixin/custom-menu.less

@@ -14,6 +14,7 @@
             .ms-width-height(280px, 470px) !important;
             // 微信界面
             .el-container {
+                overflow: hidden;
                 // 头部
                 .el-header {
                     .ms-line-height(40px) !important;
@@ -23,7 +24,7 @@
                 }
                 .el-main {
                     padding: 0;
-                    .ms-width-height(280px, 379px) !important;
+                    .ms-width-height(280px, 380px) !important;
                 }
                 .el-footer {
                     white-space: nowrap;
@@ -35,6 +36,7 @@
                     border-top: 1px solid @borderColor !important;
                     >.el-button {
                         .ms-width-height(40px, 50px) !important;
+                        min-width: 40px;
                         padding: 0 !important;
                         border: none !important;
                         border-right: 1px solid @borderColor !important;
@@ -45,7 +47,7 @@
                         background: transparent !important;
                     }
                     .ms-create-menu {
-                        flex: 1;
+                        width: 240px;
                         font-size: 0;
                         .ms-flex(space-between);
                         .el-button {
@@ -59,20 +61,39 @@
                         .ms-create-sub-menu {
                             flex: 1;
                             position: relative;
+                            // 主菜单
                             >.el-button:first-child {
                                 width: 100%;
+                                border-right:1px solid @borderColor !important;
+                                padding: 10px !important;
+                                .ms-ellipsis-clamp(1);
                             }
-                            >.el-button:last-child {
+                            // 添加子菜单
+                            .sub-menu-list{
                                 position: absolute;
-                                top: -60px;
+                                bottom:60px;
                                 left: 0;
                                 border: 1px solid @borderColor !important;
                                 width: 100%;
+                                .ms-flex(flex-start);
+                                flex-direction: column;
+                                >button{
+                                    margin-left: 0 !important;
+                                    border: none !important;
+                                    border-bottom: 1px solid @borderColor !important;
+                                }
+                                .ms-create-btn{
+                                    border-bottom: none !important;
+                                }
+                                // 子菜单列表
+                                .sub-menu-item{
+                                    .ms-ellipsis-clamp(1);
+                                    padding:10px !important;
+                                }
                             }
                         }
                         // 添加菜单
                         .el-button--default {
-                            border-left: 1px solid @borderColor !important;
                             padding: 0 !important;
                             flex: 1;
                         }
@@ -90,7 +111,7 @@
             .custom-menu-card {
                 height: 100%;
                 // 内容菜单表单
-                .ms-custom-menu-name {
+                .ms-custom-menu-name,.ms-custom-menu-content {
                     .el-form-item__content {
                         .el-input {
                             .ms-width-height(153px, 30px) !important;
@@ -102,6 +123,13 @@
                         }
                     }
                 }
+                .ms-custom-menu-content {
+                    .el-form-item__content {
+                        .el-input {
+                            .ms-width-height(306px, 30px) !important;
+                        }
+                    }
+                }
                 // 菜单内容
                 .ms-custom-menu-content {
                     .el-tabs {

src/main/webapp/static/mweixin/material-bank-form.less

@@ -16,6 +16,16 @@
                         margin: 0 !important;
                         .el-tabs__nav-scroll{
                             padding:20px 10px;
+                            .el-tabs__nav{
+                                // 取消 激活状态边框
+                                .el-tabs__active-bar{
+                                    background-color:transparent !important;
+                                }
+                                .is-active{
+                                    color: #409EFF !important;
+                                    background-color: #ecf5ff;
+                                }
+                            }
                         }
                         .el-tabs__nav-wrap::after{
                             width: 1px !important;
@@ -38,7 +48,6 @@
                     }
                     // tab选中的样式
                     .is-active{
-                       background-color:rgb(233, 234, 240);
                        .ms-font(@defalutSize,@defalutColor);
                     }
                 }

src/main/webapp/static/mweixin/menu.less

@@ -31,6 +31,19 @@
                 min-width: 140px;
                 width: 140px;
             }
+            // .ms-admin-submenu{
+            //     .el-submenu__title{
+            //         height: 40px !important;
+            //         .ms-flex();
+            //         align-items: center;
+            //     }
+            // }
+            // // 菜单列表
+            // .ms-admin-menu-menu-item{
+            //     height: 40px;
+            //     .ms-flex();
+            //     align-items: center;
+            // }
         }
         .ms-admin-material-item {
             min-width: 100% !important;

src/main/webapp/static/mweixin/message-reply.less

@@ -2,6 +2,7 @@
 .ms-admin-message-reply {
     .ms-container {
         display: flex;
+        height: 256px;
         .message-reply-tabs {
             padding-left: 12px;
         }
@@ -31,10 +32,12 @@
         }
         .el-tabs__content {
             border: 1px solid @borderColor;
+            height: calc(~'100% - 42px');
             .el-tab-pane {
                 padding: 0 !important;
                 width: 100%;
                 .ms-flex();
+                // 文字回复
                 >.el-form {
                     width: 100%;
                     .ms-message-reply-content {
@@ -53,6 +56,7 @@
                                 border: none !important;
                                 border-bottom: 1px solid @borderColor !important;
                             }
+                            // 底部插入超链接
                             .footer {
                                 height: 58px;
                                 padding: 0 14px;
@@ -77,6 +81,35 @@
                     }
                 }
             }
+            // 图片回复
+            .message-reply-picture,.message-reply-article{
+                padding:20px !important;
+                height: 100%;
+                >div {
+                    flex: 1;
+                    border: 1px dashed @borderColor;
+                    .ms-flex(center);
+                    align-items: center;
+                    flex-direction: column;
+                    i {
+                        .ms-font(20px, @themeColor, bolder);
+                    }
+                    span {
+                        margin-top: 8px;
+                        line-height: 1;
+                    }
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+                >div:last-child {
+                    margin-left: 20px;
+                }
+            }
+            // 图文回复
+            .message-reply-article{
+
+            }
         }
     }
 }

src/main/webapp/static/mweixin/new-pic-form.less

@@ -11,5 +11,5 @@
     dt{
         display: inline-block;
         margin-bottom: 8px;
-    } 
+    }
 }