Compare commits
3 Commits
aae61ef27a
...
9908ba7237
| Author | SHA1 | Date | |
|---|---|---|---|
| 9908ba7237 | |||
| 42a562d171 | |||
| 2d8f0fa312 |
BIN
screenshots/知识库创建.png
Normal file
BIN
screenshots/知识库创建.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -119,14 +119,14 @@ const {
|
||||
class="btn-icon"
|
||||
title="Map Tables"
|
||||
>
|
||||
<i class="fa-solid fa-link text-gray-400"></i>
|
||||
<i class="fa-solid fa-link text-gray-400 hover:text-primary-danger"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="openEdit(db)"
|
||||
class="btn-icon"
|
||||
title="Edit"
|
||||
>
|
||||
<i class="fa-solid fa-pen text-gray-400"></i>
|
||||
<i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="deleteDb(db.id)"
|
||||
@@ -529,7 +529,7 @@ const {
|
||||
<button
|
||||
v-if="selectedTables.length > 1"
|
||||
@click="prevTable"
|
||||
class="p-1 hover:bg-dark-700 rounded"
|
||||
class="p-1 rounded transition-colors hover:bg-dark-700"
|
||||
:disabled="currentTableIndex <= 0"
|
||||
>
|
||||
<i class="fa-solid fa-chevron-left text-gray-400"></i>
|
||||
@@ -538,7 +538,7 @@ const {
|
||||
<button
|
||||
v-if="selectedTables.length > 1"
|
||||
@click="nextTable"
|
||||
class="p-1 hover:bg-dark-700 rounded"
|
||||
class="p-1 rounded transition-colors hover:bg-dark-700"
|
||||
:disabled="currentTableIndex >= selectedTables.length - 1"
|
||||
>
|
||||
<i class="fa-solid fa-chevron-right text-gray-400"></i>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import './database/database.css'
|
||||
import './knowledge/knowledge.css'
|
||||
|
||||
// 模拟知识库数据
|
||||
const knowledgeBases = ref([
|
||||
@@ -47,18 +47,38 @@ const filteredKnowledgeBases = () => {
|
||||
)
|
||||
}
|
||||
|
||||
// 新建知识库
|
||||
// 新建知识库 - 分步骤
|
||||
const showCreateDialog = ref(false)
|
||||
const createStep = ref(1)
|
||||
const newKbForm = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
})
|
||||
const embeddingConfig = ref({
|
||||
provider: '',
|
||||
model: '',
|
||||
})
|
||||
|
||||
const createKnowledgeBase = () => {
|
||||
const openCreateDialog = () => {
|
||||
createStep.value = 1
|
||||
newKbForm.value = { name: '', description: '' }
|
||||
embeddingConfig.value = { provider: '', model: '' }
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
if (!newKbForm.value.name) {
|
||||
ElMessage.warning('Please enter knowledge base name')
|
||||
return
|
||||
}
|
||||
createStep.value = 2
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
createStep.value = 1
|
||||
}
|
||||
|
||||
const createKnowledgeBase = () => {
|
||||
knowledgeBases.value.push({
|
||||
id: Date.now().toString(),
|
||||
name: newKbForm.value.name,
|
||||
@@ -69,12 +89,14 @@ const createKnowledgeBase = () => {
|
||||
status: 'ready'
|
||||
})
|
||||
newKbForm.value = { name: '', description: '' }
|
||||
embeddingConfig.value = { provider: '', model: '' }
|
||||
showCreateDialog.value = false
|
||||
ElMessage.success('Knowledge base created successfully')
|
||||
}
|
||||
|
||||
const cancelCreate = () => {
|
||||
newKbForm.value = { name: '', description: '' }
|
||||
embeddingConfig.value = { provider: '', model: '' }
|
||||
showCreateDialog.value = false
|
||||
}
|
||||
|
||||
@@ -132,7 +154,7 @@ const viewDetail = (kb: any) => {
|
||||
<i class="fa-solid fa-brain text-gray-400"></i>
|
||||
<span class="font-medium">Knowledge Base</span>
|
||||
</div>
|
||||
<button @click="showCreateDialog = true" class="btn-primary">
|
||||
<button @click="openCreateDialog" class="btn-primary">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
New Knowledge Base
|
||||
</button>
|
||||
@@ -195,21 +217,21 @@ const viewDetail = (kb: any) => {
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button
|
||||
@click="viewDetail(kb)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
|
||||
title="View"
|
||||
>
|
||||
<i class="fa-solid fa-eye text-gray-400"></i>
|
||||
<i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="openEdit(kb)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
|
||||
title="Edit"
|
||||
>
|
||||
<i class="fa-solid fa-pen text-gray-400"></i>
|
||||
<i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="deleteKb(kb.id)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
|
||||
title="Delete"
|
||||
>
|
||||
<i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
|
||||
@@ -233,26 +255,116 @@ const viewDetail = (kb: any) => {
|
||||
<!-- 新建知识库弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
title="Create Knowledge Base"
|
||||
width="500px"
|
||||
title="创建知识库"
|
||||
width="1100px"
|
||||
:close-on-click-modal="false"
|
||||
class="kb-dialog"
|
||||
:show-close="false"
|
||||
class="kb-dialog kb-create-dialog"
|
||||
>
|
||||
<p class="dialog-desc">Create a new knowledge base to store your documents</p>
|
||||
<div class="create-layout">
|
||||
<!-- 左侧：选项列表 -->
|
||||
<div class="sidebar">
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: createStep === 1 }"
|
||||
@click="createStep = 1"
|
||||
>
|
||||
<i class="fa-solid fa-layer-group menu-icon"></i>
|
||||
<div class="menu-content">
|
||||
<span class="menu-title">基本信息</span>
|
||||
<span class="menu-desc">知识库名称和描述</span>
|
||||
</div>
|
||||
<i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
|
||||
</div>
|
||||
<div
|
||||
class="menu-item"
|
||||
:class="{ active: createStep === 2 }"
|
||||
@click="createStep = 2"
|
||||
>
|
||||
<i class="fa-solid fa-brain menu-icon"></i>
|
||||
<div class="menu-content">
|
||||
<span class="menu-title">Embedding 配置</span>
|
||||
<span class="menu-desc">向量化和检索设置</span>
|
||||
</div>
|
||||
<i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top" class="kb-form">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Description">
|
||||
<el-input v-model="newKbForm.description" type="textarea" :rows="3" placeholder="Enter description" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 右侧：内容区 -->
|
||||
<div class="content">
|
||||
<!-- 基本信息 -->
|
||||
<div v-if="createStep === 1" class="form-content">
|
||||
<div class="section-header">
|
||||
<i class="fa-solid fa-layer-group section-icon"></i>
|
||||
<span class="section-title">基本信息</span>
|
||||
</div>
|
||||
<el-form label-position="top" class="kb-form">
|
||||
<el-form-item label="名称" required>
|
||||
<el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- Embedding 配置 -->
|
||||
<div v-if="createStep === 2" class="form-content">
|
||||
<div class="section-header">
|
||||
<i class="fa-solid fa-brain section-icon"></i>
|
||||
<span class="section-title">Embedding 配置</span>
|
||||
</div>
|
||||
<el-form label-position="top" class="kb-form">
|
||||
<el-form-item label="Embedding Provider">
|
||||
<el-select v-model="embeddingConfig.provider" placeholder="请选择 Embedding 服务商" class="w-full">
|
||||
<el-option label="OpenAI" value="openai">
|
||||
<div class="provider-option">
|
||||
<i class="fa-solid fa-robot"></i>
|
||||
<span>OpenAI</span>
|
||||
</div>
|
||||
</el-option>
|
||||
<el-option label="Ollama" value="ollama">
|
||||
<div class="provider-option">
|
||||
<i class="fa-solid fa-microchip"></i>
|
||||
<span>Ollama</span>
|
||||
</div>
|
||||
</el-option>
|
||||
<el-option label="Azure OpenAI" value="azure">
|
||||
<div class="provider-option">
|
||||
<i class="fa-brands fa-microsoft"></i>
|
||||
<span>Azure OpenAI</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Embedding Model">
|
||||
<el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button text @click="cancelCreate">Cancel</el-button>
|
||||
<el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
|
||||
<div class="footer-left">
|
||||
<span class="step-hint">填写完基本信息后，点击下一步继续配置</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="cancelCreate" class="cancel-btn">取消</el-button>
|
||||
<el-button v-if="createStep === 2" @click="createStep = 1" class="prev-btn">
|
||||
<i class="fa-solid fa-arrow-left"></i>
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
|
||||
下一步
|
||||
<i class="fa-solid fa-arrow-right"></i>
|
||||
</el-button>
|
||||
<el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
创建
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -285,182 +397,3 @@ const viewDetail = (kb: any) => {
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 按钮样式 */
|
||||
.btn-primary {
|
||||
background-color: #f97316;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-input {
|
||||
background-color: #171922;
|
||||
border: 1px solid #374151;
|
||||
color: white;
|
||||
padding: 10px 12px 10px 36px;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.bg-dark-700 {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
.bg-dark-600 {
|
||||
background-color: #111827;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid #374151;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* 空状态 - 使用 database.css 中的样式 */
|
||||
.empty-box {
|
||||
min-height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1f2937, #111827);
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-icon i {
|
||||
font-size: 40px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #d1d5db;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.kb-dialog :deep(.el-dialog) {
|
||||
background-color: #1f2937;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #374151;
|
||||
}
|
||||
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #374151;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #374151;
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,97 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useModelSettings } from './settings/useModelSettings'
|
||||
import './settings/settings.css'
|
||||
import './settings/settings-parsing.css'
|
||||
import './settings/modelSettings.css'
|
||||
|
||||
// 当前选中的设置菜单
|
||||
const activeMenu = ref('general')
|
||||
|
||||
// Model 列表
|
||||
const models = ref([
|
||||
{ id: 1, name: 'OpenAI', endpoint: 'api.openai.com', status: 'active', modelType: 'chat' },
|
||||
{ id: 2, name: 'Anthropic', endpoint: 'api.anthropic.com', status: 'active', modelType: 'chat' },
|
||||
{ id: 3, name: 'text-embedding-3-small', endpoint: 'api.openai.com', status: 'active', modelType: 'embedding' },
|
||||
])
|
||||
// 导入 Model Settings 逻辑
|
||||
const {
|
||||
models,
|
||||
modelsLoading,
|
||||
modelTypeOptions,
|
||||
providerOptions,
|
||||
showAddModelForm,
|
||||
newModelForm,
|
||||
testingConnection,
|
||||
connectionStatus,
|
||||
fetchModels,
|
||||
testConnection,
|
||||
addModel,
|
||||
cancelAddModel,
|
||||
deleteModel,
|
||||
} = useModelSettings()
|
||||
|
||||
// Model Type 选项
|
||||
const modelTypeOptions = [
|
||||
{ value: 'chat', label: 'Chat' },
|
||||
{ value: 'embedding', label: 'Embedding' },
|
||||
{ value: 'rerank', label: 'Rerank' },
|
||||
{ value: 'vlm', label: 'VLM' },
|
||||
]
|
||||
|
||||
// 是否显示新增模型表单
|
||||
const showAddModelForm = ref(false)
|
||||
|
||||
// 新增模型表单
|
||||
const newModelForm = ref({
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
// 监听菜单切换，获取模型列表
|
||||
watch(activeMenu, (newVal) => {
|
||||
if (newVal === 'modelSettings') {
|
||||
fetchModels()
|
||||
}
|
||||
})
|
||||
|
||||
// 测试连接状态
|
||||
const testingConnection = ref(false)
|
||||
const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
if (!newModelForm.value.apiKey || !newModelForm.value.baseUrl) {
|
||||
ElMessage.warning('Please enter API Key and Base URL')
|
||||
return
|
||||
}
|
||||
|
||||
testingConnection.value = true
|
||||
connectionStatus.value = 'idle'
|
||||
|
||||
try {
|
||||
// 模拟API测试（实际项目中应该调用后端接口）
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
// 假设连接成功
|
||||
connectionStatus.value = 'success'
|
||||
ElMessage.success('Connection successful!')
|
||||
} catch (error) {
|
||||
connectionStatus.value = 'error'
|
||||
ElMessage.error('Connection failed')
|
||||
} finally {
|
||||
testingConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Provider 选项
|
||||
const providerOptions = [
|
||||
{ value: 'OpenAI', label: 'OpenAI' },
|
||||
{ value: 'Ollama', label: 'Ollama' },
|
||||
]
|
||||
|
||||
// 添加新模型
|
||||
const addModel = () => {
|
||||
if (newModelForm.value.name && newModelForm.value.apiEndpoint) {
|
||||
models.value.push({
|
||||
id: Date.now(),
|
||||
name: newModelForm.value.name,
|
||||
endpoint: newModelForm.value.apiEndpoint,
|
||||
status: 'active',
|
||||
modelType: newModelForm.value.modelType || 'chat',
|
||||
})
|
||||
newModelForm.value = { name: '', apiKey: '', apiEndpoint: '', baseUrl: '', provider: '', model: '', modelType: '' }
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
ElMessage.success('Model added successfully')
|
||||
}
|
||||
}
|
||||
|
||||
// 取消添加
|
||||
const cancelAddModel = () => {
|
||||
newModelForm.value = { name: '', apiKey: '', apiEndpoint: '', baseUrl: '', provider: '', model: '', modelType: '' }
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
}
|
||||
|
||||
// 设置菜单列表
|
||||
const menuItems = [
|
||||
{ key: 'general', label: 'General', icon: 'fa-gear' },
|
||||
@@ -102,6 +43,21 @@ const menuItems = [
|
||||
{ key: 'storage', label: 'Storage', icon: 'fa-database' },
|
||||
]
|
||||
|
||||
// Model Options by Provider (for Parsing settings)
|
||||
const modelOptionsByProvider: Record<string, { value: string; label: string }[]> = {
|
||||
'OpenAI': [
|
||||
{ value: 'gpt-4o', label: 'GPT-4o' },
|
||||
{ value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
|
||||
{ value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
|
||||
{ value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
|
||||
],
|
||||
'Ollama': [
|
||||
{ value: 'llama3', label: 'Llama 3' },
|
||||
{ value: 'mistral', label: 'Mistral' },
|
||||
{ value: 'codellama', label: 'CodeLlama' },
|
||||
],
|
||||
}
|
||||
|
||||
// General 设置表单
|
||||
const generalForm = ref({
|
||||
name: 'Alex Smith',
|
||||
@@ -485,39 +441,49 @@ const saveStorageSettings = () => {
|
||||
</div>
|
||||
|
||||
<!-- 模型列表 -->
|
||||
<table class="w-full">
|
||||
<thead class="bg-dark-600">
|
||||
<div v-if="modelsLoading" class="loading-spinner">
|
||||
<i class="fa-solid fa-spinner"></i>
|
||||
</div>
|
||||
<table v-else class="model-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Model Name</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Model Type</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">API Endpoint</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
|
||||
<th>Model Name</th>
|
||||
<th class="text-center">Provider</th>
|
||||
<th class="text-center">Model</th>
|
||||
<th class="text-center">Model Type</th>
|
||||
<th class="text-center">Base URL</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th class="text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="model in models" :key="model.id" class="table-row">
|
||||
<td class="px-5 py-4">
|
||||
<td>
|
||||
<span class="font-medium">{{ model.name }}</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center">
|
||||
<span class="bg-primary-orange/20 text-primary-orange px-2 py-1 rounded text-sm capitalize">{{ model.modelType }}</span>
|
||||
<td class="text-center text-sm">
|
||||
{{ model.provider }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center text-gray-400 text-sm">
|
||||
{{ model.endpoint }}
|
||||
<td class="text-center text-sm">
|
||||
{{ model.model }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center">
|
||||
<span class="bg-primary-success/20 text-primary-success px-2 py-1 rounded text-sm capitalize">{{ model.status }}</span>
|
||||
<td class="text-center">
|
||||
<span class="model-type-tag">{{ model.model_type }}</span>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button class="btn-icon" title="Edit">
|
||||
<i class="fa-solid fa-pen text-gray-400"></i>
|
||||
</button>
|
||||
<button class="btn-icon" title="Delete">
|
||||
<i class="fa-solid fa-trash text-gray-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
<td class="text-center text-sm">
|
||||
{{ model.base_url }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span v-if="model.status === 'active'" class="status-active">Active</span>
|
||||
<span v-else class="status-inactive">Inactive</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button class="btn-icon" title="Edit">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</button>
|
||||
<button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -603,488 +569,3 @@ const saveStorageSettings = () => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
padding: 24px;
|
||||
min-height: 100vh;
|
||||
background-color: #0a0a0f;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
background-color: #121218;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 120px);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 左侧导航 */
|
||||
.settings-nav {
|
||||
width: 280px;
|
||||
background-color: #0d0d12;
|
||||
padding: 16px 0;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #1e1e28;
|
||||
}
|
||||
|
||||
.settings-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: #1a1a24;
|
||||
color: white;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #1a1a24;
|
||||
color: #f97316;
|
||||
border-left: 3px solid #f97316;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 子菜单 */
|
||||
.sub-menu {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sub-menu .nav-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-item.sub-item {
|
||||
padding-left: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
background-color: #121218;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
width: 100%;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* 模型列表 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #1a1a24;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background-color: #1e1e28;
|
||||
}
|
||||
|
||||
.btn-icon:hover i {
|
||||
color: #f97316 !important;
|
||||
}
|
||||
|
||||
/* 添加模型按钮 */
|
||||
.add-model-btn {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-btn:hover {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 添加模型表单 */
|
||||
.add-model-form {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.settings-form :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.password-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.password-field .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.add-model-dialog :deep(.el-dialog) {
|
||||
background-color: #16161e;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #252530;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
animation: dialogFadeIn 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #252530;
|
||||
}
|
||||
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
background-color: #1e1e28;
|
||||
border: 1px solid #3a3a4a;
|
||||
color: #d1d5db;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background-color: #2a2a3a;
|
||||
border-color: #4a4a5a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.connection-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown) {
|
||||
background-color: #1a1a24;
|
||||
border: 1px solid #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item) {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.hover),
|
||||
.add-model-dialog :deep(.el-select-dropdown__item:hover) {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.selected) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* Parsing 配置卡片 */
|
||||
.config-card {
|
||||
background-color: #0d0d12;
|
||||
border: 1px solid #252530;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.config-card:hover {
|
||||
border-color: #353545;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.config-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.config-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 表单行 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-row .flex-1 {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Switch 样式 */
|
||||
.parsing-switch :deep(.el-switch.is-checked .el-switch__core) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
/* Input Number 样式 */
|
||||
.settings-form :deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input-number .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
/* Select 样式 */
|
||||
.settings-form :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
/* 连接状态 */
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.connection-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* API Endpoint 字段 */
|
||||
.api-endpoint-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.api-endpoint-field .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
background-color: #1e1e28;
|
||||
border: 1px solid #3a3a4a;
|
||||
color: #d1d5db;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background-color: #2a2a3a;
|
||||
border-color: #4a4a5a;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,12 +22,16 @@
|
||||
|
||||
/* 图标按钮 */
|
||||
.btn-icon {
|
||||
@apply p-2 rounded-lg hover:bg-dark-600 transition-colors;
|
||||
@apply p-2 rounded-lg transition-colors;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
@apply bg-dark-600;
|
||||
}
|
||||
|
||||
/* 表格行 */
|
||||
.table-row {
|
||||
@apply border-b border-dark-600 hover:bg-dark-600/50 transition-colors;
|
||||
@apply border-b border-dark-600;
|
||||
}
|
||||
|
||||
/* 空状态（已不使用） */
|
||||
|
||||
504
web/src/views/knowledge/knowledge.css
Normal file
504
web/src/views/knowledge/knowledge.css
Normal file
@@ -0,0 +1,504 @@
|
||||
/* Knowledge 页面样式 */
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-primary {
|
||||
background-color: #f97316;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-input {
|
||||
background-color: #171922;
|
||||
border: 1px solid #374151;
|
||||
color: white;
|
||||
padding: 10px 12px 10px 36px;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.bg-dark-700 {
|
||||
background-color: #171922;
|
||||
}
|
||||
|
||||
.bg-dark-600 {
|
||||
background-color: #1a1c25;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-box {
|
||||
min-height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #1f2937, #111827);
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-icon i {
|
||||
font-size: 40px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #d1d5db;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 基础弹窗样式 */
|
||||
.kb-dialog :deep(.el-dialog) {
|
||||
background-color: #1f2937;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #374151;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #374151;
|
||||
}
|
||||
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.kb-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 创建弹窗样式 */
|
||||
.kb-create-dialog :deep(.el-dialog) {
|
||||
background-color: #0f1419;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #1e2832;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #1e2832;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__title) {
|
||||
color: #e8eaed;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #5f6368;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.kb-create-dialog :deep(.el-dialog__footer) {
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid #1e2832;
|
||||
background-color: #0d1117;
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
|
||||
/* 创建内容布局 */
|
||||
.create-layout {
|
||||
display: flex;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
/* 左侧 sidebar */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
|
||||
border-right: 1px solid #1e2832;
|
||||
padding: 20px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: rgba(54, 191, 250, 0.06);
|
||||
border-color: rgba(54, 191, 250, 0.1);
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background: linear-gradient(135deg, rgba(54, 191, 250, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
|
||||
border-color: rgba(54, 191, 250, 0.25);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
background-color: #1e2832;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #5f6368;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item.active .menu-icon {
|
||||
background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(54, 191, 250, 0.3);
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e8eaed;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.menu-item.active .menu-title {
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 12px;
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 12px;
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
/* 右侧内容区 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 36px 48px;
|
||||
background-color: #0f1419;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 区块标题 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #1e2832;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, rgba(54, 191, 250, 0.2) 0%, rgba(14, 165, 233, 0.12) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #36bffa;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.kb-form :deep(.el-form-item__label) {
|
||||
color: #9aa0a6;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__inner) {
|
||||
color: #e8eaed;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-input__inner::placeholder) {
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
color: #e8eaed;
|
||||
font-size: 14px;
|
||||
box-shadow: none;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-textarea__inner:focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #161b22;
|
||||
border: 1px solid #2d3640;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper:hover) {
|
||||
border-color: #36bffa;
|
||||
}
|
||||
|
||||
.kb-form :deep(.el-select .el-input__wrapper.is-focus) {
|
||||
border-color: #36bffa;
|
||||
box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.15);
|
||||
}
|
||||
|
||||
/* 提供商选项 */
|
||||
.provider-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.provider-option i {
|
||||
color: #36bffa;
|
||||
}
|
||||
|
||||
/* 底部按钮区域 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-hint {
|
||||
font-size: 12px;
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid #2d3640;
|
||||
color: #9aa0a6;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
border-color: #5f6368;
|
||||
color: #e8eaed;
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
background-color: #1e2832;
|
||||
border: none;
|
||||
color: #9aa0a6;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prev-btn:hover {
|
||||
background-color: #2d3640;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
background: linear-gradient(135deg, #36bffa 0%, #0ea5e9 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(54, 191, 250, 0.25);
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background: linear-gradient(135deg, #4dc3ff 0%, #36bffa 100%);
|
||||
box-shadow: 0 6px 16px rgba(54, 191, 250, 0.35);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
|
||||
}
|
||||
296
web/src/views/settings/modelSettings.css
Normal file
296
web/src/views/settings/modelSettings.css
Normal file
@@ -0,0 +1,296 @@
|
||||
/* Model Settings 页面样式 */
|
||||
|
||||
/* 表格样式 */
|
||||
.model-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.model-table th {
|
||||
text-align: left;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
background-color: #1a1a24;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.model-table th.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model-table td {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #252530;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.model-table td.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model-table td.text-sm {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-table .font-medium {
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.model-table .table-row:hover {
|
||||
background-color: #1a1a24;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-active {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: rgba(107, 114, 128, 0.2);
|
||||
color: #9ca3af;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* Model Type 标签 */
|
||||
.model-type-tag {
|
||||
background-color: rgba(249, 115, 22, 0.2);
|
||||
color: #f97316;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.btn-icon {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.25s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background-color: #1e1e28;
|
||||
}
|
||||
|
||||
.btn-icon i {
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-icon:hover i {
|
||||
color: #f97316 !important;
|
||||
}
|
||||
|
||||
/* 添加模型按钮 */
|
||||
.add-model-btn {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-model-btn:hover {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.add-model-dialog :deep(.el-dialog) {
|
||||
background-color: #16161e;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #252530;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
animation: dialogFadeIn 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #252530;
|
||||
}
|
||||
|
||||
/* 弹窗描述 */
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 弹窗底部按钮 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
background-color: #1e1e28;
|
||||
border: 1px solid #3a3a4a;
|
||||
color: #d1d5db;
|
||||
transition: all 0.25s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background-color: #2a2a3a;
|
||||
border-color: #4a4a5a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 连接状态 */
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.connection-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.add-model-dialog :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown) {
|
||||
background-color: #1a1a24;
|
||||
border: 1px solid #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item) {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.hover),
|
||||
.add-model-dialog :deep(.el-select-dropdown__item:hover) {
|
||||
background-color: #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.selected) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.loading-spinner i {
|
||||
font-size: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
272
web/src/views/settings/settings-parsing.css
Normal file
272
web/src/views/settings/settings-parsing.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* Parsing 和 Storage 配置样式 */
|
||||
|
||||
/* 配置卡片 */
|
||||
.config-card {
|
||||
background-color: #0d0d12;
|
||||
border: 1px solid #252530;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.config-card:hover {
|
||||
border-color: #353545;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.config-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.config-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 添加模型按钮 */
|
||||
.add-model-btn {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.add-model-btn:hover {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.btn-icon {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.25s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background-color: #1e1e28;
|
||||
}
|
||||
|
||||
.btn-icon i {
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-icon:hover i {
|
||||
color: #f97316 !important;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.add-model-dialog :deep(.el-dialog) {
|
||||
background-color: #16161e;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #252530;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
animation: dialogFadeIn 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes dialogFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__header) {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__title) {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn) {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-dialog__footer) {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #252530;
|
||||
}
|
||||
|
||||
/* 弹窗描述 */
|
||||
.dialog-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 弹窗底部按钮 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 测试连接按钮 */
|
||||
.test-btn {
|
||||
background-color: #1e1e28;
|
||||
border: 1px solid #3a3a4a;
|
||||
color: #d1d5db;
|
||||
transition: all 0.25s ease;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background-color: #2a2a3a;
|
||||
border-color: #4a4a5a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 连接状态 */
|
||||
.connection-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.connection-status.success {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 弹窗表单 */
|
||||
.add-model-dialog :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select .el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown) {
|
||||
background-color: #1a1a24;
|
||||
border: 1px solid #2a2a3a;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item) {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.hover),
|
||||
.add-model-dialog :deep(.el-select-dropdown__item:hover) {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-select-dropdown__item.selected) {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.add-model-dialog :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
/* API Endpoint 字段 */
|
||||
.api-endpoint-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.api-endpoint-field .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.loading-spinner i {
|
||||
font-size: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
213
web/src/views/settings/settings.css
Normal file
213
web/src/views/settings/settings.css
Normal file
@@ -0,0 +1,213 @@
|
||||
/* Settings 页面通用样式 */
|
||||
|
||||
/* 页面容器 */
|
||||
.settings-page {
|
||||
padding: 24px;
|
||||
min-height: 100vh;
|
||||
background-color: #0a0a0f;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 设置容器 */
|
||||
.settings-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
background-color: #121218;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 120px);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 左侧导航 */
|
||||
.settings-nav {
|
||||
width: 280px;
|
||||
background-color: #0d0d12;
|
||||
padding: 16px 0;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #1e1e28;
|
||||
}
|
||||
|
||||
.settings-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: #1a1a24;
|
||||
color: white;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #1a1a24;
|
||||
color: #f97316;
|
||||
border-left: 3px solid #f97316;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 子菜单 */
|
||||
.sub-menu {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sub-menu .nav-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-item.sub-item {
|
||||
padding-left: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
background-color: #121218;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
width: 100%;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-bottom: 1px solid #252530;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #1a1a24;
|
||||
transition: background-color 0.25s ease;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.settings-form :deep(.el-form-item__label) {
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input__inner) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-select .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-button--primary) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-button--primary:hover) {
|
||||
background-color: #ea580c;
|
||||
border-color: #ea580c;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings-form :deep(.el-input-number .el-input__wrapper) {
|
||||
background-color: #171922;
|
||||
border: 1px solid #4b5563;
|
||||
}
|
||||
|
||||
/* 密码字段 */
|
||||
.password-field {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.password-field .el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 表单行 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-row .flex-1 {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Switch 样式 */
|
||||
.parsing-switch :deep(.el-switch.is-checked .el-switch__core) {
|
||||
background-color: #f97316;
|
||||
border-color: #f97316;
|
||||
}
|
||||
35
web/src/views/settings/types.ts
Normal file
35
web/src/views/settings/types.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
// Model Settings 相关类型定义
|
||||
|
||||
export interface ModelInfo {
|
||||
id: string
|
||||
name: string
|
||||
model_type: string
|
||||
provider: string
|
||||
model: string
|
||||
api_key: string
|
||||
base_url: string
|
||||
api_endpoint: string
|
||||
status: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ModelForm {
|
||||
name: string
|
||||
apiKey: string
|
||||
apiEndpoint: string
|
||||
baseUrl: string
|
||||
provider: string
|
||||
model: string
|
||||
modelType: string
|
||||
}
|
||||
|
||||
export interface ModelTypeOption {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface ProviderOption {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
214
web/src/views/settings/useModelSettings.ts
Normal file
214
web/src/views/settings/useModelSettings.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { ModelInfo, ModelForm, ModelTypeOption, ProviderOption } from './types'
|
||||
|
||||
// API 基础 URL
|
||||
const API_BASE = 'http://localhost:8082'
|
||||
|
||||
export function useModelSettings() {
|
||||
// Model 列表
|
||||
const models = ref<ModelInfo[]>([])
|
||||
const modelsLoading = ref(false)
|
||||
|
||||
// Model Type 选项
|
||||
const modelTypeOptions: ModelTypeOption[] = [
|
||||
{ value: 'chat', label: 'Chat' },
|
||||
{ value: 'embedding', label: 'Embedding' },
|
||||
{ value: 'rerank', label: 'Rerank' },
|
||||
{ value: 'vlm', label: 'VLM' },
|
||||
]
|
||||
|
||||
// Provider 选项
|
||||
const providerOptions: ProviderOption[] = [
|
||||
{ value: 'OpenAI', label: 'OpenAI' },
|
||||
{ value: 'Ollama', label: 'Ollama' },
|
||||
]
|
||||
|
||||
// 是否显示新增模型表单
|
||||
const showAddModelForm = ref(false)
|
||||
|
||||
// 新增模型表单
|
||||
const newModelForm = ref<ModelForm>({
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
})
|
||||
|
||||
// 测试连接状态
|
||||
const testingConnection = ref(false)
|
||||
const connectionStatus = ref<'idle' | 'success' | 'error'>('idle')
|
||||
|
||||
// 获取模型列表
|
||||
const fetchModels = async () => {
|
||||
modelsLoading.value = true
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/list`)
|
||||
const result = await response.json()
|
||||
models.value = result.list || []
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch models:', error)
|
||||
ElMessage.error('Failed to load models')
|
||||
} finally {
|
||||
modelsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
if (!newModelForm.value.apiKey || !newModelForm.value.baseUrl) {
|
||||
ElMessage.warning('Please enter API Key and Base URL')
|
||||
return
|
||||
}
|
||||
|
||||
testingConnection.value = true
|
||||
connectionStatus.value = 'idle'
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
provider: newModelForm.value.provider,
|
||||
model: newModelForm.value.model,
|
||||
api_key: newModelForm.value.apiKey,
|
||||
base_url: newModelForm.value.baseUrl,
|
||||
api_endpoint: newModelForm.value.apiEndpoint,
|
||||
}),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
connectionStatus.value = 'success'
|
||||
ElMessage.success(result.message || 'Connection successful!')
|
||||
} else {
|
||||
connectionStatus.value = 'error'
|
||||
ElMessage.error(result.message || 'Connection failed')
|
||||
}
|
||||
} catch (error: any) {
|
||||
connectionStatus.value = 'error'
|
||||
ElMessage.error('Connection failed: ' + error.message)
|
||||
} finally {
|
||||
testingConnection.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加新模型（初始状态为 inactive，需要测试连接后才能激活）
|
||||
const addModel = async () => {
|
||||
if (!newModelForm.value.name || !newModelForm.value.provider || !newModelForm.value.model) {
|
||||
ElMessage.warning('Please fill in required fields')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/add`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: newModelForm.value.name,
|
||||
model_type: newModelForm.value.modelType || 'chat',
|
||||
provider: newModelForm.value.provider,
|
||||
model: newModelForm.value.model,
|
||||
api_key: newModelForm.value.apiKey,
|
||||
base_url: newModelForm.value.baseUrl,
|
||||
api_endpoint: newModelForm.value.apiEndpoint,
|
||||
status: 'inactive', // 初始状态为未激活
|
||||
}),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json()
|
||||
// 记录测试连接状态
|
||||
const wasConnected = connectionStatus.value === 'success'
|
||||
// 如果测试连接成功，则激活模型；否则保持 inactive
|
||||
if (wasConnected) {
|
||||
// 再次调用更新接口激活模型
|
||||
await fetch(`${API_BASE}/model/${result.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'active' }),
|
||||
})
|
||||
result.status = 'active'
|
||||
}
|
||||
models.value.push(result)
|
||||
newModelForm.value = {
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
}
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
ElMessage.success(wasConnected ? 'Model added and activated' : 'Model added successfully')
|
||||
} else {
|
||||
const error = await response.json()
|
||||
ElMessage.error(error.message || 'Failed to add model')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error('Failed to add model: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 取消添加
|
||||
const cancelAddModel = () => {
|
||||
newModelForm.value = {
|
||||
name: '',
|
||||
apiKey: '',
|
||||
apiEndpoint: '',
|
||||
baseUrl: '',
|
||||
provider: '',
|
||||
model: '',
|
||||
modelType: '',
|
||||
}
|
||||
connectionStatus.value = 'idle'
|
||||
showAddModelForm.value = false
|
||||
}
|
||||
|
||||
// 删除模型
|
||||
const deleteModel = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
models.value = models.value.filter(m => m.id !== id)
|
||||
ElMessage.success('Model deleted successfully')
|
||||
} else {
|
||||
ElMessage.error('Failed to delete model')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error('Failed to delete model: ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
models,
|
||||
modelsLoading,
|
||||
modelTypeOptions,
|
||||
providerOptions,
|
||||
showAddModelForm,
|
||||
newModelForm,
|
||||
testingConnection,
|
||||
connectionStatus,
|
||||
|
||||
// Methods
|
||||
fetchModels,
|
||||
testConnection,
|
||||
addModel,
|
||||
cancelAddModel,
|
||||
deleteModel,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user