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 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;"
|
||||
/>
|
||||
<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
|
||||
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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue