red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新提示词管理逻辑，重命名相关变量，优化提示词选择器界面，支持直接编辑提示词内容

Browse Source
This commit is contained in:
吴思建
2026-06-09 17:51:32 +08:00
parent 10d6ce2b0d
commit 52340fcd94
2 changed files with 36 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

480
src/views/settings/creation/component/PromptSelector.vue
View File

@@ -1,218 +1,45 @@
<template>
<el-dialog
v-model="visible"
title="选择提示词"
width="900px"
:close-on-click-modal="false"
destroy-on-close
@close="handleClose"
>
<div class="prompt-selector-dialog">
<div class="prompt-header">
<div class="search-bar">
<el-input v-model="searchParams.keyword" placeholder="搜索提示词内容" clearable @clear="handleSearch" @keyup.enter="handleSearch">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button type="primary" plain @click="handleCreate">
<el-icon><Plus /></el-icon>
新增提示词
</el-button>
</div>
</div>
<div class="prompt-content" v-loading="loading">
<el-empty v-if="!loading && promptList.length === 0" description="暂无提示词数据" :image-size="100" />
<el-table v-else :data="promptList" height="360" border stripe style="width: 100%" @row-click="handleSelectPrompt">
<el-table-column label="节点类型" width="120" prop="nodeType" />
<el-table-column label="提示词内容" prop="prompt" show-overflow-tooltip />
<el-table-column label="来源" width="80">
<template #default="{ row }">
<el-tag :type="row.sourceType === 1 ? 'success' : 'info'" size="small">
{{ row.sourceType === 1 ? '管理员' : row.sourceType === 2 ? '用户' : row.sourceType }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right">
<template #default="{ row }">
<template v-if="canManagePrompt(row)">
<el-button type="primary" link size="small" @click.stop="handleEdit(row)">编辑</el-button>
<el-button type="danger" link size="small" @click.stop="handleDeleteConfirm(row)">删除</el-button>
</template>
<span v-else class="operation-placeholder">-</span>
</template>
</el-table-column>
<el-table-column label="选择" width="60" align="center" fixed="right">
<template #default="{ row }">
<el-icon v-if="selectedPrompt?.id === row.id" class="check-icon" color="#67c23a">
<CircleCheck />
</el-icon>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="shouldRenderPagination" class="pagination-panel">
<div class="pagination-summary">共 {{ displayTotal }} 条</div>
<el-pagination
v-model:current-page="pagination.pageNum"
v-model:page-size="pagination.pageSize"
:total="displayTotal"
:page-sizes="[10, 20, 50]"
layout="sizes, prev, pager, next, jumper"
background
:hide-on-single-page="false"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</div>
<el-dialog v-model="visible" title="编辑提示词" width="720px" :close-on-click-modal="false" destroy-on-close @close="handleClose">
<div class="prompt-input-dialog">
<el-input v-model="promptContent" type="textarea" :rows="12" maxlength="5000" show-word-limit placeholder="请输入提示词内容" />
</div>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" :disabled="!selectedPrompt" :loading="confirmLoading" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
<el-dialog
v-model="showFormDialog"
:title="isEdit ? '编辑提示词' : '新增提示词'"
width="600px"
:close-on-click-modal="false"
destroy-on-close
@close="resetFormState"
>
<el-form :model="formState" label-width="100px">
<el-form-item label="节点类型" required>
<el-select v-model="formState.nodeType" placeholder="请选择节点类型" class="w100" clearable :disabled="Boolean(props.nodeType)" v-loading="nodeLibraryLoading">
<el-option v-for="option in nodeOptions" :key="option.value" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item label="提示词内容" required>
<el-input v-model="formState.prompt" type="textarea" :rows="8" placeholder="请输入提示词内容" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="showFormDialog = false">取消</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">
{{ isEdit ? '保存修改' : '确定' }}
</el-button>
</template>
</el-dialog>
<el-dialog v-model="showDeleteDialog" title="确认删除" width="400px" :close-on-click-modal="false" destroy-on-close>
<div>确定要删除这个提示词吗？</div>
<template #footer>
<el-button @click="showDeleteDialog = false">取消</el-button>
<el-button type="primary" :loading="deleteLoading" @click="handleDelete">确定</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { Search, CircleCheck, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import {
checkIsSuperAdmin,
createPrompt,
deletePrompt,
getNodeLibraryList,
getPromptList,
updatePrompt,
type CreatePromptResponse,
type NodeLibraryGroup,
type NodeLibraryNode,
type PromptItem,
} from '/@/api/settings/promptManager';
import { ref, watch } from 'vue';
interface Props {
modelValue: boolean;
defaultPrompt?: PromptItem | null;
nodeType?: string;
defaultPrompt?: string;
}
interface Emits {
(e: 'update:modelValue', value: boolean): void;
(e: 'confirm', prompt: PromptItem): void;
(e: 'confirm', promptContent: string): void;
}
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
defaultPrompt: null,
nodeType: '',
defaultPrompt: '',
});
const emit = defineEmits<Emits>();
const visible = ref(false);
const loading = ref(false);
const nodeLibraryLoading = ref(false);
const submitLoading = ref(false);
const deleteLoading = ref(false);
const confirmLoading = ref(false);
const showFormDialog = ref(false);
const showDeleteDialog = ref(false);
const isEdit = ref(false);
const editId = ref<number | string | null>(null);
const deleteId = ref<number | string | null>(null);
const promptList = ref<PromptItem[]>([]);
const selectedPrompt = ref<PromptItem | null>(null);
const nodeLibraryGroups = ref<NodeLibraryGroup[]>([]);
const searchParams = reactive({ keyword: '' });
const pagination = reactive({ pageNum: 1, pageSize: 10, total: 0 });
const formState = reactive({
nodeType: '',
prompt: '',
sourceType: 2,
});
const nodeOptions = computed(() => {
const options: Array<{ label: string; value: string }> = [];
nodeLibraryGroups.value.forEach((group: NodeLibraryGroup) => {
group.items.forEach((item: NodeLibraryNode) => {
if (!item.promptOption) return;
options.push({
label: item.nodeName,
value: item.nodeCode,
});
});
});
return options;
});
const displayTotal = computed(() => {
if (pagination.total > 0) return pagination.total;
if (promptList.value.length > 0) return promptList.value.length;
return 0;
});
const shouldRenderPagination = computed(() => displayTotal.value > 0);
const promptContent = ref('');
watch(
() => props.modelValue,
(val) => {
visible.value = val;
if (val) {
selectedPrompt.value = props.defaultPrompt || null;
pagination.pageNum = 1;
fetchPromptList();
loadNodeLibrary();
}
}
);
watch(
() => props.nodeType,
() => {
if (visible.value) {
pagination.pageNum = 1;
fetchPromptList();
}
if (!showFormDialog.value) {
formState.nodeType = props.nodeType || '';
promptContent.value = props.defaultPrompt || '';
}
}
);
@@ -223,298 +50,19 @@ watch(visible, (val) => {
}
});
const canManagePrompt = (prompt: PromptItem) => Number(prompt?.sourceType) === 2;
const resolvePromptList = (payload: any): PromptItem[] => {
if (Array.isArray(payload?.data?.list)) return payload.data.list;
if (Array.isArray(payload?.list)) return payload.list;
if (Array.isArray(payload?.rows)) return payload.rows;
return [];
};
const resolvePromptTotal = (payload: any, list: PromptItem[]) => {
const totalCandidates = [payload?.data?.total, payload?.total, payload?.data?.count, payload?.count];
const validTotal = totalCandidates.find((item) => typeof item === 'number' && !Number.isNaN(item));
if (typeof validTotal === 'number') return validTotal;
return list.length;
};
const resolveNodeLibraryGroups = (payload: any): NodeLibraryGroup[] => {
if (Array.isArray(payload?.data?.groups)) return payload.data.groups;
if (Array.isArray(payload?.groups)) return payload.groups;
return [];
};
const resolveIsSuperAdmin = (payload: any) => {
if (typeof payload?.data?.isSuperAdmin === 'boolean') return payload.data.isSuperAdmin;
if (typeof payload?.isSuperAdmin === 'boolean') return payload.isSuperAdmin;
return false;
};
const resolveCreatedPrompt = (payload: any, fallback: PromptItem): PromptItem => {
const created = (payload?.data || payload) as CreatePromptResponse | undefined;
return {
id: created?.id ?? fallback.id,
tenantId: created?.tenantId,
creator: created?.creator,
createdAt: created?.createdAt,
updater: created?.updater,
updatedAt: created?.updatedAt,
deletedAt: created?.deletedAt ?? null,
nodeType: created?.nodeType || fallback.nodeType,
prompt: created?.prompt || fallback.prompt,
sourceType: Number(created?.sourceType ?? 2),
};
};
const loadNodeLibrary = async () => {
if (nodeLibraryGroups.value.length > 0) return;
nodeLibraryLoading.value = true;
try {
const res = await getNodeLibraryList();
nodeLibraryGroups.value = resolveNodeLibraryGroups(res);
} catch (error) {
ElMessage.error('加载节点类型失败');
} finally {
nodeLibraryLoading.value = false;
}
};
const fetchPromptList = async () => {
loading.value = true;
try {
const params = {
pageNum: pagination.pageNum,
pageSize: pagination.pageSize,
keyword: searchParams.keyword || undefined,
nodeType: props.nodeType || undefined,
};
const res = await getPromptList(params);
const list = resolvePromptList(res);
promptList.value = list;
pagination.total = resolvePromptTotal(res, list);
if (selectedPrompt.value?.id) {
selectedPrompt.value = list.find((item) => item.id === selectedPrompt.value?.id) || selectedPrompt.value;
}
} catch (error) {
promptList.value = [];
pagination.total = 0;
} finally {
loading.value = false;
}
};
const resetFormState = () => {
isEdit.value = false;
editId.value = null;
formState.nodeType = props.nodeType || '';
formState.prompt = '';
formState.sourceType = 2;
};
const handleSearch = () => {
pagination.pageNum = 1;
fetchPromptList();
};
const handlePageChange = () => {
fetchPromptList();
};
const handleSizeChange = (size: number) => {
pagination.pageSize = size;
pagination.pageNum = 1;
fetchPromptList();
};
const handleSelectPrompt = (prompt: PromptItem) => {
selectedPrompt.value = prompt;
};
const handleCreate = async () => {
await loadNodeLibrary();
resetFormState();
showFormDialog.value = true;
};
const handleEdit = async (prompt: PromptItem) => {
if (!canManagePrompt(prompt)) return;
await loadNodeLibrary();
isEdit.value = true;
editId.value = prompt.id;
formState.nodeType = prompt.nodeType || props.nodeType || '';
formState.prompt = prompt.prompt || '';
formState.sourceType = Number(prompt.sourceType ?? 0);
showFormDialog.value = true;
};
const handleSubmit = async () => {
if (!formState.nodeType?.trim()) {
ElMessage.warning('请选择节点类型');
return;
}
if (!formState.prompt?.trim()) {
ElMessage.warning('请输入提示词内容');
return;
}
submitLoading.value = true;
try {
const payload = {
nodeType: formState.nodeType.trim(),
prompt: formState.prompt.trim(),
sourceType: formState.sourceType,
};
if (isEdit.value && editId.value !== null) {
await updatePrompt({
id: editId.value,
...payload,
});
ElMessage.success('修改成功');
} else {
await createPrompt(payload);
ElMessage.success('创建成功');
}
showFormDialog.value = false;
resetFormState();
pagination.pageNum = 1;
await fetchPromptList();
} catch (error) {
ElMessage.error(isEdit.value ? '修改失败' : '创建失败');
} finally {
submitLoading.value = false;
}
};
const handleDeleteConfirm = (prompt: PromptItem) => {
if (!canManagePrompt(prompt)) return;
deleteId.value = prompt.id;
showDeleteDialog.value = true;
};
const handleDelete = async () => {
if (deleteId.value === null) return;
deleteLoading.value = true;
try {
await deletePrompt(deleteId.value);
ElMessage.success('删除成功');
showDeleteDialog.value = false;
if (selectedPrompt.value?.id === deleteId.value) {
selectedPrompt.value = null;
}
if (promptList.value.length === 1 && pagination.pageNum > 1) {
pagination.pageNum -= 1;
}
await fetchPromptList();
} catch (error) {
ElMessage.error('删除失败');
} finally {
deleteLoading.value = false;
deleteId.value = null;
}
};
const handleConfirm = async () => {
if (!selectedPrompt.value) return;
confirmLoading.value = true;
try {
let finalPrompt = selectedPrompt.value;
const isAdminPrompt = Number(finalPrompt.sourceType) === 1;
if (isAdminPrompt) {
const roleRes = await checkIsSuperAdmin();
const isSuperAdmin = resolveIsSuperAdmin(roleRes);
if (!isSuperAdmin) {
const createRes = await createPrompt({
nodeType: finalPrompt.nodeType,
prompt: finalPrompt.prompt,
sourceType: 2,
});
finalPrompt = resolveCreatedPrompt(createRes, {
...finalPrompt,
id: `copied-${finalPrompt.id}`,
sourceType: 2,
});
selectedPrompt.value = finalPrompt;
ElMessage.success('已复制为你的用户提示词');
await fetchPromptList();
}
}
emit('confirm', finalPrompt);
handleClose();
} catch (error) {
ElMessage.error('选择提示词失败');
} finally {
confirmLoading.value = false;
}
const handleConfirm = () => {
emit('confirm', promptContent.value.trim());
handleClose();
};
const handleClose = () => {
visible.value = false;
selectedPrompt.value = null;
showFormDialog.value = false;
showDeleteDialog.value = false;
resetFormState();
deleteId.value = null;
};
onMounted(() => {
resetFormState();
});
</script>
<style scoped lang="scss">
.prompt-selector-dialog {
.prompt-input-dialog {
display: flex;
flex-direction: column;
gap: 16px;
}
.prompt-header {
flex-shrink: 0;
}
.search-bar {
display: flex;
gap: 12px;
}
.search-bar :deep(.el-input) {
flex: 1;
}
.prompt-content {
min-height: 360px;
}
.operation-placeholder {
color: var(--el-text-color-placeholder);
}
.pagination-panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 8px;
border-top: 1px solid var(--el-border-color-lighter);
}
.pagination-summary {
font-size: 14px;
color: var(--el-text-color-regular);
white-space: nowrap;
}
.pagination-panel :deep(.el-pagination) {
margin-left: auto;
}
.w100 {
width: 100%;
}
</style>

49
src/views/settings/creation/index.vue
View File

@@ -46,11 +46,11 @@
<el-icon>
<Plus />
</el-icon>
选择提示词
编辑提示词
</el-button>
<div v-if="selectedPrompt" class="selected-prompt-tag">
<div v-if="promptContent" class="selected-prompt-tag">
<el-tag type="success" size="large" closable @close="handleRemovePrompt">
{{ selectedPrompt.prompt ? selectedPrompt.prompt.substring(0, 50) + '...' : '提示词' }}
{{ promptContent.length > 50 ? `${promptContent.substring(0, 50)}...` : promptContent }}
</el-tag>
</div>
</div>
@@ -606,7 +606,7 @@
/>
<!-- 提示词选择器 -->
<PromptSelector v-model="showPromptSelector" :default-prompt="selectedPrompt" :node-type="formState.nodeCode" @confirm="handlePromptConfirm" />
<PromptSelector v-model="showPromptSelector" :default-prompt="promptContent" @confirm="handlePromptConfirm" />
<!-- 技能选择器 -->
<SkillSelector v-model="showSkillSelector" :default-skill="selectedSkill" @confirm="handleSkillConfirm" />
@@ -825,7 +825,6 @@ import SkillSelector from '/@/components/skill/NodeSkillSelector.vue';
import ModelSelector from '/@/components/model/ModelSelector.vue';
import SaveWorkflowDialog from './component/SaveWorkflowDialog.vue';
import PromptSelector from './component/PromptSelector.vue';
import type { PromptItem } from '/@/api/settings/promptManager';
import type { SkillItem } from '/@/api/settings/skill';
import {
downloadToFile,
@@ -893,7 +892,7 @@ const selectedModel = ref('');
const showSkillSelector = ref(false);
const selectedSkill = ref<SkillItem | null>(null);
const showPromptSelector = ref(false);
const selectedPrompt = ref<PromptItem | null>(null);
const promptContent = ref('');
const isSaveFileEnabled = ref(false);
const saving = ref(false);
const leftPanelTab = ref('selected'); // 默认显示"当前选中"Tab
@@ -1344,7 +1343,7 @@ const workflowDsl = computed(() => ({
: null,
outputConfig: Array.isArray(n.properties?.outputConfig) ? n.properties.outputConfig : null,
isSaveFile: n.properties?.isSaveFileEnabled ?? null,
promptContent: n.properties?.promptData?.prompt || null,
promptContent: n.properties?.promptContent || '',
outputResult: null,
})),
edges: flowDsl.value.edges.map((e) => ({
@@ -1515,13 +1514,13 @@ const handleRemoveModel = () => {
selectedModel.value = '';
selectedModelData.value = null;
};
// 处理提示词选择确认
const handlePromptConfirm = (prompt: PromptItem) => {
selectedPrompt.value = prompt;
// 处理提示词输入确认
const handlePromptConfirm = (value: string) => {
promptContent.value = value;
};
// 移除已选择的提示词
// 移除已填写的提示词
const handleRemovePrompt = () => {
selectedPrompt.value = null;
promptContent.value = '';
};
// 获取对话模型列表
const fetchChatModelList = async () => {
@@ -3401,12 +3400,8 @@ watch(
selectedSkill.value = null;
}
// 恢复提示词信息
if (e?.properties?.promptData) {
selectedPrompt.value = e.properties.promptData;
} else {
selectedPrompt.value = null;
}
// 恢复提示词内容
promptContent.value = String(e?.properties?.promptContent || '');
// 恢复对话模式状态
isSaveFileEnabled.value = e?.properties?.isSaveFileEnabled === true;
@@ -3491,7 +3486,7 @@ const applySelected = () => {
'inputSource',
'formConfig',
'skillName',
'promptData',
'promptContent',
'isSaveFileEnabled',
'width',
'height',
@@ -3547,11 +3542,11 @@ const applySelected = () => {
delete p.skillName;
}
// 保存提示词选择状态
if (selectedPrompt.value) {
p.promptData = selectedPrompt.value;
// 保存提示词内容
if (promptContent.value.trim()) {
p.promptContent = promptContent.value.trim();
} else {
delete p.promptData;
delete p.promptContent;
}
// 保存对话模式状态
@@ -3981,7 +3976,7 @@ const loadWorkflowFromDsl = (dsl: any) => {
inputSource: n.inputSource || null,
// 加载提示词和保存文件配置
isSaveFileEnabled: n.isSaveFile ?? false,
promptData: n.promptContent ? { id: 0, prompt: n.promptContent, nodeType: n.nodeCode } : null,
promptContent: n.promptContent || '',
},
};
});
@@ -4033,8 +4028,8 @@ watch(selectedElement, (newElement) => {
selectedSkill.value = null;
}
// 从节点属性中恢复提示词选择状态
selectedPrompt.value = newElement.properties.promptData || null;
// 从节点属性中恢复提示词内容
promptContent.value = String(newElement.properties.promptContent || '');
// 从节点属性中恢复对话模式状态
isSaveFileEnabled.value = newElement.properties.isSaveFileEnabled === true;
@@ -4043,7 +4038,7 @@ watch(selectedElement, (newElement) => {
selectedModel.value = '';
selectedModelData.value = null;
selectedSkill.value = null;
selectedPrompt.value = null;
promptContent.value = '';
isSaveFileEnabled.value = false;
}
});