mirror of https://github.com/halo-dev/halo
643 lines
22 KiB
Vue
643 lines
22 KiB
Vue
<template>
|
|
<div class="page-header-index-wide">
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<div class="card-container">
|
|
<a-tabs type="card">
|
|
<a-tab-pane key="internal">
|
|
<span slot="tab">
|
|
<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"
|
|
:rowKey="page => page.id"
|
|
>
|
|
<template
|
|
slot="status"
|
|
slot-scope="status"
|
|
>
|
|
<span v-if="status">可用</span>
|
|
<span v-else>不可用
|
|
<a-tooltip
|
|
slot="action"
|
|
title="当前主题没有对应模板"
|
|
>
|
|
<a-icon type="info-circle-o" />
|
|
</a-tooltip>
|
|
</span>
|
|
</template>
|
|
<span
|
|
slot="action"
|
|
slot-scope="text, record"
|
|
>
|
|
<router-link
|
|
:to="{name:'LinkList'}"
|
|
v-if="record.id==1"
|
|
>
|
|
<a href="javascript:void(0);">管理</a>
|
|
</router-link>
|
|
<router-link
|
|
:to="{name:'PhotoList'}"
|
|
v-if="record.id==2"
|
|
>
|
|
<a href="javascript:void(0);">管理</a>
|
|
</router-link>
|
|
<router-link
|
|
:to="{name:'JournalList'}"
|
|
v-if="record.id==3"
|
|
>
|
|
<a href="javascript:void(0);">管理</a>
|
|
</router-link>
|
|
<a-divider type="vertical" />
|
|
<a
|
|
:href="options.blog_url+record.url"
|
|
target="_blank"
|
|
v-if="record.status"
|
|
>访问</a>
|
|
<a
|
|
:href="options.blog_url+record.url"
|
|
target="_blank"
|
|
disabled
|
|
v-else
|
|
>访问</a>
|
|
</span>
|
|
</a-table>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="custom">
|
|
<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"
|
|
:pagination="false"
|
|
:loading="sheetsLoading"
|
|
>
|
|
<span
|
|
slot="sheetTitle"
|
|
slot-scope="text,record"
|
|
style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
|
>
|
|
<a
|
|
v-if="record.status=='PUBLISHED'"
|
|
:href="options.blog_url+'/s/'+record.url"
|
|
target="_blank"
|
|
style="text-decoration: none;"
|
|
>
|
|
<a-tooltip
|
|
placement="top"
|
|
:title="'点击访问【'+text+'】'"
|
|
>{{ text }}</a-tooltip>
|
|
</a>
|
|
<a
|
|
v-else-if="record.status=='DRAFT'"
|
|
href="javascript:void(0)"
|
|
style="text-decoration: none;"
|
|
@click="handlePreview(record.id)"
|
|
>
|
|
<a-tooltip
|
|
placement="topLeft"
|
|
:title="'点击预览【'+text+'】'"
|
|
>{{ text }}</a-tooltip>
|
|
</a>
|
|
<a
|
|
v-else
|
|
href="javascript:void(0);"
|
|
style="text-decoration: none;"
|
|
disabled
|
|
>
|
|
{{ text }}
|
|
</a>
|
|
</span>
|
|
|
|
<span
|
|
slot="status"
|
|
slot-scope="statusProperty"
|
|
>
|
|
<a-badge
|
|
:status="statusProperty.status"
|
|
:text="statusProperty.text"
|
|
/>
|
|
</span>
|
|
|
|
<span
|
|
slot="commentCount"
|
|
slot-scope="commentCount"
|
|
>
|
|
<a-badge
|
|
:count="commentCount"
|
|
:numberStyle="{backgroundColor: '#f38181'} "
|
|
:showZero="true"
|
|
:overflowCount="999"
|
|
/>
|
|
</span>
|
|
|
|
<span
|
|
slot="visits"
|
|
slot-scope="visits"
|
|
>
|
|
<a-badge
|
|
:count="visits"
|
|
:numberStyle="{backgroundColor: '#00e0ff'} "
|
|
:showZero="true"
|
|
:overflowCount="9999"
|
|
/>
|
|
</span>
|
|
|
|
<span
|
|
slot="createTime"
|
|
slot-scope="createTime"
|
|
>
|
|
<a-tooltip placement="top">
|
|
<template slot="title">
|
|
{{ createTime | moment }}
|
|
</template>
|
|
{{ createTime | timeAgo }}
|
|
</a-tooltip>
|
|
</span>
|
|
|
|
<span
|
|
slot="action"
|
|
slot-scope="text, sheet"
|
|
>
|
|
<a
|
|
href="javascript:;"
|
|
@click="handleEditClick(sheet)"
|
|
v-if="sheet.status === 'PUBLISHED' || sheet.status === 'DRAFT'"
|
|
>编辑</a>
|
|
|
|
<a-popconfirm
|
|
:title="'你确定要发布【' + sheet.title + '】？'"
|
|
@confirm="handleEditStatusClick(sheet.id,'PUBLISHED')"
|
|
okText="确定"
|
|
cancelText="取消"
|
|
v-else-if="sheet.status === 'RECYCLE'"
|
|
>
|
|
<a href="javascript:;">还原</a>
|
|
</a-popconfirm>
|
|
|
|
<a-divider type="vertical" />
|
|
|
|
<a-popconfirm
|
|
:title="'你确定要将【' + sheet.title + '】页面移到回收站？'"
|
|
@confirm="handleEditStatusClick(sheet.id,'RECYCLE')"
|
|
okText="确定"
|
|
cancelText="取消"
|
|
v-if="sheet.status === 'PUBLISHED' || sheet.status === 'DRAFT'"
|
|
>
|
|
<a href="javascript:;">回收站</a>
|
|
</a-popconfirm>
|
|
|
|
<a-popconfirm
|
|
:title="'你确定要永久删除【' + sheet.title + '】页面？'"
|
|
@confirm="handleDeleteClick(sheet.id)"
|
|
okText="确定"
|
|
cancelText="取消"
|
|
v-else-if="sheet.status === 'RECYCLE'"
|
|
>
|
|
<a href="javascript:;">删除</a>
|
|
</a-popconfirm>
|
|
<a-divider type="vertical" />
|
|
<a-dropdown :trigger="['click']">
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="ant-dropdown-link"
|
|
>更多</a>
|
|
<a-menu slot="overlay">
|
|
<a-menu-item key="1">
|
|
<a
|
|
href="javascript:void(0);"
|
|
@click="handleShowSheetSettings(sheet)"
|
|
>设置</a>
|
|
</a-menu-item>
|
|
<a-menu-item key="2">
|
|
<a-popconfirm
|
|
:title="'你确定要添加【' + sheet.title + '】到菜单？'"
|
|
@confirm="handleSheetToMenu(sheet)"
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<a href="javascript:void(0);">添加到菜单</a>
|
|
</a-popconfirm>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</a-dropdown>
|
|
</span>
|
|
</a-table>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<SheetSetting
|
|
:sheet="selectedSheet"
|
|
:visible="sheetSettingVisible"
|
|
:needTitle="true"
|
|
@close="onSheetSettingsClose"
|
|
@onRefreshSheet="onRefreshSheetFromSetting"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
|
import { mapGetters } from 'vuex'
|
|
import SheetSetting from './components/SheetSetting'
|
|
import sheetApi from '@/api/sheet'
|
|
import menuApi from '@/api/menu'
|
|
|
|
const internalColumns = [
|
|
{
|
|
title: '页面名称',
|
|
dataIndex: 'title'
|
|
},
|
|
{
|
|
title: '访问路径',
|
|
dataIndex: 'url'
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
scopedSlots: { customRender: 'status' }
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
width: '150px',
|
|
scopedSlots: { customRender: 'action' }
|
|
}
|
|
]
|
|
const customColumns = [
|
|
{
|
|
title: '标题',
|
|
dataIndex: 'title',
|
|
scopedSlots: { customRender: 'sheetTitle' }
|
|
},
|
|
{
|
|
title: '状态',
|
|
className: 'status',
|
|
dataIndex: 'statusProperty',
|
|
scopedSlots: { customRender: 'status' }
|
|
},
|
|
{
|
|
title: '评论量',
|
|
dataIndex: 'commentCount',
|
|
scopedSlots: { customRender: 'commentCount' }
|
|
},
|
|
{
|
|
title: '访问量',
|
|
dataIndex: 'visits',
|
|
scopedSlots: { customRender: 'visits' }
|
|
},
|
|
{
|
|
title: '发布时间',
|
|
dataIndex: 'createTime',
|
|
scopedSlots: { customRender: 'createTime' }
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: '180px',
|
|
scopedSlots: { customRender: 'action' }
|
|
}
|
|
]
|
|
export default {
|
|
mixins: [mixin, mixinDevice],
|
|
components: {
|
|
SheetSetting
|
|
},
|
|
data() {
|
|
return {
|
|
sheetsLoading: false,
|
|
sheetStatus: sheetApi.sheetStatus,
|
|
internalColumns,
|
|
customColumns,
|
|
selectedSheet: {},
|
|
sheetSettingVisible: false,
|
|
internalSheets: [],
|
|
sheets: [],
|
|
menu: {}
|
|
}
|
|
},
|
|
computed: {
|
|
formattedSheets() {
|
|
return this.sheets.map(sheet => {
|
|
sheet.statusProperty = this.sheetStatus[sheet.status]
|
|
return sheet
|
|
})
|
|
},
|
|
...mapGetters(['options'])
|
|
},
|
|
created() {
|
|
this.loadSheets()
|
|
this.loadInternalSheets()
|
|
},
|
|
destroyed: function() {
|
|
if (this.sheetSettingVisible) {
|
|
this.sheetSettingVisible = false
|
|
}
|
|
},
|
|
beforeRouteLeave(to, from, next) {
|
|
if (this.sheetSettingVisible) {
|
|
this.sheetSettingVisible = false
|
|
}
|
|
next()
|
|
},
|
|
methods: {
|
|
loadSheets() {
|
|
this.sheetsLoading = true
|
|
sheetApi.list().then(response => {
|
|
this.sheets = response.data.data.content
|
|
this.sheetsLoading = false
|
|
})
|
|
},
|
|
loadInternalSheets() {
|
|
sheetApi.listInternal().then(response => {
|
|
this.internalSheets = response.data.data
|
|
})
|
|
},
|
|
handleEditClick(sheet) {
|
|
this.$router.push({ name: 'SheetEdit', query: { sheetId: sheet.id } })
|
|
},
|
|
handleEditStatusClick(sheetId, status) {
|
|
sheetApi.updateStatus(sheetId, status).then(response => {
|
|
this.$message.success('操作成功！')
|
|
this.loadSheets()
|
|
})
|
|
},
|
|
handleDeleteClick(sheetId) {
|
|
sheetApi.delete(sheetId).then(response => {
|
|
this.$message.success('删除成功！')
|
|
this.loadSheets()
|
|
})
|
|
},
|
|
handleSheetToMenu(sheet) {
|
|
this.menu['name'] = sheet.title
|
|
this.menu['url'] = `/s/${sheet.url}`
|
|
menuApi.create(this.menu).then(response => {
|
|
this.$message.success('添加到菜单成功！')
|
|
this.menu = {}
|
|
})
|
|
},
|
|
handleShowSheetSettings(sheet) {
|
|
sheetApi.get(sheet.id).then(response => {
|
|
this.selectedSheet = response.data.data
|
|
this.sheetSettingVisible = true
|
|
})
|
|
},
|
|
handlePreview(sheetId) {
|
|
sheetApi.preview(sheetId).then(response => {
|
|
window.open(response.data, '_blank')
|
|
})
|
|
},
|
|
onSheetSettingsClose() {
|
|
this.sheetSettingVisible = false
|
|
this.selectedSheet = {}
|
|
setTimeout(() => {
|
|
this.loadSheets()
|
|
}, 500)
|
|
},
|
|
onRefreshSheetFromSetting(sheet) {
|
|
this.selectedSheet = sheet
|
|
}
|
|
}
|
|
}
|
|
</script>
|