Fixed some style bugs.

src/components/GlobalHeader/GlobalHeader.vue

@@ -1,21 +1,54 @@
 <template>
   <transition name="showHeader">
-    <div v-if="visible" class="header-animat">
+    <div
+      v-if="visible"
+      class="header-animat"
+    >
       <a-layout-header
         v-if="visible"
         :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
-        :style="{ padding: '0' }">
+        :style="{ padding: '0' }"
-        <div v-if="mode === 'sidemenu'" class="header">
+      >
-          <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
+        <div
-          <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+          v-if="mode === 'sidemenu'"
+          class="header"
+        >
+          <a-icon
+            v-if="device==='mobile'"
+            class="trigger"
+            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+            @click="toggle"
+          />
+          <a-icon
+            v-else
+            class="trigger"
+            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+            @click="toggle"
+          />
           <user-menu></user-menu>
         </div>
-        <div v-else :class="['top-nav-header-index', theme]">
+        <div
+          v-else
+          :class="['top-nav-header-index', theme]"
+        >
           <div class="header-index-wide">
             <div class="header-index-left">
-              <logo class="top-nav-header" v-if="device !== 'mobile'"/>
+              <logo
-              <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+                class="top-nav-header"
-              <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+                v-if="device !== 'mobile'"
+              />
+              <s-menu
+                v-if="device !== 'mobile'"
+                mode="horizontal"
+                :menu="menus"
+                :theme="theme"
+              />
+              <a-icon
+                v-else
+                class="trigger"
+                :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+                @click="toggle"
+              />
             </div>
             <user-menu class="header-index-right"></user-menu>
           </div>
@@ -107,7 +140,7 @@ export default {
 </script>
 
 <style lang="less">
-.header-animat{
+.header-animat {
   position: relative;
   z-index: 999;
 }
@@ -117,7 +150,8 @@ export default {
 .showHeader-leave-active {
   transition: all 0.5s ease;
 }
-.showHeader-enter, .showHeader-leave-to {
+.showHeader-enter,
+.showHeader-leave-to {
   opacity: 0;
 }
 </style>

src/components/SettingDrawer/SettingDrawer.vue

@@ -1,32 +1,53 @@
 <template>
-  <div class="setting-drawer" ref="settingDrawer">
+  <div
-    <a-drawer width="300" closable @close="onClose" :visible="visible" :zIndex="9999">
+    class="setting-drawer"
+    ref="settingDrawer"
+  >
+    <a-drawer
+      width="300"
+      closable
+      @close="onClose"
+      :visible="visible"
+      :zIndex="9999"
+    >
       <div class="setting-drawer-index-content">
         <div :style="{ marginBottom: '24px' }">
           <h3 class="setting-drawer-index-title">整体风格设置</h3>
           <div class="setting-drawer-index-blockChecbox">
             <a-tooltip>
               <template slot="title">暗色菜单风格</template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
+              <div
+                class="setting-drawer-index-item"
+                @click="handleMenuTheme('dark')"
+              >
                 <img
                   src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg"
                   alt="dark"
                 >
-                <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
+                <div
-                  <a-icon type="check"/>
+                  class="setting-drawer-index-selectIcon"
+                  v-if="navTheme === 'dark'"
+                >
+                  <a-icon type="check" />
                 </div>
               </div>
             </a-tooltip>
 
             <a-tooltip>
               <template slot="title">亮色菜单风格</template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
+              <div
+                class="setting-drawer-index-item"
+                @click="handleMenuTheme('light')"
+              >
                 <img
                   src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg"
                   alt="light"
                 >
-                <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
+                <div
-                  <a-icon type="check"/>
+                  class="setting-drawer-index-selectIcon"
+                  v-if="navTheme !== 'dark'"
+                >
+                  <a-icon type="check" />
                 </div>
               </div>
             </a-tooltip>
@@ -42,89 +63,128 @@
               :key="index"
             >
               <template slot="title">{{ item.key }}</template>
-              <a-tag :color="item.color" @click="changeColor(item.color)">
+              <a-tag
-                <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
+                :color="item.color"
+                @click="changeColor(item.color)"
+              >
+                <a-icon
+                  type="check"
+                  v-if="item.color === primaryColor"
+                ></a-icon>
               </a-tag>
             </a-tooltip>
           </div>
         </div>
-        <a-divider/>
+        <a-divider />
 
         <div :style="{ marginBottom: '24px' }">
           <h3 class="setting-drawer-index-title">导航模式</h3>
 
           <div class="setting-drawer-index-blockChecbox">
-            <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
+            <div
+              class="setting-drawer-index-item"
+              @click="handleLayout('sidemenu')"
+            >
               <img
                 src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg"
                 alt="sidemenu"
               >
-              <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
+              <div
-                <a-icon type="check"/>
+                class="setting-drawer-index-selectIcon"
+                v-if="layoutMode === 'sidemenu'"
+              >
+                <a-icon type="check" />
               </div>
             </div>
 
-            <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
+            <div
+              class="setting-drawer-index-item"
+              @click="handleLayout('topmenu')"
+            >
               <img
                 src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg"
                 alt="topmenu"
               >
-              <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
+              <div
-                <a-icon type="check"/>
+                class="setting-drawer-index-selectIcon"
+                v-if="layoutMode !== 'sidemenu'"
+              >
+                <a-icon type="check" />
               </div>
             </div>
           </div>
         </div>
-        <a-divider/>
+        <a-divider />
 
         <div :style="{ marginBottom: '24px' }">
           <h3 class="setting-drawer-index-title">仪表盘</h3>
           <a-list :split="false">
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">文章总数</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">评论总数</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">附件总数</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">成立天数</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">最新文章</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">最新日志</div>
               </a-list-item-meta>
             </a-list-item>
             <a-list-item>
-              <a-switch slot="actions" size="small"/>
+              <a-switch
+                slot="actions"
+                size="small"
+              />
               <a-list-item-meta>
                 <div slot="title">最新评论</div>
               </a-list-item-meta>
             </a-list-item>
           </a-list>
         </div>
-        <a-divider/>
+        <a-divider />
       </div>
     </a-drawer>
   </div>

src/components/global.less

@@ -1,7 +1,7 @@
 @import './index.less';
 
 body {
-  overflow-y: scroll;
+  overflow-y: scroll!important;
 }
 
 .layout.ant-layout {

src/layouts/BasicLayout.vue

@@ -43,17 +43,15 @@
       />
 
       <!-- layout content -->
-      <a-layout-content
+      <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
-        :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }"
-      >
         <transition name="page-transition">
-          <route-view/>
+          <route-view />
         </transition>
       </a-layout-content>
 
       <!-- layout footer -->
       <a-layout-footer>
-        <global-footer/>
+        <global-footer />
       </a-layout-footer>
     </a-layout>
   </a-layout>

src/views/interface/ThemeEdit.vue

@@ -35,7 +35,7 @@
         :xs="24"
         :style="{'padding-bottom':'12px'}"
       >
-        <a-card title="Anatole 主题">
+        <a-card :title="activatedTheme.name+' 主题'">
           <theme-file
             :files="files"
             @listenToSelect="handleSelectFile"
@@ -67,11 +67,13 @@ export default {
       },
       files: [],
       file: {},
-      content: ''
+      content: '',
+      activatedTheme: {}
     }
   },
   created() {
     this.loadFiles()
+    this.loadActivatedTheme()
   },
   methods: {
     onSelect(keys) {
@@ -85,6 +87,11 @@ export default {
         this.files = response.data.data
       })
     },
+    loadActivatedTheme() {
+      themeApi.getActivatedTheme().then(response => {
+        this.activatedTheme = response.data.data
+      })
+    },
     handleSelectFile(file) {
       const _this = this
       if (!file.editable) {

src/views/interface/ThemeList.vue

@@ -18,12 +18,16 @@
             <a-card
               hoverable
               :title="item.name"
+              :bodyStyle="{ padding: 0 }"
             >
-              <img
+              <!-- <img
                 :alt="item.name"
                 :src="item.screenshots"
                 slot="cover"
-              >
+              > -->
+              <div class="theme-thumb">
+                <img :alt="item.name" :src="item.screenshots">
+              </div>
               <template
                 class="ant-card-actions"
                 slot="actions"
@@ -381,4 +385,18 @@ export default {
   bottom: 80px;
   right: 20px;
 }
+.theme-thumb {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 56%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
 </style>

src/views/post/PostEdit.vue

@@ -20,154 +20,147 @@
           />
         </div>
       </a-col>
-
-      <a-col
-        :xl="24"
-        :lg="24"
-        :md="24"
-        :sm="24"
-        :xs="24"
-      >
-        <a-drawer
-          title="文章设置"
-          :width="isMobile()?'100%':'460'"
-          closable
-          @close="onClose"
-          :visible="visible"
-        >
-          <div class="post-setting-drawer-content">
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">基本设置</h3>
-              <div class="post-setting-drawer-item">
-                <a-form layout="vertical">
-                  <a-form-item
-                    label="文章路径："
-                    :help="'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
-                  >
-                    <a-input v-model="postToStage.url" />
-                  </a-form-item>
-                  <a-form-item label="文章密码：">
-                    <a-input
-                      type="password"
-                      v-model="postToStage.password"
-                    />
-                  </a-form-item>
-                  <a-form-item label="开启评论：">
-                    <a-radio-group
-                      v-model="postToStage.disallowComment"
-                      :defaultValue="false"
-                    >
-                      <a-radio :value="false">开启</a-radio>
-                      <a-radio :value="true">关闭</a-radio>
-                    </a-radio-group>
-                  </a-form-item>
-                </a-form>
-              </div>
-            </div>
-            <a-divider />
-
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">分类目录</h3>
-              <div class="post-setting-drawer-item">
-                <category-tree
-                  v-model="selectedCategoryIds"
-                  :categories="categories"
-                />
-                <div>
-                  <a-form layout="vertical">
-                    <a-form-item v-if="categoryForm">
-                      <category-select-tree
-                        :categories="categories"
-                        v-model="categoryToCreate.parentId"
-                      />
-                    </a-form-item>
-                    <a-form-item v-if="categoryForm">
-                      <a-input
-                        placeholder="分类名称"
-                        v-model="categoryToCreate.name"
-                      />
-                    </a-form-item>
-                    <a-form-item v-if="categoryForm">
-                      <a-input
-                        placeholder="分类路径"
-                        v-model="categoryToCreate.slugNames"
-                      />
-                    </a-form-item>
-                    <a-form-item>
-                      <a-button
-                        type="primary"
-                        style="marginRight: 8px"
-                        v-if="categoryForm"
-                        @click="handlerCreateCategory"
-                      >保存</a-button>
-                      <a-button
-                        type="dashed"
-                        style="marginRight: 8px"
-                        v-if="!categoryForm"
-                        @click="toggleCategoryForm"
-                      >新增</a-button>
-                      <a-button
-                        v-if="categoryForm"
-                        @click="toggleCategoryForm"
-                      >取消</a-button>
-                    </a-form-item>
-                  </a-form>
-                </div>
-              </div>
-            </div>
-            <a-divider />
-
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">标签</h3>
-              <div class="post-setting-drawer-item">
-                <a-form layout="vertical">
-                  <a-form-item>
-                    <TagSelect v-model="selectedTagIds" />
-                  </a-form-item>
-                </a-form>
-              </div>
-            </div>
-            <a-divider />
-
-            <div :style="{ marginBottom: '16px' }">
-              <h3 class="post-setting-drawer-title">缩略图</h3>
-              <div class="post-setting-drawer-item">
-                <div class="post-thum">
-                  <img
-                    class="img"
-                    :src="postToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
-                    @click="handleShowThumbDrawer"
-                  >
-                  <a-button
-                    class="post-thum-remove"
-                    type="dashed"
-                    @click="handlerRemoveThumb"
-                  >移除</a-button>
-                </div>
-              </div>
-            </div>
-            <a-divider />
-          </div>
-          <AttachmentSelectDrawer
-            v-model="thumDrawerVisible"
-            @listenToSelect="handleSelectPostThumb"
-            :drawerWidth="460"
-          />
-          <a-divider />
-          <div class="bottom-control">
-            <a-button
-              style="marginRight: 8px"
-              @click="handleDraftClick"
-            >保存草稿</a-button>
-            <a-button
-              @click="handlePublishClick"
-              type="primary"
-            >发布</a-button>
-          </div>
-        </a-drawer>
-      </a-col>
     </a-row>
 
+    <a-drawer
+      title="文章设置"
+      :width="isMobile()?'100%':'460'"
+      placement="right"
+      closable
+      @close="onClose"
+      :visible="visible"
+    >
+      <div class="post-setting-drawer-content">
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">基本设置</h3>
+          <div class="post-setting-drawer-item">
+            <a-form layout="vertical">
+              <a-form-item
+                label="文章路径："
+                :help="'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
+              >
+                <a-input v-model="postToStage.url" />
+              </a-form-item>
+              <a-form-item label="文章密码：">
+                <a-input
+                  type="password"
+                  v-model="postToStage.password"
+                />
+              </a-form-item>
+              <a-form-item label="开启评论：">
+                <a-radio-group
+                  v-model="postToStage.disallowComment"
+                  :defaultValue="false"
+                >
+                  <a-radio :value="false">开启</a-radio>
+                  <a-radio :value="true">关闭</a-radio>
+                </a-radio-group>
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">分类目录</h3>
+          <div class="post-setting-drawer-item">
+            <category-tree
+              v-model="selectedCategoryIds"
+              :categories="categories"
+            />
+            <div>
+              <a-form layout="vertical">
+                <a-form-item v-if="categoryForm">
+                  <category-select-tree
+                    :categories="categories"
+                    v-model="categoryToCreate.parentId"
+                  />
+                </a-form-item>
+                <a-form-item v-if="categoryForm">
+                  <a-input
+                    placeholder="分类名称"
+                    v-model="categoryToCreate.name"
+                  />
+                </a-form-item>
+                <a-form-item v-if="categoryForm">
+                  <a-input
+                    placeholder="分类路径"
+                    v-model="categoryToCreate.slugNames"
+                  />
+                </a-form-item>
+                <a-form-item>
+                  <a-button
+                    type="primary"
+                    style="marginRight: 8px"
+                    v-if="categoryForm"
+                    @click="handlerCreateCategory"
+                  >保存</a-button>
+                  <a-button
+                    type="dashed"
+                    style="marginRight: 8px"
+                    v-if="!categoryForm"
+                    @click="toggleCategoryForm"
+                  >新增</a-button>
+                  <a-button
+                    v-if="categoryForm"
+                    @click="toggleCategoryForm"
+                  >取消</a-button>
+                </a-form-item>
+              </a-form>
+            </div>
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">标签</h3>
+          <div class="post-setting-drawer-item">
+            <a-form layout="vertical">
+              <a-form-item>
+                <TagSelect v-model="selectedTagIds" />
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
+        <a-divider />
+
+        <div :style="{ marginBottom: '16px' }">
+          <h3 class="post-setting-drawer-title">缩略图</h3>
+          <div class="post-setting-drawer-item">
+            <div class="post-thum">
+              <img
+                class="img"
+                :src="postToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
+                @click="handleShowThumbDrawer"
+              >
+              <a-button
+                class="post-thum-remove"
+                type="dashed"
+                @click="handlerRemoveThumb"
+              >移除</a-button>
+            </div>
+          </div>
+        </div>
+        <a-divider />
+      </div>
+      <AttachmentSelectDrawer
+        v-model="thumDrawerVisible"
+        @listenToSelect="handleSelectPostThumb"
+        :drawerWidth="460"
+      />
+      <a-divider />
+      <div class="bottom-control">
+        <a-button
+          style="marginRight: 8px"
+          @click="handleDraftClick"
+        >保存草稿</a-button>
+        <a-button
+          @click="handlePublishClick"
+          type="primary"
+        >发布</a-button>
+      </div>
+    </a-drawer>
+
     <AttachmentDrawer v-model="attachmentDrawerVisible" />
 
     <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">