138 lines
3.8 KiB
Vue
138 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue';
|
|
|
|
import { Maximize, Minimize } from '@vben/icons';
|
|
import { $t } from '@vben/locales';
|
|
|
|
import { ElButton, ElInput, ElMessage } from 'element-plus';
|
|
|
|
export interface DashboardDesignData {
|
|
type: string;
|
|
title: string;
|
|
data: {
|
|
dashboard_code?: string;
|
|
design_suggestion?: string;
|
|
design_title?: string;
|
|
page_config?: Record<string, any>;
|
|
};
|
|
nodeId: string;
|
|
}
|
|
|
|
const props = defineProps<{
|
|
design?: DashboardDesignData;
|
|
visible: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
close: [];
|
|
confirm: [data: Record<string, any>];
|
|
'update:visible': [value: boolean];
|
|
}>();
|
|
|
|
const isFullscreen = ref(false);
|
|
const configText = ref('{}');
|
|
|
|
const dialogVisible = computed({
|
|
get: () => props.visible,
|
|
set: (val) => emit('update:visible', val),
|
|
});
|
|
|
|
watch(
|
|
() => props.design,
|
|
(design) => {
|
|
configText.value = JSON.stringify(design?.data?.page_config || {}, null, 2);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
function handleConfirm() {
|
|
try {
|
|
emit('confirm', {
|
|
design_title:
|
|
props.design?.data?.design_title ||
|
|
$t('ai-platform.dashboard.design.title'),
|
|
page_config: JSON.parse(configText.value || '{}'),
|
|
});
|
|
} catch {
|
|
ElMessage.error('页面配置不是有效 JSON');
|
|
}
|
|
}
|
|
|
|
function handleClose() {
|
|
dialogVisible.value = false;
|
|
emit('close');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="visible"
|
|
class="border-border bg-card flex flex-col rounded-lg"
|
|
:class="[isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full']"
|
|
>
|
|
<div
|
|
class="border-border bg-muted/50 flex shrink-0 items-center justify-between border-b px-4 py-3"
|
|
>
|
|
<div class="text-foreground flex items-center gap-3 font-medium">
|
|
<div class="bg-primary flex h-8 w-8 items-center justify-center rounded">
|
|
<span class="text-sm font-bold text-white">D</span>
|
|
</div>
|
|
<span>{{ design?.title || $t('ai-platform.dashboard.design.title') }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<ElButton size="small" @click="handleClose">
|
|
{{ $t('common.cancel') }}
|
|
</ElButton>
|
|
<ElButton size="small" type="primary" @click="handleConfirm">
|
|
{{ $t('common.confirmAndContinue') }}
|
|
</ElButton>
|
|
<div class="bg-border mx-1 h-5 w-px"></div>
|
|
<ElButton
|
|
link
|
|
:icon="isFullscreen ? Minimize : Maximize"
|
|
:title="isFullscreen ? '退出全屏' : '全屏'"
|
|
@click="isFullscreen = !isFullscreen"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid min-h-0 flex-1 grid-cols-[320px_minmax(0,1fr)] gap-4 overflow-hidden p-4">
|
|
<div class="space-y-4 overflow-auto rounded-md border bg-muted/20 p-4">
|
|
<div>
|
|
<div class="text-sm font-medium">仪表盘编码</div>
|
|
<div class="mt-1 text-sm text-muted-foreground">
|
|
{{ design?.data?.dashboard_code || '-' }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-medium">设计标题</div>
|
|
<div class="mt-1 text-sm text-muted-foreground">
|
|
{{ design?.data?.design_title || '-' }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-medium">设计建议</div>
|
|
<div class="mt-1 whitespace-pre-wrap text-sm text-muted-foreground">
|
|
{{ design?.data?.design_suggestion || '暂无设计建议' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ElInput
|
|
v-model="configText"
|
|
class="min-h-0"
|
|
resize="none"
|
|
type="textarea"
|
|
placeholder="页面配置 JSON"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.el-textarea),
|
|
:deep(.el-textarea__inner) {
|
|
height: 100%;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
</style>
|