样式美化

src/components/GlobalFooter/GlobalFooter.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="footer">
     <div class="copyright">
-      Proudly power by <a target="_blank" href="https://github.com/halo-dev/halo">Halo</a>
+      Proudly power by 
+      <router-link :to="{ name:'About' }">
+        <a href="javascript:void(0);">Halo</a>
+      </router-link>
     </div>
   </div>
 </template>

src/config/router.config.js

@@ -176,6 +176,13 @@ export const asyncRouterMap = [
             name: 'ToolList',
             component: () => import('@/views/system/ToolList'),
             meta: { title: '小工具', hiddenHeaderContent: false }
+          },
+          {
+            path: '/system/about',
+            name: 'About',
+            component: () => import('@/views/system/About'),
+            hidden: true,
+            meta: { title: '关于 Halo', hiddenHeaderContent: false }
           }
         ]
       }

src/views/page/PageEdit.vue

@@ -2,23 +2,17 @@
   <div class="page-header-index-wide">
     <a-row :gutter="12">
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card>
+        <div style="margin-bottom: 16px">
-          <div style="margin-bottom: 16px">
+          <a-input
-            <a-input
+            v-model="postToStage.title"
-              v-model="postToStage.title"
+            v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
-              v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
+            size="large"
-              size="large"
+            placeholder="请输入页面标题"
-              placeholder="请输入页面标题"
+          />
-            />
+        </div>
-          </div>
+        <div id="editor">
-          <a-button type="primary" @click="showDrawer">发布</a-button>
+          <mavon-editor v-model="postToStage.originalContent" :boxShadow="false" :ishljs="true"/>
-        </a-card>
+        </div>
-
-        <a-card>
-          <div id="editor">
-            <mavon-editor v-model="postToStage.originalContent"/>
-          </div>
-        </a-card>
       </a-col>
 
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
@@ -34,17 +28,17 @@
               <h3 class="post-setting-drawer-title">基本设置</h3>
               <div class="post-setting-drawer-item">
                 <a-form layout="vertical">
-                  <a-form-item label="页面路径：" :help="'https://localhost:8090/p/'+ (postToStage.url ? postToStage.url : '{auto_generate}')">
+                  <a-form-item
+                    label="页面路径："
+                    :help="'https://localhost:8090/p/'+ (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
+                    <a-radio-group v-model="postToStage.disallowComment" :defaultValue="false">
-                      v-model="postToStage.disallowComment"
-                      :defaultValue="false"
-                    >
                       <a-radio :value="false">开启</a-radio>
                       <a-radio :value="true">关闭</a-radio>
                     </a-radio-group>
@@ -76,11 +70,19 @@
         </a-drawer>
       </a-col>
     </a-row>
+
+    <footer-tool-bar
+      :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}"
+    >
+      <a-button type="primary" @click="showDrawer">发布</a-button>
+      <a-button type="dashed" style="margin-left: 8px;">附件库</a-button>
+    </footer-tool-bar>
   </div>
 </template>
 
 <script>
 import { mavonEditor } from 'mavon-editor'
+import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import 'mavon-editor/dist/css/index.css'
 import postApi from '@/api/post'
@@ -88,9 +90,9 @@ import themeApi from '@/api/theme'
 export default {
   name: 'Editor',
   components: {
-    mavonEditor
+    mavonEditor,
+    FooterToolBar
   },
-
   mixins: [mixin, mixinDevice],
   data() {
     return {
@@ -179,17 +181,9 @@ export default {
 }
 </script>
 <style scoped>
-#editor {
-  margin: auto;
-  width: 100%;
-}
-
 .v-note-wrapper {
   z-index: 1000;
-}
+  min-height: 540px;
-
-.ant-card {
-  margin-bottom: 16px;
 }
 
 .ant-form-vertical .ant-form-item {

src/views/page/PageList.vue

@@ -11,9 +11,11 @@
         <div class="card-container">
           <a-tabs type="card">
             <a-tab-pane
-              tab="内置页面"
               key="internal"
             >
+            <span slot="tab">
+              <a-icon type="pushpin" />内置页面
+            </span>
               <a-table
                 :columns="internalColumns"
                 :dataSource="internalPages"
@@ -45,9 +47,12 @@
               </a-table>
             </a-tab-pane>
             <a-tab-pane
-              tab="自定义页面"
               key="custom"
-            >自定义页面</a-tab-pane>
+            >
+            <span slot="tab">
+              <a-icon type="fork" />内置页面
+            </span>
+            自定义页面</a-tab-pane>
           </a-tabs>
         </div>
       </a-col>

src/views/post/PostEdit.vue

@@ -497,10 +497,6 @@ export default {
   min-height: 540px;
 }
 
-.ant-card {
-  margin-bottom: 16px;
-}
-
 .ant-form-vertical .ant-form-item {
   padding-bottom: 0;
 }

src/views/system/About.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="page-header-index-wide">About page</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+</style>

src/views/system/BackupList.vue

@@ -2,7 +2,10 @@
   <div class="page-header-index-wide">
     <div class="card-container">
       <a-tabs type="card">
-        <a-tab-pane tab="资源文件备份" key="1">
+        <a-tab-pane key="1">
+          <span slot="tab">
+            <a-icon type="folder" />资源文件备份
+          </span>
           <a-table :columns="columns" :dataSource="ResourcesData">
             <span slot="action" slot-scope="text, record">
               <a href="javascript:;" @click="downResources('ResourcesData',record.id)">下载</a>
@@ -14,7 +17,10 @@
           </a-table>
           <a-button type="primary" @click="backupData('ResourcesData')">备份</a-button>
         </a-tab-pane>
-        <a-tab-pane tab="数据库备份" key="2">
+        <a-tab-pane key="2">
+          <span slot="tab">
+            <a-icon type="database" />资源文件备份
+          </span>
           <a-table :columns="columns" :dataSource="DataBaseData">
             <span slot="action" slot-scope="text, record">
               <a href="javascript:;" @click="downResources('DataBaseData',record.id)">下载</a>
@@ -26,7 +32,10 @@
           </a-table>
           <a-button type="primary" @click="backupData('DataBaseData')">备份</a-button>
         </a-tab-pane>
-        <a-tab-pane tab="文章备份" key="3">
+        <a-tab-pane key="3">
+          <span slot="tab">
+            <a-icon type="read" />文章备份
+          </span>
           <a-table :columns="columns" :dataSource="FileData">
             <span slot="action" slot-scope="text, record">
               <a href="javascript:;" @click="downResources('FileData',record.id)">下载</a>
@@ -125,11 +134,8 @@ export default {
 <style>
 .card-container {
   background: #f5f5f5;
-  overflow: hidden;
-  padding: 24px;
 }
 .card-container > .ant-tabs-card > .ant-tabs-content {
-  /* height: 120px; */
   margin-top: -16px;
 }
 
@@ -151,4 +157,7 @@ export default {
   border-color: #fff;
   background: #fff;
 }
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 0;
+}
 </style>

src/views/system/OptionForm.vue

@@ -35,7 +35,7 @@
             </a-tab-pane>
             <a-tab-pane key="seo">
               <span slot="tab">
-                <a-icon type="read" />SEO设置
+                <a-icon type="global" />SEO设置
               </span>
               <a-form layout="vertical">
                 <a-form-item label="关键词： " :wrapper-col="wrapperCol">

src/views/user/Profile.vue

@@ -4,23 +4,32 @@
       <a-col :lg="10" :md="24" :style="{ 'padding-bottom': '12px' }">
         <a-card :bodyStyle="{ padding: '16' }" :bordered="false">
           <div class="profile-center-avatarHolder">
-            <div class="avatar">
+            <a-tooltip placement="right" :trigger="['hover']" title="点击可修改头像">
-              <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
+              <template slot="title">
-            </div>
+                <span>prompt text</span>
+              </template>
+              <div class="avatar">
+                <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'">
+              </div>
+            </a-tooltip>
             <div class="username">{{ user.nickname }}</div>
             <div class="bio">{{ user.description }}</div>
           </div>
           <div class="profile-center-detail">
             <p>
-              <a-icon type="mail" />
+              <a-icon type="link"/>
+              <a href="http://localhost:8090" target="method">http://localhost:8090</a>
+            </p>
+            <p>
+              <a-icon type="mail"/>
               {{ user.email }}
             </p>
             <p>
-              <a-icon type="calendar" />
+              <a-icon type="calendar"/>
               {{ counts.establishDays || 0 }} 天
             </p>
           </div>
-          <a-divider />
+          <a-divider/>
           <div class="general-profile">
             <a-list :loading="countsLoading" itemLayout="horizontal">
               <a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item>
@@ -37,43 +46,48 @@
         <a-card :bodyStyle="{ padding: '0' }" :bordered="false" title="个人资料">
           <div class="card-container">
             <a-tabs type="card">
-              <a-tab-pane key="1" tab="基本资料">
+              <a-tab-pane key="1">
+                <span slot="tab">
+                  <a-icon type="idcard"/>基本资料
+                </span>
                 <a-form layout="vertical">
                   <a-form-item label="用户名：">
-                    <a-input v-model="user.username" />
+                    <a-input v-model="user.username"/>
                   </a-form-item>
                   <a-form-item label="昵称：">
-                    <a-input v-model="user.nickname" />
+                    <a-input v-model="user.nickname"/>
                   </a-form-item>
                   <a-form-item label="邮箱：">
-                    <a-input v-model="user.email" />
+                    <a-input v-model="user.email"/>
                   </a-form-item>
                   <a-form-item label="个人说明：">
-                    <a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description" />
+                    <a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description"/>
                   </a-form-item>
                   <a-form-item>
                     <a-button @click="updateProfile" type="primary">保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
-              <a-tab-pane key="2" tab="密码">
+              <a-tab-pane key="2">
+                <span slot="tab">
+                  <a-icon type="lock"/>密码
+                </span>
                 <a-form layout="vertical">
                   <a-form-item label="原密码：">
-                    <a-input type="password" v-model="passwordParam.oldPassword" />
+                    <a-input type="password" v-model="passwordParam.oldPassword"/>
                   </a-form-item>
                   <a-form-item label="新密码：">
-                    <a-input type="password" v-model="passwordParam.newPassword" />
+                    <a-input type="password" v-model="passwordParam.newPassword"/>
                   </a-form-item>
                   <a-form-item label="确认密码：">
-                    <a-input type="password" v-model="passwordParam.confirmPassword" />
+                    <a-input type="password" v-model="passwordParam.confirmPassword"/>
                   </a-form-item>
                   <a-form-item>
                     <a-button
                       :disabled="passwordUpdateButtonDisabled"
                       @click="updatePassword"
                       type="primary"
-                    >确认更改
+                    >确认更改</a-button>
-                    </a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
@@ -162,6 +176,7 @@ export default {
       margin-bottom: 20px;
       border-radius: 50%;
       overflow: hidden;
+      cursor: pointer;
 
       img {
         height: 100%;