79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import {Plus, Delete, Edit} from "@element-plus/icons-vue";
|
||
import usePage from './composables/index'
|
||
import EditCom from "@/views/ai/model/embedding/edit.vue";
|
||
import {LLMProviders} from "@/views/ai/model/embedding/composables/consts";
|
||
import {Table} from "@/components/Table";
|
||
|
||
const { baseColumns: columns, tableData, formData, editRef, open, loadData, loading,handleEdit, handleDel} = usePage()
|
||
|
||
const handleReload = () => {
|
||
loadData()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<ContentWrap>
|
||
<div class="children flex">
|
||
<el-scrollbar class="h-full w-300px pl-10px pr-20px">
|
||
<div
|
||
v-for="(item,index) in LLMProviders" :key="index"
|
||
:class="{active: formData.provider === item.model}" class="menu"
|
||
@click="formData.provider = item.model">
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</el-scrollbar>
|
||
<div class="h-full flex-1 px-20px">
|
||
<el-alert
|
||
class="w-full mb-10px min-alert"
|
||
title="注意：为了实现向量数据库的动态切换，这里Embedding供应商统一选择支持1024纬度的模型"
|
||
type="info"
|
||
show-icon
|
||
/>
|
||
<el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量模型</el-button>
|
||
<Table class="table-wrapper" height="100%" border :columns="columns" :data="tableData" :pagination="false" :loading="loading">
|
||
<template #action="{row}">
|
||
<el-button :icon="Edit" text @click="handleEdit(row)"/>
|
||
<el-button :icon="Delete" text type="danger" @click="handleDel(row)"/>
|
||
</template>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
<EditCom ref="editRef" @reload="handleReload" />
|
||
</ContentWrap>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.children {
|
||
height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
|
||
box-sizing: border-box;
|
||
|
||
& > div:nth-child(2) {
|
||
width: calc(100% - 300px);
|
||
}
|
||
}
|
||
|
||
.table-wrapper {
|
||
height: calc(100% - 100px);
|
||
}
|
||
|
||
.menu {
|
||
transition: all .15s;
|
||
cursor: pointer;
|
||
padding: 12px 10px;
|
||
border-radius: 5px;
|
||
margin-bottom: 20px;
|
||
|
||
&.active {
|
||
color: #ffffff;
|
||
background-color: var(--el-color-primary);
|
||
}
|
||
|
||
&:hover {
|
||
&:not(&.active) {
|
||
background-color: var(--el-color-info-light-7);
|
||
}
|
||
}
|
||
}
|
||
</style>
|