mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-05-23 09:12:46 +08:00
3bd8b670ca
把原来一长条的 options 拆成五个 tab，覆盖 web 端 SettingPage 的全部能力。今后新功能优先在插件里做，web 端逐步退役。 - 通用：后端地址 + 默认供应商/模型 + 默认生成选项（原 Options.vue 内容） - 模型供应商：完整 CRUD —— 列表 / 启用切换 / 编辑 / 测试连接 / 添加 / 模型增删 - 音频转写配置：转写器引擎切换（fast-whisper / mlx-whisper / Groq / 必剪 / 快手）+ Whisper 模型大小切换 + 模型本地下载状态 + 触发下载 · 直接修复 'MLX Whisper 不可用' 报错——非 Mac 用户现在能切到 fast-whisper / Groq - 下载配置：每平台 cookie 显示 / 浏览器一键同步 / 手动粘贴保存 - 部署监控：后端、FFmpeg、CUDA、Whisper 模型 当前状态 logic/api.ts 补齐：provider CRUD / model CRUD / connect_test / transcriber_config / transcriber_models_status / transcriber_download / get_downloader_cookie / deploy_status / sys_health。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
86 lines
2.8 KiB
Vue
86 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import { getDeployStatus, getSysHealth } from '~/logic/api'
|
||
import type { DeployStatus } from '~/logic/types'
|
||
|
||
const status = ref<DeployStatus | null>(null)
|
||
const health = ref<{ ok: boolean, msg?: string } | null>(null)
|
||
const loading = ref(false)
|
||
const error = ref('')
|
||
|
||
async function refresh() {
|
||
loading.value = true
|
||
error.value = ''
|
||
try {
|
||
const [s, h] = await Promise.all([getDeployStatus(), getSysHealth()])
|
||
status.value = s
|
||
health.value = h
|
||
}
|
||
catch (e) {
|
||
error.value = (e as Error).message
|
||
}
|
||
finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(refresh)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="p-6 max-w-2xl">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h1 class="text-xl font-bold">部署监控</h1>
|
||
<button class="btn-secondary" :disabled="loading" @click="refresh">
|
||
{{ loading ? '检查中…' : '刷新' }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="error" class="text-red-600 text-sm mb-4">{{ error }}</div>
|
||
|
||
<template v-if="status">
|
||
<section class="section-card">
|
||
<h2 class="font-semibold">后端</h2>
|
||
<div class="text-sm">
|
||
<span class="tag bg-green-100 text-green-700">{{ status.backend.status }}</span>
|
||
<span class="ml-2 text-gray-600">端口 {{ status.backend.port }}</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-card">
|
||
<h2 class="font-semibold">FFmpeg</h2>
|
||
<div class="text-sm flex items-center gap-3">
|
||
<span
|
||
class="tag"
|
||
:class="status.ffmpeg.available ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
|
||
>{{ status.ffmpeg.available ? '可用' : '不可用' }}</span>
|
||
<span v-if="health && !health.ok" class="text-red-600 text-xs">{{ health.msg }}</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-card">
|
||
<h2 class="font-semibold">CUDA / GPU</h2>
|
||
<div class="text-sm">
|
||
<span
|
||
class="tag"
|
||
:class="status.cuda.available ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'"
|
||
>{{ status.cuda.available ? '可用' : '不可用' }}</span>
|
||
<div v-if="status.cuda.available" class="mt-1 text-gray-600 text-xs">
|
||
CUDA {{ status.cuda.version }} · {{ status.cuda.gpu_name }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-card">
|
||
<h2 class="font-semibold">Whisper</h2>
|
||
<div class="text-sm text-gray-600">
|
||
引擎：<span class="text-gray-800">{{ status.whisper.transcriber_type }}</span>
|
||
<span v-if="status.whisper.model_size" class="ml-3">
|
||
模型：<span class="text-gray-800">{{ status.whisper.model_size }}</span>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
</div>
|
||
</template>
|