1Panel/frontend/src/components/system-upgrade/upgrade/index.vue at 409f22281a2fc5b63bc279f44b1bab95c128d86d · 1Panel-dev/1Panel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
    <DrawerPro v-model="drawerVisible" :header="$t('commons.button.upgrade')" @close="handleClose" size="large">
        <div class="panel-MdEditor">
            <div class="default-theme" style="margin-left: 20px">
                <h2 class="inline-block">{{ $t('app.version') }}</h2>
            </div>
            <el-radio-group class="inline-block tag" v-model="upgradeVersion" @change="changeOption">
                <el-radio v-if="upgradeInfo.newVersion" :value="upgradeInfo.newVersion">
                    {{ upgradeInfo.newVersion }}
                </el-radio>
                <el-radio v-if="upgradeInfo.latestVersion" :value="upgradeInfo.latestVersion">
                    {{ upgradeInfo.latestVersion }}
                </el-radio>
                <el-radio v-if="upgradeInfo.testVersion" :value="upgradeInfo.testVersion">
                    {{ upgradeInfo.testVersion }}
                </el-radio>
            </el-radio-group>
            <MarkDownEditor v-loading="loading" :content="upgradeInfo.releaseNote" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
                <el-button type="primary" @click="onUpgrade">{{ $t('setting.upgradeNow') }}</el-button>
            </span>
        </template>
    </DrawerPro>
</template>

<script setup lang="ts">
import MarkDownEditor from '@/components/mkdown-editor/index.vue';

import { loadReleaseNotes, upgrade } from '@/api/modules/setting';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ref } from 'vue';
import { GlobalStore } from '@/store';
import { ElMessageBox } from 'element-plus';

const globalStore = GlobalStore();

const drawerVisible = ref(false);
const upgradeInfo = ref();
const loading = ref();
const upgradeVersion = ref();

interface DialogProps {
    upgradeInfo: number;
    upgradeVersion: string;
}
const acceptParams = (params: DialogProps): void => {
    upgradeInfo.value = params.upgradeInfo;
    upgradeVersion.value = params.upgradeVersion;
    drawerVisible.value = true;
};

const emit = defineEmits(['search']);

const handleClose = () => {
    drawerVisible.value = false;
};

const changeOption = async () => {
    loading.value = true;
    await loadReleaseNotes(upgradeVersion.value)
        .then((res) => {
            loading.value = false;
            upgradeInfo.value.releaseNote = res.data;
        })
        .catch(() => {
            loading.value = false;
        });
};

const onUpgrade = async () => {
    ElMessageBox.confirm(i18n.global.t('setting.upgradeHelper', i18n.global.t('commons.button.upgrade')), {
        confirmButtonText: i18n.global.t('commons.button.confirm'),
        cancelButtonText: i18n.global.t('commons.button.cancel'),
        type: 'info',
    }).then(async () => {
        await upgrade(upgradeVersion.value);
        globalStore.isLoading = true;
        globalStore.isOnRestart = true;
        drawerVisible.value = false;
        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
        emit('search');
    });
};

defineExpose({
    acceptParams,
});
</script>

<style lang="scss" scoped>
.line-height {
    line-height: 25px;
}
.panel-MdEditor {
    height: calc(100vh - 330px);
    .tag {
        margin-top: -6px;
        margin-left: 20px;
        vertical-align: middle;
    }
    :deep(.md-editor-preview) {
        font-size: 14px;
    }
    :deep(.default-theme h2) {
        color: var(--el-color-primary);
        margin: 13px 0;
        padding: 0;
        font-size: 16px;
    }
}
:deep(.md-editor-dark) {
    background-color: var(--panel-main-bg-color-9);
}
</style>