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,104 +3,115 @@
     <!-- 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 #renderItem="item, index">
-        <template slot="actions">
+        <a-list-item :key="index">
-          <span>
+          <template #actions>
-            <a-icon type="eye" />
-            {{ item.visits }}
-          </span>
-          <span @click="handleShowSheetComments(item)">
-            <a-icon type="message" />
-            {{ item.commentCount }}
-          </span>
-          <a-dropdown :trigger="['click']" placement="topLeft">
             <span>
-              <a-icon type="bars" />
+              <a-icon type="eye" />
+              {{ item.visits }}
             </span>
-            <a-menu slot="overlay">
+            <span @click="handleShowSheetComments(item)">
-              <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'" @click="handleEditClick(item)">
+              <a-icon type="message" />
-                编辑
+              {{ item.commentCount }}
-              </a-menu-item>
+            </span>
-              <a-menu-item v-else-if="item.status === 'RECYCLE'">
+            <a-dropdown :trigger="['click']" placement="topLeft">
-                <a-popconfirm
+              <span>
-                  :title="'你确定要发布【' + item.title + '】页面？'"
+                <a-icon type="bars" />
-                  cancelText="取消"
+              </span>
-                  okText="确定"
+              <template #overlay>
-                  @confirm="handleEditStatusClick(item.id, 'PUBLISHED')"
+                <a-menu>
-                >
+                  <a-menu-item
-                  还原
+                    v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'"
-                </a-popconfirm>
+                    @click="handleEditClick(item)"
-              </a-menu-item>
+                  >
-              <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'">
+                    编辑
-                <a-popconfirm
+                  </a-menu-item>
-                  :title="'你确定要将【' + item.title + '】页面移到回收站？'"
+                  <a-menu-item v-else-if="item.status === 'RECYCLE'">
-                  cancelText="取消"
+                    <a-popconfirm
-                  okText="确定"
+                      :title="'你确定要发布【' + item.title + '】页面？'"
-                  @confirm="handleEditStatusClick(item.id, 'RECYCLE')"
+                      cancelText="取消"
-                >
+                      okText="确定"
-                  回收站
+                      @confirm="handleEditStatusClick(item.id, 'PUBLISHED')"
-                </a-popconfirm>
+                    >
-              </a-menu-item>
+                      还原
-              <a-menu-item v-else-if="item.status === 'RECYCLE'">
+                    </a-popconfirm>
-                <a-popconfirm
+                  </a-menu-item>
-                  :title="'你确定要永久删除【' + item.title + '】页面？'"
+                  <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'">
-                  cancelText="取消"
+                    <a-popconfirm
-                  okText="确定"
+                      :title="'你确定要将【' + item.title + '】页面移到回收站？'"
-                  @confirm="handleDeleteClick(item.id)"
+                      cancelText="取消"
-                >
+                      okText="确定"
-                  删除
+                      @confirm="handleEditStatusClick(item.id, 'RECYCLE')"
-                </a-popconfirm>
+                    >
-              </a-menu-item>
+                      回收站
-              <a-menu-item @click="handleShowSheetSettings(item)">设置</a-menu-item>
+                    </a-popconfirm>
-            </a-menu>
+                  </a-menu-item>
-          </a-dropdown>
+                  <a-menu-item v-else-if="item.status === 'RECYCLE'">
-        </template>
+                    <a-popconfirm
-        <template slot="extra">
+                      :title="'你确定要永久删除【' + item.title + '】页面？'"
-          <span>
+                      cancelText="取消"
-            <a-badge :status="item.statusProperty.status" :text="item.statusProperty.text" />
+                      okText="确定"
-          </span>
+                      @confirm="handleDeleteClick(item.id)"
-        </template>
+                    >
-        <a-list-item-meta>
+                      删除
-          <template slot="description">
+                    </a-popconfirm>
-            {{ item.createTime | moment }}
+                  </a-menu-item>
+                  <a-menu-item @click="handleShowSheetSettings(item)">设置</a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
-          <template #title>
+          <template #extra>
-            <div
+            <a-badge :status="sheetStatuses[item.status].status" :text="item.status | statusText" />
-              style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+          </template>
-            >
+          <a-list-item-meta>
-              <a-tooltip v-if="item.status === 'PUBLISHED'" :title="'点击访问【' + item.title + '】'" placement="top">
+            <template #description>
-                <a :href="item.fullPath" class="no-underline" target="_blank">
+              {{ item.createTime | moment }}
-                  {{ item.title }}
+            </template>
-                </a>
+            <template #title>
-              </a-tooltip>
+              <div
+                style="max-width: 300px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+              >
+                <a-tooltip v-if="item.status === 'PUBLISHED'" :title="'点击访问【' + item.title + '】'" placement="top">
+                  <a :href="item.fullPath" class="no-underline" target="_blank">
+                    {{ item.title }}
+                  </a>
+                </a-tooltip>
 
-              <a-tooltip v-else-if="item.status === 'DRAFT'" :title="'点击预览【' + item.title + '】'" placement="top">
+                <a-tooltip
-                <a-button class="!p-0" type="link" @click="handlePreview(item.id)">
+                  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>
+                </a-tooltip>
+
+                <a-button v-else class="!p-0" disabled type="link">
                   {{ item.title }}
                 </a-button>
-              </a-tooltip>
+              </div>
-
+            </template>
-              <a-button v-else class="!p-0" disabled type="link">
+          </a-list-item-meta>
-                {{ item.title }}
+          <div v-if="item.summary" class="block">
-              </a-button>
+            <span> {{ item.summary }}... </span>
-            </div>
+          </div>
-          </template>
+        </a-list-item>
-        </a-list-item-meta>
+      </template>
-        <span> {{ item.summary }}... </span>
-      </a-list-item>
     </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">
+      <template #status="status">
-        <a-badge :status="statusProperty.status" :text="statusProperty.text" />
+        <a-badge :status="sheetStatuses[status].status" :text="status | statusText" />
-      </span>
+      </template>
 
-      <span
+      <template #commentCount="text, record">
-        slot="commentCount"
-        slot-scope="text, record"
-        class="cursor-pointer"
-        @click="handleShowSheetComments(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: 'status',
-    dataIndex: 'statusProperty',
     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>