You've already forked agentic-coding-workflow
feat(web): admin views for LLM endpoints/models + usage dashboard
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-lg font-semibold">
|
||||
LLM Endpoints
|
||||
</h2>
|
||||
<NButton
|
||||
type="primary"
|
||||
@click="openCreate"
|
||||
>
|
||||
+ 新增
|
||||
</NButton>
|
||||
</div>
|
||||
<NDataTable
|
||||
:data="endpoints"
|
||||
:columns="columns"
|
||||
:row-key="rowKey"
|
||||
/>
|
||||
<NModal
|
||||
v-model:show="showForm"
|
||||
preset="card"
|
||||
title="LLM Endpoint"
|
||||
style="width: 520px"
|
||||
>
|
||||
<NForm>
|
||||
<NFormItem label="Provider">
|
||||
<NSelect
|
||||
v-model:value="form.provider"
|
||||
:options="providerOpts"
|
||||
:disabled="!!editing"
|
||||
@update:value="onProviderChange"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="显示名">
|
||||
<NInput v-model:value="form.display_name" />
|
||||
</NFormItem>
|
||||
<NFormItem label="Base URL">
|
||||
<NInput v-model:value="form.base_url" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="editing ? 'API Key（留空则不修改）' : 'API Key'">
|
||||
<NInput
|
||||
v-model:value="form.api_key"
|
||||
type="password"
|
||||
show-password-on="click"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<NButton @click="showForm = false">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
@click="save"
|
||||
>
|
||||
保存
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</div>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h, onMounted, ref } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NDataTable,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NInput,
|
||||
NModal,
|
||||
NSelect,
|
||||
useDialog,
|
||||
useMessage,
|
||||
} from 'naive-ui'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
|
||||
import AppShell from '@/layouts/AppShell.vue'
|
||||
import {
|
||||
llmAdminApi,
|
||||
type LLMEndpoint,
|
||||
type LLMProvider,
|
||||
} from '@/api/llmAdmin'
|
||||
|
||||
const endpoints = ref<LLMEndpoint[]>([])
|
||||
const showForm = ref(false)
|
||||
const editing = ref<LLMEndpoint | null>(null)
|
||||
const form = ref<{
|
||||
provider: LLMProvider
|
||||
display_name: string
|
||||
base_url: string
|
||||
api_key: string
|
||||
}>({
|
||||
provider: 'anthropic',
|
||||
display_name: '',
|
||||
base_url: '',
|
||||
api_key: '',
|
||||
})
|
||||
const saving = ref(false)
|
||||
const msg = useMessage()
|
||||
const dlg = useDialog()
|
||||
|
||||
const providerOpts: { label: string; value: LLMProvider }[] = [
|
||||
{ label: 'Anthropic', value: 'anthropic' },
|
||||
{ label: 'OpenAI / Compatible', value: 'openai' },
|
||||
{ label: 'Gemini', value: 'gemini' },
|
||||
]
|
||||
|
||||
const defaultBaseURL: Record<LLMProvider, string> = {
|
||||
anthropic: 'https://api.anthropic.com',
|
||||
openai: 'https://api.openai.com/v1',
|
||||
gemini: 'https://generativelanguage.googleapis.com/v1beta',
|
||||
}
|
||||
|
||||
const columns: DataTableColumns<LLMEndpoint> = [
|
||||
{ title: '显示名', key: 'display_name' },
|
||||
{ title: 'Provider', key: 'provider' },
|
||||
{ title: 'Base URL', key: 'base_url' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render: (row) =>
|
||||
h('div', { class: 'flex gap-1' }, [
|
||||
h(
|
||||
NButton,
|
||||
{ size: 'small', onClick: () => testEndpoint(row.id) },
|
||||
{ default: () => '测试' },
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{ size: 'small', onClick: () => openEdit(row) },
|
||||
{ default: () => '编辑' },
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{ size: 'small', type: 'error', onClick: () => del(row) },
|
||||
{ default: () => '删除' },
|
||||
),
|
||||
]),
|
||||
},
|
||||
]
|
||||
|
||||
const rowKey = (row: LLMEndpoint) => row.id
|
||||
|
||||
onMounted(reload)
|
||||
|
||||
async function reload() {
|
||||
endpoints.value = await llmAdminApi.listEndpoints()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editing.value = null
|
||||
form.value = {
|
||||
provider: 'anthropic',
|
||||
display_name: '',
|
||||
base_url: defaultBaseURL.anthropic,
|
||||
api_key: '',
|
||||
}
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
function openEdit(ep: LLMEndpoint) {
|
||||
editing.value = ep
|
||||
form.value = {
|
||||
provider: ep.provider,
|
||||
display_name: ep.display_name,
|
||||
base_url: ep.base_url,
|
||||
api_key: '',
|
||||
}
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
function onProviderChange(v: LLMProvider) {
|
||||
form.value.base_url = defaultBaseURL[v]
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
try {
|
||||
if (editing.value) {
|
||||
await llmAdminApi.updateEndpoint(editing.value.id, {
|
||||
display_name: form.value.display_name,
|
||||
base_url: form.value.base_url,
|
||||
api_key: form.value.api_key || undefined,
|
||||
})
|
||||
} else {
|
||||
await llmAdminApi.createEndpoint({
|
||||
provider: form.value.provider,
|
||||
display_name: form.value.display_name,
|
||||
base_url: form.value.base_url,
|
||||
api_key: form.value.api_key,
|
||||
})
|
||||
}
|
||||
showForm.value = false
|
||||
await reload()
|
||||
} catch (e) {
|
||||
msg.error(e instanceof Error ? e.message : String(e))
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function testEndpoint(id: string) {
|
||||
try {
|
||||
await llmAdminApi.testEndpoint(id)
|
||||
msg.success('连通正常')
|
||||
} catch (e) {
|
||||
msg.error(e instanceof Error ? e.message : String(e))
|
||||
}
|
||||
}
|
||||
|
||||
function del(ep: LLMEndpoint) {
|
||||
dlg.warning({
|
||||
title: `删除 ${ep.display_name}？`,
|
||||
positiveText: '删除',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await llmAdminApi.deleteEndpoint(ep.id)
|
||||
await reload()
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-lg font-semibold">
|
||||
LLM Models
|
||||
</h2>
|
||||
<NButton
|
||||
type="primary"
|
||||
@click="openCreate"
|
||||
>
|
||||
+ 新增
|
||||
</NButton>
|
||||
</div>
|
||||
<NDataTable
|
||||
:data="models"
|
||||
:columns="columns"
|
||||
:row-key="rowKey"
|
||||
/>
|
||||
<NModal
|
||||
v-model:show="showForm"
|
||||
preset="card"
|
||||
title="LLM Model"
|
||||
style="width: 720px"
|
||||
>
|
||||
<NForm>
|
||||
<NFormItem label="Endpoint">
|
||||
<NSelect
|
||||
v-model:value="form.endpoint_id"
|
||||
:options="endpointOpts"
|
||||
:disabled="!!editing"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Model ID（provider 侧）">
|
||||
<NInput
|
||||
v-model:value="form.model_id"
|
||||
:disabled="!!editing"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="显示名">
|
||||
<NInput v-model:value="form.display_name" />
|
||||
</NFormItem>
|
||||
<NFormItem label="能力">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<NCheckbox v-model:checked="form.capabilities.image">
|
||||
Image
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="form.capabilities.pdf">
|
||||
PDF
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="form.capabilities.audio">
|
||||
Audio
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="form.capabilities.reasoning">
|
||||
Reasoning
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="form.capabilities.tools">
|
||||
Tools
|
||||
</NCheckbox>
|
||||
</div>
|
||||
</NFormItem>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<NFormItem label="Context Window">
|
||||
<NInputNumber
|
||||
v-model:value="form.context_window"
|
||||
:min="1"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Max Output Tokens">
|
||||
<NInputNumber
|
||||
v-model:value="form.max_output_tokens"
|
||||
:min="1"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Prompt Price (USD / 1M)">
|
||||
<NInputNumber
|
||||
v-model:value="form.prompt_price_per_million_usd"
|
||||
:min="0"
|
||||
:step="0.01"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Completion Price (USD / 1M)">
|
||||
<NInputNumber
|
||||
v-model:value="form.completion_price_per_million_usd"
|
||||
:min="0"
|
||||
:step="0.01"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Thinking Price (USD / 1M)">
|
||||
<NInputNumber
|
||||
v-model:value="form.thinking_price_per_million_usd"
|
||||
:min="0"
|
||||
:step="0.01"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="Sort Order">
|
||||
<NInputNumber
|
||||
v-model:value="form.sort_order"
|
||||
:min="0"
|
||||
/>
|
||||
</NFormItem>
|
||||
</div>
|
||||
<div class="flex gap-4 mt-2">
|
||||
<NCheckbox v-model:checked="form.enabled">
|
||||
Enabled
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="form.is_title_generator">
|
||||
Title Generator
|
||||
</NCheckbox>
|
||||
</div>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<NButton @click="showForm = false">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
@click="save"
|
||||
>
|
||||
保存
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</div>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, h, onMounted, ref } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NCheckbox,
|
||||
NDataTable,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NInput,
|
||||
NInputNumber,
|
||||
NModal,
|
||||
NSelect,
|
||||
NTag,
|
||||
useDialog,
|
||||
useMessage,
|
||||
} from 'naive-ui'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
|
||||
import AppShell from '@/layouts/AppShell.vue'
|
||||
import {
|
||||
llmAdminApi,
|
||||
type CreateModelBody,
|
||||
type LLMEndpoint,
|
||||
type LLMModel,
|
||||
type ModelCapabilities,
|
||||
} from '@/api/llmAdmin'
|
||||
|
||||
const models = ref<LLMModel[]>([])
|
||||
const endpoints = ref<LLMEndpoint[]>([])
|
||||
const showForm = ref(false)
|
||||
const editing = ref<LLMModel | null>(null)
|
||||
const saving = ref(false)
|
||||
const msg = useMessage()
|
||||
const dlg = useDialog()
|
||||
|
||||
interface ModelForm {
|
||||
endpoint_id: string
|
||||
model_id: string
|
||||
display_name: string
|
||||
capabilities: ModelCapabilities
|
||||
context_window: number
|
||||
max_output_tokens: number
|
||||
prompt_price_per_million_usd: number
|
||||
completion_price_per_million_usd: number
|
||||
thinking_price_per_million_usd: number
|
||||
is_title_generator: boolean
|
||||
enabled: boolean
|
||||
sort_order: number
|
||||
}
|
||||
|
||||
function blankForm(): ModelForm {
|
||||
return {
|
||||
endpoint_id: '',
|
||||
model_id: '',
|
||||
display_name: '',
|
||||
capabilities: {
|
||||
image: false,
|
||||
pdf: false,
|
||||
audio: false,
|
||||
reasoning: false,
|
||||
tools: false,
|
||||
},
|
||||
context_window: 200000,
|
||||
max_output_tokens: 8192,
|
||||
prompt_price_per_million_usd: 0,
|
||||
completion_price_per_million_usd: 0,
|
||||
thinking_price_per_million_usd: 0,
|
||||
is_title_generator: false,
|
||||
enabled: true,
|
||||
sort_order: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const form = ref<ModelForm>(blankForm())
|
||||
|
||||
const endpointOpts = computed(() =>
|
||||
endpoints.value.map((e) => ({
|
||||
label: `${e.display_name} (${e.provider})`,
|
||||
value: e.id,
|
||||
})),
|
||||
)
|
||||
|
||||
const endpointName = (id: string) =>
|
||||
endpoints.value.find((e) => e.id === id)?.display_name ?? id
|
||||
|
||||
const capLabel = (c: ModelCapabilities) => {
|
||||
const parts: string[] = []
|
||||
if (c.image) parts.push('I')
|
||||
if (c.pdf) parts.push('P')
|
||||
if (c.audio) parts.push('A')
|
||||
if (c.reasoning) parts.push('R')
|
||||
if (c.tools) parts.push('T')
|
||||
return parts.join('') || '-'
|
||||
}
|
||||
|
||||
const columns: DataTableColumns<LLMModel> = [
|
||||
{ title: '显示名', key: 'display_name' },
|
||||
{ title: 'Model ID', key: 'model_id' },
|
||||
{
|
||||
title: 'Endpoint',
|
||||
key: 'endpoint_id',
|
||||
render: (row) => endpointName(row.endpoint_id),
|
||||
},
|
||||
{
|
||||
title: '能力',
|
||||
key: 'capabilities',
|
||||
render: (row) => capLabel(row.capabilities),
|
||||
},
|
||||
{ title: 'Ctx', key: 'context_window' },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'enabled',
|
||||
render: (row) =>
|
||||
h(
|
||||
NTag,
|
||||
{ type: row.enabled ? 'success' : 'default', size: 'small' },
|
||||
{ default: () => (row.enabled ? '启用' : '停用') },
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Title?',
|
||||
key: 'is_title_generator',
|
||||
render: (row) => (row.is_title_generator ? '✓' : ''),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render: (row) =>
|
||||
h('div', { class: 'flex gap-1' }, [
|
||||
h(
|
||||
NButton,
|
||||
{ size: 'small', onClick: () => openEdit(row) },
|
||||
{ default: () => '编辑' },
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{ size: 'small', type: 'error', onClick: () => del(row) },
|
||||
{ default: () => '删除' },
|
||||
),
|
||||
]),
|
||||
},
|
||||
]
|
||||
|
||||
const rowKey = (row: LLMModel) => row.id
|
||||
|
||||
onMounted(async () => {
|
||||
endpoints.value = await llmAdminApi.listEndpoints()
|
||||
await reload()
|
||||
})
|
||||
|
||||
async function reload() {
|
||||
models.value = await llmAdminApi.listModels(false)
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editing.value = null
|
||||
form.value = blankForm()
|
||||
if (endpoints.value.length > 0) {
|
||||
form.value.endpoint_id = endpoints.value[0].id
|
||||
}
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
function openEdit(m: LLMModel) {
|
||||
editing.value = m
|
||||
form.value = {
|
||||
endpoint_id: m.endpoint_id,
|
||||
model_id: m.model_id,
|
||||
display_name: m.display_name,
|
||||
capabilities: { ...m.capabilities },
|
||||
context_window: m.context_window,
|
||||
max_output_tokens: m.max_output_tokens,
|
||||
prompt_price_per_million_usd: m.prompt_price_per_million_usd,
|
||||
completion_price_per_million_usd: m.completion_price_per_million_usd,
|
||||
thinking_price_per_million_usd: m.thinking_price_per_million_usd,
|
||||
is_title_generator: m.is_title_generator,
|
||||
enabled: m.enabled,
|
||||
sort_order: m.sort_order,
|
||||
}
|
||||
showForm.value = true
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
try {
|
||||
if (editing.value) {
|
||||
await llmAdminApi.updateModel(editing.value.id, {
|
||||
display_name: form.value.display_name,
|
||||
capabilities: form.value.capabilities,
|
||||
context_window: form.value.context_window,
|
||||
max_output_tokens: form.value.max_output_tokens,
|
||||
prompt_price_per_million_usd: form.value.prompt_price_per_million_usd,
|
||||
completion_price_per_million_usd:
|
||||
form.value.completion_price_per_million_usd,
|
||||
thinking_price_per_million_usd:
|
||||
form.value.thinking_price_per_million_usd,
|
||||
is_title_generator: form.value.is_title_generator,
|
||||
enabled: form.value.enabled,
|
||||
sort_order: form.value.sort_order,
|
||||
})
|
||||
} else {
|
||||
const body: CreateModelBody = {
|
||||
endpoint_id: form.value.endpoint_id,
|
||||
model_id: form.value.model_id,
|
||||
display_name: form.value.display_name,
|
||||
capabilities: form.value.capabilities,
|
||||
context_window: form.value.context_window,
|
||||
max_output_tokens: form.value.max_output_tokens,
|
||||
prompt_price_per_million_usd: form.value.prompt_price_per_million_usd,
|
||||
completion_price_per_million_usd:
|
||||
form.value.completion_price_per_million_usd,
|
||||
thinking_price_per_million_usd:
|
||||
form.value.thinking_price_per_million_usd,
|
||||
is_title_generator: form.value.is_title_generator,
|
||||
enabled: form.value.enabled,
|
||||
sort_order: form.value.sort_order,
|
||||
}
|
||||
await llmAdminApi.createModel(body)
|
||||
}
|
||||
showForm.value = false
|
||||
await reload()
|
||||
} catch (e) {
|
||||
msg.error(e instanceof Error ? e.message : String(e))
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function del(m: LLMModel) {
|
||||
dlg.warning({
|
||||
title: `删除 ${m.display_name}？`,
|
||||
positiveText: '删除',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await llmAdminApi.deleteModel(m.id)
|
||||
await reload()
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-lg font-semibold">
|
||||
{{ adminMode ? '用量（全局）' : '我的用量' }}
|
||||
</h2>
|
||||
<div class="flex gap-2 items-center flex-wrap">
|
||||
<NDatePicker
|
||||
v-model:value="range"
|
||||
type="daterange"
|
||||
clearable
|
||||
/>
|
||||
<NSelect
|
||||
v-if="adminMode"
|
||||
v-model:value="groupBy"
|
||||
:options="groupOpts"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</div>
|
||||
<NDataTable
|
||||
:data="rows"
|
||||
:columns="columns"
|
||||
/>
|
||||
</div>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { NDataTable, NDatePicker, NSelect } from 'naive-ui'
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
|
||||
import AppShell from '@/layouts/AppShell.vue'
|
||||
import {
|
||||
llmAdminApi,
|
||||
type AdminUsageGroupBy,
|
||||
type AdminUsageItem,
|
||||
} from '@/api/llmAdmin'
|
||||
import { chatApi, type UsageDailyItem } from '@/api/chat'
|
||||
|
||||
interface Props {
|
||||
adminMode?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), { adminMode: false })
|
||||
|
||||
const now = Date.now()
|
||||
const monthAgo = now - 30 * 86400_000
|
||||
const range = ref<[number, number] | null>([monthAgo, now])
|
||||
const groupBy = ref<AdminUsageGroupBy>('day')
|
||||
const groupOpts: { label: string; value: AdminUsageGroupBy }[] = [
|
||||
{ label: '按用户', value: 'user' },
|
||||
{ label: '按模型', value: 'model' },
|
||||
{ label: '按天', value: 'day' },
|
||||
]
|
||||
|
||||
type Row = AdminUsageItem | UsageDailyItem
|
||||
const rows = ref<Row[]>([])
|
||||
|
||||
const columns = computed<DataTableColumns<Row>>(() => {
|
||||
const tokenCols: DataTableColumns<Row> = [
|
||||
{ title: 'Prompt', key: 'prompt_tokens' },
|
||||
{ title: 'Completion', key: 'completion_tokens' },
|
||||
{ title: 'Thinking', key: 'thinking_tokens' },
|
||||
{
|
||||
title: 'Cost USD',
|
||||
key: 'cost_usd',
|
||||
render: (r) => Number(r.cost_usd ?? 0).toFixed(4),
|
||||
},
|
||||
]
|
||||
if (props.adminMode) {
|
||||
const labelCol: DataTableColumns<Row>[number] = {
|
||||
title:
|
||||
groupBy.value === 'user'
|
||||
? '用户'
|
||||
: groupBy.value === 'model'
|
||||
? '模型'
|
||||
: '日期',
|
||||
key: 'key',
|
||||
render: (r) => {
|
||||
const k = (r as AdminUsageItem).key
|
||||
if (groupBy.value === 'day') {
|
||||
return new Date(k).toLocaleDateString('zh-CN')
|
||||
}
|
||||
return k
|
||||
},
|
||||
}
|
||||
return [labelCol, ...tokenCols]
|
||||
}
|
||||
return [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'day',
|
||||
render: (r) => new Date((r as UsageDailyItem).day).toLocaleDateString('zh-CN'),
|
||||
},
|
||||
...tokenCols,
|
||||
]
|
||||
})
|
||||
|
||||
async function reload() {
|
||||
const r = range.value
|
||||
if (!r) {
|
||||
rows.value = []
|
||||
return
|
||||
}
|
||||
const from = new Date(r[0]).toISOString()
|
||||
const to = new Date(r[1]).toISOString()
|
||||
if (props.adminMode) {
|
||||
const data = await llmAdminApi.adminUsage(from, to, groupBy.value)
|
||||
rows.value = data.items
|
||||
} else {
|
||||
rows.value = await chatApi.myDailyUsage(from, to)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(reload)
|
||||
watch([range, groupBy], reload)
|
||||
</script>
|
||||
Reference in New Issue
Block a user