Refactor Login.vue.

src/views/comment/CommentList.vue

@@ -61,18 +61,6 @@
             <a-icon type="down" />
           </a-button>
         </a-dropdown>
-        <a-button
-          type="primary"
-          icon="message"
-          v-if="tableListMode"
-          @click="toggleTableMode"
-        >会话模式</a-button>
-        <a-button
-          type="primary"
-          icon="ordered-list"
-          v-else
-          @click="toggleTableMode"
-        >列表模式</a-button>
       </div>
       <div style="margin-top:15px">
         <a-table
@@ -103,15 +91,39 @@
             slot="action"
             slot-scope="text, record"
           >
-            <a
+            <a-popconfirm
-              href="javascript:;"
+              :title="'你确定要通过该评论？'"
-              @click="handleEditComment(record.id)"
+              @confirm="handleEditStatusClick(record.id,'RECYCLE')"
-            >通过</a>
+              okText="确定"
+              cancelText="取消"
+              v-if="record.status === 'AUDITING'"
+            >
+              <a href="javascript:;">通过</a>
+            </a-popconfirm>
+
+            <a href="javascript:;" v-if="record.status === 'PUBLISHED'">回复</a>
+
             <a-divider type="vertical" />
-            <a
+
-              href="javascript:;"
+            <a-popconfirm
-              @click="handleDeleteComment(record.id)"
+              :title="'你确定要将该评论移到回收站？'"
-            >删除</a>
+              @confirm="handleEditStatusClick(record.id,'RECYCLE')"
+              okText="确定"
+              cancelText="取消"
+              v-if="record.status === 'PUBLISHED' || record.status === 'AUDITING'"
+            >
+              <a href="javascript:;">回收站</a>
+            </a-popconfirm>
+
+            <a-popconfirm
+              :title="'你确定要永久删除该评论？'"
+              @confirm="handleDeleteComment(record.id)"
+              okText="确定"
+              cancelText="取消"
+              v-else-if="record.status === 'RECYCLE'"
+            >
+              <a href="javascript:;">删除</a>
+            </a-popconfirm>
           </span>
         </a-table>
         <div class="page-wrapper">
@@ -139,7 +151,8 @@ const columns = [
   },
   {
     title: '内容',
-    dataIndex: 'content'
+    dataIndex: 'content',
+    scopedSlots: { customRender: 'content' }
   },
   {
     title: '状态',
@@ -188,7 +201,6 @@ export default {
       selectedRows: [],
       comments: [],
       commentsLoading: false,
-      tableListMode: true,
       commentStatus: commentApi.commentStatus
     }
   },
@@ -213,15 +225,11 @@ export default {
       if (isSearch) {
         this.queryParam.page = 0
       }
-      if (this.tableListMode) {
+      commentApi.query(this.queryParam).then(response => {
-        commentApi.query(this.queryParam).then(response => {
+        this.comments = response.data.data.content
-          this.comments = response.data.data.content
+        this.pagination.total = response.data.data.total
-          this.pagination.total = response.data.data.total
+        this.commentsLoading = false
-          this.commentsLoading = false
+      })
-        })
-      } else {
-        // TODO tree view
-      }
     },
     handleEditComment(id) {
       this.$message.success('编辑')
@@ -239,10 +247,6 @@ export default {
       this.queryParam.keyword = null
       this.queryParam.status = null
       this.loadComments()
-    },
-    toggleTableMode() {
-      this.tableListMode = !this.tableListMode
-      this.loadComments()
     }
   }
 }

src/views/dashboard/Dashboard.vue

@@ -12,7 +12,6 @@
           :loading="postLoading"
           :bordered="false"
           title="最新文章"
-          :bodyStyle="{ padding: '0px' }"
         >
           最新文章
         </a-card>
@@ -28,9 +27,47 @@
           :loading="commentLoading"
           :bordered="false"
           title="最新评论"
-          :bodyStyle="{ padding: '0px' }"
         >
-          最新评论
+          <a-comment>
+            <span slot="actions">Reply to</span>
+            <a slot="author">Han Solo</a>
+            <a-avatar
+              slot="avatar"
+              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+              alt="Han Solo"
+            />
+            <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+            <a-comment>
+              <span slot="actions">Reply to</span>
+              <a slot="author">Han Solo</a>
+              <a-avatar
+                slot="avatar"
+                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                alt="Han Solo"
+              />
+              <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              <a-comment>
+                <span slot="actions">Reply to</span>
+                <a slot="author">Han Solo</a>
+                <a-avatar
+                  slot="avatar"
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                  alt="Han Solo"
+                />
+                <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </a-comment>
+              <a-comment>
+                <span slot="actions">Reply to</span>
+                <a slot="author">Han Solo</a>
+                <a-avatar
+                  slot="avatar"
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                  alt="Han Solo"
+                />
+                <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </a-comment>
+            </a-comment>
+          </a-comment>
         </a-card>
       </a-col>
       <a-col
@@ -44,7 +81,6 @@
           :loading="commentLoading"
           :bordered="false"
           title="最新日志"
-          :bodyStyle="{ padding: '0px' }"
         >
           最新日志
         </a-card>

src/views/user/Login.vue

@@ -39,16 +39,15 @@
             />
           </a-input>
         </a-form-item>
-        <a-form-item
+        <a-row>
-          class="animated fadeInUp"
-          :style="{'animation-delay': '0.3s'}"
-        >
           <a-button
             type="primary"
             :block="true"
             @click="handleLogin"
+            class="animated fadeInUp"
+            :style="{'animation-delay': '0.3s'}"
           >登录</a-button>
-        </a-form-item>
+        </a-row>
       </a-form>
     </div>
   </div>
@@ -101,11 +100,15 @@ export default {
 </script>
 <style>
 body {
-  background-color: #f5f5f5;
+  height: 100%;
+  background-color: #f8f8f8;
 }
 * {
   outline: 0;
 }
+.ant-form-item {
+  margin-bottom: 24px;
+}
 .container {
   padding-right: 15px;
   padding-left: 15px;
@@ -113,21 +116,20 @@ body {
   margin-left: auto;
 }
 .loginForm {
-  max-width: 380px;
+  position: absolute;
-  margin-top: 10%;
+  top: 45%;
+  left: 50%;
+  margin: -160px 0 0 -160px;
+  width: 320px;
+  padding: 32px;
+  box-shadow: 0px 0px 20px 0px rgba(76, 50, 50, 0.08);
 }
 .loginLogo {
-  font-size: 56px;
+  font-size: 32px;
   text-align: center;
-  margin-bottom: 25px;
+  margin-bottom: 24px;
   font-weight: 500;
   color: #444;
   text-shadow: #b2baba 0.1em 0.1em 0.2em;
 }
-.loginBody {
-  padding: 20px;
-  background-color: #fff;
-  -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
-}
 </style>