mirror of https://github.com/halo-dev/halo
feat: performance optimization.
parent
cc41e1eac1
commit
2db2de1f37
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -7,7 +7,6 @@
|
|||
>
|
||||
<a-col
|
||||
:span="24"
|
||||
class="search-box"
|
||||
style="padding-bottom: 12px;"
|
||||
>
|
||||
<a-card
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="10"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row
|
||||
:gutter="12"
|
||||
type="flex"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="10"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:bodyStyle="{ padding: '16px' }"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="10"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div class="card-container">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-card
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="10"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<a-card
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<div class="card-container">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<div>
|
||||
<div class="card-content">
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
|
|
|
@ -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'])
|
||||
|
|
|
@ -84,12 +84,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.CodeMirror {
|
||||
height: 560px;
|
||||
}
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #fff3f3;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -59,12 +59,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.CodeMirror {
|
||||
height: 560px;
|
||||
}
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #fff3f3;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue