mirror of https://github.com/halo-dev/halo-admin
代码优化
ruibaby
parent
621e7918be
commit
d998cd11a5
|
|
@ -1,9 +1,7 @@
|
||||||
@import './index.less';
|
@import './index.less';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// 打开滚动条固定显示
|
overflow-y: none;
|
||||||
overflow-y: scroll;
|
|
||||||
|
|
||||||
&.colorWeak {
|
&.colorWeak {
|
||||||
filter: invert(80%);
|
filter: invert(80%);
|
||||||
}
|
}
|
||||||
|
|
@ -497,11 +495,17 @@ body {
|
||||||
|
|
||||||
.ant-card{
|
.ant-card{
|
||||||
.ant-card-head{
|
.ant-card-head{
|
||||||
padding: 0 16px;
|
padding: 0 16px!important;
|
||||||
.ant-card-head-wrapper{
|
.ant-card-head-wrapper{
|
||||||
.ant-card-head-title{
|
.ant-card-head-title{
|
||||||
padding: 12px 0;
|
padding: 12px 0!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-card-wider-padding{
|
||||||
|
.ant-card-body{
|
||||||
|
padding: 24px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -178,13 +178,10 @@ export default {
|
||||||
},
|
},
|
||||||
handleChange(info) {
|
handleChange(info) {
|
||||||
const status = info.file.status
|
const status = info.file.status
|
||||||
if (status !== 'uploading') {
|
|
||||||
console.log(info.file, info.fileList)
|
|
||||||
}
|
|
||||||
if (status === 'done') {
|
if (status === 'done') {
|
||||||
this.$message.success(`${info.file.name} file uploaded successfully.`)
|
this.$message.success(`${info.file.name} 文件上传成功`)
|
||||||
} else if (status === 'error') {
|
} else if (status === 'error') {
|
||||||
this.$message.error(`${info.file.name} file upload failed.`)
|
this.$message.error(`${info.file.name} 文件上传失败`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deleteAttachment(id) {
|
deleteAttachment(id) {
|
||||||
|
|
@ -201,7 +198,7 @@ export default {
|
||||||
this.$copyText(text)
|
this.$copyText(text)
|
||||||
.then(message => {
|
.then(message => {
|
||||||
console.log('copy', message)
|
console.log('copy', message)
|
||||||
this.$message.success('复制完毕')
|
this.$message.success('复制成功')
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
console.log('copy.err', err)
|
console.log('copy.err', err)
|
||||||
|
|
@ -215,7 +212,7 @@ export default {
|
||||||
this.$copyText(text)
|
this.$copyText(text)
|
||||||
.then(message => {
|
.then(message => {
|
||||||
console.log('copy', message)
|
console.log('copy', message)
|
||||||
this.$message.success('复制完毕')
|
this.$message.success('复制成功')
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
console.log('copy.err', err)
|
console.log('copy.err', err)
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-header-index-wide">
|
<div class="page-header-index-wide">
|
||||||
<a-row
|
<a-row :gutter="12" type="flex" align="middle">
|
||||||
:gutter="12"
|
|
||||||
type="flex"
|
|
||||||
align="middle"
|
|
||||||
>
|
|
||||||
<a-col
|
<a-col
|
||||||
class="theme-item"
|
class="theme-item"
|
||||||
:xl="6"
|
:xl="6"
|
||||||
|
|
@ -15,49 +11,24 @@
|
||||||
v-for="(theme, index) in themes"
|
v-for="(theme, index) in themes"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<a-card
|
<a-card hoverable :title="theme.name">
|
||||||
hoverable
|
<img :alt="theme.name" :src="theme.screenshots" slot="cover">
|
||||||
:title="theme.name"
|
<template class="ant-card-actions" slot="actions">
|
||||||
>
|
|
||||||
<img
|
|
||||||
:alt="theme.name"
|
|
||||||
:src="theme.screenshots"
|
|
||||||
slot="cover"
|
|
||||||
/>
|
|
||||||
<template
|
|
||||||
class="ant-card-actions"
|
|
||||||
slot="actions"
|
|
||||||
>
|
|
||||||
<div v-if="theme.activated">
|
<div v-if="theme.activated">
|
||||||
<a-icon
|
<a-icon type="unlock" theme="twoTone"/> 激活中
|
||||||
type="unlock"
|
|
||||||
theme="twoTone"
|
|
||||||
/>
|
|
||||||
激活中
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-else @click="handleActivateClick(theme)">
|
||||||
v-else
|
<a-icon type="lock"/> 激活
|
||||||
@click="handleActivateClick(theme)"
|
|
||||||
>
|
|
||||||
<a-icon type="lock" />
|
|
||||||
激活
|
|
||||||
</div>
|
</div>
|
||||||
<div @click="handleEditClick(theme)">
|
<div @click="handleEditClick(theme)">
|
||||||
<a-icon type="setting" />
|
<a-icon type="setting"/> 设置
|
||||||
设置
|
|
||||||
</div>
|
</div>
|
||||||
<a-dropdown placement="topCenter">
|
<a-dropdown placement="topCenter">
|
||||||
<a
|
<a class="ant-dropdown-link" href="#">
|
||||||
class="ant-dropdown-link"
|
<a-icon type="ellipsis"/> 更多
|
||||||
href="#"
|
|
||||||
>
|
|
||||||
<a-icon type="ellipsis" /> 更多
|
|
||||||
</a>
|
</a>
|
||||||
<a-menu slot="overlay">
|
<a-menu slot="overlay">
|
||||||
<a-menu-item
|
<a-menu-item :key="1" :disabled="theme.activated">
|
||||||
:key="1"
|
|
||||||
:disabled="theme.activated"
|
|
||||||
>
|
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
v-if="!theme.activated"
|
v-if="!theme.activated"
|
||||||
:title="'确定删除【' + theme.name + '】主题？'"
|
:title="'确定删除【' + theme.name + '】主题？'"
|
||||||
|
|
@ -65,12 +36,10 @@
|
||||||
okText="确定"
|
okText="确定"
|
||||||
cancelText="取消"
|
cancelText="取消"
|
||||||
>
|
>
|
||||||
<a-icon type="delete" />
|
<a-icon type="delete"/> 删除
|
||||||
删除
|
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<a-icon type="delete" />
|
<a-icon type="delete"/> 删除
|
||||||
删除
|
|
||||||
</span>
|
</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</a-menu>
|
</a-menu>
|
||||||
|
|
@ -78,7 +47,6 @@
|
||||||
</template>
|
</template>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-drawer
|
<a-drawer
|
||||||
v-if="themeProperty"
|
v-if="themeProperty"
|
||||||
|
|
@ -89,28 +57,11 @@
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<a-row
|
<a-row :gutter="12" type="flex">
|
||||||
:gutter="12"
|
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
type="flex"
|
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
|
||||||
>
|
|
||||||
<a-col
|
|
||||||
:xl="12"
|
|
||||||
:lg="12"
|
|
||||||
:md="12"
|
|
||||||
:sm="24"
|
|
||||||
:xs="24"
|
|
||||||
>
|
|
||||||
<a-skeleton
|
|
||||||
active
|
|
||||||
:loading="optionLoading"
|
|
||||||
:paragraph="{rows: 10}"
|
|
||||||
>
|
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<img
|
<img :alt="themeProperty.name" :src="themeProperty.screenshots" slot="cover">
|
||||||
:alt="themeProperty.name"
|
|
||||||
:src="themeProperty.screenshots"
|
|
||||||
slot="cover"
|
|
||||||
/>
|
|
||||||
<a-card-meta
|
<a-card-meta
|
||||||
:title="themeProperty.author.name"
|
:title="themeProperty.author.name"
|
||||||
:description="themeProperty.description"
|
:description="themeProperty.description"
|
||||||
|
|
@ -121,102 +72,77 @@
|
||||||
size="large"
|
size="large"
|
||||||
slot="avatar"
|
slot="avatar"
|
||||||
/>
|
/>
|
||||||
<a-avatar
|
<a-avatar v-else size="large" slot="avatar">{{ themeProperty.author.name }}</a-avatar>
|
||||||
v-else
|
|
||||||
size="large"
|
|
||||||
slot="avatar"
|
|
||||||
>{{ themeProperty.author.name }}</a-avatar>
|
|
||||||
</a-card-meta>
|
</a-card-meta>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-skeleton>
|
</a-skeleton>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
:xl="12"
|
<a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
|
||||||
:lg="12"
|
<div class="card-container">
|
||||||
:md="12"
|
<a-tabs type="card" defaultActiveKey="0">
|
||||||
:sm="24"
|
<a-tab-pane
|
||||||
:xs="24"
|
v-for="(group, index) in themeConfiguration"
|
||||||
>
|
:key="index.toString()"
|
||||||
<a-skeleton
|
:tab="group.label"
|
||||||
active
|
>
|
||||||
:loading="optionLoading"
|
<a-form layout="vertical">
|
||||||
:paragraph="{rows: 20}"
|
<a-form-item
|
||||||
>
|
v-for="(item, index1) in group.items"
|
||||||
<a-tabs defaultActiveKey="0">
|
:label="item.label + '：'"
|
||||||
<a-tab-pane
|
:key="index1"
|
||||||
v-for="(group, index) in themeConfiguration"
|
:wrapper-col="wrapperCol"
|
||||||
: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
|
<a-input
|
||||||
v-for="(option, index2) in item.options"
|
v-model="themeSettings[item.name]"
|
||||||
:key="index2"
|
:defaultValue="item.defaultValue"
|
||||||
:value="option.value"
|
v-if="item.type == 'TEXT'"
|
||||||
>{{ option.label }}</a-radio>
|
/>
|
||||||
</a-radio-group>
|
<a-input
|
||||||
<a-select
|
type="textarea"
|
||||||
v-model="themeSettings[item.name]"
|
:autosize="{ minRows: 5 }"
|
||||||
:defaultValue="item.defaultValue"
|
v-model="themeSettings[item.name]"
|
||||||
v-else-if="item.type == 'SELECT'"
|
v-else-if="item.type == 'TEXTAREA'"
|
||||||
>
|
/>
|
||||||
<a-select-option
|
<a-radio-group
|
||||||
v-for="option in item.options"
|
v-decorator="['radio-group']"
|
||||||
:key="option.value"
|
:defaultValue="item.defaultValue"
|
||||||
:value="option.value"
|
v-model="themeSettings[item.name]"
|
||||||
>{{ option.label }}</a-select-option>
|
v-else-if="item.type == 'RADIO'"
|
||||||
</a-select>
|
>
|
||||||
</a-form-item>
|
<a-radio
|
||||||
<a-form-item>
|
v-for="(option, index2) in item.options"
|
||||||
<a-button
|
:key="index2"
|
||||||
type="primary"
|
:value="option.value"
|
||||||
@click="saveSettings"
|
>{{ option.label }}</a-radio>
|
||||||
>保存</a-button>
|
</a-radio-group>
|
||||||
</a-form-item>
|
<a-select
|
||||||
</a-form>
|
v-model="themeSettings[item.name]"
|
||||||
</a-tab-pane>
|
:defaultValue="item.defaultValue"
|
||||||
</a-tabs>
|
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-tabs>
|
||||||
|
</div>
|
||||||
</a-skeleton>
|
</a-skeleton>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
<div class="upload-button">
|
<div class="upload-button">
|
||||||
<a-button
|
<a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
icon="plus"
|
|
||||||
size="large"
|
|
||||||
@click="showUploadModal"
|
|
||||||
></a-button>
|
|
||||||
</div>
|
</div>
|
||||||
<a-modal
|
<a-modal title="上传主题" v-model="uploadVisible" :footer="null">
|
||||||
title="上传主题"
|
|
||||||
v-model="uploadVisible"
|
|
||||||
:footer="null"
|
|
||||||
>
|
|
||||||
<a-upload-dragger
|
<a-upload-dragger
|
||||||
name="file"
|
name="file"
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
|
|
@ -225,7 +151,7 @@
|
||||||
accept=".zip"
|
accept=".zip"
|
||||||
>
|
>
|
||||||
<p class="ant-upload-drag-icon">
|
<p class="ant-upload-drag-icon">
|
||||||
<a-icon type="inbox" />
|
<a-icon type="inbox"/>
|
||||||
</p>
|
</p>
|
||||||
<p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
|
<p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
|
||||||
<p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
|
<p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
|
||||||
|
|
@ -318,13 +244,10 @@ export default {
|
||||||
},
|
},
|
||||||
handleChange(info) {
|
handleChange(info) {
|
||||||
const status = info.file.status
|
const status = info.file.status
|
||||||
if (status !== 'uploading') {
|
|
||||||
console.log(info.file, info.fileList)
|
|
||||||
}
|
|
||||||
if (status === 'done') {
|
if (status === 'done') {
|
||||||
this.$message.success(`${info.file.name} file uploaded successfully.`)
|
this.$message.success(`${info.file.name} 主题上传成功`)
|
||||||
} else if (status === 'error') {
|
} else if (status === 'error') {
|
||||||
this.$message.error(`${info.file.name} file upload failed.`)
|
this.$message.error(`${info.file.name} 主题上传失败`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleEllipsisClick(theme) {
|
handleEllipsisClick(theme) {
|
||||||
|
|
@ -362,4 +285,33 @@ export default {
|
||||||
bottom: 80px;
|
bottom: 80px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
.card-container > .ant-tabs-card > .ant-tabs-content {
|
||||||
|
margin-top: -16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container > .ant-tabs-card > .ant-tabs-bar {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
|
||||||
|
border-color: #fff;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.ant-form-vertical .ant-form-item {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue