feat: performance optimization.

src/api/static.js

@@ -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

src/components/global.less

@@ -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;
+  }
 }

src/views/attachment/AttachmentList.vue

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

src/views/exception/ExceptionPage.vue

@@ -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>

src/views/interface/MenuList.vue

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

src/views/interface/ThemeEdit.vue

@@ -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>

src/views/interface/ThemeList.vue

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

src/views/post/CategoryList.vue

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

src/views/post/PostEdit.vue

@@ -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">

src/views/post/PostList.vue

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

src/views/post/TagList.vue

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

src/views/sheet/SheetEdit.vue

@@ -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">

src/views/sheet/SheetList.vue

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

src/views/sheet/internal/JournalList.vue

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

src/views/sheet/internal/LinkList.vue

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

src/views/sheet/internal/PhotoList.vue

@@ -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>

src/views/system/About.vue

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

src/views/system/OptionForm.vue

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

src/views/system/ToolList.vue

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

src/views/system/developer/DeveloperOptions.vue

@@ -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'])

src/views/system/developer/tabs/ApplicationConfig.vue

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

src/views/system/developer/tabs/RuntimeLogs.vue

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

src/views/system/developer/tabs/StaticStorage.vue

@@ -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>

src/views/user/Profile.vue

@@ -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 {
+.profile-center-avatarHolder {
-  width: 100%;
+  text-align: center;
-  height: 100%;
+  margin-bottom: 24px;
-  min-height: 100%;
-  transition: 0.3s;
 
-  .profile-center-avatarHolder {
+  & > .avatar {
-    text-align: center;
+    margin: 0 auto;
-    margin-bottom: 24px;
+    width: 104px;
+    height: 104px;
+    margin-bottom: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    cursor: pointer;
 
-    & > .avatar {
+    img {
-      margin: 0 auto;
+      height: 100%;
-      width: 104px;
+      width: 100%;
-      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;
     }
   }
 
-  .profile-center-detail {
+  .username {
-    p {
+    color: rgba(0, 0, 0, 0.85);
-      margin-bottom: 8px;
+    font-size: 20px;
-      padding-left: 26px;
+    line-height: 28px;
-      position: relative;
+    font-weight: 500;
-    }
+    margin-bottom: 4px;
+  }
+}
 
-    i {
+.profile-center-detail {
-      position: absolute;
+  p {
-      height: 14px;
+    margin-bottom: 8px;
-      width: 14px;
+    padding-left: 26px;
-      left: 0;
+    position: relative;
-      top: 4px;
+  }
-    }
+
+  i {
+    position: absolute;
+    height: 14px;
+    width: 14px;
+    left: 0;
+    top: 4px;
   }
 }
 </style>