前端: 移动端适配 + 模型定价手动添加入口

- 表格加 min-w 窄屏横向滚动; 弹窗/资料网格窄屏换列; 顶栏/头部防溢出
- 渠道页移动卡片化、其余页面头部换行、Toast 自适应宽
- 模型定价页顶部加快捷输入(模型名直接进创建弹窗), 接口导入不全可手动补

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sakurasan
2026-08-16 04:31:14 +08:00
co-authored by Claude
parent 9324a782d5
commit 7c4e80afac
9 changed files with 77 additions and 38 deletions
+20 -6
View File
@@ -15,6 +15,12 @@ const summary = ref<ModelSummary>({ total: 0, unpriced: 0, missing: [], denied_c
const editOpen = ref(false)
const editing = ref<Model | null>(null)
const saving = ref(false)
const quickName = ref('')
function quickAdd() {
openCreate()
if (quickName.value) form.name = quickName.value.trim()
}
const bindOpen = ref(false)
const bindModel = ref<Model | null>(null)
@@ -129,12 +135,20 @@ onMounted(load)
<template>
<div class="mx-auto max-w-6xl">
<div class="mb-6 flex items-center justify-between">
<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
<div>
<h1 class="text-lg font-semibold">模型与定价</h1>
<p class="text-sm text-muted">价格按每百万 token (USD),历史用量按当时价格入账</p>
<p class="text-sm text-muted">接口导入不全时可直接输入模型名添加,如 glm-4.7-flash</p>
</div>
<div class="flex w-full gap-2 sm:w-auto">
<input
v-model="quickName"
placeholder="模型名,如 glm-4.7-flash"
class="h-10 min-w-0 flex-1 rounded-md border border-edge2 bg-surface px-3 font-mono text-xs outline-none focus:border-accent sm:w-52 sm:flex-none"
@keyup.enter="quickAdd"
/>
<Button class="shrink-0" @click="quickAdd">添加模型</Button>
</div>
<Button @click="openCreate">添加模型</Button>
</div>
<!-- 一致性提示:渠道提供的未禁止模型应全部纳入定价 -->
@@ -151,14 +165,14 @@ onMounted(load)
<div class="space-y-3">
<div v-for="m in models" :key="m.id" class="card">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-sm text-ink">{{ m.name }}</span>
<Badge :variant="m.enabled ? 'ok' : 'neutral'">{{ m.enabled ? '启用' : '停用' }}</Badge>
<Badge v-if="m.denied" variant="err">已禁止</Badge>
<Badge v-if="m.needs_pricing" variant="warn">未定价</Badge>
</div>
<div class="flex items-center gap-3">
<div class="flex flex-wrap items-center gap-3">
<span class="mono-num text-xs text-muted">入 {{ m.input_price }}</span>
<span class="mono-num text-xs text-muted">出 {{ m.output_price }}</span>
<span class="mono-num text-xs text-muted">缓存读 {{ m.cache_read_price }}</span>
@@ -197,7 +211,7 @@ onMounted(load)
<div class="space-y-4">
<Input v-model="form.name" label="模型名" placeholder="claude-sonnet-5" :disabled="!!editing" />
<Input v-model="form.display_name" label="展示名" />
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Input v-model="form.input_price" label="输入价格 /1M" type="number" />
<Input v-model="form.output_price" label="输出价格 /1M" type="number" />
<Input v-model="form.cache_read_price" label="缓存读价格 /1M" type="number" />