Soulter
96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<script setup>
|
||
import ConsoleDisplayer from '@/components/shared/ConsoleDisplayer.vue';
|
||
import axios from 'axios';
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div style="height: 100%;">
|
||
<div
|
||
style="background-color: white; padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
|
||
<h4>控制台</h4>
|
||
<v-dialog v-model="pipDialog" width="400">
|
||
<template v-slot:activator="{ props }">
|
||
<v-btn variant="plain" v-bind="props">安装 pip 库</v-btn>
|
||
</template>
|
||
<v-card>
|
||
<v-card-title>
|
||
<span class="text-h5">安装 Pip 库</span>
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-text-field v-model="pipInstallPayload.package" label="*库名，如 llmtuner" variant="outlined"></v-text-field>
|
||
<v-text-field v-model="pipInstallPayload.mirror" label="镜像站链接（可选）" variant="outlined"></v-text-field>
|
||
<small>如果不填镜像站链接，默认使用阿里云镜像：https://mirrors.aliyun.com/pypi/simple/</small>
|
||
<div>
|
||
<small>{{ status }}</small>
|
||
</div>
|
||
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="blue-darken-1" variant="text" @click="pipInstall" :loading="loading">
|
||
安装
|
||
</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
|
||
</div>
|
||
<ConsoleDisplayer style="height: calc(100vh - 160px); " />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'ConsolePage',
|
||
components: {
|
||
ConsoleDisplayer
|
||
},
|
||
data() {
|
||
return {
|
||
pipDialog: false,
|
||
pipInstallPayload: {
|
||
package: '',
|
||
mirror: ''
|
||
},
|
||
loading: false,
|
||
status: ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
pipInstall() {
|
||
this.loading = true;
|
||
axios.post('/api/update/pip-install', this.pipInstallPayload)
|
||
.then(res => {
|
||
this.status = res.data.message;
|
||
setTimeout(() => {
|
||
this.status = '';
|
||
this.pipDialog = false;
|
||
}, 2000);
|
||
})
|
||
.catch(err => {
|
||
this.status = err.response.data.message;
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 0.2s ease-in-out;
|
||
}
|
||
</style> |