Signed-off-by: yinxr <2273460044@qq.com>

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

@@ -24,6 +24,10 @@
     <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.config.js"></script>
     <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
     <script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
+
+    <!-- 拖拽 -->
+    <script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
     
     <!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->
     <!-- <link rel="stylesheet" href="${base}/static/mweixin/css/custom-menu.css"> -->

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

@@ -1,16 +1,6 @@
 <!-- 新建图文 -->
-<!--#include virtual="../../include/head-file.ftl" -->
-<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
 <link rel="stylesheet" href="../../../../static/mweixin/css/article.css">
-<!--jquery-->
+<div id='article' class="ms-article ms-container" v-if="menuVue.menuActive == '新建图文'">
-<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
-<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.parse.js"></script>
-<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.config.js"></script>
-<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/ueditor.all.js"></script>
-<script type="text/javascript" charset="utf-8" src="http://mpm.mingsoft.net/static/plugins/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
-<!-- v-if="menuVue.menuActive == '新建图文'" -->
-<div id='article' class="ms-article ms-container">
     <el-container>
         <el-aside width="280px">
             <div class="ms-main-article">
@@ -30,23 +20,33 @@
         </el-aside>
         <el-main>
             <div class="ms-main-header">
-                <el-upload class="ms-pic-uploader" :show-file-list="false">
+                <el-upload class="ms-pic-upload" :show-file-list="false">
                     <img v-if="false" :src="false" class="avatar">
-                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    <i v-else class="el-icon-picture"></i>
+                    <span>添加封面</span>
                 </el-upload>
-                <el-form>
+                <el-form label-width='40px'>
-                    <el-form-item label="标题" prop="name">
+                    <el-form-item label="标题" prop="">
-                        <el-input size='mini' placeholder="请输入图文标题">
+                        <el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' @input="resetWordNum('title')">
                             <span slot='suffix' v-text="titleWordNumber+'/64'"></span>
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="作者" prop="region">
+                    <el-form-item label="作者" prop="">
-                        <el-input size='mini' placeholder="请输入图文作者">
+                        <el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input="resetWordNum('author')">
                             <span slot='suffix' v-text="authorWordNumber+'/8'"></span>
                         </el-input>
                     </el-form-item>
-                    <el-form-item label="摘要" prop="region">
+                    <el-form-item label="摘要" prop="">
-                        <el-input size='mini' type='textarea' placeholder="选填，如果不写会默认抓取正文前54个字">
+                        <el-input 
+                            size='small'
+                            type='textarea' 
+                            placeholder="选填，如果不写会默认抓取正文前54个字"
+                            :autosize="{ minRows: 2, maxRows: 2}"
+                            resize='none'
+                            v-model='articleForm.basicDescription'
+                            @input="resetWordNum('desc')"
+                        >
+                        <span slot='suffix' v-text="descWordNumber+'/54'"></span>
                         </el-input>
                     </el-form-item>
                 </el-form>
@@ -77,13 +77,15 @@
                 basicTitle: '没有奇迹，国足0-3不敌伊朗止步八强!',
                 basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
             }],
-            titleWordNumber: '', //图文标题剩余字数
+            titleWordNumber: 64, //图文标题剩余字数
-            authorWordNumber: '', //图文作者剩余字数
+            authorWordNumber: 8, //图文作者剩余字数
+            descWordNumber:54,//摘要
             editor: null, //富文本实例
-        },
+            articleForm:{
-        watch: {
+                basicTitle:'',//标题
-            subArticleList: function (n, o) {
+                articleAuthor:'',//作者
-                console.log('n', n);
+                basicDescription:'', //摘要
+                articleContent:'', //正文
             }
         },
         methods: {
@@ -93,6 +95,10 @@
                     basicTitle: '新增文章标题',
                     basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
                 })
+            },
+            // 计算剩余字数
+            resetWordNum:function(type){
+               
             }
         },
         mounted: function () {
@@ -122,8 +128,8 @@
                     zIndex: 10000,
                     elementPathEnabled: false,
                     wordCount: false,
-                    initialFrameWidth: 600,
+                    initialFrameWidth: '100%',
-                    initialFrameHeight: 240,
+                    initialFrameHeight: 500,
                 });
                 this.editor.ready(function () {
                     var a = $("#ueditor_0").contents()[0].activeElement;

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

@@ -52,7 +52,10 @@
             }, {
                title: '关键词回复'
             }]
-         }, ], //左侧导航列表
+         },{
+             title:'新建图文'
+         }
+        ], //左侧导航列表
          menuActive: '图文', //选中
       }
    })

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

@@ -13,5 +13,6 @@
       <!--#include virtual="keyword/form.ftl" -->
       <!--#include virtual="menu/index.ftl" -->
       <!--#include virtual="message/index.ftl" -->
+      <!--#include virtual="article/index.ftl" -->
    </body>
 </html>

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

@@ -1,77 +1,139 @@
 // 新建图文
 @import "../ms-admin/4.7.0/less/app.less";
-.ms-article{
+.ms-article {
     .ms-flex();
     width: 100%;
     background: transparent !important;
-    .el-container{
+    .el-container {
         // 侧边
-        .el-aside{
+        .el-aside {
-            padding:14px;
+            padding: 14px;
-            background: #fff;
+            background: #fff; // 主文章
-            // 主文章
+            .ms-main-article {
-            .ms-main-article{
                 position: relative;
-                img{
+                img {
-                    .ms-width-height(100%,146px);
+                    .ms-width-height(100%, 146px);
                 }
-                .ms-main-article-mask{
+                .ms-main-article-mask {
                     background: #000;
                     opacity: .2;
-                    .ms-width-height(100%,146px);
+                    .ms-width-height(100%, 146px);
                     position: absolute;
                     top: 0;
                     left: 0;
                 }
-                span{
+                span {
                     position: absolute;
                     bottom: 0;
                     padding: 15px;
                     color: #fff;
                     .ms-ellipsis-clamp(2);
                 }
-            }
+            } // 子文章
-            // 子文章
+            .ms-article-item {
-            .ms-article-item{
+                .ms-width-height(100%, 70px);
-                .ms-width-height(100%,70px);
                 .ms-flex();
-                padding:10px 0;
+                padding: 10px 0;
                 border-bottom: 1px solid @borderColor;
-                p{
+                p {
                     margin: 0 10px 0 0;
                     .ms-flex();
                     align-items: center;
-                    span{
+                    span {
                         width: 100%;
                         display: inline-block;
                         .ms-ellipsis-clamp(1);
                     }
                 }
-                img{
+                img {
                     .ms-width-height(50px);
                 }
-                &:hover{
+                &:hover {
                     cursor: pointer;
                 }
-            }
+            } // 尾部
-            // 尾部
+            .ms-article-footer {
-            .ms-article-footer{
                 background: #fff;
-                padding-top:20px;
+                padding-top: 20px;
-                .el-button{
+                .el-button {
                     width: 100%;
                     background: rgb(242, 242, 246);
-                    i,span{
+                    i,
-                    .ms-font(@auxiliarySize,@auxiliaryColor);
+                    span {
+                        .ms-font(@auxiliarySize, @auxiliaryColor);
+                    }
+                }
+            }
+        } // 内容区域
+        .el-main {
+            flex: 1;
+            margin-left: 14px;
+            padding: 0 !important;
+            .ms-main-header {
+                background: #fff;
+                .ms-flex();
+                height: 180px;
+                padding: 20px;
+                padding-bottom: 24px;
+                box-sizing: border-box;
+                border-bottom: 1px solid @borderColor; // 图片上传
+                .ms-pic-upload {
+                    .ms-width-height(140px);
+                    border-radius: 4px;
+                    border: 1px dashed @borderColor;
+                    .ms-flex(center);
+                    flex-direction: column;
+                    margin-right: 20px;
+                    .el-upload {
+                        .ms-flex();
+                        flex-direction: column;
+                        align-items: center;
+                        span {
+                            .ms-font(@auxiliarySize, @auxiliaryColor);
+                            margin-top: 4px;
+                        }
+                        i {
+                            .ms-font(18px, @auxiliaryColor);
+                        }
+                    }
+                } // 表单
+                .el-form {
+                    flex: 1;
+                    margin: 0 !important;
+                    .ms-flex();
+                    flex-direction: column;
+                    .el-form-item {
+                        margin-bottom: 0 !important;
+                    }
+                    .el-input__suffix {
+                        top: -3px !important;
+                    }
+                }
+            }
+            .ms-main-body {
+                height: calc(~'100% - 180px');
+                background: #fff;
+                .edui-editor {
+                    height: 100%;
+                    .edui-editor-toolbarboxouter {
+                        background-color: none !important;
+                        background-image: none !important;
+                    } // 编辑器样式
+                    .edui-editor {
+                        border: none !important;
+                        .edui-editor-toolbarbox {
+                            box-shadow: none !important;
+                            .edui-editor-toolbarboxouter {
+                                background-color: transparent !important;
+                                background-image: none !important;
+                                border: none !important;
+                                border-radius: 0 !important;
+                                box-shadow: none !important;
+                            }
+                        }
                     }
                 }
             }
         }
-        // 内容区域
-        .el-main{
-            flex:1;
-            background: #fff;
-            margin-left: 14px;
-        }
     }
 }

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

@@ -22,7 +22,7 @@
 html,
 body {
   min-height: 100vh;
-  width: 100%;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
   display: flex;

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

@@ -22,7 +22,7 @@
 html,
 body {
   min-height: 100vh;
-  width: 100%;
+  width: 100vw;
   background-color: #eee;
   margin: 0;
   display: flex;
@@ -73,7 +73,7 @@ textarea::-webkit-input-placeholder {
 }
 .ms-container {
   margin: 12px;
-  height: 100%;
+  height: calc(100% - 24px);
   padding: 14px 14px 0 14px;
   background: #fff;
 }
@@ -97,6 +97,9 @@ textarea::-webkit-input-placeholder {
 .el-button + .el-button {
   margin-left: 0;
 }
+.ms-weixin-content {
+  width: calc(100% - 140px);
+}
 .ms-article {
   display: flex;
   justify-content: space-between;
@@ -180,6 +183,80 @@ textarea::-webkit-input-placeholder {
 }
 .ms-article .el-container .el-main {
   flex: 1;
-  background: #fff;
   margin-left: 14px;
+  padding: 0 !important;
+}
+.ms-article .el-container .el-main .ms-main-header {
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  height: 180px;
+  padding: 20px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #ddd;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload {
+  width: 140px;
+  height: 140px;
+  border-radius: 4px;
+  border: 1px dashed #ddd;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-right: 20px;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload span {
+  font-weight: initial;
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+.ms-article .el-container .el-main .ms-main-header .ms-pic-upload .el-upload i {
+  font-weight: initial;
+  font-size: 18px;
+  color: #999;
+}
+.ms-article .el-container .el-main .ms-main-header .el-form {
+  flex: 1;
+  margin: 0 !important;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+.ms-article .el-container .el-main .ms-main-header .el-form .el-form-item {
+  margin-bottom: 0 !important;
+}
+.ms-article .el-container .el-main .ms-main-header .el-form .el-input__suffix {
+  top: -3px !important;
+}
+.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-editor {
+  height: 100%;
+}
+.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor-toolbarboxouter {
+  background-color: none !important;
+  background-image: none !important;
+}
+.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor {
+  border: none !important;
+}
+.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor .edui-editor-toolbarbox {
+  box-shadow: none !important;
+}
+.ms-article .el-container .el-main .ms-main-body .edui-editor .edui-editor .edui-editor-toolbarbox .edui-editor-toolbarboxouter {
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
 }