add llm config

This commit is contained in:
Chuck1sn
2025-05-24 13:29:09 +08:00
parent 43728ee733
commit c2d5fddcc0
22 changed files with 675 additions and 38 deletions

View File

@@ -0,0 +1,142 @@
<template>
<!-- Main modal -->
<div id="user-upsert-modal" tabindex="-1" aria-hidden="true"
class="bg-gray-900/50 /80 hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-md max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm ">
<!-- Modal header -->
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
<h3 class="text-lg font-semibold text-gray-900 ">
大模型管理
</h3>
<button type="button" @click="closeModal"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center ">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<form class="p-4 md:p-5">
<div class="grid gap-4 mb-4 grid-cols-2">
<div class="col-span-2">
<label for="name" class="block mb-2 text-sm font-medium text-gray-900 ">名称</label>
<input type="text" name="名称" id="name" v-model="formData.name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 "
required="true">
</div>
<div class="col-span-2">
<label for="modelName" class="block mb-2 text-sm font-medium autocomplete text-gray-900 ">模型名称</label>
<input type="text" id="modelName" autocomplete="new-password" v-model="formData.modelName"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
required />
</div>
<div class="col-span-2">
<label for="apiKey" class="block mb-2 text-sm font-medium autocomplete text-gray-900 ">apiKey</label>
<input type="text" id="apiKey" autocomplete="new-password" v-model="formData.apiKey"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required />
</div>
<div class="col-span-2">
<label for="url" class="block mb-2 text-sm font-medium text-gray-900 ">url</label>
<input type="text" id="url" autocomplete="new-password" v-model="formData.url"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
required />
</div>
<div class="col-span-2 sm:col-span-1">
<label for="status" class="block mb-2 text-sm font-medium text-gray-900 ">状态</label>
<select id="status" v-model="formData.enable"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5">
<option :value=true>启用</option>
<option :value=false>禁用</option>
</select>
</div>
<div class="col-span-2">
<label for="priority" class="block mb-2 text-sm font-medium autocomplete text-gray-900 ">优先级</label>
<input type="text" id="priority" autocomplete="new-password" v-model="formData.priority"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required />
</div>
</div>
<button type="submit" @click.prevent="handleSubmit"
class="text-white flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center self-start mt-5">
保存
</button>
</form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import useAlertStore from "@/composables/store/useAlertStore";
import { initFlowbite } from "flowbite";
import { onMounted, ref, watch } from "vue";
import { z } from "zod";
import type { components } from "../api/types/schema";
const alertStore = useAlertStore();
const { llm, onSubmit } = defineProps<{
llm?: components["schemas"]["LlmVm"];
closeModal: () => void;
onSubmit: (data: components["schemas"]["LlmVm"]) => Promise<void>;
}>();
const formData = ref();
const updateFormData = (newLlm: typeof llm) => {
formData.value = {
...newLlm,
};
};
watch(() => llm, updateFormData, {
immediate: true,
});
const handleSubmit = async () => {
try {
const llmSchema = z.object({
id: z.number({
message: "id不能为空",
}),
name: z.string({
message: "名称不能为空",
}),
modelName: z.string({
message: "模型名称不能为空",
}),
apiKey: z.string({
message: "apiKey不能为空",
}),
url: z.string({
message: "url不能为空",
}),
enable: z.boolean({
message: "状态不能为空",
}),
priority: z.number({
message: "优先级必须为数字",
}),
});
const validatedData = llmSchema.parse(formData.value);
await onSubmit(validatedData);
updateFormData(undefined);
} catch (error) {
if (error instanceof z.ZodError) {
alertStore.showAlert({
level: "error",
content: error.errors[0].message,
});
}
throw error;
}
};
onMounted(() => {
initFlowbite();
});
</script>

View File

@@ -32,6 +32,7 @@ import SchedulerIcon from "./icons/SchedulerIcon.vue";
import SettingsIcon from "./icons/SettingsIcon.vue";
import UsersIcon from "./icons/UsersIcon.vue";
import AiChatIcon from "./icons/AiChatIcon.vue";
import LlmConfigIcon from "./icons/LlmConfigIcon.vue";
// 菜单配置
const menuItems = [
@@ -75,6 +76,11 @@ const menuItems = [
path: `${RoutePath.DASHBOARD}/${RoutePath.AICHATVIEW}`,
icon: AiChatIcon,
},
{
title: "大模型管理",
path: `${RoutePath.DASHBOARD}/${RoutePath.LLMCONFIGVIEW}`,
icon: LlmConfigIcon,
},
];
const route = useRoute();

View File

@@ -42,8 +42,8 @@
required placeholder="编辑时非必填" />
</div>
<div class="col-span-2 sm:col-span-1">
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 ">状态</label>
<select id="category" v-model="formData.enable"
<label for="status" class="block mb-2 text-sm font-medium text-gray-900 ">状态</label>
<select id="status" v-model="formData.enable"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5">
<option :value=true>启用</option>
<option :value=false>禁用</option>

View File

@@ -0,0 +1,15 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain">
<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
<path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
<path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
<path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
<path d="M19.938 10.5a4 4 0 0 1 .585.396" />
<path d="M6 18a4 4 0 0 1-1.967-.516" />
<path d="M19.967 17.484A4 4 0 0 1 18 18" />
</svg>
</template>