mirror of https://github.com/halo-dev/halo-admin
Attachment library.
ruibaby
parent
789107aff1
commit
dc868ab33c
|
|
@ -192,9 +192,7 @@ export default {
|
|||
})
|
||||
},
|
||||
doCopyNormalLink() {
|
||||
const text = `
|
||||
${this.selectAttachment.path}
|
||||
`
|
||||
const text = `${this.selectAttachment.path}`
|
||||
this.$copyText(text)
|
||||
.then(message => {
|
||||
console.log('copy', message)
|
||||
|
|
@ -206,9 +204,7 @@ export default {
|
|||
})
|
||||
},
|
||||
doCopyMarkdownLink() {
|
||||
const text = `
|
||||
|
||||
`
|
||||
const text = ``
|
||||
this.$copyText(text)
|
||||
.then(message => {
|
||||
console.log('copy', message)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<page-view>
|
||||
<a-row :gutter="12">
|
||||
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:loading="postLoading"
|
||||
:bordered="false"
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:loading="commentLoading"
|
||||
:bordered="false"
|
||||
|
|
@ -38,6 +38,21 @@
|
|||
></a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-card
|
||||
:loading="commentLoading"
|
||||
:bordered="false"
|
||||
title="最新日志"
|
||||
:bodyStyle="{ padding: '0px' }"
|
||||
>
|
||||
<a-table
|
||||
:rowKey="comment => comment.id"
|
||||
:columns="commentColumns"
|
||||
:dataSource="commentData"
|
||||
:pagination="false"
|
||||
></a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</page-view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
/>
|
||||
</div>
|
||||
<a-button type="primary" @click="showDrawer">发布</a-button>
|
||||
<a-button type="primary" @click="showAttachDrawer">附件库</a-button>
|
||||
</a-card>
|
||||
|
||||
<a-card>
|
||||
|
|
@ -27,13 +28,7 @@
|
|||
</a-col>
|
||||
|
||||
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-drawer
|
||||
title="文章设置"
|
||||
:width="drawerWidth"
|
||||
closable
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<a-drawer title="文章设置" :width="drawerWidth" closable @close="onClose" :visible="visible">
|
||||
<div class="post-setting-drawer-content">
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">基本设置</h3>
|
||||
|
|
@ -94,7 +89,11 @@
|
|||
<h3 class="post-setting-drawer-title">缩略图</h3>
|
||||
<div class="post-setting-drawer-item">
|
||||
<div class="post-thum">
|
||||
<img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" @click="showAttachDrawer">
|
||||
<img
|
||||
class="img"
|
||||
src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
|
||||
@click="showThumbDrawer"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,8 +105,7 @@
|
|||
closable
|
||||
:visible="childDrawerVisible"
|
||||
@close="onChildClose"
|
||||
>
|
||||
</a-drawer>
|
||||
></a-drawer>
|
||||
<div class="post-control">
|
||||
<a-button style="marginRight: 8px" @click="handleDraftClick">保存草稿</a-button>
|
||||
<a-button @click="handlePublishClick" type="primary">{{ publishText }}</a-button>
|
||||
|
|
@ -115,6 +113,89 @@
|
|||
</a-drawer>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-drawer
|
||||
title="附件库"
|
||||
:width="attachmentDrawerWidth"
|
||||
closable
|
||||
:visible="attachmentDrawerVisible"
|
||||
destroyOnClose
|
||||
@close="onAttachmentClose"
|
||||
>
|
||||
<a-row type="flex" align="middle">
|
||||
<a-col :span="24">
|
||||
<div class="attach-item" v-for="(item, index) in attachments" :key="index" @click="showDetailDrawer(item)">
|
||||
<img :src="item.thumbPath">
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-drawer
|
||||
title="附件详情"
|
||||
:width="selectAttachmentDrawerWidth"
|
||||
closable
|
||||
:visible="selectAttachmentDrawerVisible"
|
||||
destroyOnClose
|
||||
@close="onSelectAttachmentClose"
|
||||
>
|
||||
<a-row type="flex" align="middle">
|
||||
<a-col :span="24">
|
||||
<a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
|
||||
<div class="attach-detail-img">
|
||||
<img :src="selectAttachment.path">
|
||||
</div>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
<a-divider/>
|
||||
<a-col :span="24">
|
||||
<a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
|
||||
<a-list itemLayout="horizontal">
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="selectAttachment.name">
|
||||
<span slot="title">附件名：</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="selectAttachment.mediaType">
|
||||
<span slot="title">附件类型：</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="selectAttachment.size">
|
||||
<span slot="title">附件大小：</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
:description="selectAttachment.height+'x'+selectAttachment.width"
|
||||
>
|
||||
<span slot="title">图片尺寸：</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="selectAttachment.path">
|
||||
<span slot="title">
|
||||
普通链接：
|
||||
<a-icon type="copy" @click="doCopyNormalLink"/>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
:description="''"
|
||||
>
|
||||
<span slot="title">
|
||||
Markdown 格式：
|
||||
<a-icon type="copy" @click="doCopyMarkdownLink"/>
|
||||
</span>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -126,6 +207,7 @@ import 'mavon-editor/dist/css/index.css'
|
|||
import tagApi from '@/api/tag'
|
||||
import categoryApi from '@/api/category'
|
||||
import postApi from '@/api/post'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
|
||||
const toolbars = {
|
||||
bold: true, // 粗体
|
||||
|
|
@ -161,6 +243,10 @@ export default {
|
|||
sm: { span: 24 },
|
||||
xs: { span: 24 }
|
||||
},
|
||||
attachmentDrawerWidth: '580',
|
||||
selectAttachmentDrawerWidth: '460',
|
||||
attachmentDrawerVisible: false,
|
||||
selectAttachmentDrawerVisible: false,
|
||||
visible: false,
|
||||
childDrawerVisible: false,
|
||||
drawerWidth: '460',
|
||||
|
|
@ -169,7 +255,15 @@ export default {
|
|||
selectedCategoryIds: [],
|
||||
selectedTagIds: [],
|
||||
markdownOption: toolbars,
|
||||
postToStage: {}
|
||||
postToStage: {},
|
||||
attachments: [],
|
||||
selectAttachment: {},
|
||||
detailLoading: false,
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
sort: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -183,8 +277,10 @@ export default {
|
|||
mounted() {
|
||||
if (this.isMobile()) {
|
||||
this.drawerWidth = '100%'
|
||||
this.attachmentDrawerWidth = '100%'
|
||||
} else {
|
||||
this.drawerWidth = '460'
|
||||
this.attachmentDrawerWidth = '580'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -217,6 +313,14 @@ export default {
|
|||
this.categories = response.data.data
|
||||
})
|
||||
},
|
||||
loadAttachments() {
|
||||
const pagination = Object.assign({}, this.pagination)
|
||||
pagination.page--
|
||||
attachmentApi.list(pagination).then(response => {
|
||||
this.attachments = response.data.data.content
|
||||
this.pagination.total = response.data.data.total
|
||||
})
|
||||
},
|
||||
createOrUpdatePost() {
|
||||
// Set category ids
|
||||
this.postToStage.categoryIds = this.selectedCategoryIds
|
||||
|
|
@ -242,6 +346,18 @@ export default {
|
|||
this.visible = true
|
||||
},
|
||||
showAttachDrawer() {
|
||||
this.attachmentDrawerVisible = true
|
||||
this.loadAttachments()
|
||||
},
|
||||
showDetailDrawer(attachment) {
|
||||
this.selectAttachmentDrawerVisible = true
|
||||
this.detailLoading = true
|
||||
this.selectAttachment = attachment
|
||||
setTimeout(() => {
|
||||
this.detailLoading = false
|
||||
}, 500)
|
||||
},
|
||||
showThumbDrawer() {
|
||||
this.childDrawerVisible = true
|
||||
},
|
||||
handlePublishClick() {
|
||||
|
|
@ -257,6 +373,36 @@ export default {
|
|||
},
|
||||
onChildClose() {
|
||||
this.childDrawerVisible = false
|
||||
},
|
||||
onAttachmentClose() {
|
||||
this.attachmentDrawerVisible = false
|
||||
},
|
||||
onSelectAttachmentClose() {
|
||||
this.selectAttachmentDrawerVisible = false
|
||||
},
|
||||
doCopyNormalLink() {
|
||||
const text = `${this.selectAttachment.path}`
|
||||
this.$copyText(text)
|
||||
.then(message => {
|
||||
console.log('copy', message)
|
||||
this.$message.success('复制成功')
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('copy.err', err)
|
||||
this.$message.error('复制失败')
|
||||
})
|
||||
},
|
||||
doCopyMarkdownLink() {
|
||||
const text = ``
|
||||
this.$copyText(text)
|
||||
.then(message => {
|
||||
console.log('copy', message)
|
||||
this.$message.success('复制成功')
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('copy.err', err)
|
||||
this.$message.error('复制失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -304,4 +450,25 @@ export default {
|
|||
width: 100%;
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
.attach-item {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding-bottom: 28%;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.attach-item > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.attach-detail-img img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue