From 4e88548973983abdbb1b3ed45a5eaa63de0396a8 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Wed, 16 Oct 2019 21:25:33 +0800
Subject: [PATCH] Refactor sheet/links/comments list layout in mobile.

---
 src/views/comment/components/CommentTab.vue | 138 +++++++++++-
 src/views/sheet/SheetList.vue               | 232 ++++++++++++++++++++
 src/views/sheet/internal/LinkList.vue       |  77 ++++++-
 3 files changed, 444 insertions(+), 3 deletions(-)

diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue
index 3c67c5279..d041f1931 100644
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@@ -54,7 +54,7 @@
       </div>
 
       <div class="table-operator">
-        <a-dropdown v-show="queryParam.status!=null && queryParam.status!=''">
+        <a-dropdown v-show="queryParam.status!=null && queryParam.status!='' && !isMobile()">
           <a-menu slot="overlay">
             <a-menu-item
               key="1"
@@ -97,7 +97,141 @@
         </a-dropdown>
       </div>
       <div style="margin-top:15px">
+        <!-- Mobile -->
+        <a-list
+          v-if="isMobile()"
+          itemLayout="vertical"
+          size="large"
+          :pagination="false"
+          :dataSource="formattedComments"
+          :loading="loading"
+        >
+          <a-list-item
+            slot="renderItem"
+            slot-scope="item, index"
+            :key="index"
+          >
+            <template slot="actions">
+              <a-dropdown
+                placement="topLeft"
+                :trigger="['click']"
+              >
+                <span>
+                  <a-icon type="bars" />
+                </span>
+                <a-menu slot="overlay">
+                  <a-menu-item v-if="item.status === 'AUDITING'">
+                    <a
+                      href="javascript:;"
+                      @click="handleEditStatusClick(item.id,'PUBLISHED')"
+                    >通过</a>
+                  </a-menu-item>
+                  <a-menu-item v-if="item.status === 'AUDITING'">
+                    <a
+                      href="javascript:;"
+                      @click="handleReplyAndPassClick(item)"
+                    >通过并回复</a>
+                  </a-menu-item>
+                  <a-menu-item v-else-if="item.status === 'PUBLISHED'">
+                    <a
+                      href="javascript:;"
+                      @click="handleReplyClick(item)"
+                    >回复</a>
+                  </a-menu-item>
+                  <a-menu-item v-else-if="item.status === 'RECYCLE'">
+                    <a-popconfirm
+                      :title="'你确定要还原该评论？'"
+                      @confirm="handleEditStatusClick(item.id,'PUBLISHED')"
+                      okText="确定"
+                      cancelText="取消"
+                    >
+                      <a href="javascript:;">还原</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                  <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'AUDITING'">
+                    <a-popconfirm
+                      :title="'你确定要将该评论移到回收站？'"
+                      @confirm="handleEditStatusClick(item.id,'RECYCLE')"
+                      okText="确定"
+                      cancelText="取消"
+                    >
+                      <a href="javascript:;">回收站</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                  <a-menu-item v-else-if="item.status === 'RECYCLE'">
+                    <a-popconfirm
+                      :title="'你确定要永久删除该评论？'"
+                      @confirm="handleDeleteClick(item.id)"
+                      okText="确定"
+                      cancelText="取消"
+                    >
+                      <a href="javascript:;">删除</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+            <template slot="extra">
+              <span>
+                <a-badge
+                  :status="item.statusProperty.status"
+                  :text="item.statusProperty.text"
+                />
+              </span>
+            </template>
+            <a-list-item-meta>
+              <template slot="description">
+                发表在
+                <a
+                  v-if="type==='posts'"
+                  :href="options.blog_url+'/archives/'+item.post.url"
+                  target="_blank"
+                >《{{ item.post.title }}》</a>
+                <a
+                  v-if="type === 'sheets'"
+                  :href="options.blog_url+'/s/'+item.sheet.url"
+                  target="_blank"
+                >《{{ item.sheet.title }}》</a>
+              </template>
+              <a-avatar
+                slot="avatar"
+                size="large"
+                :src="'//cn.gravatar.com/avatar/' + item.gravatarMd5 + '&d=mm'"
+              />
+              <span
+                slot="title"
+                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                v-if="item.authorUrl"
+              >
+                <a-icon
+                  type="user"
+                  v-if="item.isAdmin"
+                  style="margin-right: 3px;"
+                />&nbsp;
+                <a
+                  :href="item.authorUrl"
+                  target="_blank"
+                >{{ item.author }}</a>
+                &nbsp;<small style="color:rgba(0, 0, 0, 0.45)">{{ item.createTime | timeAgo }}</small>
+              </span>
+              <span
+                slot="title"
+                style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                v-else
+              >
+                <a-icon
+                  type="user"
+                  v-if="item.isAdmin"
+                  style="margin-right: 3px;"
+                />&nbsp;{{ item.author }}&nbsp;<small style="color:rgba(0, 0, 0, 0.45)">{{ item.createTime | timeAgo }}</small>
+              </span>
+            </a-list-item-meta>
+            <p v-html="item.content"></p>
+          </a-list-item>
+        </a-list>
+        <!-- Desktop -->
         <a-table
+          v-else
           :rowKey="comment => comment.id"
           :rowSelection="{
             onChange: onSelectionChange,
@@ -281,6 +415,7 @@
   </div>
 </template>
 <script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { mapGetters } from 'vuex'
 import CommentDetail from './CommentDetail'
 import marked from 'marked'
@@ -361,6 +496,7 @@ const sheetColumns = [
 ]
 export default {
   name: 'CommentTab',
+  mixins: [mixin, mixinDevice],
   components: {
     CommentDetail
   },
diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue
index 19a49ed1d..bc0d3e243 100644
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@@ -9,7 +9,78 @@
                 <a-icon type="pushpin" />内置页面
               </span>
 
+              <!-- Mobile -->
+
+              <a-list
+                v-if="isMobile()"
+                itemLayout="vertical"
+                size="large"
+                :pagination="false"
+                :dataSource="internalSheets"
+              >
+                <a-list-item
+                  slot="renderItem"
+                  slot-scope="item, index"
+                  :key="index"
+                >
+                  <template slot="actions">
+                    <span>
+                      <router-link
+                        :to="{name:'LinkList'}"
+                        v-if="item.id==1"
+                      >
+                        <a-icon type="edit" />
+                      </router-link>
+                      <router-link
+                        :to="{name:'PhotoList'}"
+                        v-if="item.id==2"
+                      >
+                        <a-icon type="edit" />
+                      </router-link>
+                      <router-link
+                        :to="{name:'JournalList'}"
+                        v-if="item.id==3"
+                      >
+                        <a-icon type="edit" />
+                      </router-link>
+                    </span>
+                  </template>
+                  <template slot="extra">
+                    <span v-if="item.status">可用</span>
+                    <span v-else>不可用
+                      <a-tooltip
+                        slot="action"
+                        title="当前主题没有对应模板"
+                      >
+                        <a-icon type="info-circle-o" />
+                      </a-tooltip>
+                    </span>
+                  </template>
+                  <a-list-item-meta>
+                    <span
+                      slot="title"
+                      style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                    >
+                      <a
+                        :href="options.blog_url+item.url"
+                        target="_blank"
+                        v-if="item.status"
+                      >{{ item.title }}</a>
+                      <a
+                        :href="options.blog_url+item.url"
+                        target="_blank"
+                        disabled
+                        v-else
+                      >{{ item.title }}</a>
+                    </span>
+
+                  </a-list-item-meta>
+                </a-list-item>
+              </a-list>
+
+              <!-- Desktop -->
               <a-table
+                v-else
                 :columns="internalColumns"
                 :dataSource="internalSheets"
                 :pagination="false"
@@ -70,7 +141,168 @@
               <span slot="tab">
                 <a-icon type="fork" />自定义页面
               </span>
+
+              <!-- Mobile -->
+              <a-list
+                v-if="isMobile()"
+                itemLayout="vertical"
+                size="large"
+                :pagination="false"
+                :dataSource="formattedSheets"
+                :loading="sheetsLoading"
+              >
+                <a-list-item
+                  slot="renderItem"
+                  slot-scope="item, index"
+                  :key="index"
+                >
+                  <template slot="actions">
+                    <span>
+                      <a-icon type="eye" />
+                      {{ item.visits }}
+                    </span>
+                    <span>
+                      <a-icon type="message" />
+                      {{ item.commentCount }}
+                    </span>
+                    <a-dropdown
+                      placement="topLeft"
+                      :trigger="['click']"
+                    >
+                      <span>
+                        <a-icon type="bars" />
+                      </span>
+                      <a-menu slot="overlay">
+                        <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'">
+                          <a
+                            href="javascript:;"
+                            @click="handleEditClick(item)"
+                          >编辑</a>
+                        </a-menu-item>
+                        <a-menu-item v-else-if="item.status === 'RECYCLE'">
+                          <a-popconfirm
+                            :title="'你确定要发布【' + item.title + '】文章？'"
+                            @confirm="handleEditStatusClick(item.id,'PUBLISHED')"
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <a href="javascript:;">还原</a>
+                          </a-popconfirm>
+                        </a-menu-item>
+                        <a-menu-item v-if="item.status === 'PUBLISHED' || item.status === 'DRAFT'">
+                          <a-popconfirm
+                            :title="'你确定要将【' + item.title + '】文章移到回收站？'"
+                            @confirm="handleEditStatusClick(item.id,'RECYCLE')"
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <a href="javascript:;">回收站</a>
+                          </a-popconfirm>
+                        </a-menu-item>
+                        <a-menu-item v-else-if="item.status === 'RECYCLE'">
+                          <a-popconfirm
+                            :title="'你确定要永久删除【' + item.title + '】文章？'"
+                            @confirm="handleDeleteClick(item.id)"
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <a href="javascript:;">删除</a>
+                          </a-popconfirm>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a-popconfirm
+                            :title="'你确定要添加【' + item.title + '】到菜单？'"
+                            @confirm="handleSheetToMenu(item)"
+                            okText="确定"
+                            cancelText="取消"
+                          >
+                            <a href="javascript:void(0);">添加到菜单</a>
+                          </a-popconfirm>
+                        </a-menu-item>
+                        <a-menu-item>
+                          <a
+                            rel="noopener noreferrer"
+                            href="javascript:void(0);"
+                            @click="handleShowSheetSettings(item)"
+                          >设置</a>
+                        </a-menu-item>
+                      </a-menu>
+                    </a-dropdown>
+                  </template>
+                  <template slot="extra">
+                    <span>
+                      <a-badge
+                        :status="item.statusProperty.status"
+                        :text="item.statusProperty.text"
+                      />
+                    </span>
+                  </template>
+                  <a-list-item-meta>
+                    <template slot="description">
+                      {{ item.createTime | moment }}
+                    </template>
+                    <span
+                      slot="title"
+                      style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                    >
+                      <a-icon
+                        type="pushpin"
+                        v-if="item.topPriority!=0"
+                        theme="twoTone"
+                        twoToneColor="red"
+                        style="margin-right: 3px;"
+                      />
+                      <a
+                        v-if="item.status=='PUBLISHED'"
+                        :href="options.blog_url+'/archives/'+item.url"
+                        target="_blank"
+                        style="text-decoration: none;"
+                      >
+                        <a-tooltip
+                          placement="top"
+                          :title="'点击访问【'+item.title+'】'"
+                        >{{ item.title }}</a-tooltip>
+                      </a>
+                      <a
+                        v-else-if="item.status == 'INTIMATE'"
+                        :href="options.blog_url+'/archives/'+item.url+'/password'"
+                        target="_blank"
+                        style="text-decoration: none;"
+                      >
+                        <a-tooltip
+                          placement="top"
+                          :title="'点击访问【'+item.title+'】'"
+                        >{{ item.title }}</a-tooltip>
+                      </a>
+                      <a
+                        v-else-if="item.status=='DRAFT'"
+                        href="javascript:void(0)"
+                        style="text-decoration: none;"
+                        @click="handlePreview(item.id)"
+                      >
+                        <a-tooltip
+                          placement="topLeft"
+                          :title="'点击预览【'+item.title+'】'"
+                        >{{ item.title }}</a-tooltip>
+                      </a>
+                      <a
+                        v-else
+                        href="javascript:void(0);"
+                        style="text-decoration: none;"
+                        disabled
+                      >
+                        {{ item.title }}
+                      </a>
+                    </span>
+
+                  </a-list-item-meta>
+
+                </a-list-item>
+              </a-list>
+
+              <!-- Desktop -->
               <a-table
+                v-else
                 :rowKey="sheet => sheet.id"
                 :columns="customColumns"
                 :dataSource="formattedSheets"
diff --git a/src/views/sheet/internal/LinkList.vue b/src/views/sheet/internal/LinkList.vue
index 83dd1c4f8..64220d71b 100644
--- a/src/views/sheet/internal/LinkList.vue
+++ b/src/views/sheet/internal/LinkList.vue
@@ -9,7 +9,10 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title" :bodyStyle="{ padding: '16px' }">
+        <a-card
+          :title="title"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <a-form layout="horizontal">
             <a-form-item label="网站名称：">
               <a-input v-model="link.name" />
@@ -71,8 +74,76 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card title="所有友情链接" :bodyStyle="{ padding: '16px' }">
+        <a-card
+          title="所有友情链接"
+          :bodyStyle="{ padding: '16px' }"
+        >
+          <!-- Mobile -->
+          <a-list
+            v-if="isMobile()"
+            itemLayout="vertical"
+            size="large"
+            :dataSource="links"
+            :loading="loading"
+          >
+            <a-list-item
+              slot="renderItem"
+              slot-scope="item, index"
+              :key="index"
+            >
+              <template slot="actions">
+                <a-dropdown
+                  placement="topLeft"
+                  :trigger="['click']"
+                >
+                  <span>
+                    <a-icon type="bars" />
+                  </span>
+                  <a-menu slot="overlay">
+                    <a-menu-item>
+                      <a
+                        href="javascript:;"
+                        @click="handleEditLink(item.id)"
+                      >编辑</a>
+                    </a-menu-item>
+                    <a-menu-item>
+                      <a-popconfirm
+                        :title="'你确定要删除【' + item.name + '】链接？'"
+                        @confirm="handleDeleteLink(item.id)"
+                        okText="确定"
+                        cancelText="取消"
+                      >
+                        <a href="javascript:;">删除</a>
+                      </a-popconfirm>
+                    </a-menu-item>
+                  </a-menu>
+                </a-dropdown>
+              </template>
+              <template slot="extra">
+                <span>
+                  {{ item.team }}
+                </span>
+              </template>
+              <a-list-item-meta>
+                <template slot="description">
+                  {{ item.description }}
+                </template>
+                <span
+                  slot="title"
+                  style="max-width: 300px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+                >
+                  {{ item.name }}
+                </span>
+              </a-list-item-meta>
+              <a
+                :href="item.url"
+                target="_blank"
+              >{{ item.url }}</a>
+            </a-list-item>
+          </a-list>
+          <!-- Desktop -->
           <a-table
+            v-else
             :columns="columns"
             :dataSource="links"
             :loading="loading"
@@ -119,6 +190,7 @@
 </template>
 
 <script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 import linkApi from '@/api/link'
 const columns = [
   {
@@ -146,6 +218,7 @@ const columns = [
   }
 ]
 export default {
+  mixins: [mixin, mixinDevice],
   data() {
     return {
       formType: 'create',