ui: simplify storage endpoint page

This commit is contained in:
237899745
2026-07-25 16:46:45 +08:00
parent d29f43d2e3
commit 9716fc2115

View File

@@ -19,9 +19,6 @@ const auth = useAuthStore()
const loading = ref(true) const loading = ref(true)
const error = ref<string | null>(null) const error = ref<string | null>(null)
const message = ref<string | null>(null) const message = ref<string | null>(null)
const activeBackend = ref<'local' | 's3'>('local')
const localObjectCount = ref(0)
const localStoredBytes = ref(0)
const endpoints = ref<AdminStorageEndpoint[]>([]) const endpoints = ref<AdminStorageEndpoint[]>([])
const editingId = ref<string | null>(null) const editingId = ref<string | null>(null)
const formOpen = ref(false) const formOpen = ref(false)
@@ -68,9 +65,6 @@ async function loadEndpoints(clearError = true) {
try { try {
const response = await listStorageEndpoints(auth.token) const response = await listStorageEndpoints(auth.token)
endpoints.value = response.endpoints endpoints.value = response.endpoints
activeBackend.value = response.active_backend
localObjectCount.value = response.local_object_count
localStoredBytes.value = response.local_stored_bytes
} catch (err) { } catch (err) {
error.value = errorText(err, '加载存储配置失败') error.value = errorText(err, '加载存储配置失败')
} finally { } finally {
@@ -224,36 +218,6 @@ onMounted(loadEndpoints)
<template> <template>
<div class="space-y-6"> <div class="space-y-6">
<section class="overflow-hidden rounded-2xl bg-slate-950 text-white shadow-sm">
<div class="grid gap-6 p-6 lg:grid-cols-[1.35fr_1fr] lg:p-8">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-cyan-300">Storage control plane</p>
<h2 class="mt-3 text-2xl font-semibold">对象存储</h2>
<p class="mt-2 max-w-2xl text-sm leading-6 text-slate-300">
新对象优先写入活动 S3连接或写入失败时自动保存到应用服务器本地每个对象固定记录实际写入后端恢复 S3 后的新文件会自动重新走对象存储
</p>
</div>
<div class="rounded-xl border border-white/10 bg-white/5 p-4">
<div class="flex items-center justify-between gap-3">
<span class="text-sm text-slate-300">当前新文件后端</span>
<span
class="rounded-full px-3 py-1 text-xs font-semibold"
:class="activeBackend === 's3' ? 'bg-emerald-400/15 text-emerald-300' : 'bg-amber-400/15 text-amber-200'"
>
{{ activeBackend === 's3' ? 'S3 优先' : '仅本地' }}
</span>
</div>
<p class="mt-3 text-xs leading-5 text-slate-400">
S3 故障只影响当次写入下载与到期清理会按对象记录的真实后端执行签名默认 5 分钟有效
</p>
<div class="mt-3 flex items-center justify-between border-t border-white/10 pt-3 text-xs">
<span class="text-slate-400">本地对象</span>
<span class="font-medium text-slate-200">{{ localObjectCount }} · {{ formatBytes(localStoredBytes) }}</span>
</div>
</div>
</div>
</section>
<div v-if="error" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"> <div v-if="error" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
{{ error }} {{ error }}
</div> </div>
@@ -419,22 +383,5 @@ onMounted(loadEndpoints)
</form> </form>
</section> </section>
<section class="grid gap-4 md:grid-cols-3">
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">1 day</p>
<p class="mt-2 font-medium text-slate-900">未登录与免费用户</p>
<p class="mt-1 text-sm text-slate-500">对象键位于 1d 生命周期前缀数据库按精确过期时间清理</p>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">7 days</p>
<p class="mt-2 font-medium text-slate-900">低级会员</p>
<p class="mt-1 text-sm text-slate-500">Pro 套餐保留 7 端点切换不改变已生成对象的位置</p>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">15 days</p>
<p class="mt-2 font-medium text-slate-900">高级会员</p>
<p class="mt-1 text-sm text-slate-500">Business 套餐保留 15 S3 生命周期作为兜底清理</p>
</div>
</section>
</div> </div>
</template> </template>