Track AI form editor confirmation panels

2026-06-09 23:47:20 +08:00
parent ce5a34e3b0
commit 07d1f7402b
14 changed files with 2693 additions and 3 deletions
@@ -0,0 +1,137 @@
+<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>