ui: simplify storage endpoint page
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user