refactor: custom sheet list component code optimization (#446)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/core/constant.js

@@ -122,3 +122,21 @@ export const postStatuses = {
     text: '私密'
   }
 }
+
+export const sheetStatuses = {
+  PUBLISHED: {
+    color: 'green',
+    status: 'success',
+    text: '已发布'
+  },
+  DRAFT: {
+    color: 'yellow',
+    status: 'warning',
+    text: '草稿'
+  },
+  RECYCLE: {
+    color: 'red',
+    status: 'error',
+    text: '回收站'
+  }
+}

src/views/sheet/components/CustomSheetList.vue

@@ -3,14 +3,15 @@
     <!-- Mobile -->
     <a-list
       v-if="isMobile()"
-      :dataSource="formattedSheets"
+      :dataSource="list.data"
       :loading="list.loading"
       :pagination="false"
       itemLayout="vertical"
       size="large"
     >
-      <a-list-item :key="index" slot="renderItem" slot-scope="item, index">
-        <template slot="actions">
+      <template #renderItem="item, index">
+        <a-list-item :key="index">
+          <template #actions>
             <span>
               <a-icon type="eye" />
               {{ item.visits }}
@@ -23,8 +24,12 @@
               <span>
                 <a-icon type="bars" />
               </span>
-            <a-menu slot="overlay">
-              <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'" @click="handleEditClick(item)">
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item
+                    v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'"
+                    @click="handleEditClick(item)"
+                  >
                     编辑
                   </a-menu-item>
                   <a-menu-item v-else-if="item.status === 'RECYCLE'">
@@ -59,15 +64,14 @@
                   </a-menu-item>
                   <a-menu-item @click="handleShowSheetSettings(item)">设置</a-menu-item>
                 </a-menu>
+              </template>
             </a-dropdown>
           </template>
-        <template slot="extra">
-          <span>
-            <a-badge :status="item.statusProperty.status" :text="item.statusProperty.text" />
-          </span>
+          <template #extra>
+            <a-badge :status="sheetStatuses[item.status].status" :text="item.status | statusText" />
           </template>
           <a-list-item-meta>
-          <template slot="description">
+            <template #description>
               {{ item.createTime | moment }}
             </template>
             <template #title>
@@ -80,10 +84,14 @@
                   </a>
                 </a-tooltip>
 
-              <a-tooltip v-else-if="item.status === 'DRAFT'" :title="'点击预览【' + item.title + '】'" placement="top">
-                <a-button class="!p-0" type="link" @click="handlePreview(item.id)">
+                <a-tooltip
+                  v-else-if="item.status === 'DRAFT'"
+                  :title="'点击预览【' + item.title + '】'"
+                  placement="top"
+                >
+                  <a class="no-underline" href="javascript:void(0);" @click="handlePreview(item.id)">
                     {{ item.title }}
-                </a-button>
+                  </a>
                 </a-tooltip>
 
                 <a-button v-else class="!p-0" disabled type="link">
@@ -92,15 +100,18 @@
               </div>
             </template>
           </a-list-item-meta>
+          <div v-if="item.summary" class="block">
             <span> {{ item.summary }}... </span>
+          </div>
         </a-list-item>
+      </template>
     </a-list>
 
     <!-- Desktop -->
     <a-table
       v-else
       :columns="customColumns"
-      :dataSource="formattedSheets"
+      :dataSource="list.data"
       :loading="list.loading"
       :pagination="false"
       :rowKey="sheet => sheet.id"
@@ -133,38 +144,35 @@
         </a-button>
       </template>
 
-      <span slot="status" slot-scope="statusProperty">
-        <a-badge :status="statusProperty.status" :text="statusProperty.text" />
-      </span>
+      <template #status="status">
+        <a-badge :status="sheetStatuses[status].status" :text="status | statusText" />
+      </template>
 
-      <span
-        slot="commentCount"
-        slot-scope="text, record"
-        class="cursor-pointer"
-        @click="handleShowSheetComments(record)"
-      >
+      <template #commentCount="text, record">
         <a-badge
           :count="record.commentCount"
           :numberStyle="{ backgroundColor: '#f38181' }"
           :overflowCount="999"
           :showZero="true"
+          class="cursor-pointer"
+          @click="handleShowSheetComments(record)"
         />
-      </span>
+      </template>
 
-      <span slot="visits" slot-scope="visits">
+      <template #visits="visits">
         <a-badge :count="visits" :numberStyle="{ backgroundColor: '#00e0ff' }" :overflowCount="9999" :showZero="true" />
-      </span>
+      </template>
 
-      <span slot="createTime" slot-scope="createTime">
+      <template #createTime="createTime">
         <a-tooltip placement="top">
-          <template slot="title">
+          <template #title>
             {{ createTime | moment }}
           </template>
           {{ createTime | timeAgo }}
         </a-tooltip>
-      </span>
+      </template>
 
-      <span slot="action" slot-scope="text, sheet">
+      <template #action="text, sheet">
         <a-button
           v-if="sheet.status === 'PUBLISHED' || sheet.status === 'DRAFT'"
           class="!p-0"
@@ -207,7 +215,7 @@
         </a-popconfirm>
         <a-divider type="vertical" />
         <a-button class="!p-0" type="link" @click="handleShowSheetSettings(sheet)">设置</a-button>
-      </span>
+      </template>
     </a-table>
     <div class="page-wrapper">
       <a-pagination
@@ -249,6 +257,7 @@ import { mixin, mixinDevice } from '@/mixins/mixin.js'
 import SheetSettingModal from './SheetSettingModal'
 import TargetCommentDrawer from '../../comment/components/TargetCommentDrawer'
 import apiClient from '@/utils/api-client'
+import { sheetStatuses } from '@/core/constant'
 
 const customColumns = [
   {
@@ -259,8 +268,7 @@ const customColumns = [
   },
   {
     title: '状态',
-    className: 'status',
-    dataIndex: 'statusProperty',
+    dataIndex: 'status',
     scopedSlots: { customRender: 'status' }
   },
   {
@@ -285,24 +293,6 @@ const customColumns = [
   }
 ]
 
-const sheetStatus = {
-  PUBLISHED: {
-    color: 'green',
-    status: 'success',
-    text: '已发布'
-  },
-  DRAFT: {
-    color: 'yellow',
-    status: 'warning',
-    text: '草稿'
-  },
-  RECYCLE: {
-    color: 'red',
-    status: 'error',
-    text: '回收站'
-  }
-}
-
 export default {
   name: 'CustomSheetList',
   mixins: [mixin, mixinDevice],
@@ -313,7 +303,7 @@ export default {
   data() {
     return {
       customColumns,
-      sheetStatus,
+      sheetStatuses,
 
       list: {
         data: [],
@@ -333,12 +323,6 @@ export default {
     }
   },
   computed: {
-    formattedSheets() {
-      return this.list.data.map(sheet => {
-        sheet.statusProperty = this.sheetStatus[sheet.status]
-        return sheet
-      })
-    },
     pagination() {
       return {
         page: this.list.params.page + 1,
@@ -498,6 +482,11 @@ export default {
         this.sheetSettingLoading = false
       }
     }
+  },
+  filters: {
+    statusText(type) {
+      return type ? sheetStatuses[type].text : ''
+    }
   }
 }
 </script>