From 10e9e91c96ad57446e25502104a53d6c7e1cc987 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Fri, 5 Apr 2019 13:05:12 +0800
Subject: [PATCH] ui build

---
 src/api/category.js               | 14 +++++++
 src/views/comment/CommentList.vue |  4 +-
 src/views/interface/ThemeEdit.vue |  9 ++++-
 src/views/post/PostEdit.vue       | 64 ++++++++++++++++++++-----------
 src/views/post/PostList.vue       | 30 ++++++++++-----
 src/views/user/Profile.vue        | 42 ++++++++++++--------
 6 files changed, 111 insertions(+), 52 deletions(-)
 create mode 100644 src/api/category.js

diff --git a/src/api/category.js b/src/api/category.js
new file mode 100644
index 000000000..aac5441d1
--- /dev/null
+++ b/src/api/category.js
@@ -0,0 +1,14 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/categories'
+
+const categoryApi = {}
+
+categoryApi.listAll = () => {
+  return service({
+    url: `${baseUrl}`,
+    method: 'get'
+  })
+}
+
+export default categoryApi
diff --git a/src/views/comment/CommentList.vue b/src/views/comment/CommentList.vue
index 332fdade3..f6e5da798 100644
--- a/src/views/comment/CommentList.vue
+++ b/src/views/comment/CommentList.vue
@@ -11,7 +11,7 @@
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="评论状态">
-                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                <a-select v-model="queryParam.status" placeholder="请选择" defaultValue="0">
                   <a-select-option value="0">已发布</a-select-option>
                   <a-select-option value="1">待审核</a-select-option>
                   <a-select-option value="2">回收站</a-select-option>
@@ -41,7 +41,7 @@
         </a-dropdown>
       </div>
       <div style="margin-top:15px">
-        <a-table :columns="columns" :dataSource="data">
+        <a-table :columns="columns">
           <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
           <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
           <span slot="tags" slot-scope="tags">
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index 98b48ce33..906fd3f22 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -3,7 +3,14 @@
     <a-row :gutter="12">
       <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
         <a-card>
-          <codemirror :value="value"></codemirror>
+          <a-form layout="vertical">
+            <a-form-item>
+              <codemirror :value="value"></codemirror>
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary">保存</a-button>
+            </a-form-item>
+          </a-form>
         </a-card>
       </a-col>
       <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index d601249f2..ad4486e96 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -15,29 +15,23 @@
 
         <a-card>
           <div id="editor">
-            <mavon-editor v-model="value"/>
+            <mavon-editor :toolbars="markdownOption" v-model="value" :boxShadow="false" :ishljs = "true"/>
           </div>
         </a-card>
       </a-col>
 
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-drawer
-          title="文章设置"
-          :width="drawerWidth"
-          :closable="true"
-          @close="onClose"
-          :visible="visible"
-        >
+        <a-drawer title="文章设置" :width="drawerWidth" :closable="true" @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="'https://localhost:8090/archives/'+postUrl">
-                    <a-input v-model="postUrl"/>
+                  <a-form-item label="文章路径：" :help="'https://localhost:8090/archives/' + postUrl">
+                    <a-input v-model="postUrl" />
                   </a-form-item>
                   <a-form-item label="文章密码：">
-                    <a-input type="password"/>
+                    <a-input type="password" />
                   </a-form-item>
                   <a-form-item label="是否开启评论：">
                     <a-select defaultValue="1">
@@ -48,7 +42,7 @@
                 </a-form>
               </div>
             </div>
-            <a-divider/>
+            <a-divider />
 
             <div :style="{ marginBottom: '16px' }">
               <h3 class="post-setting-drawer-title">分类目录</h3>
@@ -58,7 +52,7 @@
                 </a-tree>
               </div>
             </div>
-            <a-divider/>
+            <a-divider />
 
             <div :style="{ marginBottom: '16px' }">
               <h3 class="post-setting-drawer-title">标签</h3>
@@ -66,27 +60,25 @@
                 <a-form layout="vertical">
                   <a-form-item>
                     <a-select mode="tags" placeholder="选择或输入标签">
-                      <a-select-option
-                        v-for="tag in tags"
-                        :key="tag.id"
-                        :value="tag.id.toString()"
-                      >{{ tag.name }}</a-select-option>
+                      <a-select-option v-for="tag in tags" :key="tag.id" :value="tag.id.toString()">{{
+                        tag.name
+                      }}</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-form>
               </div>
             </div>
-            <a-divider/>
+            <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="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+                  <img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" />
                 </div>
               </div>
             </div>
-            <a-divider/>
+            <a-divider />
           </div>
           <div class="postControl">
             <a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
@@ -103,6 +95,26 @@ import { mavonEditor } from 'mavon-editor'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import 'mavon-editor/dist/css/index.css'
 import tagApi from '@/api/tag'
+const toolbars = {
+  bold: true, // 粗体
+  italic: true, // 斜体
+  header: true, // 标题
+  underline: true, // 下划线
+  strikethrough: true, // 中划线
+  quote: true, // 引用
+  ol: true, // 有序列表
+  ul: true, // 无序列表
+  link: true, // 链接
+  imagelink: true, // 图片链接
+  code: true, // code
+  table: true, // 表格
+  readmodel: true, // 沉浸式阅读
+  undo: true, // 上一步
+  redo: true, // 下一步
+  navigation: true, // 导航目录
+  subfield: true, // 单双栏模式
+  preview: true // 预览
+}
 const treeData = [
   {
     title: '学习记录',
@@ -144,7 +156,8 @@ export default {
       drawerWidth: '460',
       postUrl: 'hello-world',
       tags: [],
-      treeData
+      treeData,
+      markdownOption: toolbars
     }
   },
   mounted() {
@@ -206,7 +219,12 @@ export default {
   padding-bottom: 0;
 }
 
-.post-thum .img{
+.post-thum .img {
   width: 100%;
 }
+
+.mavonEditor {
+  width: 100%;
+  height: 560px;
+}
 </style>
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index c80c243e6..1284e155a 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -11,7 +11,7 @@
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="文章状态">
-                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
+                <a-select v-model="queryParam.status" placeholder="请选择文章状态" defaultValue="0">
                   <a-select-option value="0">已发布</a-select-option>
                   <a-select-option value="1">草稿箱</a-select-option>
                   <a-select-option value="2">回收站</a-select-option>
@@ -20,10 +20,8 @@
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="分类目录">
-                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
-                  <a-select-option value="0">xx</a-select-option>
-                  <a-select-option value="1">xx</a-select-option>
-                  <a-select-option value="2">xx</a-select-option>
+                <a-select v-model="queryParam.categoryId" placeholder="请选择分类">
+                  <a-select-option v-for="category in categories" :key="category.id">{{ category.name }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
@@ -39,7 +37,9 @@
       </div>
 
       <div class="table-operator">
-        <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+        <router-link :to="{name:'PostEdit'}">
+          <a-button type="primary" icon="plus">写文章</a-button>
+        </router-link>
         <a-dropdown>
           <a-menu slot="overlay">
             <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
@@ -51,7 +51,7 @@
         </a-dropdown>
       </div>
       <div style="margin-top:15px">
-        <a-table :columns="columns" :dataSource="data">
+        <a-table :columns="columns">
           <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
           <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
           <span slot="tags" slot-scope="tags">
@@ -71,6 +71,7 @@
 </template>
 
 <script>
+import categoryApi from '@/api/category'
 export default {
   name: 'PostList',
   components: {},
@@ -120,10 +121,19 @@ export default {
       selectedRowKeys: [],
       selectedRows: [],
       options: {},
-      optionAlertShow: false
+      optionAlertShow: false,
+      categories: []
     }
   },
-  created() {},
-  methods: {}
+  created() {
+    this.loadCategories()
+  },
+  methods: {
+    loadCategories() {
+      categoryApi.listAll().then(response => {
+        this.categories = response.data.data
+      })
+    }
+  }
 }
 </script>
diff --git a/src/views/user/Profile.vue b/src/views/user/Profile.vue
index ba61e8188..9833819ae 100644
--- a/src/views/user/Profile.vue
+++ b/src/views/user/Profile.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="24">
-      <a-col :md="24" :lg="10">
-        <a-card :bordered="false" :bodyStyle="{ padding: '16' }">
+      <a-col :lg="10" :md="24">
+        <a-card :bodyStyle="{ padding: '16' }" :bordered="false">
           <div class="profile-center-avatarHolder">
             <div class="avatar">
               <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
@@ -22,7 +22,7 @@
           </div>
           <a-divider />
           <div class="general-profile">
-            <a-list itemLayout="horizontal" :loading="countsLoading">
+            <a-list :loading="countsLoading" itemLayout="horizontal">
               <a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item>
               <a-list-item>累计创建了 {{ counts.linkCount || 0 }} 个标签。</a-list-item>
               <a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item>
@@ -33,11 +33,11 @@
           </div>
         </a-card>
       </a-col>
-      <a-col :md="24" :lg="14">
-        <a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }">
+      <a-col :lg="14" :md="24">
+        <a-card :bodyStyle="{ padding: '0' }" :bordered="false" title="个人资料">
           <div class="card-container">
             <a-tabs type="card">
-              <a-tab-pane tab="基本资料" key="1">
+              <a-tab-pane key="1" tab="基本资料">
                 <a-form layout="vertical">
                   <a-form-item label="用户名：">
                     <a-input v-model="user.username" />
@@ -49,31 +49,31 @@
                     <a-input v-model="user.email" />
                   </a-form-item>
                   <a-form-item label="个人说明：">
-                    <a-input type="textarea" :autosize="{ minRows: 5 }" v-model="user.description" />
+                    <a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description" />
                   </a-form-item>
                   <a-form-item>
-                    <a-button type="primary" @click="updateProfile">保存</a-button>
+                    <a-button @click="updateProfile" type="primary">保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
-              <a-tab-pane tab="密码" key="2">
+              <a-tab-pane key="2" tab="密码">
                 <a-form layout="vertical">
                   <a-form-item label="原密码：">
-                    <a-input v-model="passwordParam.oldPassword" type="password" />
+                    <a-input type="password" v-model="passwordParam.oldPassword" />
                   </a-form-item>
                   <a-form-item label="新密码：">
-                    <a-input v-model="passwordParam.newPassword" type="password" />
+                    <a-input type="password" v-model="passwordParam.newPassword" />
                   </a-form-item>
                   <a-form-item label="确认密码：">
-                    <a-input v-model="passwordParam.confirmPassword" type="password" />
+                    <a-input type="password" v-model="passwordParam.confirmPassword" />
                   </a-form-item>
                   <a-form-item>
                     <a-button
-                      type="primary"
                       :disabled="passwordUpdateButtonDisabled"
                       @click="updatePassword"
-                    >确认更改</a-button
-                    >
+                      type="primary"
+                    >确认更改
+                    </a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
@@ -88,6 +88,7 @@
 <script>
 import userApi from '@/api/user'
 import adminApi from '@/api/admin'
+
 export default {
   components: {},
   data() {
@@ -127,7 +128,7 @@ export default {
     updatePassword() {
       // Check confirm password
       if (this.passwordParam.newPassword !== this.passwordParam.confirmPassword) {
-        this.$message.error('确认密码和新密码不匹配')
+        this.$message.error('确认密码和新密码不匹配！')
         return
       }
 
@@ -136,6 +137,7 @@ export default {
     updateProfile() {
       userApi.updateProfile(this.user).then(response => {
         this.user = response.data.data
+        this.$message.success('资料更新成功！')
       })
     }
   }
@@ -148,9 +150,11 @@ export default {
   height: 100%;
   min-height: 100%;
   transition: 0.3s;
+
   .profile-center-avatarHolder {
     text-align: center;
     margin-bottom: 24px;
+
     & > .avatar {
       margin: 0 auto;
       width: 104px;
@@ -158,11 +162,13 @@ export default {
       margin-bottom: 20px;
       border-radius: 50%;
       overflow: hidden;
+
       img {
         height: 100%;
         width: 100%;
       }
     }
+
     .username {
       color: rgba(0, 0, 0, 0.85);
       font-size: 20px;
@@ -171,12 +177,14 @@ export default {
       margin-bottom: 4px;
     }
   }
+
   .profile-center-detail {
     p {
       margin-bottom: 8px;
       padding-left: 26px;
       position: relative;
     }
+
     i {
       position: absolute;
       height: 14px;
@@ -192,6 +200,7 @@ export default {
 .card-container {
   background: #f5f5f5;
 }
+
 .card-container > .ant-tabs-card > .ant-tabs-content {
   margin-top: -16px;
 }
@@ -214,6 +223,7 @@ export default {
   border-color: #fff;
   background: #fff;
 }
+
 .ant-form-vertical .ant-form-item {
   padding-bottom: 0;
 }