105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import {
|
|
NFlex,
|
|
NText,
|
|
NCard,
|
|
NButton,
|
|
NInput,
|
|
NIcon,
|
|
NAvatar,
|
|
NCollapse,
|
|
NCollapseItem,
|
|
NDivider,
|
|
} from 'naive-ui';
|
|
import { SearchOutline, SettingsOutline } from '@vicons/ionicons5';
|
|
import { useVbenForm, useVbenModal } from '@vben/common-ui';
|
|
import { ModelCertificateFrom } from './schema';
|
|
|
|
const searchText = ref('');
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
title: '编辑模型凭据',
|
|
});
|
|
const manageModels = (id: string) => {
|
|
modalApi.open();
|
|
};
|
|
|
|
const [Form, formApi] = useVbenForm({
|
|
showDefaultActions: false,
|
|
...ModelCertificateFrom,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NFlex vertical :gap="24">
|
|
<!-- 页面标题 + 搜索 -->
|
|
<NFlex align="center" justify="space-between">
|
|
<NText tag="h2" style="font-size: 20px; font-weight: 600; margin: 0">模型供应商</NText>
|
|
<NInput
|
|
v-model:value="searchText"
|
|
placeholder="搜索"
|
|
size="small"
|
|
style="width: 200px"
|
|
clearable
|
|
round
|
|
>
|
|
<template #prefix>
|
|
<NIcon :component="SearchOutline" />
|
|
</template>
|
|
</NInput>
|
|
</NFlex>
|
|
|
|
<!-- 模型列表 -->
|
|
<div>
|
|
<NFlex align="center" justify="space-between" style="margin-bottom: 12px">
|
|
<NText style="font-size: 14px; font-weight: 500">模型列表</NText>
|
|
<NButton text size="small" type="primary">
|
|
<template #icon>
|
|
<NIcon :component="SettingsOutline" />
|
|
</template>
|
|
默认模型设置
|
|
</NButton>
|
|
</NFlex>
|
|
|
|
<!-- Ollama Card (已配置) -->
|
|
<NFlex>
|
|
<NCard :bordered="true" size="small" style="border-radius: 10px">
|
|
<NFlex justify="space-between" align="center">
|
|
<NFlex align="center" :gap="12">
|
|
<!-- Ollama Logo -->
|
|
<NAvatar
|
|
style="width: 40px; height: 40px"
|
|
size="small"
|
|
src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp"
|
|
/>
|
|
<NText style="font-size: 14px; font-weight: 600; line-height: 1">Ollama</NText>
|
|
</NFlex>
|
|
<NFlex :gap="8">
|
|
<NButton size="small" secondary @click="manageModels('ollama')">管理凭据</NButton>
|
|
</NFlex>
|
|
</NFlex>
|
|
<NDivider />
|
|
<NCollapse>
|
|
<NCollapseItem>
|
|
<template #header>
|
|
<n-text type="primary"> 已连接的模型 </n-text>
|
|
</template>
|
|
</NCollapseItem>
|
|
</NCollapse>
|
|
</NCard>
|
|
</NFlex>
|
|
</div>
|
|
</NFlex>
|
|
<Modal>
|
|
<Form />
|
|
</Modal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.n-divider:not(.n-divider--vertical) {
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
</style>
|