mirror of https://github.com/halo-dev/halo
Complete attachment list show
johnniang
parent
d41b27c3b0
commit
03010a6fad
|
|
@ -0,0 +1,15 @@
|
|||
import service from '@/utils/service'
|
||||
|
||||
const baseUrl = '/admin/api/attachments'
|
||||
|
||||
const attachmentApi = {}
|
||||
|
||||
attachmentApi.list = pagination => {
|
||||
return service({
|
||||
url: baseUrl,
|
||||
method: 'get',
|
||||
params: pagination
|
||||
})
|
||||
}
|
||||
|
||||
export default attachmentApi
|
||||
|
|
@ -1,107 +1,77 @@
|
|||
<template>
|
||||
<page-view>
|
||||
<a-row :gutter="12" type="flex" align="middle">
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
v-for="attachment in attachments"
|
||||
:key="attachment.id"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col
|
||||
class="attachment-item"
|
||||
:xl="4"
|
||||
:lg="4"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24">
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img :src="src" slot="cover">
|
||||
:xs="24"
|
||||
>
|
||||
<a-card
|
||||
:bodyStyle="{ padding: '1rem' , width: '240px' }"
|
||||
hoverable
|
||||
>
|
||||
<img
|
||||
:src="attachment.thumbPath"
|
||||
:alt="attachment.name"
|
||||
slot="cover"
|
||||
>
|
||||
<a-card-meta>
|
||||
<template slot="description">{{ attachment.name }}</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row
|
||||
type="flex"
|
||||
justify="end"
|
||||
:gutter="12"
|
||||
>
|
||||
<a-pagination
|
||||
v-model="pagination.page"
|
||||
:defaultPageSize="pagination.size"
|
||||
:total="pagination.total"
|
||||
></a-pagination>
|
||||
</a-row>
|
||||
</page-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PageView } from '@/layouts'
|
||||
import attachmentApi from '@/api/attachment'
|
||||
export default {
|
||||
components: {
|
||||
PageView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: 'https://cdn.ryanc.cc/img/blog/thumbnails/c86b59623c4a9bfeac403824dec3a789.jpg'
|
||||
attachments: [],
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 16,
|
||||
sort: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadAttachments()
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,171 +1,171 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col
|
||||
class="theme-item"
|
||||
:xl="6"
|
||||
:lg="6"
|
||||
:md="12"
|
||||
:sm="12"
|
||||
:xs="24"
|
||||
v-for="(theme, index) in themes"
|
||||
:key="index"
|
||||
>
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img
|
||||
:alt="theme.name"
|
||||
:src="theme.screenshots"
|
||||
slot="cover"
|
||||
>
|
||||
<a-divider></a-divider>
|
||||
<div class="theme-control">
|
||||
<span class="theme-title">{{ theme.name }}</span>
|
||||
<a-button-group class="theme-button">
|
||||
<a-button
|
||||
type="primary"
|
||||
v-if="theme.activated"
|
||||
disabled
|
||||
>已启用</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="activeTheme(theme.id)"
|
||||
v-else
|
||||
>启用</a-button>
|
||||
<a-button
|
||||
@click="settingDrawer(theme)"
|
||||
v-if="theme.hasOptions"
|
||||
>设置</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-drawer
|
||||
v-if="themeProperty"
|
||||
:title="themeProperty.name + ' 主题设置'"
|
||||
width="100%"
|
||||
closable
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
destroyOnClose
|
||||
>
|
||||
<div class="page-header-index-wide">
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="12"
|
||||
class="theme-item"
|
||||
:xl="6"
|
||||
:lg="6"
|
||||
:md="12"
|
||||
:sm="24"
|
||||
:sm="12"
|
||||
:xs="24"
|
||||
v-for="(theme, index) in themes"
|
||||
:key="index"
|
||||
>
|
||||
<a-skeleton
|
||||
active
|
||||
:loading="optionLoading"
|
||||
:paragraph="{rows: 10}"
|
||||
>
|
||||
<a-card :bodyStyle="{ padding: '14px' }">
|
||||
<img
|
||||
v-if="themeProperty"
|
||||
:alt="themeProperty.name"
|
||||
:src="themeProperty.screenshots"
|
||||
width="100%"
|
||||
:alt="theme.name"
|
||||
:src="theme.screenshots"
|
||||
slot="cover"
|
||||
>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="12"
|
||||
:md="12"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<a-skeleton
|
||||
active
|
||||
:loading="optionLoading"
|
||||
:paragraph="{rows: 20}"
|
||||
>
|
||||
<a-tabs defaultActiveKey="0">
|
||||
<a-tab-pane
|
||||
v-for="(group, index) in themeConfiguration"
|
||||
:key="index.toString()"
|
||||
:tab="group.label"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
v-for="(item, index1) in group.items"
|
||||
:label="item.label + '：'"
|
||||
:key="index1"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-input
|
||||
v-model="themeSettings[item.name]"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-if="item.type == 'TEXT'"
|
||||
/>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5 }"
|
||||
v-model="themeSettings[item.name]"
|
||||
v-else-if="item.type == 'TEXTAREA'"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-decorator="['radio-group']"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-model="themeSettings[item.name]"
|
||||
v-else-if="item.type == 'RADIO'"
|
||||
>
|
||||
<a-radio
|
||||
v-for="(option, index2) in item.options"
|
||||
:key="index2"
|
||||
:value="option.value"
|
||||
>{{ option.label }}</a-radio>
|
||||
</a-radio-group>
|
||||
<a-select
|
||||
v-model="themeSettings[item.name]"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-else-if="item.type == 'SELECT'"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>{{ option.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="saveSettings"
|
||||
>保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="about"
|
||||
tab="关于"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-popconfirm
|
||||
:title="'确定删除【' + themeProperty.name + '】主题？'"
|
||||
@confirm="deleteTheme(themeProperty.id)"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-button type="danger">删除该主题</a-button>
|
||||
</a-popconfirm>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-skeleton>
|
||||
<a-divider></a-divider>
|
||||
<div class="theme-control">
|
||||
<span class="theme-title">{{ theme.name }}</span>
|
||||
<a-button-group class="theme-button">
|
||||
<a-button
|
||||
type="primary"
|
||||
v-if="theme.activated"
|
||||
disabled
|
||||
>已启用</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="activeTheme(theme.id)"
|
||||
v-else
|
||||
>启用</a-button>
|
||||
<a-button
|
||||
@click="settingDrawer(theme)"
|
||||
v-if="theme.hasOptions"
|
||||
>设置</a-button>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
</div>
|
||||
<a-drawer
|
||||
v-if="themeProperty"
|
||||
:title="themeProperty.name + ' 主题设置'"
|
||||
width="100%"
|
||||
closable
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
destroyOnClose
|
||||
>
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="12"
|
||||
:md="12"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<a-skeleton
|
||||
active
|
||||
:loading="optionLoading"
|
||||
:paragraph="{rows: 10}"
|
||||
>
|
||||
<img
|
||||
v-if="themeProperty"
|
||||
:alt="themeProperty.name"
|
||||
:src="themeProperty.screenshots"
|
||||
width="100%"
|
||||
>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="12"
|
||||
:lg="12"
|
||||
:md="12"
|
||||
:sm="24"
|
||||
:xs="24"
|
||||
>
|
||||
<a-skeleton
|
||||
active
|
||||
:loading="optionLoading"
|
||||
:paragraph="{rows: 20}"
|
||||
>
|
||||
<a-tabs defaultActiveKey="0">
|
||||
<a-tab-pane
|
||||
v-for="(group, index) in themeConfiguration"
|
||||
:key="index.toString()"
|
||||
:tab="group.label"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
v-for="(item, index1) in group.items"
|
||||
:label="item.label + '：'"
|
||||
:key="index1"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-input
|
||||
v-model="themeSettings[item.name]"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-if="item.type == 'TEXT'"
|
||||
/>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5 }"
|
||||
v-model="themeSettings[item.name]"
|
||||
v-else-if="item.type == 'TEXTAREA'"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-decorator="['radio-group']"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-model="themeSettings[item.name]"
|
||||
v-else-if="item.type == 'RADIO'"
|
||||
>
|
||||
<a-radio
|
||||
v-for="(option, index2) in item.options"
|
||||
:key="index2"
|
||||
:value="option.value"
|
||||
>{{ option.label }}</a-radio>
|
||||
</a-radio-group>
|
||||
<a-select
|
||||
v-model="themeSettings[item.name]"
|
||||
:defaultValue="item.defaultValue"
|
||||
v-else-if="item.type == 'SELECT'"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>{{ option.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="saveSettings"
|
||||
>保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane
|
||||
key="about"
|
||||
tab="关于"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-popconfirm
|
||||
:title="'确定删除【' + themeProperty.name + '】主题？'"
|
||||
@confirm="deleteTheme(themeProperty.id)"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-button type="danger">删除该主题</a-button>
|
||||
</a-popconfirm>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-skeleton>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
computed: {
|
||||
publishText() {
|
||||
if (this.postToStage.id) {
|
||||
return '更新'
|
||||
return '更新并发布'
|
||||
}
|
||||
return '创建并发布'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue