更新模型选择器以支持更多模型类型,重构输入栏以移除快捷指令和工作流功能,新增工作空间功能以支持文件预览和下载,优化工作流组件以增强节点数据处理的可选性和安全性。

This commit is contained in:
2026-05-29 14:20:27 +08:00
parent 78d1fd93c8
commit 538e153473
6 changed files with 356 additions and 107 deletions

View File

@@ -219,9 +219,28 @@ watch(
const getModelTypeName = (type: number | string) => {
const typeMap: Record<number, string> = {
1: '推理模型',
2: '图片模型',
3: '音频模型',
100: '推理模型',
200: '图片模型',
201: '图片模型-文生图',
202: '图片模型-图生图',
203: '图片模型-图片编辑',
204: '图片模型-图片变体',
300: '音频模型',
301: '音频模型-文生音',
302: '音频模型-音生文',
303: '音频模型-音生音',
400: '向量化模型',
401: '向量化模型-文本嵌入',
402: '向量化模型-重排序',
500: '全模态模型',
501: '全模态模型-文图音',
502: '全模态模型-视觉理解',
600: '视频模型',
601: '视频模型-文生视频',
602: '视频模型-图生视频',
603: '视频模型-图文生视频',
604: '视频模型-视频生视频',
605: '视频模型-视频编辑',
};
return typeMap[Number(type)] || '未知类型';
};

View File

@@ -16,26 +16,6 @@
<el-button circle class="tool-btn" @click="handleAttachment">
<el-icon><Plus /></el-icon>
</el-button>
<el-dropdown trigger="click" @command="handleCommandSelect">
<el-button class="pill-btn">快捷指令</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="rewrite">帮我润色这段文案</el-dropdown-item>
<el-dropdown-item command="summary">总结当前对话重点</el-dropdown-item>
<el-dropdown-item command="todo">整理下一步 TODO</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" @command="handleReplySelect">
<el-button class="pill-btn">快捷回复</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="ok">收到我马上处理</el-dropdown-item>
<el-dropdown-item command="confirm">这个方向可以继续</el-dropdown-item>
<el-dropdown-item command="adjust">这个比例还要再调一下</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" @command="handleSkillSelect">
<el-button class="pill-btn">
{{ currentSkillDisplay }}
@@ -49,18 +29,6 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" @command="handleWorkflowSelect">
<el-button class="pill-btn">
{{ currentWorkflowDisplay }}
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="none"></el-dropdown-item>
<el-dropdown-item command="review-test">审查+测试</el-dropdown-item>
<el-dropdown-item command="doc-then-code">文档再编码</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="toolbar-right">
<el-button circle class="send-btn" :disabled="!message.trim()" @click="handleSend">
@@ -84,7 +52,6 @@ interface Emits {
const emit = defineEmits<Emits>();
const message = ref('');
const selectedSkill = ref('default');
const selectedWorkflow = ref('none');
const skillLabels: Record<string, string> = {
default: '选择技能',
@@ -93,36 +60,12 @@ const skillLabels: Record<string, string> = {
writing: '内容写作',
};
const workflowLabels: Record<string, string> = {
none: '选择工作流',
'review-test': '审查+测试',
'doc-then-code': '文档再编码',
};
const currentSkillDisplay = computed(() => {
return selectedSkill.value === 'default'
? '选择技能'
: skillLabels[selectedSkill.value];
});
const currentWorkflowDisplay = computed(() => {
return selectedWorkflow.value === 'none'
? '选择工作流'
: workflowLabels[selectedWorkflow.value];
});
const quickCommands: Record<string, string> = {
rewrite: '请帮我润色下面这段内容,保持原意并提升表达质感:',
summary: '请总结我们当前对话的重点,并给出 3 条执行建议。',
todo: '请把当前需求拆解成可执行的 TODO 列表。',
};
const quickReplies: Record<string, string> = {
ok: '收到,我马上处理。',
confirm: '这个方向可以,继续。',
adjust: '这个比例还要再调一下。',
};
const skills: Record<string, string> = {
default: '',
'code-review': '[技能:代码审查] 请帮我审查下面这段代码,找出潜在问题并给出改进建议:\n',
@@ -130,19 +73,12 @@ const skills: Record<string, string> = {
writing: '[技能:内容写作] 请根据下面的需求帮我创作内容:\n',
};
const workflows: Record<string, string> = {
none: '',
'review-test': '[工作流:审查+测试] 完成后请自动生成单元测试:\n',
'doc-then-code': '[工作流:文档再编码] 请先编写接口文档,再实现代码:\n',
};
const handleSend = (event?: KeyboardEvent) => {
if (event) event.preventDefault();
const msg = message.value.trim();
if (!msg) return;
const skillPrefix = skills[selectedSkill.value] || '';
const workflowPrefix = workflows[selectedWorkflow.value] || '';
const finalMessage = (skillPrefix + workflowPrefix + msg).trim();
const finalMessage = (skillPrefix + msg).trim();
emit('send', finalMessage);
message.value = '';
};
@@ -151,29 +87,12 @@ const handleAttachment = () => {
ElMessage.info('附件上传功能开发中...');
};
const handleCommandSelect = (key: string | number | object) => {
const k = String(key);
message.value = quickCommands[k] || message.value;
};
const handleReplySelect = (key: string | number | object) => {
const k = String(key);
message.value = quickReplies[k] || message.value;
};
const handleSkillSelect = (key: string | number | object) => {
selectedSkill.value = String(key);
if (selectedSkill.value !== 'default') {
ElMessage.success(`已选择技能:${skillLabels[selectedSkill.value]}`);
}
};
const handleWorkflowSelect = (key: string | number | object) => {
selectedWorkflow.value = String(key);
if (selectedWorkflow.value !== 'none') {
ElMessage.success(`已选择工作流:${workflowLabels[selectedWorkflow.value]}`);
}
};
</script>
<style scoped lang="scss">

View File

@@ -27,11 +27,69 @@
</div>
</div>
</div>
<!-- 工作空间 -->
<div class="workspace-section">
<div class="workspace-title">工作空间</div>
<div class="workspace-list" ref="workspaceListRef">
<div
v-for="item in displayWorkspaceItems"
:key="item.id"
class="workspace-item"
@click="handlePreview(item)"
>
<div class="workspace-item-icon">
<img v-if="item.type === 'image'" :src="item.url" />
<el-icon v-else-if="item.type === 'video'" ><VideoCamera /></el-icon>
<el-icon v-else-if="item.type === 'text'" ><Document /></el-icon>
<el-icon v-else><Document /></el-icon>
</div>
<div class="workspace-item-info">
<div class="workspace-item-name">{{ item.name }}</div>
</div>
<el-button
type="primary"
size="small"
link
@click.stop="handleDownload(item)"
>
<el-icon><Download /></el-icon>
</el-button>
</div>
</div>
</div>
</div>
<!-- 预览弹窗 -->
<el-dialog
v-model="previewDialogVisible"
:title="currentPreviewItem?.name"
width="auto"
max-width="80%"
top="10vh"
align-center
>
<div class="preview-dialog-content">
<img v-if="currentPreviewItem?.type === 'image'" :src="currentPreviewItem?.url" class="dialog-image" />
<video
v-else-if="currentPreviewItem?.type === 'video'"
:src="currentPreviewItem?.url"
controls
autoplay
class="dialog-video"
/>
<pre v-else-if="currentPreviewItem?.type === 'text'" class="dialog-text">{{ currentPreviewItem?.content }}</pre>
</div>
<template #footer>
<el-button @click="previewDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="handleDownload(currentPreviewItem!)">下载</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { Plus, Delete } from '@element-plus/icons-vue';
import { ref, computed } from 'vue';
import { Plus, Delete, Document, VideoCamera, Download } from '@element-plus/icons-vue';
interface HistoryItem {
id: number;
@@ -39,10 +97,20 @@ interface HistoryItem {
time: string;
}
interface WorkspaceItem {
id: number;
name: string;
type: 'text' | 'image' | 'video' | 'file';
url?: string;
content?: string;
createTime: string;
}
interface Props {
activeMenu: string;
activeHistoryId: number;
historyList: HistoryItem[];
workspaceItems?: WorkspaceItem[];
}
interface Emits {
@@ -52,9 +120,55 @@ interface Emits {
(e: 'delete-history', id: number): void;
}
defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
workspaceItems: () => [],
});
const emit = defineEmits<Emits>();
const workspaceListRef = ref<HTMLElement | null>(null);
const previewDialogVisible = ref(false);
const currentPreviewItem = ref<WorkspaceItem | null>(null);
// 示例 mock 数据
const mockItems: WorkspaceItem[] = [
{
id: 1,
name: '对话总结.md',
type: 'text',
content: `# 项目需求总结
## 功能需求
1. 在首页对话添加工作空间功能
2. 工作空间用于存放对话产出的文本、图片、视频
3. 需要支持预览和下载功能
## 技术要点
- 使用响应式布局,网格卡片展示
- 点击弹出对话框预览完整内容
- 原生 JS 实现文件下载`,
createTime: '2024-05-29',
},
{
id: 2,
name: '示例图片.jpg',
type: 'image',
url: 'https://placekitten.com/800/600',
createTime: '2024-05-29',
},
{
id: 3,
name: '演示视频.mp4',
type: 'video',
url: 'https://www.w3schools.com/html/mov_bbb.mp4',
createTime: '2024-05-29',
},
];
// 合并 props 和本地 mock开发时显示示例
const displayWorkspaceItems = computed(() => {
return props.workspaceItems && props.workspaceItems.length > 0 ? props.workspaceItems : mockItems;
});
const handleNewChat = () => {
emit('new-chat');
};
@@ -66,6 +180,36 @@ const handleSelectHistory = (id: number) => {
const handleDeleteHistory = (id: number) => {
emit('delete-history', id);
};
const handlePreview = (item: WorkspaceItem) => {
currentPreviewItem.value = item;
previewDialogVisible.value = true;
};
const handleDownload = (item: WorkspaceItem) => {
if (!item.url && !item.content) return;
if (item.type === 'text' && item.content) {
// 文本内容下载
const blob = new Blob([item.content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = item.name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} else if (item.url) {
// 图片、视频、文件下载
const a = document.createElement('a');
a.href = item.url;
a.download = item.name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
</script>
<style scoped lang="scss">
@@ -200,4 +344,123 @@ const handleDeleteHistory = (id: number) => {
font-size: 11px;
color: #94a3b8;
}
/* 工作空间样式 */
.workspace-section {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e9eef7;
max-height: 40%;
display: flex;
flex-direction: column;
min-height: 0;
}
.workspace-title {
padding: 12px 12px 8px;
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.workspace-list {
flex: 1;
padding: 0 8px 10px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.workspace-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: #bfdbfe;
background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.7) 100%);
}
}
.workspace-item-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 6px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #64748b;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.el-icon {
font-size: 16px;
}
}
.workspace-item-info {
flex: 1;
min-width: 0;
}
.workspace-item-name {
font-size: 12px;
font-weight: 500;
color: #1e293b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 预览弹窗样式 */
.preview-dialog-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
max-height: 60vh;
overflow: auto;
}
.dialog-image {
max-width: 100%;
max-height: 60vh;
}
.dialog-video {
max-width: 100%;
max-height: 60vh;
}
.dialog-text {
min-width: 400px;
max-width: 100%;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
line-height: 1.6;
}
</style>

View File

@@ -120,6 +120,7 @@ const emit = defineEmits<{
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid #e7ecf3;
padding-left: 2px;
}
.node-group-items {
@@ -129,9 +130,10 @@ const emit = defineEmits<{
}
.node-item {
justify-content: flex-start;
justify-content: flex-start !important;
width: 100%;
padding: 8px 10px;
padding: 0 !important;
margin: 0 !important;
color: #475569;
border-radius: 6px;
font-size: 13px;
@@ -139,11 +141,24 @@ const emit = defineEmits<{
background: transparent;
border: none;
transition: all 0.15s ease;
text-align: left !important;
min-height: 34px;
height: auto !important;
display: block !important;
&:hover {
background: #f1f5f9;
color: #1e293b;
}
:deep(.el-button__inner) {
width: 100%;
padding: 8px !important;
margin: 0 !important;
text-align: left !important;
justify-content: flex-start !important;
display: block !important;
}
}
}
</style>

View File

@@ -5,7 +5,6 @@
<el-tab-pane label="我的工作流" name="user"></el-tab-pane>
<el-tab-pane label="模板工作流" name="template"></el-tab-pane>
</el-tabs>
<el-button type="success" size="small" @click="emit('create')">新建</el-button>
</div>
<div class="workflow-list-content" v-loading="loading">
<el-empty v-if="currentList.length === 0" description="暂无工作流" :image-size="60" />
@@ -65,7 +64,6 @@ const currentList = computed(() => {
flex-direction: column;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
border: 1px solid #e6eaf0;
}
.panel-header {
display: flex;
@@ -188,4 +186,5 @@ const currentList = computed(() => {
padding: 4px 8px;
}
}
}
</style>

View File

@@ -126,7 +126,7 @@ interface ParamRef {
label: string;
}
const { addNodes, addEdges, findNode, removeNodes, getNodes } = useVueFlow();
const { addNodes, addEdges, findNode, removeNodes, getNodes, updateNode } = useVueFlow();
// 常量定义
const START_NODE_CODE = '__start__';
@@ -254,6 +254,8 @@ const onNodeClick = (event: { node: Node<NodeData, any, string> }) => {
const updateSelectedNode = (updatedNode: Node<NodeData, any, string>) => {
selectedNode.value = updatedNode;
// 使用 VueFlow 的 API 更新节点,确保内部状态同步
updateNode(updatedNode.id, updatedNode);
// 同步更新到 nodes 数组
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
@@ -284,29 +286,47 @@ const availableParams = computed(() => {
const addParam = (param: ParamRef) => {
if (!selectedNode.value?.data) return;
if (!selectedNode.value.data.inputSource) {
selectedNode.value.data.inputSource = [];
}
const updatedNode: Node<NodeData> = {
...selectedNode.value,
data: {
...selectedNode.value.data,
inputSource: selectedNode.value.data.inputSource || [],
},
};
// 查找是否已存在该节点的引用
const existingIndex = selectedNode.value.data.inputSource.findIndex((item) => item.nodeId === param.id);
const existingIndex = updatedNode.data.inputSource!.findIndex((item) => item.nodeId === param.id);
if (existingIndex >= 0) {
// 已存在,添加 output 到 field 数组
const existing = selectedNode.value.data.inputSource[existingIndex];
const existing = updatedNode.data.inputSource![existingIndex];
if (!existing.field.includes('output')) {
existing.field.push('output');
selectedNode.value = updatedNode;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
nodes.value[index] = updatedNode;
}
ElMessage.success('已添加参数引用');
} else {
ElMessage.info('该参数已被引用');
}
} else {
// 不存在,创建新的引用
selectedNode.value.data.inputSource.push({
updatedNode.data.inputSource!.push({
nodeId: param.id,
field: ['output'],
quoteOutput: false,
});
selectedNode.value = updatedNode;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
nodes.value[index] = updatedNode;
}
ElMessage.success('已添加参数引用');
}
};
@@ -330,6 +350,8 @@ const handleModelConfirm = (model: any) => {
selectedNode.value = updatedNode;
selectedModelData.value = model;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
@@ -353,6 +375,8 @@ const handleRemoveModel = () => {
selectedNode.value = updatedNode;
selectedModelData.value = null;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
@@ -376,6 +400,8 @@ const handleSkillConfirm = (skill: any) => {
selectedNode.value = updatedNode;
selectedSkillData.value = skill;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
@@ -399,6 +425,8 @@ const handleRemoveSkill = () => {
selectedNode.value = updatedNode;
selectedSkillData.value = null;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
@@ -436,6 +464,8 @@ const handleRemoveField = (nodeId: string, fieldName: string) => {
};
selectedNode.value = updatedNode;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
nodes.value[index] = updatedNode;
@@ -478,6 +508,8 @@ const handleToggleOutput = (nodeId: string, enabled: boolean) => {
};
selectedNode.value = updatedNode;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
nodes.value[index] = updatedNode;
@@ -534,6 +566,8 @@ const handleAddParamByValue = (paramValue: string) => {
};
selectedNode.value = updatedNode;
// 同步更新到 VueFlow 内部状态
updateNode(updatedNode.id, updatedNode);
const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
if (index >= 0) {
nodes.value[index] = updatedNode;
@@ -652,15 +686,15 @@ const fetchWorkflowList = async () => {
// 添加默认开始节点
const addDefaultStartNode = () => {
addNodes([
{
id: 'start-node',
type: 'input',
position: { x: 200, y: 200 },
data: { label: '开始', nodeCode: '__start__', inputSource: null },
style: { background: '#10b981', color: '#fff', border: '2px solid #059669', borderRadius: '8px', padding: '10px 20px' },
},
]);
const startNode = {
id: 'start-node',
type: 'input',
position: { x: 200, y: 200 },
data: { label: '开始', nodeCode: '__start__', inputSource: null },
style: { background: '#10b981', color: '#fff', border: '2px solid #059669', borderRadius: '8px', padding: '10px 20px' },
};
addNodes([startNode]);
nodes.value.push(startNode);
};
// 新建工作流