mirror of https://github.com/halo-dev/halo
Prefect them list ui
johnniang
parent
7acb80b026
commit
fa20df3a1d
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-header-index-wide">
|
<div class="page-header-index-wide">
|
||||||
<a-row :gutter="12" type="flex" align="middle">
|
<a-row
|
||||||
|
:gutter="12"
|
||||||
|
type="flex"
|
||||||
|
align="middle"
|
||||||
|
>
|
||||||
<a-col
|
<a-col
|
||||||
class="theme-item"
|
class="theme-item"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
|
|
@ -11,19 +15,67 @@
|
||||||
v-for="(theme, index) in themes"
|
v-for="(theme, index) in themes"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<a-card :bodyStyle="{ padding: '14px' }">
|
<a-card
|
||||||
<img :alt="theme.name" :src="theme.screenshots" slot="cover">
|
hoverable
|
||||||
<a-divider></a-divider>
|
:title="theme.name"
|
||||||
<div class="theme-control">
|
>
|
||||||
<span class="theme-title">{{ theme.name }}</span>
|
<img
|
||||||
<a-button-group class="theme-button">
|
:alt="theme.name"
|
||||||
<a-button type="primary" v-if="theme.activated" disabled>已启用</a-button>
|
:src="theme.screenshots"
|
||||||
<a-button type="primary" @click="activeTheme(theme.id)" v-else>启用</a-button>
|
slot="cover"
|
||||||
<a-button @click="settingDrawer(theme)" v-if="theme.hasOptions">设置</a-button>
|
/>
|
||||||
</a-button-group>
|
<template
|
||||||
|
class="ant-card-actions"
|
||||||
|
slot="actions"
|
||||||
|
>
|
||||||
|
<div v-if="theme.activated">
|
||||||
|
<a-icon
|
||||||
|
type="check-circle"
|
||||||
|
theme="twoTone"
|
||||||
|
/>
|
||||||
|
激活中
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-icon
|
||||||
|
type="setting"
|
||||||
|
@click="handleActivateClick(theme)"
|
||||||
|
/>
|
||||||
|
设置
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a-icon
|
||||||
|
type="edit"
|
||||||
|
@click="handleEditClick(theme)"
|
||||||
|
/>
|
||||||
|
编辑
|
||||||
|
</div>
|
||||||
|
<a-dropdown placement="topCenter">
|
||||||
|
<a
|
||||||
|
class="ant-dropdown-link"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<a-icon type="ellipsis" /> 更多
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item
|
||||||
|
:key="1"
|
||||||
|
:disabled="theme.activated"
|
||||||
|
>
|
||||||
|
<a-popconfirm
|
||||||
|
:title="'确定删除【' + theme.name + '】主题？'"
|
||||||
|
@confirm="deleteTheme(theme.id)"
|
||||||
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-drawer
|
<a-drawer
|
||||||
v-if="themeProperty"
|
v-if="themeProperty"
|
||||||
|
|
@ -34,19 +86,59 @@
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<a-row :gutter="12" type="flex">
|
<a-row
|
||||||
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
:gutter="12"
|
||||||
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
|
type="flex"
|
||||||
|
>
|
||||||
|
<a-col
|
||||||
|
:xl="12"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-skeleton
|
||||||
|
active
|
||||||
|
:loading="optionLoading"
|
||||||
|
:paragraph="{rows: 10}"
|
||||||
|
>
|
||||||
|
<a-card hoverable>
|
||||||
<img
|
<img
|
||||||
v-if="themeProperty"
|
|
||||||
:alt="themeProperty.name"
|
:alt="themeProperty.name"
|
||||||
:src="themeProperty.screenshots"
|
:src="themeProperty.screenshots"
|
||||||
width="100%"
|
slot="cover"
|
||||||
|
/>
|
||||||
|
<a-card-meta
|
||||||
|
:title="themeProperty.name"
|
||||||
|
:description="themeProperty.description"
|
||||||
>
|
>
|
||||||
|
<a-avatar
|
||||||
|
v-if="themeProperty.author.avatar"
|
||||||
|
:src="themeProperty.author.avatar"
|
||||||
|
size="large"
|
||||||
|
slot="avatar"
|
||||||
|
/>
|
||||||
|
<a-avatar
|
||||||
|
v-else
|
||||||
|
size="large"
|
||||||
|
slot="avatar"
|
||||||
|
>{{ themeProperty.author.name }}</a-avatar>
|
||||||
|
</a-card-meta>
|
||||||
|
</a-card>
|
||||||
</a-skeleton>
|
</a-skeleton>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
<a-col
|
||||||
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
|
:xl="12"
|
||||||
|
:lg="12"
|
||||||
|
:md="12"
|
||||||
|
:sm="24"
|
||||||
|
:xs="24"
|
||||||
|
>
|
||||||
|
<a-skeleton
|
||||||
|
active
|
||||||
|
:loading="optionLoading"
|
||||||
|
:paragraph="{rows: 20}"
|
||||||
|
>
|
||||||
<a-tabs defaultActiveKey="0">
|
<a-tabs defaultActiveKey="0">
|
||||||
<a-tab-pane
|
<a-tab-pane
|
||||||
v-for="(group, index) in themeConfiguration"
|
v-for="(group, index) in themeConfiguration"
|
||||||
|
|
@ -96,11 +188,17 @@
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" @click="saveSettings">保存</a-button>
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="saveSettings"
|
||||||
|
>保存</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="about" tab="关于">
|
<a-tab-pane
|
||||||
|
key="about"
|
||||||
|
tab="关于"
|
||||||
|
>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
:title="'确定删除【' + themeProperty.name + '】主题？'"
|
:title="'确定删除【' + themeProperty.name + '】主题？'"
|
||||||
|
|
@ -118,9 +216,19 @@
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
<div class="upload-button">
|
<div class="upload-button">
|
||||||
<a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
icon="plus"
|
||||||
|
size="large"
|
||||||
|
@click="showUploadModal"
|
||||||
|
></a-button>
|
||||||
</div>
|
</div>
|
||||||
<a-modal title="上传主题" v-model="uploadVisible" :footer="null">
|
<a-modal
|
||||||
|
title="上传主题"
|
||||||
|
v-model="uploadVisible"
|
||||||
|
:footer="null"
|
||||||
|
>
|
||||||
<a-upload-dragger
|
<a-upload-dragger
|
||||||
name="file"
|
name="file"
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
|
|
@ -132,9 +240,7 @@
|
||||||
<a-icon type="inbox" />
|
<a-icon type="inbox" />
|
||||||
</p>
|
</p>
|
||||||
<p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
|
<p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
|
||||||
<p
|
<p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
|
||||||
class="ant-upload-hint"
|
|
||||||
>支持单个或批量上传，仅支持 ZIP 格式的文件</p>
|
|
||||||
</a-upload-dragger>
|
</a-upload-dragger>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -191,8 +297,8 @@ export default {
|
||||||
})
|
})
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
activeTheme(theme) {
|
activeTheme(themeId) {
|
||||||
themeApi.active(theme).then(response => {
|
themeApi.active(themeId).then(response => {
|
||||||
this.$message.success('设置成功！')
|
this.$message.success('设置成功！')
|
||||||
this.loadThemes()
|
this.loadThemes()
|
||||||
})
|
})
|
||||||
|
|
@ -232,6 +338,15 @@ export default {
|
||||||
} else if (status === 'error') {
|
} else if (status === 'error') {
|
||||||
this.$message.error(`${info.file.name} file upload failed.`)
|
this.$message.error(`${info.file.name} file upload failed.`)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
handleEllipsisClick(theme) {
|
||||||
|
this.$log.debug('Ellipsis clicked', theme)
|
||||||
|
},
|
||||||
|
handleEditClick(theme) {
|
||||||
|
this.settingDrawer(theme)
|
||||||
|
},
|
||||||
|
handleActivateClick(theme) {
|
||||||
|
this.activeTheme(theme.id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue