NyaHome/webui/src/pages/nyahome/AdminAii.vue

<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>