feat(webui): WebUI 管理后台新增 AII 管理栏目

在 WebUI NyaHome 管理后台中实现 AII 管理栏目，用于在线修改模型设置。同时在后端补全了两个路由端点。
2026-06-01 20:42:16 +08:00
parent 45e255856a
commit 7df66bbc61
13 changed files with 571 additions and 109 deletions
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { type DataTableColumns, NButton, NTag } from 'naive-ui'
+import { h, onMounted, ref } from 'vue'
+
+import ConfigCard from '@/components/admin/ConfigCard.vue'
+import AiiModelAddModal from '@/components/aii/AiiModelAddModal.vue'
+import AiiModelEditModal from '@/components/aii/AiiModelEditModal.vue'
+import AiiProviderAddModal from '@/components/aii/AiiProviderAddModal.vue'
+import AiiProviderEditModal from '@/components/aii/AiiProviderEditModal.vue'
+import { api } from '@/tools/web.ts'
+import type { AiiModelPublic, AiiProviderPublicWithoutKey } from '@/types/aii.ts'
+
+const showProviderAddModal = ref(false)
+const showProviderEditModal = ref(false)
+const showModelAddModal = ref(false)
+const showModelEditModal = ref(false)
+
+function createProviderColumns(): DataTableColumns<AiiProviderPublicWithoutKey> {
+  return [
+    {
+      title: 'ID',
+      key: 'id',
+      render(row) {
+        return h(
+          NTag,
+          {
+            type: 'error',
+            round: true,
+          },
+          row.id,
+        )
+      },
+    },
+    {
+      title: '提供商名称',
+      key: 'name',
+    },
+    {
+      title: 'Base URL',
+      key: 'base_url',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render(row) {
+        return h(
+          NButton,
+          {
+            type: 'warning',
+            secondary: true,
+            round: true,
+            onClick() {
+              selectedProvider.value = row
+              showProviderEditModal.value = true
+            },
+          },
+          '修改',
+        )
+      },
+    },
+  ]
+}
+
+function createModelColumns(): DataTableColumns<AiiModelPublic> {
+  return [
+    {
+      title: 'ID',
+      key: 'id',
+      render(row) {
+        return h(
+          NTag,
+          {
+            type: 'primary',
+            round: true,
+          },
+          row.id,
+        )
+      },
+    },
+    {
+      title: '模型名称',
+      key: 'model_name',
+    },
+    {
+      title: '最大上下文长度（k）',
+      key: 'max_context_length',
+    },
+    {
+      title: '支持思考',
+      key: 'reasonable',
+      render(row) {
+        return h(
+          NTag,
+          {
+            type: 'info',
+            round: true,
+          },
+          row.reasonable ? '思考' : '非思考',
+        )
+      },
+    },
+    {
+      title: '所属提供商',
+      key: 'provider_id',
+      render(row) {
+        return h(
+          NTag,
+          {
+            type: 'error',
+            round: true,
+          },
+          row.provider_id,
+        )
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render(row) {
+        return h(
+          NButton,
+          {
+            type: 'warning',
+            secondary: true,
+            round: true,
+            onClick() {
+              selectedModel.value = row
+              showModelEditModal.value = true
+            },
+          },
+          '修改',
+        )
+      },
+    },
+  ]
+}
+
+const providerColumns = createProviderColumns()
+const modelColumns = createModelColumns()
+const providers = ref<AiiProviderPublicWithoutKey[]>([])
+const models = ref<AiiModelPublic[]>([])
+const selectedModel = ref<AiiModelPublic | null>(null)
+const selectedProvider = ref<AiiProviderPublicWithoutKey | null>(null)
+
+function load() {
+  api
+    .get('/aii/provider/')
+    .then((res) => res.data as AiiProviderPublicWithoutKey[])
+    .then((data) => (providers.value = data))
+  api
+    .get('/aii/model/')
+    .then((res) => res.data as AiiModelPublic[])
+    .then((data) => (models.value = data))
+}
+
+onMounted(() => {
+  load()
+})
+</script>
+
+<template>
+  <n-flex vertical align="center">
+    <n-card>
+      <n-flex>
+        <n-h4 style="margin: 0">刷新本页信息（如果你正在从其他地方修改）</n-h4>
+        <n-button style="margin-left: auto" type="info" @click="load()">更新</n-button>
+      </n-flex>
+    </n-card>
+
+    <config-card title="模型提供商">
+      <template #extra>
+        <n-button round type="info" @click="showProviderAddModal = true">添加</n-button>
+      </template>
+      <n-data-table :columns="providerColumns" :data="providers" />
+    </config-card>
+
+    <config-card title="模型">
+      <template #extra>
+        <n-button round type="info" @click="showModelAddModal = true">添加</n-button>
+      </template>
+      <n-data-table :columns="modelColumns" :data="models" />
+    </config-card>
+
+    <aii-provider-add-modal v-model:show-modal="showProviderAddModal" :reload="load" />
+    <aii-model-add-modal v-model:show-modal="showModelAddModal" no-add-provider :reload="load" />
+    <aii-provider-edit-modal
+      :provider="selectedProvider"
+      v-model:show-modal="showProviderEditModal"
+      :reload="load"
+    />
+    <aii-model-edit-modal
+      :model="selectedModel"
+      v-model:show-modal="showModelEditModal"
+      :reload="load"
+    />
+  </n-flex>
+</template>
+
+<style scoped></style>