From c007933919f5c74222fca8e4ea0ea4927553a390 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 20 Apr 2019 17:47:00 +0800
Subject: [PATCH] Refactor attachment list and theme list.

---
 src/views/attachment/AttachmentList.vue | 36 +++++-----
 src/views/comment/CommentList.vue       | 12 ++--
 src/views/interface/ThemeList.vue       | 92 ++++++++++++-------------
 src/views/page/internal/LinkList.vue    |  1 +
 4 files changed, 66 insertions(+), 75 deletions(-)

diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 3d89c57b..b01b8975 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -41,25 +41,22 @@
           </div>
         </a-card>
       </a-col>
-
-      <a-col
-        class="attachment-item"
-        v-for="attachment in attachments"
-        :key="attachment.id"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24"
-      >
-        <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(attachment)">
-          <div class="attach-thumb">
-            <img :src="attachment.thumbPath">
-          </div>
-          <a-card-meta>
-            <template slot="description">{{ attachment.mediaType }}</template>
-          </a-card-meta>
-        </a-card>
+      <a-col :span="24">
+        <a-list
+          :grid="{ gutter: 12, xs: 1, sm: 2, md: 4, lg: 6, xl: 6, xxl: 6 }"
+          :dataSource="attachments"
+        >
+          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+            <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(item)">
+              <div class="attach-thumb">
+                <img :src="item.thumbPath">
+              </div>
+              <a-card-meta>
+                <template slot="description">{{ item.mediaType }}</template>
+              </a-card-meta>
+            </a-card>
+          </a-list-item>
+        </a-list>
       </a-col>
     </a-row>
     <a-row type="flex" justify="end">
@@ -179,7 +176,6 @@ export default {
   margin: 24px 0 12px 0;
 }
 
-.attachment-item,
 .search-box {
   padding-bottom: 12px;
 }
diff --git a/src/views/comment/CommentList.vue b/src/views/comment/CommentList.vue
index c7dcc331..688c1402 100644
--- a/src/views/comment/CommentList.vue
+++ b/src/views/comment/CommentList.vue
@@ -91,6 +91,12 @@ const columns = [
     title: '内容',
     dataIndex: 'content'
   },
+  {
+    title: '状态',
+    className: 'status',
+    dataIndex: 'statusProperty',
+    scopedSlots: { customRender: 'status' }
+  },
   {
     title: '评论页面',
     dataIndex: 'post',
@@ -101,12 +107,6 @@ const columns = [
     dataIndex: 'createTime',
     scopedSlots: { customRender: 'createTime' }
   },
-  {
-    title: '状态',
-    className: 'status',
-    dataIndex: 'statusProperty',
-    scopedSlots: { customRender: 'status' }
-  },
   {
     title: '操作',
     dataIndex: 'action',
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index c32190e5..b0b56302 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -1,51 +1,49 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12" type="flex" align="middle">
-      <a-col
-        class="theme-item"
-        :xl="6"
-        :lg="6"
-        :md="12"
-        :sm="12"
-        :xs="24"
-        v-for="(theme, index) in themes"
-        :key="index"
-      >
-        <a-card hoverable :title="theme.name">
-          <img :alt="theme.name" :src="theme.screenshots" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <div v-if="theme.activated">
-              <a-icon type="unlock" theme="twoTone"/>已启用
-            </div>
-            <div v-else @click="handleActivateClick(theme)">
-              <a-icon type="lock"/>启用
-            </div>
-            <div @click="handleEditClick(theme)">
-              <a-icon type="setting"/>设置
-            </div>
-            <a-dropdown placement="topCenter">
-              <a class="ant-dropdown-link" href="#">
-                <a-icon type="ellipsis"/>更多
-              </a>
-              <a-menu slot="overlay">
-                <a-menu-item :key="1" :disabled="theme.activated">
-                  <a-popconfirm
-                    v-if="!theme.activated"
-                    :title="'确定删除【' + theme.name + '】主题？'"
-                    @confirm="deleteTheme(theme.id)"
-                    okText="确定"
-                    cancelText="取消"
-                  >
-                    <a-icon type="delete"/>删除
-                  </a-popconfirm>
-                  <span v-else>
-                    <a-icon type="delete"/>删除
-                  </span>
-                </a-menu-item>
-              </a-menu>
-            </a-dropdown>
-          </template>
-        </a-card>
+      <a-col :span="24">
+        <a-list
+          :grid="{ gutter: 12, xs: 1, sm: 1, md: 2, lg: 4, xl: 4, xxl: 4 }"
+          :dataSource="themes"
+        >
+          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+            <a-card hoverable :title="item.name">
+              <img :alt="item.name" :src="item.screenshots" slot="cover">
+              <template class="ant-card-actions" slot="actions">
+                <div v-if="item.activated">
+                  <a-icon type="unlock" theme="twoTone"/>已启用
+                </div>
+                <div v-else @click="handleActivateClick(item)">
+                  <a-icon type="lock"/>启用
+                </div>
+                <div @click="handleEditClick(item)">
+                  <a-icon type="setting"/>设置
+                </div>
+                <a-dropdown placement="topCenter">
+                  <a class="ant-dropdown-link" href="#">
+                    <a-icon type="ellipsis"/>更多
+                  </a>
+                  <a-menu slot="overlay">
+                    <a-menu-item :key="1" :disabled="item.activated">
+                      <a-popconfirm
+                        v-if="!item.activated"
+                        :title="'确定删除【' + item.name + '】主题？'"
+                        @confirm="deleteTheme(item.id)"
+                        okText="确定"
+                        cancelText="取消"
+                      >
+                        <a-icon type="delete"/>删除
+                      </a-popconfirm>
+                      <span v-else>
+                        <a-icon type="delete"/>删除
+                      </span>
+                    </a-menu-item>
+                  </a-menu>
+                </a-dropdown>
+              </template>
+            </a-card>
+          </a-list-item>
+        </a-list>
       </a-col>
     </a-row>
     <a-drawer
@@ -299,10 +297,6 @@ export default {
   margin: 14px 0;
 }
 
-.theme-item {
-  padding-bottom: 12px;
-}
-
 .theme-item .theme-control .theme-title {
   font-size: 18px;
 }
diff --git a/src/views/page/internal/LinkList.vue b/src/views/page/internal/LinkList.vue
index f458fb77..1abdee59 100644
--- a/src/views/page/internal/LinkList.vue
+++ b/src/views/page/internal/LinkList.vue
@@ -191,6 +191,7 @@ export default {
         })
       }
       this.loadLinks()
+      this.addLink()
       this.link = {}
     }
   }