From 014413ef48da840e064661bdf2937818a3aace1b Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Sat, 11 Jul 2020 16:56:29 +0800 Subject: [PATCH] refactor: optimized loading of newer versions of the about page. (#211) --- package-lock.json | 34 ++++- package.json | 2 +- .../Attachment}/AttachmentSelectDrawer.vue | 0 src/components/index.js | 5 +- src/views/attachment/AttachmentList.vue | 34 ++++- src/views/comment/components/CommentTab.vue | 17 ++- src/views/dashboard/Dashboard.vue | 53 ++++--- src/views/interface/ThemeList.vue | 52 ++++--- .../interface/components/ThemeSetting.vue | 26 ++-- src/views/post/CategoryList.vue | 3 +- src/views/post/PostEdit.vue | 2 +- src/views/post/PostList.vue | 37 +++-- src/views/post/TagList.vue | 2 - .../post/components/PostSettingDrawer.vue | 4 +- src/views/sheet/SheetEdit.vue | 2 +- .../sheet/components/CustomSheetList.vue | 16 ++- .../sheet/components/IndependentSheetList.vue | 22 +-- .../sheet/components/SheetSettingDrawer.vue | 4 - src/views/sheet/independent/PhotoList.vue | 9 +- src/views/system/About.vue | 135 ++++++++---------- .../system/developer/tabs/OptionsList.vue | 3 +- src/views/system/optiontabs/GeneralTab.vue | 4 - src/views/user/Profile.vue | 30 ++-- 23 files changed, 289 insertions(+), 207 deletions(-) rename src/{views/attachment/components => components/Attachment}/AttachmentSelectDrawer.vue (100%) diff --git a/package-lock.json b/package-lock.json index b91fb728..37b64cb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1349,6 +1349,22 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@simonwep/pickr": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.7.1.tgz", + "integrity": "sha512-ftbskrPKAkRLYVj8IhV4Bn86g16It9Uq/p4G0FdjRz36pKKjW0JdxdDWDIVuAev0Urg8604Ho98js6JmjXdiZQ==", + "requires": { + "core-js": "^3.6.5", + "nanopop": "^1.3.0" + }, + "dependencies": { + "core-js": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz", + "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==" + } + } + }, "@soda/friendly-errors-webpack-plugin": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz", @@ -2801,12 +2817,13 @@ } }, "ant-design-vue": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.6.2.tgz", - "integrity": "sha512-VEwWomHxY+0rt0RKRd4FqrW+udCr7cpFt0GwVOCJPwIdulkZkB3GjK64GslEl9XtBp/rKzcorfAx4t1ues6Izg==", + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.6.3.tgz", + "integrity": "sha512-Zt0z0SXzHCgow0chv4OA8lONxVOzXf7iLmZxdVHlsS3IaPn5n8QNPCzBUh3z0IXBdaDPiX9tjELQCXf9vdXdlw==", "requires": { "@ant-design/icons": "^2.1.1", "@ant-design/icons-vue": "^2.0.0", + "@simonwep/pickr": "~1.7.0", "add-dom-event-listener": "^1.0.2", "array-tree-filter": "^2.1.0", "async-validator": "^3.0.3", @@ -10729,9 +10746,9 @@ } }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, "lodash.defaultsdeep": { "version": "4.6.1", @@ -11363,6 +11380,11 @@ "to-regex": "^3.0.1" } }, + "nanopop": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-1.3.0.tgz", + "integrity": "sha512-DQDhHyPhKLKrXOjVkChsAoWh/WpKuVINDKl4qvFbguqokRJWQBSNSlPzMS+Xy3yBQKeQ39rICMB2asDvdUiVxw==" + }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", diff --git a/package.json b/package.json index 171c9a76..c16acec8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "test:unit": "vue-cli-service test:unit" }, "dependencies": { - "ant-design-vue": "^1.6.2", + "ant-design-vue": "^1.6.3", "axios": "^0.19.2", "enquire.js": "^2.1.6", "filepond": "^4.18.0", diff --git a/src/views/attachment/components/AttachmentSelectDrawer.vue b/src/components/Attachment/AttachmentSelectDrawer.vue similarity index 100% rename from src/views/attachment/components/AttachmentSelectDrawer.vue rename to src/components/Attachment/AttachmentSelectDrawer.vue diff --git a/src/components/index.js b/src/components/index.js index ad3322d3..5571af02 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,14 +1,15 @@ import Vue from 'vue' -// pro components import Ellipsis from '@/components/Ellipsis' import FooterToolbar from '@/components/FooterToolbar' import FilePondUpload from '@/components/Upload/FilePondUpload' +import AttachmentSelectDrawer from './Attachment/AttachmentSelectDrawer' const _components = { Ellipsis, FooterToolbar, - FilePondUpload + FilePondUpload, + AttachmentSelectDrawer } const components = {} diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue index 0bf7545c..7d5cff04 100644 --- a/src/views/attachment/AttachmentList.vue +++ b/src/views/attachment/AttachmentList.vue @@ -35,6 +35,8 @@ { - this.mediaTypes = response.data.data - }) + this.mediaTypesLoading = true + attachmentApi + .getMediaTypes() + .then(response => { + this.mediaTypes = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.mediaTypesLoading = false + }, 200) + }) }, loadTypes() { - attachmentApi.getTypes().then(response => { - this.types = response.data.data - }) + this.typesLoading = true + attachmentApi + .getTypes() + .then(response => { + this.types = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.typesLoading = false + }, 200) + }) }, handleShowDetailDrawer(attachment) { this.selectAttachment = attachment diff --git a/src/views/comment/components/CommentTab.vue b/src/views/comment/components/CommentTab.vue index 3faec0cd..5ae08d09 100644 --- a/src/views/comment/components/CommentTab.vue +++ b/src/views/comment/components/CommentTab.vue @@ -27,6 +27,7 @@ v-model="queryParam.status" placeholder="请选择评论状态" @change="handleQuery()" + allowClear > { - this.comments = response.data.data.content - this.pagination.total = response.data.data.total - this.loading = false - }) + commentApi + .queryComment(this.type, this.queryParam) + .then(response => { + this.comments = response.data.data.content + this.pagination.total = response.data.data.total + }) + .finally(() => { + setTimeout(() => { + this.loading = false + }, 200) + }) }, handleQuery() { this.handleClearRowKeys() diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue index 2b50837a..777f2a5d 100644 --- a/src/views/dashboard/Dashboard.vue +++ b/src/views/dashboard/Dashboard.vue @@ -288,9 +288,9 @@ export default { data() { return { logType: logApi.logType, - activityLoading: true, - writeLoading: true, - logLoading: true, + activityLoading: false, + writeLoading: false, + logLoading: false, statisticsLoading: true, logListDrawerVisible: false, latestPosts: [], @@ -340,23 +340,44 @@ export default { }, methods: { async listLatestPosts() { - postApi.listLatest(5).then(response => { - this.latestPosts = response.data.data - this.activityLoading = false - }) + this.activityLoading = true + postApi + .listLatest(5) + .then(response => { + this.latestPosts = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.activityLoading = false + }, 200) + }) }, async listLatestLogs() { - logApi.listLatest(5).then(response => { - this.latestLogs = response.data.data - this.logLoading = false - this.writeLoading = false - }) + this.logLoading = true + this.writeLoading = true + logApi + .listLatest(5) + .then(response => { + this.latestLogs = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.logLoading = false + this.writeLoading = false + }, 200) + }) }, async getStatistics() { - statisticsApi.statistics().then(response => { - this.statisticsData = response.data.data - this.statisticsLoading = false - }) + statisticsApi + .statistics() + .then(response => { + this.statisticsData = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.statisticsLoading = false + }, 200) + }) }, handleEditPostClick(post) { this.$router.push({ name: 'PostEdit', query: { postId: post.id } }) diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue index 56cb2c59..b7024001 100644 --- a/src/views/interface/ThemeList.vue +++ b/src/views/interface/ThemeList.vue @@ -196,9 +196,7 @@ >获取 - + { - this.themes = response.data.data - this.themeLoading = false - }) + themeApi + .listAll() + .then(response => { + this.themes = response.data.data + }) + .finally(() => { + setTimeout(() => { + this.themeLoading = false + }, 200) + }) }, activeTheme(themeId) { @@ -398,12 +402,10 @@ export default { return } this.fetchButtonLoading = true - themeApi - .fetchingBranches(this.fetchingUrl) - .then(response => { - this.branches = response.data.data - this.fetchBranches = true - }) + themeApi.fetchingBranches(this.fetchingUrl).then(response => { + this.branches = response.data.data + this.fetchBranches = true + }) themeApi .fetchingReleases(this.fetchingUrl) .then(response => { @@ -414,22 +416,18 @@ export default { }) }, handleBranchFetching() { - themeApi - .fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch) - .then(response => { - this.$message.success('拉取成功') - this.uploadThemeVisible = false - this.loadThemes() - }) + themeApi.fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch).then(response => { + this.$message.success('拉取成功') + this.uploadThemeVisible = false + this.loadThemes() + }) }, handleReleaseFetching() { - themeApi - .fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch) - .then(response => { - this.$message.success('拉取成功') - this.uploadThemeVisible = false - this.loadThemes() - }) + themeApi.fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch).then(response => { + this.$message.success('拉取成功') + this.uploadThemeVisible = false + this.loadThemes() + }) }, handleReload() { themeApi.reload().then(response => { diff --git a/src/views/interface/components/ThemeSetting.vue b/src/views/interface/components/ThemeSetting.vue index 7c1e86e0..8272c058 100644 --- a/src/views/interface/components/ThemeSetting.vue +++ b/src/views/interface/components/ThemeSetting.vue @@ -231,6 +231,7 @@ 保存 @@ -238,7 +239,6 @@