mirror of https://github.com/halo-dev/halo-admin
Refactor post list layout in mobile.
parent
5b9bbe053c
commit
935a5e3641
|
@ -77,7 +77,7 @@
|
||||||
icon="plus"
|
icon="plus"
|
||||||
>写文章</a-button>
|
>写文章</a-button>
|
||||||
</router-link>
|
</router-link>
|
||||||
<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"
|
||||||
|
@ -120,7 +120,176 @@
|
||||||
</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="formattedPosts"
|
||||||
|
:loading="postsLoading"
|
||||||
|
>
|
||||||
|
<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' || item.status === 'INTIMATE'">
|
||||||
|
<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' || item.status === 'INTIMATE'">
|
||||||
|
<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
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="javascript:void(0);"
|
||||||
|
@click="handleShowPostSettings(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>
|
||||||
|
<span>
|
||||||
|
{{ item.summary }}...
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<a-tag
|
||||||
|
v-for="(category,categoryIndex) in item.categories"
|
||||||
|
:key="'category_'+categoryIndex"
|
||||||
|
color="blue"
|
||||||
|
style="margin-bottom: 8px"
|
||||||
|
>{{ category.name }}</a-tag>
|
||||||
|
<br />
|
||||||
|
<a-tag
|
||||||
|
v-for="(tag, tagIndex) in item.tags"
|
||||||
|
:key="'tag_'+tagIndex"
|
||||||
|
color="green"
|
||||||
|
style="margin-bottom: 8px"
|
||||||
|
>{{ tag.name }}</a-tag>
|
||||||
|
|
||||||
|
</a-list-item>
|
||||||
|
</a-list>
|
||||||
|
|
||||||
|
<!-- Desktop -->
|
||||||
<a-table
|
<a-table
|
||||||
|
v-else
|
||||||
:rowKey="post => post.id"
|
:rowKey="post => post.id"
|
||||||
:rowSelection="{
|
:rowSelection="{
|
||||||
onChange: onSelectionChange,
|
onChange: onSelectionChange,
|
||||||
|
|
|
@ -31,7 +31,31 @@
|
||||||
<a-input v-model="selectedPost.url" />
|
<a-input v-model="selectedPost.url" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="访问密码:">
|
<a-form-item label="访问密码:">
|
||||||
<a-input-password v-model="selectedPost.password" />
|
<a-input
|
||||||
|
v-model="selectedPost.password"
|
||||||
|
v-if="passwordVisible"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:void(0);"
|
||||||
|
slot="addonAfter"
|
||||||
|
@click="togglePasswordVisible"
|
||||||
|
>
|
||||||
|
<a-icon type="eye-invisible" />
|
||||||
|
</a>
|
||||||
|
</a-input>
|
||||||
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="selectedPost.password"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:void(0);"
|
||||||
|
slot="addonAfter"
|
||||||
|
@click="togglePasswordVisible"
|
||||||
|
>
|
||||||
|
<a-icon type="eye" />
|
||||||
|
</a>
|
||||||
|
</a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item label="发表时间:">
|
<a-form-item label="发表时间:">
|
||||||
|
@ -214,6 +238,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
thumbDrawerVisible: false,
|
thumbDrawerVisible: false,
|
||||||
categoryFormVisible: false,
|
categoryFormVisible: false,
|
||||||
|
passwordVisible: false,
|
||||||
settingLoading: true,
|
settingLoading: true,
|
||||||
selectedPost: this.post,
|
selectedPost: this.post,
|
||||||
selectedTagIds: this.tagIds,
|
selectedTagIds: this.tagIds,
|
||||||
|
@ -392,8 +417,12 @@ export default {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
togglePasswordVisible() {
|
||||||
|
this.passwordVisible = !this.passwordVisible
|
||||||
|
},
|
||||||
onClose() {
|
onClose() {
|
||||||
this.$emit('close', false)
|
this.$emit('close', false)
|
||||||
|
this.passwordVisible = false
|
||||||
},
|
},
|
||||||
onPostDateChange(value, dateString) {
|
onPostDateChange(value, dateString) {
|
||||||
this.selectedPost.createTime = value.valueOf()
|
this.selectedPost.createTime = value.valueOf()
|
||||||
|
|
|
@ -101,7 +101,6 @@
|
||||||
<a href="javascript:void(0);">
|
<a href="javascript:void(0);">
|
||||||
<a-icon
|
<a-icon
|
||||||
type="like-o"
|
type="like-o"
|
||||||
style="margin-right: 8px"
|
|
||||||
/>
|
/>
|
||||||
{{ item.likes }}
|
{{ item.likes }}
|
||||||
</a>
|
</a>
|
||||||
|
@ -113,7 +112,6 @@
|
||||||
>
|
>
|
||||||
<a-icon
|
<a-icon
|
||||||
type="message"
|
type="message"
|
||||||
style="margin-right: 8px"
|
|
||||||
/>
|
/>
|
||||||
{{ item.commentCount }}
|
{{ item.commentCount }}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -333,7 +333,10 @@
|
||||||
label="操作员密码:"
|
label="操作员密码:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.oss_upyun_password" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="options.oss_upyun_password"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="文件目录:"
|
label="文件目录:"
|
||||||
|
@ -396,7 +399,10 @@
|
||||||
label="Secret Key:"
|
label="Secret Key:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.oss_qiniu_secret_key" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="options.oss_qiniu_secret_key"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="Bucket:"
|
label="Bucket:"
|
||||||
|
@ -464,7 +470,10 @@
|
||||||
label="Access Secret:"
|
label="Access Secret:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.oss_aliyun_access_secret" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="options.oss_aliyun_access_secret"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="图片处理策略:"
|
label="图片处理策略:"
|
||||||
|
@ -523,7 +532,10 @@
|
||||||
label="Secret Key:"
|
label="Secret Key:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.bos_baiduyun_secret_key" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="options.bos_baiduyun_secret_key"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="图片处理策略:"
|
label="图片处理策略:"
|
||||||
|
@ -589,7 +601,10 @@
|
||||||
label="Secret Key:"
|
label="Secret Key:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.cos_tencentyun_secret_key" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="options.cos_tencentyun_secret_key"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</div>
|
</div>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
|
@ -645,7 +660,11 @@
|
||||||
label="邮箱密码:"
|
label="邮箱密码:"
|
||||||
:wrapper-col="wrapperCol"
|
:wrapper-col="wrapperCol"
|
||||||
>
|
>
|
||||||
<a-input-password v-model="options.email_password" />
|
<a-input
|
||||||
|
v-model="options.email_password"
|
||||||
|
type="password"
|
||||||
|
placeholder="部分邮箱可能是授权码"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="发件人:"
|
label="发件人:"
|
||||||
|
|
|
@ -106,13 +106,22 @@
|
||||||
</span>
|
</span>
|
||||||
<a-form layout="vertical">
|
<a-form layout="vertical">
|
||||||
<a-form-item label="原密码:">
|
<a-form-item label="原密码:">
|
||||||
<a-input-password v-model="passwordParam.oldPassword" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="passwordParam.oldPassword"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="新密码:">
|
<a-form-item label="新密码:">
|
||||||
<a-input-password v-model="passwordParam.newPassword" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="passwordParam.newPassword"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="确认密码:">
|
<a-form-item label="确认密码:">
|
||||||
<a-input-password v-model="passwordParam.confirmPassword" />
|
<a-input
|
||||||
|
type="password"
|
||||||
|
v-model="passwordParam.confirmPassword"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button
|
<a-button
|
||||||
|
|
Loading…
Reference in New Issue