72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<template>
|
|
<n-modal v-model:show="show" preset="card" style="width: 500px">
|
|
<template #header>
|
|
<h3>{{ t('Installing App') }}</h3>
|
|
</template>
|
|
|
|
<div class="progress-content">
|
|
<n-progress
|
|
:percentage="progress"
|
|
:show-indicator="true"
|
|
color="#10b981"
|
|
/>
|
|
<n-text class="progress-text">{{ message }}</n-text>
|
|
</div>
|
|
|
|
<template #action>
|
|
<n-button @click="handleClose" :disabled="installing">
|
|
{{ installing ? t('Installing...') : t('Close') }}
|
|
</n-button>
|
|
</template>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { NModal, NProgress, NText, NButton, useMessage } from 'naive-ui'
|
|
import { t } from '@/shared/i18n'
|
|
|
|
interface Props {
|
|
modelValue: boolean
|
|
progress: number
|
|
message: string
|
|
status: 'success' | 'error' | 'info'
|
|
installing: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
|
|
const show = ref(props.modelValue)
|
|
|
|
watch(() => props.modelValue, (newVal) => {
|
|
show.value = newVal
|
|
})
|
|
|
|
watch(show, (newVal) => {
|
|
emit('update:modelValue', newVal)
|
|
})
|
|
|
|
function handleClose() {
|
|
if (!props.installing) {
|
|
show.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.progress-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.progress-text {
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
</style>
|