dify
This commit is contained in:
@@ -1,127 +1,428 @@
|
||||
<template>
|
||||
<AdminLayout title="AI配置" subtitle="AI配置">
|
||||
<div class="ai-config">
|
||||
<el-form :model="configForm" label-width="150px" class="config-form">
|
||||
<el-divider content-position="left">模型配置</el-divider>
|
||||
|
||||
<el-form-item label="AI模型">
|
||||
<el-select v-model="configForm.model" placeholder="选择AI模型">
|
||||
<el-option label="GPT-3.5" value="gpt-3.5" />
|
||||
<el-option label="GPT-4" value="gpt-4" />
|
||||
<el-option label="Claude" value="claude" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<AdminLayout title="AI配置" subtitle="AI助手配置管理">
|
||||
<div class="ai-config-container">
|
||||
<!-- 智能体信息卡片 -->
|
||||
<div class="agent-info-card">
|
||||
<div class="agent-header">
|
||||
<div class="agent-icon">
|
||||
<img v-if="configForm.avatar" :src="FILE_DOWNLOAD_URL + configForm.avatar" alt="助手头像" />
|
||||
<div v-else class="default-icon">
|
||||
<img src="@/assets/imgs/assisstent.svg" alt="助手头像" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-info">
|
||||
<h2 class="agent-name">{{ configForm.name || '未配置助手' }}</h2>
|
||||
</div>
|
||||
<div class="agent-status" :class="statusClass">
|
||||
{{ statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form-item label="API Key">
|
||||
<el-input v-model="configForm.apiKey" type="password" show-password />
|
||||
</el-form-item>
|
||||
<!-- 配置表单 -->
|
||||
<div class="config-form-container">
|
||||
<el-form :model="configForm" label-position="top" class="config-form">
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section">
|
||||
<el-form-item label="助手名称" required>
|
||||
<el-input
|
||||
v-model="configForm.name"
|
||||
placeholder="请输入助手名称"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="API地址">
|
||||
<el-input v-model="configForm.apiUrl" />
|
||||
</el-form-item>
|
||||
<el-form-item label="助手头像">
|
||||
<FileUpload
|
||||
v-model:cover-url="configForm.avatar"
|
||||
:as-dialog="false"
|
||||
list-type="cover"
|
||||
accept="image/*"
|
||||
:max-size="2"
|
||||
module="ai-agent"
|
||||
tip="点击上传助手头像"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">对话配置</el-divider>
|
||||
<el-form-item label="模式">
|
||||
<el-select
|
||||
v-model="configForm.modelProvider"
|
||||
placeholder="选择模式"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="OpenAI" value="openai" />
|
||||
<el-option label="Anthropic" value="anthropic" />
|
||||
<el-option label="Azure OpenAI" value="azure" />
|
||||
<el-option label="通义千问" value="qwen" />
|
||||
<el-option label="文心一言" value="wenxin" />
|
||||
<el-option label="Dify" value="dify" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="温度值">
|
||||
<el-slider v-model="configForm.temperature" :min="0" :max="2" :step="0.1" show-input />
|
||||
<span class="help-text">控制回答的随机性，值越大回答越随机</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型">
|
||||
<el-input
|
||||
v-model="configForm.modelName"
|
||||
placeholder="例如: gpt-4, claude-3-opus"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最大token数">
|
||||
<el-input-number v-model="configForm.maxTokens" :min="100" :max="4000" />
|
||||
</el-form-item>
|
||||
<el-form-item label="系统提示词">
|
||||
<el-input
|
||||
v-model="configForm.systemPrompt"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="请输入系统提示词，定义AI助手的角色、行为和回答风格..."
|
||||
maxlength="2000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="历史对话轮数">
|
||||
<el-input-number v-model="configForm.historyTurns" :min="1" :max="20" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">功能配置</el-divider>
|
||||
|
||||
<el-form-item label="启用流式输出">
|
||||
<el-switch v-model="configForm.enableStreaming" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用文件解读">
|
||||
<el-switch v-model="configForm.enableFileInterpretation" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用知识库检索">
|
||||
<el-switch v-model="configForm.enableKnowledgeRetrieval" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="系统提示词">
|
||||
<el-input
|
||||
v-model="configForm.systemPrompt"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="设置AI助手的角色和行为..."
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSave">保存配置</el-button>
|
||||
<el-button @click="handleTest">测试连接</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="form-actions">
|
||||
<el-button type="primary" size="large" @click="handleSave" :loading="saving">
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button size="large" @click="handleReset">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElSlider, ElInputNumber, ElSwitch, ElButton, ElDivider, ElMessage } from 'element-plus';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { AdminLayout } from '@/views/admin';
|
||||
import { FileUpload } from '@/components/file';
|
||||
import { aiAgentConfigApi } from '@/apis/ai';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import type { AiAgentConfig } from '@/types';
|
||||
|
||||
defineOptions({
|
||||
name: 'AIConfigView'
|
||||
});
|
||||
const configForm = ref({
|
||||
model: 'gpt-3.5',
|
||||
apiKey: '',
|
||||
apiUrl: '',
|
||||
temperature: 0.7,
|
||||
maxTokens: 2000,
|
||||
historyTurns: 5,
|
||||
enableStreaming: true,
|
||||
enableFileInterpretation: true,
|
||||
enableKnowledgeRetrieval: true,
|
||||
systemPrompt: ''
|
||||
|
||||
// 表单数据
|
||||
const configForm = ref<AiAgentConfig>({
|
||||
name: '',
|
||||
avatar: '',
|
||||
systemPrompt: '',
|
||||
modelName: '',
|
||||
modelProvider: 'dify',
|
||||
status: 1
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadConfig();
|
||||
// 状态
|
||||
const saving = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
// 状态文本
|
||||
const statusText = computed(() => {
|
||||
return configForm.value.status === 1 ? '运行中' : '已停用';
|
||||
});
|
||||
|
||||
function loadConfig() {
|
||||
// TODO: 加载AI配置
|
||||
// 状态样式类
|
||||
const statusClass = computed(() => {
|
||||
return configForm.value.status === 1 ? 'status-active' : 'status-inactive';
|
||||
});
|
||||
|
||||
// 加载配置
|
||||
onMounted(async () => {
|
||||
await loadConfig();
|
||||
});
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
loading.value = true;
|
||||
// 获取启用的智能体列表
|
||||
const result = await aiAgentConfigApi.listEnabledAgents();
|
||||
if (result.success && result.data && result.data.length > 0) {
|
||||
// 使用第一个启用的智能体
|
||||
Object.assign(configForm.value, result.data[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载配置失败:', error);
|
||||
ElMessage.warning('暂无配置信息，请填写配置');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
// TODO: 保存配置
|
||||
ElMessage.success('配置保存成功');
|
||||
// 保存配置
|
||||
async function handleSave() {
|
||||
// 验证必填项
|
||||
if (!configForm.value.name) {
|
||||
ElMessage.warning('请输入助手名称');
|
||||
return;
|
||||
}
|
||||
if (!configForm.value.modelProvider) {
|
||||
ElMessage.warning('请选择模式');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
// 判断是更新还是创建
|
||||
if (configForm.value.id) {
|
||||
await aiAgentConfigApi.updateAgent(configForm.value);
|
||||
ElMessage.success('配置更新成功');
|
||||
} else {
|
||||
const result = await aiAgentConfigApi.createAgent(configForm.value);
|
||||
if (result.success && result.data) {
|
||||
configForm.value.id = result.data.id;
|
||||
}
|
||||
ElMessage.success('配置创建成功');
|
||||
}
|
||||
|
||||
// 重新加载配置
|
||||
await loadConfig();
|
||||
} catch (error: any) {
|
||||
console.error('保存配置失败:', error);
|
||||
ElMessage.error(error.message || '保存配置失败');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleTest() {
|
||||
// TODO: 测试API连接
|
||||
ElMessage.info('正在测试连接...');
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
// TODO: 重置配置
|
||||
// 重置配置
|
||||
async function handleReset() {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确定要重置配置吗？此操作将清空当前未保存的修改。',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
);
|
||||
|
||||
await loadConfig();
|
||||
ElMessage.success('配置已重置');
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-config {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
.ai-config-container {
|
||||
padding: 24px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.agent-info-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.agent-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.agent-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
background: #E7000B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.agent-name {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #101828;
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.33;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-active {
|
||||
background: #DCFCE7;
|
||||
color: #008236;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&.status-inactive {
|
||||
background: #FEF2F2;
|
||||
color: #DC2626;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-form-container {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.config-form {
|
||||
.help-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 12px;
|
||||
max-width: 672px;
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #101828;
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #F3F3F5;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #0A0A0A;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background: #F3F3F5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 4px 12px;
|
||||
box-shadow: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(231, 0, 11, 0.2);
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: #E7000B;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background: #F3F3F5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(231, 0, 11, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #E7000B;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
|
||||
.el-input__wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #F3F3F5;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&.el-button--primary {
|
||||
background: #E7000B;
|
||||
border-color: #E7000B;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background: #C90009;
|
||||
border-color: #C90009;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #A30008;
|
||||
border-color: #A30008;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--default {
|
||||
background: #F3F3F5;
|
||||
border-color: transparent;
|
||||
color: #0A0A0A;
|
||||
|
||||
&:hover {
|
||||
background: #E5E5E7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-switch) {
|
||||
--el-switch-on-color: #E7000B;
|
||||
|
||||
.el-switch__label {
|
||||
font-size: 14px;
|
||||
color: #0A0A0A;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="文档分段管理"
|
||||
width="1200px"
|
||||
:close-on-click-modal="false"
|
||||
class="segment-dialog"
|
||||
>
|
||||
<!-- 统计信息卡片 -->
|
||||
<div class="segment-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总分段数</div>
|
||||
<div class="stat-value">{{ totalSegments }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总字数</div>
|
||||
<div class="stat-value">{{ totalWords }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">总 Tokens</div>
|
||||
<div class="stat-value">{{ totalTokens }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分段列表 -->
|
||||
<div class="segment-list" v-loading="loading">
|
||||
<div
|
||||
v-for="(segment, index) in segments"
|
||||
:key="segment.id"
|
||||
class="segment-item"
|
||||
>
|
||||
<div class="segment-header">
|
||||
<span class="segment-index">分段 {{ index + 1 }}</span>
|
||||
<span class="segment-info">
|
||||
{{ segment.word_count }} 字 · {{ segment.tokens }} tokens
|
||||
</span>
|
||||
<div class="segment-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="editSegment(segment)"
|
||||
:icon="Edit"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="deleteSegment(segment)"
|
||||
:icon="Delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分段内容显示/编辑 -->
|
||||
<div class="segment-content">
|
||||
<div v-if="editingSegmentId === segment.id" class="segment-editor">
|
||||
<el-input
|
||||
v-model="editingContent"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="编辑分段内容"
|
||||
/>
|
||||
<div class="editor-actions">
|
||||
<el-button size="small" @click="cancelEdit">取消</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="saveSegment(segment)"
|
||||
:loading="saving"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="segment-text">
|
||||
{{ segment.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关键词标签 -->
|
||||
<div class="segment-keywords" v-if="segment.parentKeywords?.length">
|
||||
<el-tag
|
||||
v-for="keyword in segment.parentKeywords"
|
||||
:key="keyword"
|
||||
size="small"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
{{ keyword }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && segments.length === 0" class="empty-state">
|
||||
<p>暂无分段数据</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="showAddSegment" :icon="Plus">
|
||||
添加分段
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 添加分段对话框 -->
|
||||
<el-dialog
|
||||
v-model="addDialogVisible"
|
||||
title="添加新分段"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="选择父分段（可选）">
|
||||
<el-select
|
||||
v-model="selectedParentSegment"
|
||||
placeholder="选择一个分段作为父级"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(seg, idx) in segments"
|
||||
:key="seg.id"
|
||||
:label="`分段 ${idx + 1}: ${seg.content.substring(0, 30)}...`"
|
||||
:value="seg.parentSegmentId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分段内容" required>
|
||||
<el-input
|
||||
v-model="newSegmentContent"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="请输入分段内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="addDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="createNewSegment"
|
||||
:loading="creating"
|
||||
>
|
||||
创建
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
|
||||
import { documentSegmentApi } from '../../../../../apis/ai';
|
||||
|
||||
defineOptions({
|
||||
name: 'DocumentSegmentDialog'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** 是否显示对话框 */
|
||||
modelValue: boolean;
|
||||
/** Dify数据集ID */
|
||||
datasetId: string;
|
||||
/** Dify文档ID */
|
||||
documentId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
// 对话框显示状态
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
});
|
||||
|
||||
// 数据状态
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const creating = ref(false);
|
||||
const segments = ref<any[]>([]);
|
||||
|
||||
// 编辑状态
|
||||
const editingSegmentId = ref<string | null>(null);
|
||||
const editingContent = ref('');
|
||||
|
||||
// 添加分段状态
|
||||
const addDialogVisible = ref(false);
|
||||
const selectedParentSegment = ref<string>('');
|
||||
const newSegmentContent = ref('');
|
||||
|
||||
// 统计信息
|
||||
const totalSegments = computed(() => segments.value.length);
|
||||
const totalWords = computed(() =>
|
||||
segments.value.reduce((sum, seg) => sum + (seg.word_count || 0), 0)
|
||||
);
|
||||
const totalTokens = computed(() =>
|
||||
segments.value.reduce((sum, seg) => sum + (seg.tokens || 0), 0)
|
||||
);
|
||||
|
||||
// 监听对话框显示状态，加载数据
|
||||
watch(visible, async (val) => {
|
||||
if (val) {
|
||||
await loadSegments();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载分段数据
|
||||
*/
|
||||
async function loadSegments() {
|
||||
try {
|
||||
loading.value = true;
|
||||
|
||||
// 使用辅助方法获取所有分段和子块
|
||||
const allChunks = await documentSegmentApi.getAllSegmentsWithChunks(
|
||||
props.datasetId,
|
||||
props.documentId
|
||||
);
|
||||
|
||||
segments.value = allChunks;
|
||||
} catch (error: any) {
|
||||
console.error('加载分段失败:', error);
|
||||
ElMessage.error(error.message || '加载分段失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑分段
|
||||
*/
|
||||
function editSegment(segment: any) {
|
||||
editingSegmentId.value = segment.id;
|
||||
editingContent.value = segment.content;
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消编辑
|
||||
*/
|
||||
function cancelEdit() {
|
||||
editingSegmentId.value = null;
|
||||
editingContent.value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存分段
|
||||
*/
|
||||
async function saveSegment(segment: any) {
|
||||
if (!editingContent.value.trim()) {
|
||||
ElMessage.warning('分段内容不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
saving.value = true;
|
||||
|
||||
const result = await documentSegmentApi.updateChildChunk(
|
||||
props.datasetId,
|
||||
props.documentId,
|
||||
segment.segment_id,
|
||||
segment.id,
|
||||
editingContent.value
|
||||
);
|
||||
|
||||
if (result.success && result.data?.data) {
|
||||
// 更新本地数据
|
||||
const index = segments.value.findIndex(s => s.id === segment.id);
|
||||
if (index !== -1) {
|
||||
segments.value[index] = {
|
||||
...segments.value[index],
|
||||
...result.data.data
|
||||
};
|
||||
}
|
||||
|
||||
ElMessage.success('保存成功');
|
||||
cancelEdit();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('保存分段失败:', error);
|
||||
ElMessage.error(error.message || '保存失败');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除分段
|
||||
*/
|
||||
async function deleteSegment(segment: any) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确定要删除这个分段吗？此操作不可恢复。',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
);
|
||||
|
||||
const result = await documentSegmentApi.deleteChildChunk(
|
||||
props.datasetId,
|
||||
props.documentId,
|
||||
segment.segment_id,
|
||||
segment.id
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
segments.value = segments.value.filter(s => s.id !== segment.id);
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除分段失败:', error);
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示添加分段对话框
|
||||
*/
|
||||
function showAddSegment() {
|
||||
// 如果有分段，默认选择第一个作为父级
|
||||
if (segments.value.length > 0) {
|
||||
selectedParentSegment.value = segments.value[0].parentSegmentId;
|
||||
}
|
||||
addDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新分段
|
||||
*/
|
||||
async function createNewSegment() {
|
||||
if (!newSegmentContent.value.trim()) {
|
||||
ElMessage.warning('请输入分段内容');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedParentSegment.value) {
|
||||
ElMessage.warning('请选择一个父分段');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
creating.value = true;
|
||||
|
||||
const result = await documentSegmentApi.createChildChunk(
|
||||
props.datasetId,
|
||||
props.documentId,
|
||||
selectedParentSegment.value,
|
||||
newSegmentContent.value
|
||||
);
|
||||
|
||||
if (result.success && result.data?.data) {
|
||||
ElMessage.success('创建成功');
|
||||
addDialogVisible.value = false;
|
||||
newSegmentContent.value = '';
|
||||
selectedParentSegment.value = '';
|
||||
|
||||
// 重新加载列表
|
||||
await loadSegments();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('创建分段失败:', error);
|
||||
ElMessage.error(error.message || '创建失败');
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.segment-dialog {
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 14px;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 24px 24px 16px;
|
||||
border-bottom: 1px solid #F3F3F5;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #101828;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 24px;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #F3F3F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.segment-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4A5565;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #101828;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.segment-list {
|
||||
max-height: 520px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
|
||||
/* 自定义滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #D1D5DB;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #9CA3AF;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-item {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #E7000B;
|
||||
box-shadow: 0 4px 12px rgba(231, 0, 11, 0.12);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
gap: 12px;
|
||||
|
||||
.segment-index {
|
||||
font-weight: 500;
|
||||
color: #101828;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segment-info {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #6A7282;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segment-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
padding: 5px 12px;
|
||||
|
||||
&.el-button--small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.el-button--default {
|
||||
background: #F3F3F5;
|
||||
border-color: transparent;
|
||||
color: #0A0A0A;
|
||||
|
||||
&:hover {
|
||||
background: #E5E5E7;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--danger {
|
||||
background: #FEF2F2;
|
||||
border-color: transparent;
|
||||
color: #DC2626;
|
||||
|
||||
&:hover {
|
||||
background: #FEE2E2;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.segment-content {
|
||||
.segment-text {
|
||||
padding: 12px;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
line-height: 1.6;
|
||||
color: #4A5565;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.segment-editor {
|
||||
:deep(.el-textarea) {
|
||||
.el-textarea__inner {
|
||||
background: #F3F3F5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #0A0A0A;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(231, 0, 11, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #E7000B;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&.el-button--default {
|
||||
background: #F3F3F5;
|
||||
border-color: transparent;
|
||||
color: #0A0A0A;
|
||||
|
||||
&:hover {
|
||||
background: #E5E5E7;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--primary {
|
||||
background: #E7000B;
|
||||
border-color: #E7000B;
|
||||
|
||||
&:hover {
|
||||
background: #C90009;
|
||||
border-color: #C90009;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.segment-keywords {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
:deep(.el-tag) {
|
||||
background: #EFF6FF;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
color: #1447E6;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
height: 24px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 14px;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #6A7282;
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-button) {
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&.el-button--default {
|
||||
background: #F3F3F5;
|
||||
border-color: transparent;
|
||||
color: #0A0A0A;
|
||||
|
||||
&:hover {
|
||||
background: #E5E5E7;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--primary {
|
||||
background: #E7000B;
|
||||
border-color: #E7000B;
|
||||
|
||||
&:hover {
|
||||
background: #C90009;
|
||||
border-color: #C90009;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加分段对话框样式 */
|
||||
:deep(.el-dialog__wrapper) {
|
||||
.el-dialog {
|
||||
border-radius: 14px;
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #0A0A0A;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background: #F3F3F5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(231, 0, 11, 0.2);
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: #E7000B;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
background: #F3F3F5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(231, 0, 11, 0.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #E7000B;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
.el-input__wrapper {
|
||||
background: #F3F3F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1349
schoolNewsWeb/src/views/public/ai/AIAgent.vue
Normal file
1349
schoolNewsWeb/src/views/public/ai/AIAgent.vue
Normal file
File diff suppressed because it is too large
Load Diff
1
schoolNewsWeb/src/views/public/ai/index.ts
Normal file
1
schoolNewsWeb/src/views/public/ai/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as AIAgent} from './AIAgent.vue';
|
||||
Reference in New Issue
Block a user