80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
|
||
import {Delete, Plus, Edit } from "@element-plus/icons-vue";
|
||
import usePage from './composables/index'
|
||
import {LLMProviders} from "@/views/ai/model/image/composables/consts";
|
||
import EditCom from './edit.vue'
|
||
import {Table} from "@/components/Table";
|
||
|
||
const {columns, tableData, formData, editRef, open, loadData, handleEdit, handleDel, loading} = 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 p-20px">
|
||
<el-alert
|
||
class="w-full mb-10px min-alert"
|
||
show-icon
|
||
title="鉴于很多模型的文生图效果很差甚至没有，这里只建议使用OpenAI的DALL-E模型"
|
||
type="info"
|
||
/>
|
||
<el-button :icon="Plus" class="my-10px" type="primary" @click="open">新增图像模型
|
||
</el-button>
|
||
<Table
|
||
:columns="columns" :data="tableData" :loading="loading" border
|
||
class="table-wrapper" height="100%">
|
||
<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 {
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background: var(--el-fill-color-light);
|
||
}
|
||
|
||
&.active {
|
||
background: var(--el-color-primary-light-9);
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
</style>
|