From 9e43dfdf69544eb93265386ae65c59cf09a96283 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 31 Aug 2019 23:18:07 +0800
Subject: [PATCH] Support view when theme setting.

---
 src/components/global.less                    | 12 ---
 src/views/attachment/AttachmentList.vue       | 13 ++-
 src/views/comment/components/CommentTab.vue   |  5 +-
 src/views/interface/MenuList.vue              | 10 ++-
 src/views/interface/ThemeEdit.vue             |  4 +-
 .../interface/components/ThemeSetting.vue     | 83 +++++++++++++++++--
 src/views/post/CategoryList.vue               |  4 +-
 src/views/post/PostList.vue                   |  2 +-
 src/views/post/TagList.vue                    |  4 +-
 src/views/post/components/PostSetting.vue     |  1 +
 src/views/sheet/internal/JournalList.vue      |  2 +-
 src/views/sheet/internal/LinkList.vue         |  4 +-
 src/views/sheet/internal/PhotoList.vue        |  2 +-
 src/views/system/About.vue                    |  8 +-
 src/views/user/Profile.vue                    |  2 +-
 15 files changed, 119 insertions(+), 37 deletions(-)

diff --git a/src/components/global.less b/src/components/global.less
index 1c19c278..b58e56f2 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -541,18 +541,6 @@ body {
   }
 }
 
-.ant-card-wider-padding {
-  .ant-card-body {
-    padding: 16px !important;
-  }
-}
-
-.comment-tab-wrapper {
-  .ant-card-body {
-    padding: 0 !important;
-  }
-}
-
 .ant-form {
   .ant-form-item {
     padding-bottom: 0 !important;
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 2e61e065..cec3b8e6 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -9,7 +9,10 @@
         :span="24"
         class="search-box"
       >
-        <a-card :bordered="false">
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
@@ -100,7 +103,10 @@
             >
               <div class="attach-thumb">
                 <span v-show="!handleJudgeMediaType(item)">当前格式不支持预览</span>
-                <img :src="item.thumbPath" v-show="handleJudgeMediaType(item)">
+                <img
+                  :src="item.thumbPath"
+                  v-show="handleJudgeMediaType(item)"
+                >
               </div>
               <a-card-meta>
                 <ellipsis
@@ -280,7 +286,8 @@ export default {
   position: relative;
   padding-bottom: 56%;
   overflow: hidden;
-  img, span{
+  img,
+  span {
     width: 100%;
     height: 100%;
     position: absolute;
diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue
index 9f8d7ad1..9d564c8f 100644
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="comment-tab-wrapper">
-    <a-card :bordered="false">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ padding: 0 }"
+    >
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index b1f9663a..67227382 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -9,7 +9,10 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title">
+        <a-card
+          :title="title"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <a-form layout="horizontal">
             <a-form-item
               label="名称："
@@ -96,7 +99,10 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card title="所有菜单">
+        <a-card
+          title="所有菜单"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <a-table
             :columns="columns"
             :dataSource="menus"
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index 682caf7b..c4a63ead 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -9,7 +9,7 @@
         :xs="24"
         :style="{'padding-bottom':'12px'}"
       >
-        <a-card>
+        <a-card :bodyStyle="{ padding: '16px' }">
           <a-form layout="vertical">
             <a-form-item>
               <codemirror
@@ -35,7 +35,7 @@
         :xs="24"
         :style="{'padding-bottom':'12px'}"
       >
-        <a-card>
+        <a-card :bodyStyle="{ padding: '16px' }">
           <template slot="title">
             <a-select
               style="width: 100%"
diff --git a/src/views/interface/components/ThemeSetting.vue b/src/views/interface/components/ThemeSetting.vue
index 78b4420c..aaede9a8 100644
--- a/src/views/interface/components/ThemeSetting.vue
+++ b/src/views/interface/components/ThemeSetting.vue
@@ -18,6 +18,7 @@
         :md="12"
         :sm="24"
         :xs="24"
+        v-if="!viewMode"
       >
         <a-skeleton
           active
@@ -53,9 +54,9 @@
         </a-skeleton>
       </a-col>
       <a-col
-        :xl="12"
-        :lg="12"
-        :md="12"
+        :xl="formColValue"
+        :lg="formColValue"
+        :md="formColValue"
         :sm="24"
         :xs="24"
         style="padding-bottom: 50px;"
@@ -158,19 +159,55 @@
           </div>
         </a-skeleton>
       </a-col>
+
+      <a-col
+        :xl="20"
+        :lg="20"
+        :md="20"
+        :sm="24"
+        :xs="24"
+        v-if="viewMode"
+      >
+        <a-card
+          :bordered="true"
+          :bodyStyle="{ padding: 0}"
+        >
+          <iframe
+            id="themeViewIframe"
+            title="主题预览"
+            frameborder="0"
+            scrolling="auto"
+            border="0"
+            :src="options.blog_url"
+            style="width:100%;height:1000px;overflow-y:hidden;"
+          > </iframe>
+        </a-card>
+      </a-col>
     </a-row>
 
     <AttachmentSelectDrawer
       v-model="attachmentDrawerVisible"
       @listenToSelect="handleSelectAttachment"
       title="选择附件"
-      isChooseAvatar
     />
 
     <footer-tool-bar
       v-if="themeConfiguration.length>0"
-      :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
+      :style="{ width : '100%'}"
     >
+      <a-button
+        v-if="theme.activated && viewMode"
+        type="primary"
+        @click="toggleViewMode"
+        style="marginRight: 8px"
+        ghost
+      >普通模式</a-button>
+      <a-button
+        v-else-if="theme.activated && !viewMode"
+        type="dashed"
+        @click="toggleViewMode"
+        style="marginRight: 8px"
+      >预览模式</a-button>
       <a-button
         type="primary"
         @click="handleSaveSettings"
@@ -185,6 +222,7 @@ import FooterToolBar from '@/components/FooterToolbar'
 import Verte from 'verte'
 import 'verte/dist/verte.css'
 import themeApi from '@/api/theme'
+import optionApi from '@/api/option'
 export default {
   name: 'ThemeSetting',
   mixins: [mixin, mixinDevice],
@@ -206,7 +244,11 @@ export default {
         lg: { span: 12 },
         sm: { span: 24 },
         xs: { span: 24 }
-      }
+      },
+      viewMode: false,
+      formColValue: 12,
+      options: [],
+      keys: ['blog_url']
     }
   },
   model: {
@@ -227,6 +269,7 @@ export default {
   created() {
     this.loadSkeleton()
     this.initData()
+    this.loadOptions()
   },
   watch: {
     visible: function(newValue, oldValue) {
@@ -258,6 +301,9 @@ export default {
     handleSaveSettings() {
       themeApi.saveSettings(this.selectedTheme.id, this.themeSettings).then(response => {
         this.$message.success('保存成功！')
+        if (this.viewMode) {
+          document.getElementById('themeViewIframe').contentWindow.location.reload(true)
+        }
       })
     },
     onClose() {
@@ -270,6 +316,31 @@ export default {
     handleSelectAttachment(data) {
       this.themeSettings[this.selectedField] = encodeURI(data.path)
       this.attachmentDrawerVisible = false
+    },
+    toggleViewMode() {
+      if (!this.viewMode) {
+        this.formColValue = 4
+        this.wrapperCol = {
+          xl: { span: 24 },
+          lg: { span: 24 },
+          sm: { span: 24 },
+          xs: { span: 24 }
+        }
+      } else {
+        this.formColValue = 12
+        this.wrapperCol = {
+          xl: { span: 12 },
+          lg: { span: 12 },
+          sm: { span: 24 },
+          xs: { span: 24 }
+        }
+      }
+      this.viewMode = !this.viewMode
+    },
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
     }
   }
 }
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 34c612a9..ebcb8d25 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -9,7 +9,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title">
+        <a-card :title="title" :bodyStyle="{ padding: '16px' }">
           <a-form layout="horizontal">
             <a-form-item
               label="名称："
@@ -68,7 +68,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '1rem' }"
       >
-        <a-card title="分类列表">
+        <a-card title="分类列表" :bodyStyle="{ padding: '16px' }">
           <a-table
             :columns="columns"
             :dataSource="categories"
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index e5c230c4..ec2c1c5d 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-header-index-wide">
-    <a-card :bordered="false">
+    <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
diff --git a/src/views/post/TagList.vue b/src/views/post/TagList.vue
index 1da83e52..827a0217 100644
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@@ -9,7 +9,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title">
+        <a-card :title="title" :bodyStyle="{ padding: '16px' }">
           <a-form layout="horizontal">
             <a-form-item
               label="名称："
@@ -64,7 +64,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card title="所有标签">
+        <a-card title="所有标签" :bodyStyle="{ padding: '16px' }">
           <a-tooltip
             placement="topLeft"
             v-for="tag in tags"
diff --git a/src/views/post/components/PostSetting.vue b/src/views/post/components/PostSetting.vue
index 3fce3c83..0d10c874 100644
--- a/src/views/post/components/PostSetting.vue
+++ b/src/views/post/components/PostSetting.vue
@@ -339,6 +339,7 @@ export default {
       categoryApi.create(this.categoryToCreate).then(response => {
         this.loadCategories()
         this.categoryToCreate = {}
+        this.toggleCategoryForm()
       })
     },
     toggleCategoryForm() {
diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue
index fd266d6a..d73563e6 100644
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@@ -2,7 +2,7 @@
   <div class="page-header-index-wide">
     <a-row>
       <a-col :span="24">
-        <a-card :bordered="false">
+        <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
diff --git a/src/views/sheet/internal/LinkList.vue b/src/views/sheet/internal/LinkList.vue
index 94fb6e53..48d73b3a 100644
--- a/src/views/sheet/internal/LinkList.vue
+++ b/src/views/sheet/internal/LinkList.vue
@@ -9,7 +9,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title">
+        <a-card :title="title" :bodyStyle="{ padding: '16px' }">
           <a-form layout="horizontal">
             <a-form-item label="网站名称：">
               <a-input v-model="link.name" />
@@ -65,7 +65,7 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card title="所有友情链接">
+        <a-card title="所有友情链接" :bodyStyle="{ padding: '16px' }">
           <a-table
             :columns="columns"
             :dataSource="links"
diff --git a/src/views/sheet/internal/PhotoList.vue b/src/views/sheet/internal/PhotoList.vue
index 7a17aaf8..f50defd9 100644
--- a/src/views/sheet/internal/PhotoList.vue
+++ b/src/views/sheet/internal/PhotoList.vue
@@ -9,7 +9,7 @@
         :span="24"
         class="search-box"
       >
-        <a-card :bordered="false">
+        <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
diff --git a/src/views/system/About.vue b/src/views/system/About.vue
index 11ab4176..d87f4a26 100644
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@@ -2,10 +2,14 @@
   <div class="page-header-index-wide">
     <a-row>
       <a-col :span="24">
-        <a-card :bordered="false">
+        <a-card
+          :bordered="false"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <a-card
             :bordered="false"
             class="environment-info"
+            :bodyStyle="{ padding: '16px' }"
           >
             <template slot="title">
               环境信息
@@ -70,6 +74,7 @@
           <a-card
             title="开发者"
             :bordered="false"
+            :bodyStyle="{ padding: '16px' }"
           >
             <a
               :href="item.github"
@@ -93,6 +98,7 @@
           <a-card
             title="时间轴"
             :bordered="false"
+            :bodyStyle="{ padding: '16px' }"
           >
             <a-timeline>
               <a-timeline-item>...</a-timeline-item>
diff --git a/src/views/user/Profile.vue b/src/views/user/Profile.vue
index 61ad2c5a..77a6db1e 100644
--- a/src/views/user/Profile.vue
+++ b/src/views/user/Profile.vue
@@ -6,7 +6,7 @@
         :md="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :bordered="false">
+        <a-card :bordered="false" :bodyStyle="{ padding: '16px' }">
           <div class="profile-center-avatarHolder">
             <a-tooltip
               placement="right"