908705107/ai-agent-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve lightweight AI design preview dialog

Browse Source
This commit is contained in:
cls_宁波本机
2026-06-09 22:29:53 +08:00
parent e6aa82f058
commit e7dc89d6aa
1 changed files with 172 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/web-ele/src/components/ai-chat-panel/DesignPreviewDialog.vue
+172 -36
View File
@@ -10,11 +10,11 @@ import {
} from '@element-plus/icons-vue';
import {
ElAlert,
ElButton,
ElDescriptions,
ElDescriptionsItem,
ElDialog,
ElDivider,
ElInput,
ElMessage,
ElScrollbar,
@@ -39,6 +39,7 @@ const emit = defineEmits<{
}>();
const draftText = ref('{}');
const contentText = ref('');
const sourceData = computed(() => {
return (
@@ -52,7 +53,16 @@ const sourceData = computed(() => {
);
});
const payload = computed(() => {
const sourceType = computed(() => {
const source = sourceData.value as Record<string, any>;
if (source.type) return String(source.type);
if (props.settings) return 'app_settings';
if (props.publishData) return 'dashboard_publish';
if (props.basicInfo) return 'dashboard_basic_info';
return 'design';
});
const payload = computed<Record<string, any>>(() => {
const source = sourceData.value as Record<string, any>;
if ('data' in source && source.data && typeof source.data === 'object') {
return source.data;
@@ -60,30 +70,80 @@ const payload = computed(() => {
return source;
});
const typeLabelMap: Record<string, string> = {
app_design: '应用设计方案',
app_settings: '应用设置方案',
dashboard_basic_info: '仪表盘基础信息',
dashboard_design: '仪表盘设计方案',
dashboard_publish: '仪表盘发布配置',
database_design: '数据库设计方案',
form_basic_info: '表单基础信息',
form_ui_design: '表单界面设计',
list_config: '列表配置方案',
system_summary: '系统生成总结',
};
const dialogTitle = computed(() => {
const source = sourceData.value as Record<string, any>;
return source.title || props.title || 'AI 方案确认';
return (
source.title ||
props.title ||
typeLabelMap[sourceType.value] ||
'AI 方案确认'
);
});
const primaryText = computed(() => {
const source = payload.value;
return (
source.content ||
source.design_suggestion ||
source.summary ||
source.description ||
''
);
});
const summaryItems = computed(() => {
const source = payload.value as Record<string, any>;
const keys = ['name', 'title', 'description', 'code', 'type', 'category'];
return keys
.filter((key) => source[key] !== undefined && source[key] !== null)
.map((key) => ({ key, value: String(source[key]) }));
const source = payload.value;
const candidates: Array<[string, any]> = [
['名称', source.name || source.title || source.design_title],
['编码', source.code || source.dashboard_code || source.form_code],
['类型', source.type || source.category],
['路由', source.route_path || source.path],
['菜单', source.menu_name],
['图标', source.menu_icon],
['排序', source.menu_order],
['说明', source.description],
];
return candidates
.filter(([, value]) => value !== undefined && value !== null && value !== '')
.map(([label, value]) => ({ label, value: String(value) }));
});
const fieldItems = computed(() => {
const source = payload.value as Record<string, any>;
const source = payload.value;
const fields =
source.schema_fields || source.form_fields || source.fields || source.schema?.fields;
return Array.isArray(fields) ? fields.slice(0, 12) : [];
source.schema_fields ||
source.form_fields ||
source.fields ||
source.schema?.fields;
return Array.isArray(fields) ? fields.slice(0, 16) : [];
});
const tableItems = computed(() => {
const source = payload.value as Record<string, any>;
const source = payload.value;
const tables = source.data_sources || source.table_configs || source.tables;
return Array.isArray(tables) ? tables.slice(0, 8) : [];
return Array.isArray(tables) ? tables.slice(0, 10) : [];
});
const routePreview = computed(() => {
const source = payload.value;
if (source.route_path) return source.route_path;
if (source.dashboard_code) return `/dashboard/${source.dashboard_code}`;
if (source.form_code) return `/form-render/${source.form_code}`;
return '';
});
watch(
@@ -91,11 +151,24 @@ watch(
() => {
if (props.visible) {
draftText.value = JSON.stringify(payload.value || {}, null, 2);
contentText.value = primaryText.value;
}
},
{ immediate: true },
);
function mergedDraft() {
const data = JSON.parse(draftText.value || '{}');
if (
contentText.value &&
(sourceType.value === 'app_design' || sourceType.value === 'dashboard_design')
) {
if ('content' in data) data.content = contentText.value;
else data.design_suggestion = contentText.value;
}
return data && typeof data === 'object' ? data : { value: data };
}
function handleClose() {
emit('update:visible', false);
emit('close');
@@ -103,11 +176,10 @@ function handleClose() {
function handleConfirm() {
try {
const data = JSON.parse(draftText.value || '{}');
emit('confirm', data && typeof data === 'object' ? data : { value: data });
emit('confirm', mergedDraft());
emit('update:visible', false);
} catch {
ElMessage.error('JSON 格式不正确');
ElMessage.error('JSON 格式不正确，请检查后再确认');
}
}
@@ -125,7 +197,7 @@ function handleVisibleChange(visible: boolean) {
<ElDialog
:model-value="visible"
:title="dialogTitle"
width="860px"
width="980px"
append-to-body
destroy-on-close
class="ai-design-preview-dialog"
@@ -133,22 +205,44 @@ function handleVisibleChange(visible: boolean) {
>
<div class="ai-design-preview">
<section class="preview-panel">
<div class="panel-title">方案概要</div>
<div class="panel-heading">
<div>
<div class="panel-title">{{ typeLabelMap[sourceType] || '方案预览' }}</div>
<div class="panel-subtext">确认后将把当前结构化配置回传给工作流继续执行</div>
</div>
<ElTag effect="dark" type="primary">{{ sourceType }}</ElTag>
</div>
<ElAlert
v-if="routePreview"
class="mb-3"
type="info"
:closable="false"
show-icon
>
<template #title>预计访问路径：{{ routePreview }}</template>
</ElAlert>
<ElDescriptions v-if="summaryItems.length" :column="2" border size="small">
<ElDescriptionsItem
v-for="item in summaryItems"
:key="item.key"
:label="item.key"
:key="item.label"
:label="item.label"
>
{{ item.value }}
</ElDescriptionsItem>
</ElDescriptions>
<div v-else class="empty-hint">当前方案未提供概要字段</div>
<ElDivider v-if="fieldItems.length || tableItems.length" />
<template v-if="primaryText">
<div class="section-title">方案说明</div>
<ElScrollbar height="150px" class="text-preview">
<pre>{{ primaryText }}</pre>
</ElScrollbar>
</template>
<template v-if="fieldItems.length">
<div class="panel-subtitle">字段设计</div>
<div class="section-title">字段设计</div>
<div class="tag-grid">
<ElTag
v-for="(field, index) in fieldItems"
@@ -161,14 +255,14 @@ function handleVisibleChange(visible: boolean) {
</template>
<template v-if="tableItems.length">
<div class="panel-subtitle">数据表配置</div>
<div class="section-title">数据/页面配置</div>
<div class="table-list">
<div
v-for="(table, index) in tableItems"
:key="table.id || table.name || index"
class="table-item"
>
<span>{{ table.title || table.name || `数据表 ${index + 1}` }}</span>
<span>{{ table.title || table.name || `配置 ${index + 1}` }}</span>
<small>{{ table.code || table.table_name || table.type || '' }}</small>
</div>
</div>
@@ -176,15 +270,25 @@ function handleVisibleChange(visible: boolean) {
</section>
<section class="editor-panel">
<div v-if="primaryText" class="content-editor">
<div class="panel-title">可编辑方案正文</div>
<ElInput
v-model="contentText"
type="textarea"
:autosize="{ minRows: 7, maxRows: 10 }"
resize="none"
/>
</div>
<div class="panel-title-row">
<span class="panel-title">结构化数据</span>
<ElButton size="small" :icon="Copy" @click="copyJson">复制</ElButton>
</div>
<ElScrollbar height="390px">
<ElScrollbar height="330px">
<ElInput
v-model="draftText"
type="textarea"
:autosize="{ minRows: 18, maxRows: 24 }"
:autosize="{ minRows: 16, maxRows: 22 }"
resize="none"
class="json-editor"
/>
@@ -204,7 +308,7 @@ function handleVisibleChange(visible: boolean) {
<style scoped>
.ai-design-preview {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 16px;
}
@@ -217,23 +321,30 @@ function handleVisibleChange(visible: boolean) {
background: var(--el-bg-color);
}
.panel-title,
.panel-title-row {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
}
.panel-heading,
.panel-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.panel-subtitle {
.panel-title {
font-size: 14px;
font-weight: 600;
}
.panel-subtext {
margin-top: 4px;
color: var(--el-text-color-secondary);
font-size: 12px;
}
.section-title {
margin: 14px 0 8px;
font-size: 13px;
font-weight: 600;
margin: 12px 0 8px;
}
.empty-hint {
@@ -243,6 +354,31 @@ function handleVisibleChange(visible: boolean) {
text-align: center;
}
.text-preview {
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
background: var(--el-fill-color-lighter);
padding: 10px;
}
.text-preview pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--el-text-color-regular);
font-family: inherit;
font-size: 13px;
line-height: 1.6;
}
.content-editor {
margin-bottom: 14px;
}
.content-editor .panel-title {
margin-bottom: 8px;
}
.tag-grid {
display: flex;
flex-wrap: wrap;