feat: performance optimization.

pull/3445/head
ruibaby 2019-12-12 13:14:40 +08:00
parent cc41e1eac1
commit 2db2de1f37
24 changed files with 261 additions and 186 deletions

14
src/api/static.js Normal file
View File

@ -0,0 +1,14 @@
import service from '@/utils/service'
const baseUrl = '/api/admin/statics'
const staticApi = {}
staticApi.list = () => {
return service({
url: baseUrl,
method: 'get'
})
}
export default staticApi

View File

@ -513,7 +513,7 @@ body {
}
.ant-table-thead > tr > th{
.ant-table-thead>tr>th {
background: #fff !important;
}
@ -596,6 +596,7 @@ body {
p {
margin-top: 1rem;
margin-bottom: 0;
img {
width: 100%;
}
@ -719,13 +720,14 @@ body {
float: left;
}
.attach-thumb {
.attach-thumb,.photo-thumb {
width: 100%;
padding-bottom: 56%;
}
.attach-item,
.attach-thumb {
.attach-thumb,
.photo-thumb {
margin: 0 auto;
position: relative;
overflow: hidden;
@ -788,4 +790,69 @@ body {
li {
overflow: hidden;
}
}
.exception {
min-height: 500px;
height: 80%;
align-items: center;
text-align: center;
margin-top: 150px;
.img {
display: inline-block;
padding-right: 52px;
zoom: 1;
img {
height: 360px;
max-width: 430px;
}
}
.content {
display: inline-block;
flex: auto;
h1 {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
}
.desc {
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
}
}
}
.mobile {
.exception {
margin-top: 30px;
.img {
padding-right: unset;
img {
height: 40%;
max-width: 80%;
}
}
}
}
.vue-codemirror-wrap {
.CodeMirror {
height: 560px;
}
.CodeMirror-gutters {
border-right: 1px solid #fff3f3;
background-color: #ffffff;
}
}

View File

@ -7,7 +7,6 @@
>
<a-col
:span="24"
class="search-box"
style="padding-bottom: 12px;"
>
<a-card

View File

@ -39,53 +39,3 @@ export default {
}
}
</script>
<style lang="less" scoped>
.exception {
min-height: 500px;
height: 80%;
align-items: center;
text-align: center;
margin-top: 150px;
.img {
display: inline-block;
padding-right: 52px;
zoom: 1;
img {
height: 360px;
max-width: 430px;
}
}
.content {
display: inline-block;
flex: auto;
h1 {
color: #434e59;
font-size: 72px;
font-weight: 600;
line-height: 72px;
margin-bottom: 24px;
}
.desc {
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
}
}
}
.mobile {
.exception {
margin-top: 30px;
.img {
padding-right: unset;
img {
height: 40%;
max-width: 80%;
}
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col
:xl="10"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col
:xl="18"
@ -157,13 +157,3 @@ export default {
}
}
</script>
<style lang="less">
.CodeMirror {
height: 560px;
}
.CodeMirror-gutters {
border-right: 1px solid #fff3f3;
background-color: #ffffff;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row
:gutter="12"
type="flex"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col
:xl="10"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col :span="24">
<div style="margin-bottom: 16px">

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-card
:bordered="false"
:bodyStyle="{ padding: '16px' }"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col
:xl="10"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col :span="24">
<div style="margin-bottom: 16px">

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row>
<a-col :span="24">
<div class="card-container">

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row>
<a-col :span="24">
<a-card

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row :gutter="12">
<a-col
:xl="10"

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row
:gutter="12"
type="flex"
@ -7,7 +7,7 @@
>
<a-col
:span="24"
class="search-box"
style="padding-bottom: 12px;"
>
<a-card
:bordered="false"
@ -59,7 +59,7 @@
</a-row>
</a-form>
</div>
<div class="table-operator">
<div class="table-operator" style="margin-bottom: 0;">
<a-button
type="primary"
icon="plus"
@ -87,7 +87,7 @@
<div class="photo-thumb">
<img :src="item.thumbnail" loading="lazy">
</div>
<a-card-meta>
<a-card-meta style="padding: 0.8rem;">
<ellipsis
:length="isMobile()?12:16"
tooltip
@ -132,11 +132,13 @@
<img
:src="photo.url || '/images/placeholder.png'"
@click="showThumbDrawer"
style="width: 100%;"
>
</div>
</a-skeleton>
</a-col>
<a-divider />
<a-divider style="margin: 24px 0 12px 0;"/>
<a-col :span="24">
<a-skeleton
active
@ -408,40 +410,3 @@ export default {
}
}
</script>
<style lang="less" scoped>
.ant-divider-horizontal {
margin: 24px 0 12px 0;
}
.search-box {
padding-bottom: 12px;
}
.photo-thumb {
width: 100%;
margin: 0 auto;
position: relative;
padding-bottom: 56%;
overflow: hidden;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.ant-card-meta {
padding: 0.8rem;
}
.photo-detail-img img {
width: 100%;
}
.table-operator {
margin-bottom: 0;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row>
<a-col :span="24">
<a-card

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row>
<a-col :span="24">
<div class="card-container">

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<div class="card-content">
<a-row :gutter="12">
<a-col

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide">
<div>
<a-row>
<a-col :span="24">
<div
@ -31,6 +31,12 @@
</span>
<ApplicationConfig />
</a-tab-pane>
<a-tab-pane key="staticStorage">
<span slot="tab">
<a-icon type="cloud" />静态存储
</span>
<StaticStorage />
</a-tab-pane>
<a-tab-pane key="settings">
<span slot="tab">
<a-icon type="setting" />设置
@ -57,13 +63,15 @@ import RuntimeLogs from './tabs/RuntimeLogs'
import SettingsForm from './tabs/SettingsForm'
import OptionsList from './tabs/OptionsList'
import ApplicationConfig from './tabs/ApplicationConfig'
import StaticStorage from './tabs/StaticStorage'
export default {
components: {
Environment,
RuntimeLogs,
SettingsForm,
OptionsList,
ApplicationConfig
ApplicationConfig,
StaticStorage
},
computed: {
...mapGetters(['options'])

View File

@ -84,12 +84,3 @@ export default {
}
}
</script>
<style lang="less">
.CodeMirror {
height: 560px;
}
.CodeMirror-gutters {
border-right: 1px solid #fff3f3;
background-color: #ffffff;
}
</style>

View File

@ -59,12 +59,3 @@ export default {
}
}
</script>
<style lang="less">
.CodeMirror {
height: 560px;
}
.CodeMirror-gutters {
border-right: 1px solid #fff3f3;
background-color: #ffffff;
}
</style>

View File

@ -0,0 +1,107 @@
<template>
<div class="option-tab-wrapper">
<a-card
:bordered="false"
:bodyStyle="{ padding: 0 }"
>
<div class="table-operator">
<a-button
type="primary"
icon="cloud-upload"
>上传</a-button>
</div>
<div style="margin-top:15px">
<a-table
:rowKey="record => record.name"
:columns="columns"
:dataSource="statics"
:pagination="false"
size="middle"
:loading="loading"
>
<span
slot="createTime"
slot-scope="createTime"
>
{{ createTime | moment }}
</span>
<span
slot="action"
slot-scope="text, record"
>
<a
href="javascript:;"
v-if="!record.isFile"
>上传</a>
<a
:href="options.blog_url+record.relativePath"
target="_blank"
v-else
>访问</a>
<a-divider type="vertical" />
<a-popconfirm
:title="'你确定要删除该文件?'"
okText="确定"
cancelText="取消"
>
<a href="javascript:;">删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
</a-card>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import staticApi from '@/api/static'
const columns = [
{
title: '文件名',
dataIndex: 'name',
scopedSlots: { customRender: 'key' }
},
{
title: '文件类型',
dataIndex: 'mediaType',
scopedSlots: { customRender: 'mediaType' }
},
{
title: '上传时间',
dataIndex: 'createTime',
width: '200px',
scopedSlots: { customRender: 'createTime' }
},
{
title: '操作',
dataIndex: 'action',
width: '120px',
scopedSlots: { customRender: 'action' }
}
]
export default {
name: 'StaticStorage',
data() {
return {
columns: columns,
statics: [],
loading: false
}
},
created() {
this.loadStaticList()
},
computed: {
...mapGetters(['options'])
},
methods: {
loadStaticList() {
this.loading = true
staticApi.list().then(response => {
this.statics = response.data.data
this.loading = false
})
}
}
}
</script>

View File

@ -1,5 +1,5 @@
<template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
<div>
<a-row :gutter="12">
<a-col
:lg="10"
@ -106,13 +106,13 @@
</span>
<a-form layout="vertical">
<a-form-item label="原密码:">
<a-input-password v-model="passwordParam.oldPassword"/>
<a-input-password v-model="passwordParam.oldPassword" />
</a-form-item>
<a-form-item label="新密码:">
<a-input-password v-model="passwordParam.newPassword"/>
<a-input-password v-model="passwordParam.newPassword" />
</a-form-item>
<a-form-item label="确认密码:">
<a-input-password v-model="passwordParam.confirmPassword"/>
<a-input-password v-model="passwordParam.confirmPassword" />
</a-form-item>
<a-form-item>
<a-button
@ -242,54 +242,47 @@ export default {
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
width: 100%;
height: 100%;
min-height: 100%;
transition: 0.3s;
.profile-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
.profile-center-avatarHolder {
text-align: center;
margin-bottom: 24px;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
& > .avatar {
margin: 0 auto;
width: 104px;
height: 104px;
margin-bottom: 20px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
img {
height: 100%;
width: 100%;
}
}
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
img {
height: 100%;
width: 100%;
}
}
.profile-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
.username {
color: rgba(0, 0, 0, 0.85);
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 4px;
}
}
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
}
.profile-center-detail {
p {
margin-bottom: 8px;
padding-left: 26px;
position: relative;
}
i {
position: absolute;
height: 14px;
width: 14px;
left: 0;
top: 4px;
}
}
</style>