diff --git a/src/core/lazy_lib/components_use.js b/src/core/lazy_lib/components_use.js
index 99b9193e9..ec86dc7df 100644
--- a/src/core/lazy_lib/components_use.js
+++ b/src/core/lazy_lib/components_use.js
@@ -105,6 +105,11 @@ Vue.use(Empty)
Vue.use(Result)
Vue.use(Space)
+// message config
+message.config({
+ maxCount: 1
+})
+
Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 0a8a05785..c480559ff 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -7,8 +7,8 @@
刷新
@@ -16,7 +16,7 @@
key="1"
type="primary"
icon="plus"
- @click="uploadThemeVisible = true"
+ @click="installModal.visible = true"
>
安装
@@ -30,7 +30,7 @@
启用
-
+
@@ -152,8 +152,8 @@
name="file"
accept="application/zip"
label="点击选择主题包或将主题包拖拽到此处
仅支持 ZIP 格式的文件"
- :uploadHandler="uploadHandler"
- @success="handleUploadSuccess"
+ :uploadHandler="installModal.local.uploadHandler"
+ @success="handleUploadSucceed"
>
-
-
-
-
-
-
+
+
+
+
+ 发行版
+ 开发版
+
+
+
+
+ {{ item.branch }}
+
+
+
+
+ {{ item.branch }}
+
+
+
+ 获取
-
-
-
-
-
-
-
- {{ item.branch }}
-
-
-
- 下载
-
-
-
-
-
-
-
- {{ item.branch }}
-
-
-
- 下载
-
-
-
-
-
+ @click="handleReleaseDownloading"
+ @callback="handleReleaseDownloadedCallback"
+ :loading="installModal.remote.releaseDownloading"
+ :errored="installModal.remote.releaseDownloadErrored"
+ text="下载"
+ loadedText="下载成功"
+ erroredText="下载失败"
+ >
+
+
+
+
+
- 远程地址即主题仓库地址，使用这种方式安装的一般为开发版本，请谨慎使用。
-
更多主题请访问：
+ 远程地址即主题仓库地址，建议使用发行版本。更多主题请访问：
https://halo.run/p/themes
@@ -259,20 +269,20 @@
@@ -290,172 +300,194 @@ export default {
},
data() {
return {
- themeLoading: false,
- uploadThemeVisible: false,
- uploadNewThemeVisible: false,
- fetchButtonLoading: false,
- fetchBranches: false,
- themes: [],
- branches: [],
- releases: [],
- themeSettingVisible: false,
- selectedTheme: {},
- selectedBranch: null,
- fetchingUrl: null,
- uploadHandler: themeApi.upload,
- updateByUploadHandler: themeApi.updateByUpload,
- prepareUpdateTheme: {},
- activatedTheme: null,
+ list: {
+ loading: false,
+ data: [],
+ },
+
+ installModal: {
+ visible: false,
+ local: {
+ uploadHandler: themeApi.upload,
+ },
+
+ remote: {
+ url: null,
+
+ repoFetching: false,
+ repoFetchErrored: false,
+
+ branches: [],
+ selectedBranch: null,
+ branchPulling: false,
+ branchPullErrored: false,
+
+ releases: [],
+ selectedRelease: null,
+ releaseDownloading: false,
+ releaseDownloadErrored: false,
+
+ byBranchOrRelease: 'release', // release or branch, default is release
+
+ rules: {
+ url: [{ required: true, message: '* Github 仓库地址不能为空', trigger: ['change'] }],
+ },
+ },
+ },
+
+ localUpdateModel: {
+ visible: false,
+ uploadHandler: themeApi.updateByUpload,
+ selected: {},
+ },
+
+ themeSettingDrawer: {
+ visible: false,
+ selected: {},
+ },
}
},
computed: {
sortedThemes() {
- const data = this.themes.slice(0)
+ const data = this.list.data.slice(0)
return data.sort((a, b) => {
return b.activated - a.activated
})
},
+ activatedTheme() {
+ if (this.sortedThemes.length > 0) {
+ return this.sortedThemes[0]
+ }
+ return null
+ },
},
- created() {
+ beforeMount() {
this.handleListThemes()
- this.handleGetActivatedTheme()
},
- destroyed: function() {
+ destroyed() {
this.$log.debug('Theme list destroyed.')
- if (this.themeSettingVisible) {
- this.themeSettingVisible = false
- }
+ this.themeSettingDrawer.visible = false
+ this.installModal.visible = false
+ this.localUpdateModel.visible = false
},
beforeRouteLeave(to, from, next) {
- if (this.themeSettingVisible) {
- this.themeSettingVisible = false
- }
+ this.themeSettingDrawer.visible = false
+ this.installModal.visible = false
+ this.localUpdateModel.visible = false
next()
},
methods: {
- handleGetActivatedTheme() {
- themeApi.getActivatedTheme().then((response) => {
- this.activatedTheme = response.data.data
- })
- },
handleListThemes() {
- this.themeLoading = true
+ this.list.loading = true
themeApi
.listAll()
.then((response) => {
- this.themes = response.data.data
+ this.list.data = response.data.data
})
.finally(() => {
setTimeout(() => {
- this.themeLoading = false
+ this.list.loading = false
}, 200)
})
},
- handleActiveTheme(theme) {
- themeApi
- .active(theme.id)
- .finally(() => {
- this.handleListThemes()
- })
- .finally(() => {
- this.handleGetActivatedTheme()
- })
- },
- handleUpdateTheme(themeId) {
- const hide = this.$message.loading('更新中...', 0)
- themeApi
- .update(themeId)
- .then((response) => {
- this.$message.success('更新成功！')
- })
- .finally(() => {
- hide()
- this.handleListThemes()
- })
- },
- handleDeleteTheme(themeId) {
- themeApi
- .delete(themeId)
- .then((response) => {
- this.$message.success('删除成功！')
- })
- .finally(() => {
- this.handleListThemes()
- })
- },
- handleUploadSuccess() {
- if (this.uploadThemeVisible) {
- this.uploadThemeVisible = false
- }
- if (this.uploadNewThemeVisible) {
- this.uploadNewThemeVisible = false
- }
- if (this.fetchBranches) {
- this.fetchBranches = false
- }
- this.handleListThemes()
- },
- handleEditClick(theme) {
- this.settingDrawer(theme)
- },
- handleFetching() {
- if (!this.fetchingUrl) {
- this.$notification['error']({
- message: '提示',
- description: '远程地址不能为空！',
- })
- return
- }
- this.fetchButtonLoading = true
- themeApi.fetchingBranches(this.fetchingUrl).then((response) => {
- this.branches = response.data.data
- this.fetchBranches = true
- })
- themeApi
- .fetchingReleases(this.fetchingUrl)
- .then((response) => {
- this.releases = response.data.data
- })
- .finally(() => {
- setTimeout(() => {
- this.fetchButtonLoading = false
- }, 400)
- })
- },
- handleBranchFetching() {
- themeApi
- .fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch)
- .then((response) => {
- this.$message.success('拉取成功')
- this.uploadThemeVisible = false
- })
- .finally(() => {
- this.handleListThemes()
- })
- },
- handleReleaseFetching() {
- themeApi
- .fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch)
- .then((response) => {
- this.$message.success('拉取成功')
- this.uploadThemeVisible = false
- })
- .finally(() => {
- this.handleListThemes()
- })
- },
- handleReload() {
+ handleRefreshThemesCache() {
themeApi.reload().finally(() => {
this.handleListThemes()
})
},
- handleShowUpdateNewThemeModal(item) {
- this.prepareUpdateTheme = item
- this.uploadNewThemeVisible = true
+ handleActiveTheme(theme) {
+ themeApi.active(theme.id).finally(() => {
+ this.handleListThemes()
+ })
},
- handleShowThemeSetting(theme) {
- this.selectedTheme = theme
- this.themeSettingVisible = true
+ handleDeleteTheme(themeId) {
+ themeApi.delete(themeId).finally(() => {
+ this.handleListThemes()
+ })
+ },
+ handleUploadSucceed() {
+ this.installModal.visible = false
+ this.localUpdateModel.visible = false
+ this.handleListThemes()
+ },
+ handleFetching() {
+ const _this = this
+ _this.$refs.remoteInstallForm.validate((valid) => {
+ if (valid) {
+ _this.installModal.remote.repoFetching = true
+ themeApi.fetchingBranches(_this.installModal.remote.url).then((response) => {
+ const branches = response.data.data
+ _this.installModal.remote.branches = branches
+ if (branches && branches.length > 0) {
+ _this.installModal.remote.selectedBranch = branches[0].branch
+ }
+ })
+ themeApi
+ .fetchingReleases(_this.installModal.remote.url)
+ .then((response) => {
+ const releases = response.data.data
+ _this.installModal.remote.releases = releases
+ if (releases && releases.length > 0) {
+ _this.installModal.remote.selectedRelease = releases[0].branch
+ }
+ })
+ .finally(() => {
+ setTimeout(() => {
+ _this.installModal.remote.repoFetching = false
+ }, 400)
+ })
+ }
+ })
+ },
+ handleBranchPulling() {
+ this.installModal.remote.branchPulling = true
+ themeApi
+ .fetchingBranch(this.installModal.remote.url, this.installModal.remote.selectedBranch)
+ .catch(() => {
+ this.installModal.remote.branchPullErrored = true
+ })
+ .finally(() => {
+ setTimeout(() => {
+ this.installModal.remote.branchPulling = false
+ }, 400)
+ })
+ },
+ handleBranchPulledCallback() {
+ if (this.installModal.remote.branchPullErrored) {
+ this.installModal.remote.branchPullErrored = false
+ } else {
+ this.installModal.visible = false
+ this.handleListThemes()
+ }
+ },
+ handleReleaseDownloading() {
+ this.installModal.remote.releaseDownloading = true
+ themeApi
+ .fetchingRelease(this.installModal.remote.url, this.installModal.remote.selectedRelease)
+ .catch(() => {
+ this.installModal.remote.branchPullErrored = true
+ })
+ .finally(() => {
+ setTimeout(() => {
+ this.installModal.remote.releaseDownloading = false
+ }, 400)
+ })
+ },
+ handleReleaseDownloadedCallback() {
+ if (this.installModal.remote.releaseDownloadErrored) {
+ this.installModal.remote.releaseDownloadErrored = false
+ } else {
+ this.installModal.visible = false
+ this.handleListThemes()
+ }
+ },
+ handleOpenLocalUpdateModal(item) {
+ this.localUpdateModel.selected = item
+ this.localUpdateModel.visible = true
+ },
+ handleOpenThemeSettingDrawer(theme) {
+ this.themeSettingDrawer.selected = theme
+ this.themeSettingDrawer.visible = true
},
handleConfirmDelete(item) {
const _this = this
@@ -469,39 +501,45 @@ export default {
onCancel() {},
})
},
- handleConfirmUpdate(item) {
- const that = this
- this.$confirm({
+ handleConfirmRemoteUpdate(item) {
+ const _this = this
+ _this.$confirm({
title: '提示',
maskClosable: true,
content: '确定更新【' + item.name + '】主题？',
onOk() {
- that.handleUpdateTheme(item.id)
+ const hide = _this.$message.loading('更新中...', 0)
+ themeApi
+ .update(item.id)
+ .then((response) => {
+ _this.$message.success('更新成功！')
+ })
+ .finally(() => {
+ hide()
+ _this.handleListThemes()
+ })
},
onCancel() {},
})
},
- onSelectChange(value) {
- this.selectedBranch = value
- },
- onThemeUploadClose() {
- if (this.uploadThemeVisible) {
+ onThemeInstallModalClose() {
+ if (this.$refs.upload) {
this.$refs.upload.handleClearFileList()
}
- if (this.uploadNewThemeVisible) {
+ if (this.$refs.updateByupload) {
this.$refs.updateByupload.handleClearFileList()
}
- if (this.fetchBranches) {
- this.fetchBranches = false
- }
- if (this.selectedBranch) {
- this.selectedBranch = null
- }
+ this.installModal.remote.branches = []
+ this.installModal.remote.selectedBranch = null
+ this.installModal.remote.releases = []
+ this.installModal.remote.selectedRelease = null
+ this.installModal.remote.url = null
+ this.installModal.remote.byBranchOrRelease = 'release'
this.handleListThemes()
},
- onThemeSettingsClose() {
- this.themeSettingVisible = false
- this.selectedTheme = {}
+ onThemeSettingsDrawerClose() {
+ this.themeSettingDrawer.visible = false
+ this.themeSettingDrawer.selected = {}
},
},
}