From 59286b69d77f0586a9a0e21fbb569044f5746817 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 22 Oct 2020 17:57:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=8A=A0=E5=85=A5=E5=B0=81=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue                | 10 ++++------
 src/router/index.js                 | 12 +++++++++++-
 src/styles/markdown.scss            |  2 +-
 src/views/markdown/index.vue        | 26 ++++++++++++++++++++++++++
 src/views/public/articles/index.vue | 18 +++++++++++++-----
 5 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index d40d208..abebd7d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -60,18 +60,16 @@ export default {
     }
   },
   mounted() {
-    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
-      window.pc = false
-    } else {
-      window.pc = true
-    }
-
+    window.pc = !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
     if(getToken()){
       this.isShow = window.pc;
       //与服务器建立websocket连接
       if(!ws.isConnected){
         toConnection(this.$store.state.user.name,this.$store.state.user.token);
       }
+      if(this.$route.path.startsWith('/articles')){
+        this.isShow = false
+      }
     }else{
       this.isShow = false
     }
diff --git a/src/router/index.js b/src/router/index.js
index 45b3e1a..29c895b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -203,10 +203,20 @@ export const constantRoutes = [
       }
     ]
   },
-
+  {
+    path: 'articles',
+    component: Layout,
+    children: [
+      {
+        path: `${document.location.protocol}//${window.location.host}/articles`,
+        meta: { title: '关联博客', icon: 'link' }
+      }
+    ]
+  },
   {
     path: '/articles',
     component: Layout,
+    hidden: true,
     children: [
       {
         path: '',
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index c9a9886..eb6ff40 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -108,7 +108,7 @@
   display: flex;
   width: 100%;
   max-width: 1080px;
-  min-height: 1000px;
+  //min-height: 1000px;
   margin: 0 auto;
   flex-wrap: wrap;
   justify-content: space-between;
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index 79bf45c..4fbdb78 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -10,6 +10,7 @@
         <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" v-model="storageLocation" :readonly="true" @click="selectDir">
           <el-button slot="prepend" @click="selectDir">选择位置</el-button>
         </el-input>
+        <el-button type="primary" @click="moreSetting = true">更多设置</el-button>
         <el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
         <el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
       </div>
@@ -28,6 +29,16 @@
         @fullScreen="fullScreen"
       />
     </el-main>
+
+    <el-drawer
+      :visible.sync="moreSetting"
+      :with-header="false">
+      <div class="more-setting">
+        <h2>更多设置</h2>
+        <p class="mark-setting-label">文章标题：</p>
+        <el-input class="articles-title" type="textarea" placeholder="输入图片URL" v-model="markdownCover"/>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -52,6 +63,8 @@
         isFullScreen: false,
         storageLocation: '/',
         selectLocationVisible: false,
+        moreSetting: false,
+        markdownCover: null,
       }
     },
     mounted() {
@@ -137,6 +150,7 @@
             userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             filename: filename,
+            cover: this.markdownCover,
             currentDirectory: this.storageLocation,
             contentText: this.content
           }).then((res) => {
@@ -160,6 +174,7 @@
             userId: this.$store.state.user.userId,
             username: this.$store.state.user.name,
             filename: filename,
+            cover: this.markdownCover,
             currentDirectory: this.storageLocation,
             contentText: this.content
           }).then(() => {
@@ -208,4 +223,15 @@
     }
   }
 
+  .more-setting {
+    padding: 15px;
+    .mark-setting-label {
+      font-weight: 500;
+    }
+    .mark-description {
+      font-size: 12px;
+      font-weight: 100;
+    }
+  }
+
 </style>
diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue
index b8a0375..cfd2544 100644
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@@ -55,11 +55,12 @@
                   </div>
                 </section>
                 <section class="article typo">
-                  <div class="article-entry" itemprop="articleBody">
-                    <!--<p><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/2019/88ff47f8-e8f5-3691-cff2-ab0e042dd752.jpg.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/2019/88ff47f8-e8f5-3691-cff2-ab0e042dd752.jpg.png" alt=""></p>-->
-                    <p></p>
-                    <div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>
-                  </div>
+                  <a :href="$route.path+'/article?mark='+article.id">
+                    <div class="article-entry" itemprop="articleBody">
+                      <p><img class="blog-background" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
+                      <!--<div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>-->
+                    </div>
+                  </a>
                 </section>
               </article>
             </div>
@@ -291,4 +292,11 @@
     height: 100%;
     background: #f5f5f5;
   }
+
+  .blog-background {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    max-height: 15em;
+}
 </style>