mirror of https://github.com/halo-dev/halo
Refactor sheet/links/comments list layout in mobile.
ruibaby
parent
45d8edc664
commit
4e88548973
|
|
@ -54,7 +54,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-operator">
|
<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 slot="overlay">
|
||||||
<a-menu-item
|
<a-menu-item
|
||||||
key="1"
|
key="1"
|
||||||
|
|
@ -97,7 +97,141 @@
|
||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top:15px">
|
<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;"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
:href="item.authorUrl"
|
||||||
|
target="_blank"
|
||||||
|
>{{ item.author }}</a>
|
||||||
|
<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;"
|
||||||
|
/> {{ item.author }} <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
|
<a-table
|
||||||
|
v-else
|
||||||
:rowKey="comment => comment.id"
|
:rowKey="comment => comment.id"
|
||||||
:rowSelection="{
|
:rowSelection="{
|
||||||
onChange: onSelectionChange,
|
onChange: onSelectionChange,
|
||||||
|
|
@ -281,6 +415,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import CommentDetail from './CommentDetail'
|
import CommentDetail from './CommentDetail'
|
||||||
import marked from 'marked'
|
import marked from 'marked'
|
||||||
|
|
@ -361,6 +496,7 @@ const sheetColumns = [
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
name: 'CommentTab',
|
name: 'CommentTab',
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
components: {
|
components: {
|
||||||
CommentDetail
|
CommentDetail
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,78 @@
|
||||||
<a-icon type="pushpin" />内置页面
|
<a-icon type="pushpin" />内置页面
|
||||||
</span>
|
</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
|
<a-table
|
||||||
|
v-else
|
||||||
:columns="internalColumns"
|
:columns="internalColumns"
|
||||||
:dataSource="internalSheets"
|
:dataSource="internalSheets"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
|
|
@ -70,7 +141,168 @@
|
||||||
<span slot="tab">
|
<span slot="tab">
|
||||||
<a-icon type="fork" />自定义页面
|
<a-icon type="fork" />自定义页面
|
||||||
</span>
|
</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
|
<a-table
|
||||||
|
v-else
|
||||||
:rowKey="sheet => sheet.id"
|
:rowKey="sheet => sheet.id"
|
||||||
:columns="customColumns"
|
:columns="customColumns"
|
||||||
:dataSource="formattedSheets"
|
:dataSource="formattedSheets"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,10 @@
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:style="{ 'padding-bottom': '12px' }"
|
:style="{ 'padding-bottom': '12px' }"
|
||||||
>
|
>
|
||||||
<a-card :title="title" :bodyStyle="{ padding: '16px' }">
|
<a-card
|
||||||
|
:title="title"
|
||||||
|
:bodyStyle="{ padding: '16px' }"
|
||||||
|
>
|
||||||
<a-form layout="horizontal">
|
<a-form layout="horizontal">
|
||||||
<a-form-item label="网站名称：">
|
<a-form-item label="网站名称：">
|
||||||
<a-input v-model="link.name" />
|
<a-input v-model="link.name" />
|
||||||
|
|
@ -71,8 +74,76 @@
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:style="{ 'padding-bottom': '12px' }"
|
: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
|
<a-table
|
||||||
|
v-else
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:dataSource="links"
|
:dataSource="links"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
|
@ -119,6 +190,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
import linkApi from '@/api/link'
|
import linkApi from '@/api/link'
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
|
|
@ -146,6 +218,7 @@ const columns = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formType: 'create',
|
formType: 'create',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue