IGCrystal
0f95f62aa1
✨ 核心特性: - 实现模块化i18n架构，支持22个功能模块 - 完成中英双语翻译文件(44个翻译文件) - 新增懒加载翻译模块，提升性能 - 类型安全的翻译键值验证系统 🌐 国际化覆盖: - 所有主要页面(15+)完成国际化 - 导航侧边栏、顶栏、共享组件全部支持 - 仪表板统计组件完整国际化 - 登录页面及认证流程完整国际化 🎨 UI/UX 优化: - 统一顶栏按钮样式(语言切换+主题切换) - 移动端登录页采用全屏设计 - Logo组件智能换行支持中英文 - 响应式语言切换组件 📱 移动端适配: - 登录卡片移动端全屏布局 - 悬浮工具栏底部固定定位 - 触摸友好的交互设计 - 多设备响应式支持 🔧 技术改进: - 模块化翻译文件结构 (core/*, features/*) - 懒加载机制减少初始包体积 - TypeScript类型定义完整 - 翻译键值自动验证
113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<script setup>
|
|
import ConsoleDisplayer from '@/components/shared/ConsoleDisplayer.vue';
|
|
import { useModuleI18n } from '@/i18n/composables';
|
|
import axios from 'axios';
|
|
|
|
const { tm } = useModuleI18n('features/console');
|
|
</script>
|
|
|
|
<template>
|
|
<div style="height: 100%;">
|
|
<div
|
|
style="background-color: var(--v-theme-surface); padding: 8px; padding-left: 16px; border-radius: 8px; margin-bottom: 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
|
|
<h4>{{ tm('title') }}</h4>
|
|
<div class="d-flex align-center">
|
|
<v-switch
|
|
v-model="autoScrollDisabled"
|
|
:label="autoScrollDisabled ? tm('autoScroll.disabled') : tm('autoScroll.enabled')"
|
|
hide-details
|
|
density="compact"
|
|
style="margin-right: 16px;"
|
|
></v-switch>
|
|
<v-dialog v-model="pipDialog" width="400">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn variant="plain" v-bind="props">{{ tm('pipInstall.button') }}</v-btn>
|
|
</template>
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="text-h5">{{ tm('pipInstall.dialogTitle') }}</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-text-field v-model="pipInstallPayload.package" :label="tm('pipInstall.packageLabel')" variant="outlined"></v-text-field>
|
|
<v-text-field v-model="pipInstallPayload.mirror" :label="tm('pipInstall.mirrorLabel')" variant="outlined"></v-text-field>
|
|
<small>{{ tm('pipInstall.mirrorHint') }}</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">
|
|
{{ tm('pipInstall.installButton') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</div>
|
|
<ConsoleDisplayer ref="consoleDisplayer" style="height: calc(100vh - 220px); " />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'ConsolePage',
|
|
components: {
|
|
ConsoleDisplayer
|
|
},
|
|
data() {
|
|
return {
|
|
autoScrollDisabled: false,
|
|
pipDialog: false,
|
|
pipInstallPayload: {
|
|
package: '',
|
|
mirror: ''
|
|
},
|
|
loading: false,
|
|
status: ''
|
|
}
|
|
},
|
|
watch: {
|
|
autoScrollDisabled(val) {
|
|
if (this.$refs.consoleDisplayer) {
|
|
this.$refs.consoleDisplayer.autoScroll = !val;
|
|
}
|
|
}
|
|
},
|
|
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> |