github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: theme install modal (#407)

pull/412/head
Ryan Wang 3 years ago committed by GitHub
parent
af949264eb
commit
ce493f6a49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 140
      src/views/interface/ThemeList.vue
  2. 135
      src/views/interface/components/ThemeInstallModal.vue

140
src/views/interface/ThemeList.vue
Unescape View File

@ -66,66 +66,6 @@
@close="onThemeSettingsDrawerClose"
/>
<a-modal
v-model="installModal.visible"
:afterClose="onThemeInstallModalClose"
:bodyStyle="{ padding: '0 24px 24px' }"
:footer="null"
destroyOnClose
title="安装主题"
>
<div class="custom-tab-wrapper">
<a-tabs :animated="{ inkBar: true, tabPane: false }">
<a-tab-pane key="1" tab="本地上传">
<FilePondUpload
ref="upload"
:accepts="['application/x-zip', 'application/x-zip-compressed', 'application/zip']"
:uploadHandler="installModal.local.uploadHandler"
label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
name="file"
@success="handleUploadSucceed"
></FilePondUpload>
<a-alert closable type="info">
<template slot="message">
更多主题请访问：
<a href="https://halo.run/themes.html" target="_blank">https://halo.run/themes</a>
</template>
</a-alert>
</a-tab-pane>
<a-tab-pane key="2" tab="远程下载">
<a-form-model
ref="remoteInstallForm"
:model="installModal.remote"
:rules="installModal.remote.rules"
layout="vertical"
>
<a-form-model-item help="* 支持 Git 仓库地址，ZIP 链接。" label="远程地址：" prop="url">
<a-input v-model="installModal.remote.url" />
</a-form-model-item>
<a-form-model-item>
<ReactiveButton
:errored="installModal.remote.fetchErrored"
:loading="installModal.remote.fetching"
erroredText="下载失败"
loadedText="下载成功"
text="下载"
type="primary"
@callback="handleRemoteFetchCallback"
@click="handleRemoteFetching"
></ReactiveButton>
</a-form-model-item>
</a-form-model>
<a-alert closable type="info">
<template slot="message">
目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题请访问：
<a href="https://halo.run/themes.html" target="_blank">https://halo.run/themes</a>
</template>
</a-alert>
</a-tab-pane>
</a-tabs>
</div>
</a-modal>
<ThemeDeleteConfirmModal
:theme="themeDeleteModal.selected"
:visible.sync="themeDeleteModal.visible"
@ -139,6 +79,8 @@
@onAfterClose="localUpgradeModel.selected = {}"
@success="handleListThemes"
/>
<ThemeInstallModal :visible.sync="installModal.visible" @onAfterClose="handleListThemes" />
</page-view>
</template>
@ -146,6 +88,7 @@
import ThemeSettingDrawer from './components/ThemeSettingDrawer'
import ThemeDeleteConfirmModal from './components/ThemeDeleteConfirmModal'
import ThemeLocalUpgradeModal from './components/ThemeLocalUpgradeModal'
import ThemeInstallModal from './components/ThemeInstallModal.vue'
import { PageView } from '@/layouts'
import apiClient from '@/utils/api-client'
@ -154,7 +97,8 @@ export default {
PageView,
ThemeSettingDrawer,
ThemeDeleteConfirmModal,
ThemeLocalUpgradeModal
ThemeLocalUpgradeModal,
ThemeInstallModal
},
data() {
return {
@ -164,21 +108,7 @@ export default {
},
installModal: {
visible: false,
local: {
uploadHandler: (file, options) => apiClient.theme.upload(file, options)
},
remote: {
url: null,
fetching: false,
fetchErrored: false,
rules: {
url: [{ required: true, message: '* 远程地址不能为空', trigger: ['change'] }]
}
}
visible: false
},
localUpgradeModel: {
@ -236,35 +166,6 @@ export default {
this.handleListThemes()
})
},
handleUploadSucceed() {
this.installModal.visible = false
this.handleListThemes()
},
handleRemoteFetching() {
this.$refs.remoteInstallForm.validate(valid => {
if (valid) {
this.installModal.remote.fetching = true
apiClient.theme
.fetchTheme(this.installModal.remote.url)
.catch(() => {
this.installModal.remote.fetchErrored = true
})
.finally(() => {
setTimeout(() => {
this.installModal.remote.fetching = false
}, 400)
})
}
})
},
handleRemoteFetchCallback() {
if (this.installModal.remote.fetchErrored) {
this.installModal.remote.fetchErrored = false
} else {
this.installModal.visible = false
this.handleListThemes()
}
},
handleOpenLocalUpdateModal(item) {
this.localUpgradeModel.selected = item
this.localUpgradeModel.visible = true
@ -282,27 +183,20 @@ export default {
title: '提示',
maskClosable: true,
content: '确定更新【' + item.name + '】主题？',
onOk() {
const hide = _this.$message.loading('更新中...', 0)
apiClient.theme
.updateThemeByFetching(item.id)
.then(() => {
_this.$message.success('更新成功！')
})
.finally(() => {
hide()
_this.handleListThemes()
})
async onOk() {
const hideLoading = _this.$message.loading('更新中...', 0)
try {
await apiClient.theme.updateThemeByFetching(item.id)
_this.$message.success('更新成功！')
} catch (e) {
_this.$log.error('Failed to update theme: ', e)
} finally {
hideLoading()
_this.handleListThemes()
}
}
})
},
onThemeInstallModalClose() {
if (this.$refs.upload) {
this.$refs.upload.handleClearFileList()
}
this.installModal.remote.url = null
this.handleListThemes()
},
onThemeSettingsDrawerClose() {
this.themeSettingDrawer.visible = false
this.themeSettingDrawer.selected = {}

135
src/views/interface/components/ThemeInstallModal.vue
Unescape View File

@ -0,0 +1,135 @@
<template>
<a-modal
v-model="modalVisible"
:afterClose="onModalClose"
:bodyStyle="{ padding: '0 24px 24px' }"
:footer="null"
destroyOnClose
title="安装主题"
>
<div class="custom-tab-wrapper">
<a-tabs :animated="{ inkBar: true, tabPane: false }">
<a-tab-pane key="1" tab="本地上传">
<FilePondUpload
ref="upload"
:accepts="['application/x-zip', 'application/x-zip-compressed', 'application/zip']"
:uploadHandler="local.uploadHandler"
label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
name="file"
@success="onUploadSucceed"
></FilePondUpload>
<div class="mt-5">
<a-alert closable type="info">
<template slot="message">
更多主题请访问：
<a href="https://halo.run/themes.html" target="_blank">https://halo.run/themes</a>
</template>
</a-alert>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="远程下载">
<a-form-model ref="remoteInstallForm" :model="remote" :rules="remote.rules" layout="vertical">
<a-form-model-item help="* 支持 Git 仓库地址，ZIP 链接。" label="远程地址：" prop="url">
<a-input v-model="remote.url" />
</a-form-model-item>
<a-form-model-item>
<ReactiveButton
:errored="remote.fetchErrored"
:loading="remote.fetching"
erroredText="下载失败"
loadedText="下载成功"
text="下载"
type="primary"
@callback="handleRemoteFetchCallback"
@click="handleRemoteFetching"
></ReactiveButton>
</a-form-model-item>
</a-form-model>
<div class="mt-5">
<a-alert closable type="info">
<template slot="message">
目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题请访问：
<a href="https://halo.run/themes.html" target="_blank">https://halo.run/themes</a>
</template>
</a-alert>
</div>
</a-tab-pane>
</a-tabs>
</div>
</a-modal>
</template>
<script>
import apiClient from '@/utils/api-client'
export default {
name: 'ThemeInstallModal',
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
local: {
uploadHandler: (file, options) => apiClient.theme.upload(file, options)
},
remote: {
url: null,
fetching: false,
fetchErrored: false,
rules: {
url: [{ required: true, message: '* 远程地址不能为空', trigger: ['change'] }]
}
}
}
},
computed: {
modalVisible: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
}
}
},
methods: {
onModalClose() {
this.$refs.upload.handleClearFileList()
this.remote.url = null
this.$emit('onAfterClose')
},
onUploadSucceed() {
this.modalVisible = false
this.$emit('upload-succeed')
},
handleRemoteFetching() {
this.$refs.remoteInstallForm.validate(async valid => {
if (valid) {
try {
this.remote.fetching = true
await apiClient.theme.fetchTheme(this.remote.url)
} catch (e) {
this.remote.fetchErrored = true
this.$log.error('Fetch remote theme failed: ', e)
} finally {
setTimeout(() => {
this.remote.fetching = false
}, 400)
}
}
})
},
handleRemoteFetchCallback() {
if (this.remote.fetchErrored) {
this.remote.fetchErrored = false
} else {
this.modalVisible = false
}
}
}
}
</script>
Write Preview
Loading…
Cancel
Save