Track AI form editor confirmation panels
This commit is contained in:
@@ -269,6 +269,3 @@ web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel
|
||||
!web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/SystemSummaryNode.vue
|
||||
!web/apps/web-ele/src/views/ai-platform/workflow/editor/panels/SystemSummaryPanel.vue
|
||||
web/apps/web-ele/src/views/wiki/
|
||||
# keep only lightweight form-editor barrel
|
||||
web/apps/web-ele/src/components/form-editor/*
|
||||
!web/apps/web-ele/src/components/form-editor/index.ts
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { Maximize, Minimize } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElButton, ElInput } from 'element-plus';
|
||||
|
||||
export interface AppDesignData {
|
||||
type: 'app_design';
|
||||
title: string;
|
||||
data: {
|
||||
content: string;
|
||||
title: string;
|
||||
};
|
||||
nodeId?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
design?: AppDesignData;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
confirm: [data: Record<string, any>];
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
const isFullscreen = ref(false);
|
||||
const editContent = ref('');
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => emit('update:visible', val),
|
||||
});
|
||||
|
||||
const panelTitle = computed(
|
||||
() => props.design?.data?.title || props.design?.title || '应用设计方案',
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.design,
|
||||
(design) => {
|
||||
editContent.value = design?.data?.content || '';
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function handleConfirm() {
|
||||
emit('confirm', {
|
||||
content: editContent.value,
|
||||
title: panelTitle.value,
|
||||
});
|
||||
}
|
||||
|
||||
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 font-medium">{{ panelTitle }}</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>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="isFullscreen = !isFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
|
||||
<div class="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
|
||||
AI 已生成应用设计方案。确认前可以直接调整正文，确认后将继续后续编排节点。
|
||||
</div>
|
||||
<ElInput
|
||||
v-model="editContent"
|
||||
class="min-h-0 flex-1"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
placeholder="请输入应用设计方案"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-textarea),
|
||||
:deep(.el-textarea__inner) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,536 @@
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 应用设置面板
|
||||
* 用于配置应用设置，包括应用配置、Logo配置、内置主题和布局
|
||||
*/
|
||||
import type { BuiltinThemeType, LayoutType, ThemeModeType } from '@vben/types';
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { Maximize, Minimize } from '@vben/icons';
|
||||
import {
|
||||
Block,
|
||||
BuiltinTheme,
|
||||
Layout,
|
||||
Theme,
|
||||
} from '@vben/layouts/preferences-blocks';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDivider,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElOption,
|
||||
ElScrollbar,
|
||||
ElSelect,
|
||||
ElSwitch,
|
||||
} from 'element-plus';
|
||||
|
||||
import { uploadFile } from '#/api/core/file';
|
||||
import { getFileUrlPublic } from '#/composables/useFileUrl';
|
||||
|
||||
// 应用设置数据接口
|
||||
export interface AppSettingsData {
|
||||
type: 'app_settings';
|
||||
title: string;
|
||||
data: {
|
||||
app?: {
|
||||
defaultHomePath?: string;
|
||||
dynamicTitle?: boolean;
|
||||
enableCheckUpdates?: boolean;
|
||||
enablePreferences?: boolean;
|
||||
layout?: string;
|
||||
locale?: string;
|
||||
name?: string;
|
||||
watermark?: boolean;
|
||||
watermarkContent?: string;
|
||||
};
|
||||
breadcrumb?: Record<string, any>;
|
||||
copyright?: Record<string, any>;
|
||||
footer?: Record<string, any>;
|
||||
header?: Record<string, any>;
|
||||
logo?: {
|
||||
enable?: boolean;
|
||||
fit?: string;
|
||||
source?: string;
|
||||
};
|
||||
navigation?: Record<string, any>;
|
||||
shortcutKeys?: Record<string, any>;
|
||||
sidebar?: Record<string, any>;
|
||||
tabbar?: Record<string, any>;
|
||||
theme?: {
|
||||
builtinType?: string;
|
||||
colorPrimary?: string;
|
||||
mode?: string;
|
||||
radius?: string;
|
||||
semiDarkHeader?: boolean;
|
||||
semiDarkSidebar?: boolean;
|
||||
};
|
||||
transition?: Record<string, any>;
|
||||
widget?: Record<string, any>;
|
||||
};
|
||||
nodeId?: string;
|
||||
layoutOptions?: Array<{ label: string; value: string }>;
|
||||
themeOptions?: Array<{ label: string; value: string }>;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
settings?: AppSettingsData;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
confirm: [data: Record<string, any>];
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
// 全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
};
|
||||
|
||||
// 应用配置
|
||||
const appName = ref('');
|
||||
const appDefaultHomePath = ref('/analytics');
|
||||
const appEnablePreferences = ref(true);
|
||||
const appLayout = ref<LayoutType>('sidebar-nav');
|
||||
|
||||
// Logo配置
|
||||
const logoEnable = ref(true);
|
||||
const logoSource = ref('');
|
||||
const logoFit = ref('contain');
|
||||
const logoDisplayUrl = ref('');
|
||||
|
||||
// 主题配置
|
||||
const themeMode = ref<ThemeModeType>('light');
|
||||
const themeBuiltinType = ref<BuiltinThemeType>('default');
|
||||
const themeColorPrimary = ref('hsl(212 100% 45%)');
|
||||
const themeSemiDarkSidebar = ref(false);
|
||||
const themeSemiDarkHeader = ref(false);
|
||||
|
||||
// 适应方式选项
|
||||
const fitOptions = computed(() => [
|
||||
{ label: $t('ai-platform.appSettings.fitOptions.contain'), value: 'contain' },
|
||||
{ label: $t('ai-platform.appSettings.fitOptions.cover'), value: 'cover' },
|
||||
{ label: $t('ai-platform.appSettings.fitOptions.fill'), value: 'fill' },
|
||||
{ label: $t('ai-platform.appSettings.fitOptions.none'), value: 'none' },
|
||||
{
|
||||
label: $t('ai-platform.appSettings.fitOptions.scale-down'),
|
||||
value: 'scale-down',
|
||||
},
|
||||
]);
|
||||
|
||||
// 面板标题
|
||||
const panelTitle = computed(() => {
|
||||
return props.settings?.title || $t('ai-platform.appSettings.title');
|
||||
});
|
||||
|
||||
// 监听设置数据变化
|
||||
watch(
|
||||
() => props.settings,
|
||||
(newSettings) => {
|
||||
if (newSettings?.data) {
|
||||
const data = newSettings.data;
|
||||
|
||||
// 应用配置
|
||||
appName.value = data.app?.name || '';
|
||||
appDefaultHomePath.value = data.app?.defaultHomePath || '/analytics';
|
||||
appEnablePreferences.value = data.app?.enablePreferences ?? true;
|
||||
appLayout.value = (data.app?.layout || 'sidebar-nav') as LayoutType;
|
||||
|
||||
// Logo配置
|
||||
logoEnable.value = data.logo?.enable ?? true;
|
||||
logoSource.value = data.logo?.source || '';
|
||||
logoFit.value = data.logo?.fit || 'contain';
|
||||
loadLogoDisplayUrl(logoSource.value);
|
||||
|
||||
// 主题配置
|
||||
themeMode.value = (data.theme?.mode || 'light') as ThemeModeType;
|
||||
themeBuiltinType.value = (data.theme?.builtinType ||
|
||||
'default') as BuiltinThemeType;
|
||||
themeColorPrimary.value = data.theme?.colorPrimary || 'hsl(212 100% 45%)';
|
||||
themeSemiDarkSidebar.value = data.theme?.semiDarkSidebar ?? false;
|
||||
themeSemiDarkHeader.value = data.theme?.semiDarkHeader ?? false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 监听logoSource变化，加载显示URL
|
||||
watch(logoSource, (newSource) => {
|
||||
loadLogoDisplayUrl(newSource);
|
||||
});
|
||||
|
||||
// 判断是否为文件ID
|
||||
function isFileId(value: string): boolean {
|
||||
return (
|
||||
/^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i.test(value) ||
|
||||
/^\d+$/.test(value) ||
|
||||
/^[\w-]{10,30}$/.test(value)
|
||||
);
|
||||
}
|
||||
|
||||
// 加载Logo显示URL
|
||||
function loadLogoDisplayUrl(source: string) {
|
||||
if (!source) {
|
||||
logoDisplayUrl.value = '';
|
||||
return;
|
||||
}
|
||||
if (
|
||||
source.startsWith('http://') ||
|
||||
source.startsWith('https://') ||
|
||||
source.startsWith('/') ||
|
||||
source.startsWith('data:')
|
||||
) {
|
||||
logoDisplayUrl.value = source;
|
||||
return;
|
||||
}
|
||||
if (isFileId(source)) {
|
||||
logoDisplayUrl.value = getFileUrlPublic(source);
|
||||
return;
|
||||
}
|
||||
logoDisplayUrl.value = source;
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
const uploadInputRef = ref<HTMLInputElement>();
|
||||
|
||||
function openFileSelector() {
|
||||
uploadInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleFileInputChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const response = await uploadFile(file, {
|
||||
isPublic: true,
|
||||
source: 'avatar',
|
||||
});
|
||||
if (response?.id) {
|
||||
logoSource.value = getFileUrlPublic(String(response.id));
|
||||
}
|
||||
} catch {
|
||||
ElMessage.error($t('ui-config.loadError'));
|
||||
}
|
||||
target.value = '';
|
||||
}
|
||||
|
||||
function clearLogo() {
|
||||
logoSource.value = '';
|
||||
}
|
||||
|
||||
// 构建设置数据
|
||||
function buildSettingsData(): Record<string, any> {
|
||||
return {
|
||||
app: {
|
||||
name: appName.value,
|
||||
defaultHomePath: appDefaultHomePath.value,
|
||||
enablePreferences: appEnablePreferences.value,
|
||||
layout: appLayout.value,
|
||||
},
|
||||
logo: {
|
||||
enable: logoEnable.value,
|
||||
source: logoSource.value,
|
||||
fit: logoFit.value,
|
||||
},
|
||||
theme: {
|
||||
mode: themeMode.value,
|
||||
builtinType: themeBuiltinType.value,
|
||||
colorPrimary: themeColorPrimary.value,
|
||||
semiDarkSidebar: themeSemiDarkSidebar.value,
|
||||
semiDarkHeader: themeSemiDarkHeader.value,
|
||||
},
|
||||
// 保留原有的其他配置
|
||||
sidebar: props.settings?.data?.sidebar,
|
||||
header: props.settings?.data?.header,
|
||||
footer: props.settings?.data?.footer,
|
||||
copyright: props.settings?.data?.copyright,
|
||||
navigation: props.settings?.data?.navigation,
|
||||
tabbar: props.settings?.data?.tabbar,
|
||||
breadcrumb: props.settings?.data?.breadcrumb,
|
||||
transition: props.settings?.data?.transition,
|
||||
widget: props.settings?.data?.widget,
|
||||
shortcutKeys: props.settings?.data?.shortcutKeys,
|
||||
};
|
||||
}
|
||||
|
||||
// 确认并继续
|
||||
function handleConfirm() {
|
||||
emit('confirm', buildSettingsData());
|
||||
}
|
||||
|
||||
// 关闭
|
||||
function handleClose() {
|
||||
emit('update:visible', false);
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
class="app-settings-panel 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 items-center justify-between border-b px-4 py-3"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ panelTitle }}
|
||||
</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>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<ElScrollbar class="flex-1">
|
||||
<div class="grid grid-cols-2 gap-6 p-6">
|
||||
<!-- 左列：应用配置 + Logo配置 -->
|
||||
<div class="space-y-6">
|
||||
<!-- 应用配置 -->
|
||||
<div class="config-section">
|
||||
<h4 class="mb-4 text-sm font-semibold">
|
||||
{{ $t('ai-platform.appSettings.appConfig') }}
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<Block :title="$t('ai-platform.appSettings.appName')">
|
||||
<ElInput
|
||||
v-model="appName"
|
||||
:placeholder="
|
||||
$t('ai-platform.appSettings.appNamePlaceholder')
|
||||
"
|
||||
clearable
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block :title="$t('ai-platform.appSettings.defaultHomePath')">
|
||||
<ElInput
|
||||
v-model="appDefaultHomePath"
|
||||
:placeholder="
|
||||
$t('ai-platform.appSettings.defaultHomePathPlaceholder')
|
||||
"
|
||||
clearable
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block :title="$t('ai-platform.appSettings.enablePreferences')">
|
||||
<ElSwitch v-model="appEnablePreferences" />
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ElDivider />
|
||||
|
||||
<!-- Logo配置 -->
|
||||
<div class="config-section">
|
||||
<h4 class="mb-4 text-sm font-semibold">
|
||||
{{ $t('ai-platform.appSettings.logoConfig') }}
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<Block :title="$t('ai-platform.appSettings.logoEnable')">
|
||||
<ElSwitch v-model="logoEnable" />
|
||||
</Block>
|
||||
|
||||
<template v-if="logoEnable">
|
||||
<Block :title="$t('ai-platform.appSettings.logoSource')">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Logo 预览和上传 -->
|
||||
<div class="logo-preview-container flex">
|
||||
<div class="flex items-center gap-4">
|
||||
<div>
|
||||
<div
|
||||
v-if="logoDisplayUrl"
|
||||
class="logo-preview"
|
||||
@click="openFileSelector"
|
||||
>
|
||||
<img
|
||||
:src="logoDisplayUrl"
|
||||
alt="Logo"
|
||||
class="logo-image"
|
||||
/>
|
||||
<div class="logo-overlay">
|
||||
<span class="text-sm text-white">{{
|
||||
$t('common.replace')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="logo-placeholder"
|
||||
@click="openFileSelector"
|
||||
>
|
||||
<span class="text-muted-foreground text-sm">{{
|
||||
$t(
|
||||
'ai-platform.appSettings.logoSourcePlaceholder',
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ElButton
|
||||
v-if="logoDisplayUrl"
|
||||
size="small"
|
||||
@click="clearLogo"
|
||||
>
|
||||
{{ $t('common.clear') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="uploadInputRef"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="handleFileInputChange"
|
||||
/>
|
||||
<ElInput
|
||||
v-model="logoSource"
|
||||
:placeholder="
|
||||
$t('ai-platform.appSettings.logoSourcePlaceholder')
|
||||
"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<Block :title="$t('ai-platform.appSettings.logoFit')">
|
||||
<ElSelect v-model="logoFit" class="w-full">
|
||||
<ElOption
|
||||
v-for="item in fitOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</ElSelect>
|
||||
</Block>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右列：布局配置 + 主题配置 -->
|
||||
<div class="space-y-6">
|
||||
<!-- 布局配置 -->
|
||||
<div class="config-section">
|
||||
<h4 class="mb-4 text-sm font-semibold">
|
||||
{{ $t('ai-platform.appSettings.layoutConfig') }}
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<Block :title="$t('ai-platform.appSettings.layout')">
|
||||
<Layout v-model="appLayout" />
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ElDivider />
|
||||
|
||||
<!-- 主题配置 -->
|
||||
<div class="config-section">
|
||||
<h4 class="mb-4 text-sm font-semibold">
|
||||
{{ $t('ai-platform.appSettings.themeConfig') }}
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<Block :title="$t('ai-platform.appSettings.themeMode')">
|
||||
<Theme
|
||||
v-model="themeMode"
|
||||
v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
|
||||
v-model:theme-semi-dark-header="themeSemiDarkHeader"
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block :title="$t('ai-platform.appSettings.builtinTheme')">
|
||||
<BuiltinTheme
|
||||
v-model="themeBuiltinType"
|
||||
v-model:theme-color-primary="themeColorPrimary"
|
||||
:is-dark="themeMode === 'dark'"
|
||||
/>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ElScrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-settings-panel {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.logo-preview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo-preview {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.logo-preview:hover .logo-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 2px dashed hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.logo-placeholder:hover {
|
||||
border-color: hsl(var(--primary));
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 表单基础信息编辑组件
|
||||
* 可用于：表单管理器、工作流设计预览编辑
|
||||
*/
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
} from 'element-plus';
|
||||
|
||||
export interface BasicFormData {
|
||||
name: string;
|
||||
code: string;
|
||||
form_type: 'normal' | 'workflow';
|
||||
sort: number;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: BasicFormData;
|
||||
disabled?: boolean;
|
||||
showTitle?: boolean;
|
||||
labelWidth?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
showTitle: true,
|
||||
labelWidth: '100px',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: BasicFormData];
|
||||
}>();
|
||||
|
||||
const formData = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
// 更新单个字段
|
||||
function updateField<K extends keyof BasicFormData>(key: K, value: BasicFormData[K]) {
|
||||
emit('update:modelValue', { ...props.modelValue, [key]: value });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="basic-info-editor">
|
||||
<h3 v-if="showTitle" class="mb-6 text-center text-lg font-medium">
|
||||
{{ $t('form-manager.editor.steps.basic') }}
|
||||
</h3>
|
||||
<ElForm
|
||||
:model="formData"
|
||||
:label-width="labelWidth"
|
||||
label-position="right"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<ElFormItem :label="$t('form-manager.name')" required>
|
||||
<ElInput
|
||||
:model-value="formData.name"
|
||||
:placeholder="$t('form-manager.placeholder.name')"
|
||||
clearable
|
||||
@update:model-value="updateField('name', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('form-manager.code')" required>
|
||||
<ElInput
|
||||
:model-value="formData.code"
|
||||
:placeholder="$t('form-manager.placeholder.code')"
|
||||
clearable
|
||||
@update:model-value="updateField('code', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('form-manager.type')" required>
|
||||
<ElSelect
|
||||
:model-value="formData.form_type"
|
||||
:placeholder="$t('form-manager.placeholder.type')"
|
||||
class="w-full"
|
||||
@update:model-value="updateField('form_type', $event)"
|
||||
>
|
||||
<ElOption :label="$t('form-manager.typeMap.normal')" value="normal" />
|
||||
<ElOption :label="$t('form-manager.typeMap.workflow')" value="workflow" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('common.sort')">
|
||||
<ElInput
|
||||
:model-value="formData.sort"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
@update:model-value="updateField('sort', Number($event))"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('form-manager.description')">
|
||||
<ElInput
|
||||
:model-value="formData.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
:placeholder="$t('form-manager.editor.placeholder.remark')"
|
||||
@update:model-value="updateField('description', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.basic-info-editor {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 仪表盘基础信息确认面板
|
||||
* 复用 PageBasicInfoEditor 公共组件
|
||||
*/
|
||||
import type { PageBasicInfo } from './PageBasicInfoEditor.vue';
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { Maximize, Minimize } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElButton } from 'element-plus';
|
||||
|
||||
import PageBasicInfoEditor from './PageBasicInfoEditor.vue';
|
||||
|
||||
export interface DashboardBasicInfoData {
|
||||
type: string;
|
||||
title: string;
|
||||
data: {
|
||||
category: string;
|
||||
code: string;
|
||||
description: string;
|
||||
name: string;
|
||||
sort: number;
|
||||
};
|
||||
nodeId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
basicInfo?: DashboardBasicInfoData;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
confirm: [data: Record<string, any>];
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
// 全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
};
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => emit('update:visible', val),
|
||||
});
|
||||
|
||||
const form = ref<PageBasicInfo>({
|
||||
name: '',
|
||||
code: '',
|
||||
category: 'dashboard',
|
||||
description: '',
|
||||
sort: 0,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.basicInfo,
|
||||
(info) => {
|
||||
if (info?.data) {
|
||||
form.value = {
|
||||
name: info.data.name || '',
|
||||
code: info.data.code || '',
|
||||
category: info.data.category || 'dashboard',
|
||||
description: info.data.description || '',
|
||||
sort: info.data.sort || 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', { ...form.value });
|
||||
};
|
||||
|
||||
const 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 items-center justify-between border-b px-4 py-3"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ basicInfo?.title || $t('ai-platform.dashboard.basicInfo.title') }}
|
||||
</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>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<PageBasicInfoEditor v-model="form" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 仪表盘发布确认面板
|
||||
* 复用 PagePublishInfoEditor 公共组件
|
||||
*/
|
||||
import type { PagePublishInfo } from './PagePublishInfoEditor.vue';
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { Maximize, Minimize } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElButton } from 'element-plus';
|
||||
|
||||
import PagePublishInfoEditor from './PagePublishInfoEditor.vue';
|
||||
|
||||
export interface DashboardPublishData {
|
||||
type: string;
|
||||
title: string;
|
||||
data: {
|
||||
application_id?: string;
|
||||
dashboard_code: string;
|
||||
dashboard_id: string;
|
||||
menu_icon: string;
|
||||
menu_name: string;
|
||||
menu_order: number;
|
||||
menu_parent_id?: string;
|
||||
};
|
||||
nodeId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
publishData?: DashboardPublishData;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
confirm: [data: Record<string, any>];
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
// 全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
};
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => emit('update:visible', val),
|
||||
});
|
||||
|
||||
const form = ref<PagePublishInfo>({
|
||||
menu_name: '',
|
||||
menu_parent_id: undefined,
|
||||
menu_icon: 'lucide:layout-dashboard',
|
||||
menu_order: 0,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.publishData,
|
||||
(data) => {
|
||||
if (data?.data) {
|
||||
form.value = {
|
||||
menu_name: data.data.menu_name || '',
|
||||
menu_parent_id: data.data.menu_parent_id || undefined,
|
||||
menu_icon: data.data.menu_icon || 'lucide:layout-dashboard',
|
||||
menu_order: data.data.menu_order || 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
const confirmData = {
|
||||
dashboard_id: props.publishData?.data.dashboard_id,
|
||||
dashboard_code: props.publishData?.data.dashboard_code,
|
||||
menu_name: form.value.menu_name,
|
||||
menu_parent_id: form.value.menu_parent_id || '',
|
||||
menu_icon: form.value.menu_icon,
|
||||
menu_order: form.value.menu_order,
|
||||
application_id: props.publishData?.data.application_id || '',
|
||||
};
|
||||
console.log('[DashboardPublishConfirmPanel] 确认数据:', confirmData);
|
||||
emit('confirm', confirmData);
|
||||
};
|
||||
|
||||
const 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 items-center justify-between border-b px-4 py-3"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ publishData?.title || $t('ai-platform.dashboard.publish.title') }}
|
||||
</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>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<PagePublishInfoEditor
|
||||
v-model="form"
|
||||
:page-code="publishData?.data.dashboard_code || ''"
|
||||
:show-route-info="true"
|
||||
route-prefix="/page-render/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,288 @@
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 设计编辑面板
|
||||
* 用于工作流中每步设计完成后的编辑
|
||||
* 使用 FormEditorContent 公共组件，根据当前步骤显示对应内容
|
||||
*/
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { Maximize, Minimize } from '@vben/icons';
|
||||
|
||||
import { ElButton } from 'element-plus';
|
||||
|
||||
import FormEditorContent from './FormEditorContent.vue';
|
||||
|
||||
// 设计类型
|
||||
export type DesignType = 'form_basic_info' | 'database_design' | 'form_ui_design' | 'list_config' | 'form_publish' | 'dashboard_basic_info' | 'dashboard_design' | 'dashboard_publish';
|
||||
|
||||
// 设计数据
|
||||
export interface DesignData {
|
||||
type: DesignType;
|
||||
title: string;
|
||||
data: Record<string, any>;
|
||||
nodeId: string;
|
||||
form_fields?: any[]; // 表单字段列表（用于列表设计）
|
||||
table_configs?: any[]; // 数据表配置（用于表单设计）
|
||||
}
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
design?: DesignData;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:visible': [value: boolean];
|
||||
'save': [data: Record<string, any>];
|
||||
'confirm': [data: Record<string, any>];
|
||||
'close': [];
|
||||
}>();
|
||||
|
||||
// 编辑器组件引用
|
||||
const editorRef = ref<InstanceType<typeof FormEditorContent>>();
|
||||
|
||||
// 根据设计类型映射到步骤索引
|
||||
const stepMap: Record<DesignType, number> = {
|
||||
'form_basic_info': 0,
|
||||
'database_design': 1,
|
||||
'form_ui_design': 2,
|
||||
'list_config': 3,
|
||||
'form_publish': 4,
|
||||
'dashboard_basic_info': 0,
|
||||
'dashboard_design': 0,
|
||||
'dashboard_publish': 0,
|
||||
};
|
||||
|
||||
// 当前步骤
|
||||
const currentStep = ref(0);
|
||||
|
||||
// 面板标题
|
||||
const panelTitle = computed(() => {
|
||||
if (!props.design) return '';
|
||||
return props.design.title;
|
||||
});
|
||||
|
||||
// 全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
};
|
||||
|
||||
// 监听设计数据变化，设置当前步骤和初始化数据
|
||||
watch(
|
||||
() => props.design,
|
||||
(newDesign) => {
|
||||
if (!newDesign) return;
|
||||
|
||||
// 根据设计类型设置当前步骤
|
||||
currentStep.value = stepMap[newDesign.type] ?? 0;
|
||||
|
||||
// 初始化编辑器数据
|
||||
if (editorRef.value) {
|
||||
initEditorData(newDesign);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听编辑器引用变化，初始化数据
|
||||
watch(
|
||||
() => editorRef.value,
|
||||
(editor) => {
|
||||
if (editor && props.design) {
|
||||
initEditorData(props.design);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 初始化编辑器数据
|
||||
function initEditorData(design: DesignData) {
|
||||
if (!editorRef.value) return;
|
||||
|
||||
switch (design.type) {
|
||||
case 'form_basic_info': {
|
||||
const data = design.data || {};
|
||||
editorRef.value.setData({
|
||||
basicForm: {
|
||||
name: data.name || '',
|
||||
code: data.code || '',
|
||||
form_type: data.form_type || 'normal',
|
||||
sort: data.sort || 0,
|
||||
description: data.description || '',
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'database_design': {
|
||||
const tableData = design.data?.table || design.data || {};
|
||||
// 优先从 meta 中读取 schema，兼容旧数据从顶层读取
|
||||
const metaData = tableData.meta || {};
|
||||
editorRef.value.setData({
|
||||
tableConfigs: [{
|
||||
id: 'main-table',
|
||||
type: 'main',
|
||||
tableName: tableData.tableName || '',
|
||||
alias: tableData.alias || tableData.tableName || '',
|
||||
fields: tableData.fields || [],
|
||||
meta: {
|
||||
schema: metaData.schema || tableData.schema || '',
|
||||
schemaRaw: metaData.schemaRaw || tableData.schemaRaw || '',
|
||||
database: metaData.database || tableData.database || '',
|
||||
},
|
||||
}],
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'form_ui_design': {
|
||||
const formConfig = design.data || {};
|
||||
// 从 design 中获取 table_configs（后端在 waiting_config 中传递）
|
||||
const tableConfigs = design.table_configs || design.data?.table_configs || [];
|
||||
editorRef.value.setData({
|
||||
tableConfigs: tableConfigs,
|
||||
formConfig: {
|
||||
items: formConfig.items || [],
|
||||
labelWidth: formConfig.labelWidth || 120,
|
||||
labelPosition: formConfig.labelPosition || 'right',
|
||||
size: formConfig.size || 'default',
|
||||
formPadding: formConfig.formPadding || 20,
|
||||
formMargin: formConfig.formMargin || 0,
|
||||
itemSpacing: formConfig.itemSpacing || 18,
|
||||
formWidth: formConfig.formWidth || '100%',
|
||||
formMaxWidth: formConfig.formMaxWidth || 0,
|
||||
formBackground: formConfig.formBackground || false,
|
||||
formBorder: formConfig.formBorder || false,
|
||||
formBorderRadius: formConfig.formBorderRadius || 4,
|
||||
formShadow: formConfig.formShadow || false,
|
||||
disabled: formConfig.disabled || false,
|
||||
tableConfigs: tableConfigs,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'list_config': {
|
||||
// 从 design 中获取 form_fields（后端在 waiting_config 中传递）
|
||||
const formFields = design.form_fields || design.data?.form_fields || [];
|
||||
editorRef.value.setData({
|
||||
listConfig: design.data || {},
|
||||
formFields: formFields,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'form_publish': {
|
||||
const publishData = design.data || {};
|
||||
editorRef.value.setData({
|
||||
publishData: {
|
||||
menu_name: publishData.menu_name || '',
|
||||
menu_parent_id: publishData.menu_parent_id,
|
||||
menu_icon: publishData.menu_icon || 'lucide:file-text',
|
||||
menu_order: publishData.menu_order ?? 1,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前编辑的数据
|
||||
function getCurrentData(): Record<string, any> {
|
||||
if (!editorRef.value) return {};
|
||||
|
||||
const data = editorRef.value.getData();
|
||||
const designType = props.design?.type;
|
||||
|
||||
switch (designType) {
|
||||
case 'form_basic_info':
|
||||
return { ...data.basicForm };
|
||||
case 'database_design':
|
||||
return {
|
||||
type: data.tableConfigs[0]?.type || 'main', // 添加 type 字段，默认为 main
|
||||
table: data.tableConfigs[0] ? {
|
||||
tableName: data.tableConfigs[0].tableName,
|
||||
alias: data.tableConfigs[0].alias,
|
||||
fields: data.tableConfigs[0].fields,
|
||||
meta: {
|
||||
schema: data.tableConfigs[0].meta?.schema || '',
|
||||
schemaRaw: data.tableConfigs[0].meta?.schemaRaw || '',
|
||||
database: data.tableConfigs[0].meta?.database || '',
|
||||
},
|
||||
} : {},
|
||||
dbConfig: props.design?.data?.dbConfig || 'default', // 保留原有的 dbConfig
|
||||
};
|
||||
case 'form_ui_design':
|
||||
return {
|
||||
items: data.formConfig.items,
|
||||
labelWidth: data.formConfig.labelWidth,
|
||||
labelPosition: data.formConfig.labelPosition,
|
||||
};
|
||||
case 'list_config':
|
||||
return { ...data.listConfig };
|
||||
case 'form_publish':
|
||||
return { ...data.publishData };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 确认并继续
|
||||
function handleConfirm() {
|
||||
const data = getCurrentData();
|
||||
emit('confirm', data);
|
||||
}
|
||||
|
||||
// 关闭
|
||||
function handleClose() {
|
||||
emit('update:visible', false);
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="visible"
|
||||
:class="[
|
||||
'border-border bg-card flex flex-col rounded-lg',
|
||||
isFullscreen ? 'fixed inset-0 z-50 ml-0' : 'ml-3 h-full w-full'
|
||||
]"
|
||||
>
|
||||
<!-- 头部 -->
|
||||
<div
|
||||
class="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ panelTitle }}
|
||||
</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>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域：使用 FormEditorContent 公共组件 -->
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<FormEditorContent
|
||||
ref="editorRef"
|
||||
:step="currentStep"
|
||||
:show-steps="true"
|
||||
:show-actions="false"
|
||||
:workflow-mode="true"
|
||||
@update:step="currentStep = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.design-editor-panel {
|
||||
/* box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,329 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElMessage,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
ElSteps,
|
||||
ElStep,
|
||||
} from 'element-plus';
|
||||
|
||||
import PublishInfoEditor, { type FormPublishInput } from './PublishInfoEditor.vue';
|
||||
|
||||
export interface BasicFormData {
|
||||
code: string;
|
||||
description: string;
|
||||
form_type: 'normal' | 'workflow';
|
||||
name: string;
|
||||
sort: number;
|
||||
}
|
||||
|
||||
export interface TableConfig {
|
||||
alias?: string;
|
||||
fields?: any[];
|
||||
id?: string;
|
||||
meta?: Record<string, any>;
|
||||
tableName?: string;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export interface FormEditorData {
|
||||
basicForm: BasicFormData;
|
||||
formConfig: {
|
||||
disabled: boolean;
|
||||
formBackground: boolean;
|
||||
formBorder: boolean;
|
||||
formBorderRadius: number;
|
||||
formMargin: number;
|
||||
formMaxWidth: number;
|
||||
formPadding: number;
|
||||
formShadow: boolean;
|
||||
formWidth: string;
|
||||
items: any[];
|
||||
itemSpacing: number;
|
||||
labelPosition: 'left' | 'right' | 'top';
|
||||
labelWidth: number;
|
||||
lifecycleHooks?: any[];
|
||||
size: 'default' | 'large' | 'small';
|
||||
tableConfigs: TableConfig[];
|
||||
};
|
||||
formFields: any[];
|
||||
listConfig: Record<string, any>;
|
||||
publishData?: FormPublishInput;
|
||||
tableConfigs: TableConfig[];
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
initialBasicForm?: BasicFormData;
|
||||
initialListDesign?: Record<string, any>;
|
||||
initialTableConfigs?: TableConfig[];
|
||||
readonly?: boolean;
|
||||
showActions?: boolean;
|
||||
showSteps?: boolean;
|
||||
step?: number;
|
||||
workflowMode?: boolean;
|
||||
}>(),
|
||||
{
|
||||
initialBasicForm: undefined,
|
||||
initialListDesign: undefined,
|
||||
initialTableConfigs: undefined,
|
||||
readonly: false,
|
||||
showActions: true,
|
||||
showSteps: true,
|
||||
step: undefined,
|
||||
workflowMode: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [];
|
||||
save: [data: FormEditorData];
|
||||
'step-change': [step: number];
|
||||
'update:step': [step: number];
|
||||
}>();
|
||||
|
||||
const internalStep = ref(0);
|
||||
const currentStep = computed({
|
||||
get: () => (props.step === undefined ? internalStep.value : props.step),
|
||||
set: (val) => {
|
||||
if (props.step === undefined) internalStep.value = val;
|
||||
else emit('update:step', val);
|
||||
emit('step-change', val);
|
||||
},
|
||||
});
|
||||
|
||||
const basicForm = ref<BasicFormData>({
|
||||
code: '',
|
||||
description: '',
|
||||
form_type: 'normal',
|
||||
name: '',
|
||||
sort: 0,
|
||||
});
|
||||
const tableConfigs = ref<TableConfig[]>([]);
|
||||
const formConfigText = ref('{}');
|
||||
const listConfigText = ref('{}');
|
||||
const formFields = ref<any[]>([]);
|
||||
const publishData = ref<FormPublishInput>({
|
||||
menu_icon: 'lucide:file-text',
|
||||
menu_name: '',
|
||||
menu_order: 0,
|
||||
menu_parent_id: undefined,
|
||||
});
|
||||
|
||||
const steps = computed(() => {
|
||||
const base = [
|
||||
{ title: $t('form-manager.editor.steps.basic') || '基础信息' },
|
||||
{ title: $t('form-manager.editor.steps.database') || '数据表' },
|
||||
{ title: $t('form-manager.editor.steps.form') || '表单设计' },
|
||||
{ title: $t('form-manager.editor.steps.list') || '列表设计' },
|
||||
];
|
||||
if (props.workflowMode) {
|
||||
base.push({ title: $t('form-manager.editor.steps.publish') || '发布配置' });
|
||||
}
|
||||
return base;
|
||||
});
|
||||
|
||||
const canGoPrev = computed(() => currentStep.value > 0);
|
||||
const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
|
||||
|
||||
watch(
|
||||
() => props.initialBasicForm,
|
||||
(val) => {
|
||||
if (val) basicForm.value = { ...val };
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.initialTableConfigs,
|
||||
(val) => {
|
||||
if (val) tableConfigs.value = [...val];
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.initialListDesign,
|
||||
(val) => {
|
||||
if (val) listConfigText.value = JSON.stringify(val, null, 2);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => basicForm.value.name,
|
||||
(name) => {
|
||||
if (props.workflowMode && name && !publishData.value.menu_name) {
|
||||
publishData.value.menu_name = name;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function parseJson(text: string, fallback: any) {
|
||||
if (!text.trim()) return fallback;
|
||||
return JSON.parse(text);
|
||||
}
|
||||
|
||||
function buildDefaultFormConfig(items: any[] = []) {
|
||||
return {
|
||||
disabled: false,
|
||||
formBackground: false,
|
||||
formBorder: false,
|
||||
formBorderRadius: 4,
|
||||
formMargin: 0,
|
||||
formMaxWidth: 0,
|
||||
formPadding: 20,
|
||||
formShadow: false,
|
||||
formWidth: '100%',
|
||||
items,
|
||||
itemSpacing: 18,
|
||||
labelPosition: 'right' as const,
|
||||
labelWidth: 120,
|
||||
size: 'default' as const,
|
||||
tableConfigs: tableConfigs.value,
|
||||
};
|
||||
}
|
||||
|
||||
function getData(): FormEditorData {
|
||||
const formConfig = {
|
||||
...buildDefaultFormConfig(),
|
||||
...parseJson(formConfigText.value, {}),
|
||||
};
|
||||
const listConfig = parseJson(listConfigText.value, {});
|
||||
return {
|
||||
basicForm: { ...basicForm.value },
|
||||
formConfig,
|
||||
formFields: [...formFields.value],
|
||||
listConfig,
|
||||
publishData: props.workflowMode ? { ...publishData.value } : undefined,
|
||||
tableConfigs: [...tableConfigs.value],
|
||||
};
|
||||
}
|
||||
|
||||
function setData(data: Partial<FormEditorData>) {
|
||||
if (data.basicForm) basicForm.value = { ...data.basicForm };
|
||||
if (data.tableConfigs) tableConfigs.value = [...data.tableConfigs];
|
||||
if (data.formConfig) {
|
||||
formConfigText.value = JSON.stringify(data.formConfig, null, 2);
|
||||
formFields.value = data.formFields || data.formConfig.items || [];
|
||||
}
|
||||
if (data.listConfig) listConfigText.value = JSON.stringify(data.listConfig, null, 2);
|
||||
if (data.formFields) formFields.value = [...data.formFields];
|
||||
if (data.publishData) publishData.value = { ...publishData.value, ...data.publishData };
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
if (canGoPrev.value) currentStep.value -= 1;
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (!isLastStep.value) currentStep.value += 1;
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
try {
|
||||
emit('save', getData());
|
||||
} catch {
|
||||
ElMessage.error('JSON 配置格式不正确');
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ getData, setData });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<div v-if="showSteps" class="border-border border-b px-6 py-4">
|
||||
<ElSteps :active="currentStep" align-center finish-status="success">
|
||||
<ElStep v-for="item in steps" :key="item.title" :title="item.title" />
|
||||
</ElSteps>
|
||||
</div>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-auto p-6">
|
||||
<ElForm v-if="currentStep === 0" :model="basicForm" label-width="100px">
|
||||
<ElFormItem label="名称" required>
|
||||
<ElInput v-model="basicForm.name" :disabled="readonly" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="编码" required>
|
||||
<ElInput v-model="basicForm.code" :disabled="readonly" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="类型">
|
||||
<ElSelect v-model="basicForm.form_type" :disabled="readonly" class="w-full">
|
||||
<ElOption label="普通表单" value="normal" />
|
||||
<ElOption label="流程表单" value="workflow" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序">
|
||||
<ElInputNumber v-model="basicForm.sort" :disabled="readonly" class="w-full" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="描述">
|
||||
<ElInput v-model="basicForm.description" :disabled="readonly" type="textarea" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div v-else-if="currentStep === 1" class="space-y-3">
|
||||
<div class="text-sm text-muted-foreground">
|
||||
轻量版保留 AI 生成的数据表结构确认，不加载在线开发表设计器。
|
||||
</div>
|
||||
<ElInput
|
||||
:model-value="JSON.stringify(tableConfigs, null, 2)"
|
||||
readonly
|
||||
resize="none"
|
||||
type="textarea"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 2" class="h-full min-h-[420px]">
|
||||
<ElInput
|
||||
v-model="formConfigText"
|
||||
:readonly="readonly"
|
||||
class="h-full"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
placeholder="表单配置 JSON"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="currentStep === 3" class="h-full min-h-[420px]">
|
||||
<ElInput
|
||||
v-model="listConfigText"
|
||||
:readonly="readonly"
|
||||
class="h-full"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
placeholder="列表配置 JSON"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PublishInfoEditor
|
||||
v-else
|
||||
v-model="publishData"
|
||||
:form-code="basicForm.code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showActions" class="border-border flex justify-end gap-2 border-t px-6 py-4">
|
||||
<ElButton @click="emit('cancel')">{{ $t('common.cancel') }}</ElButton>
|
||||
<ElButton :disabled="!canGoPrev" @click="handlePrev">上一步</ElButton>
|
||||
<ElButton v-if="!isLastStep" type="primary" @click="handleNext">下一步</ElButton>
|
||||
<ElButton v-else type="primary" @click="handleSave">{{ $t('common.save') }}</ElButton>
|
||||
</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>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 页面基础信息编辑器
|
||||
* 供 page-manager 和工作流节点共用
|
||||
*/
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
} from 'element-plus';
|
||||
|
||||
export interface PageBasicInfo {
|
||||
name: string;
|
||||
code: string;
|
||||
category: string;
|
||||
description: string;
|
||||
sort: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: PageBasicInfo;
|
||||
isEditMode?: boolean;
|
||||
showTitle?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isEditMode: false,
|
||||
showTitle: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: PageBasicInfo];
|
||||
}>();
|
||||
|
||||
// 更新表单数据
|
||||
function updateFormData(key: keyof PageBasicInfo, value: any) {
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
[key]: value,
|
||||
});
|
||||
}
|
||||
|
||||
// 分类选项
|
||||
const categoryOptions = [
|
||||
{ label: $t('page-manager.categoryMap.dashboard'), value: 'dashboard' },
|
||||
{ label: $t('page-manager.categoryMap.portal'), value: 'portal' },
|
||||
{ label: $t('page-manager.categoryMap.databoard'), value: 'databoard' },
|
||||
{ label: $t('page-manager.categoryMap.other'), value: 'other' },
|
||||
];
|
||||
|
||||
// 监听 modelValue 变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 v-if="showTitle" class="mb-6 text-center text-lg font-medium">
|
||||
{{ $t('page-manager.editor.steps.basic') }}
|
||||
</h3>
|
||||
<ElForm :model="modelValue" label-width="100px" label-position="right">
|
||||
<ElFormItem :label="$t('page-manager.name')" required>
|
||||
<ElInput
|
||||
:model-value="modelValue.name"
|
||||
:placeholder="$t('page-manager.placeholder.name')"
|
||||
clearable
|
||||
@update:model-value="updateFormData('name', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.code')" required>
|
||||
<ElInput
|
||||
:model-value="modelValue.code"
|
||||
:placeholder="$t('page-manager.placeholder.code')"
|
||||
clearable
|
||||
:disabled="isEditMode"
|
||||
@update:model-value="updateFormData('code', $event)"
|
||||
/>
|
||||
<template #error>
|
||||
<div
|
||||
v-if="
|
||||
modelValue.code &&
|
||||
!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(modelValue.code)
|
||||
"
|
||||
class="el-form-item__error"
|
||||
>
|
||||
{{ $t('page-manager.codeFormatError') }}
|
||||
</div>
|
||||
</template>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.category')">
|
||||
<ElSelect
|
||||
:model-value="modelValue.category"
|
||||
:placeholder="$t('page-manager.placeholder.category')"
|
||||
class="w-full"
|
||||
clearable
|
||||
@update:model-value="updateFormData('category', $event)"
|
||||
>
|
||||
<ElOption
|
||||
v-for="opt in categoryOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('common.sort')">
|
||||
<ElInputNumber
|
||||
:model-value="modelValue.sort"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="w-full"
|
||||
@update:model-value="updateFormData('sort', $event ?? 0)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.description')">
|
||||
<ElInput
|
||||
:model-value="modelValue.description"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
:placeholder="$t('page-manager.placeholder.description')"
|
||||
@update:model-value="updateFormData('description', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PageBasicInfo } from './PageBasicInfoEditor.vue';
|
||||
import type { PagePublishInfo } from './PagePublishInfoEditor.vue';
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElButton, ElInput, ElMessage, ElStep, ElSteps } from 'element-plus';
|
||||
|
||||
import PageBasicInfoEditor from './PageBasicInfoEditor.vue';
|
||||
import PagePublishInfoEditor from './PagePublishInfoEditor.vue';
|
||||
|
||||
export interface PageEditorData {
|
||||
basicForm: PageBasicInfo;
|
||||
pageConfig: Record<string, any>;
|
||||
publishData?: PagePublishInfo;
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
initialBasicForm?: PageBasicInfo;
|
||||
initialPageConfig?: Record<string, any>;
|
||||
initialPublishData?: PagePublishInfo;
|
||||
isEditMode?: boolean;
|
||||
readonly?: boolean;
|
||||
showActions?: boolean;
|
||||
showSteps?: boolean;
|
||||
step?: number;
|
||||
workflowMode?: boolean;
|
||||
}>(),
|
||||
{
|
||||
initialBasicForm: undefined,
|
||||
initialPageConfig: undefined,
|
||||
initialPublishData: undefined,
|
||||
isEditMode: false,
|
||||
readonly: false,
|
||||
showActions: true,
|
||||
showSteps: true,
|
||||
step: undefined,
|
||||
workflowMode: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [];
|
||||
save: [data: PageEditorData];
|
||||
'step-change': [step: number];
|
||||
'update:step': [step: number];
|
||||
}>();
|
||||
|
||||
const internalStep = ref(0);
|
||||
const currentStep = computed({
|
||||
get: () => (props.step === undefined ? internalStep.value : props.step),
|
||||
set: (val) => {
|
||||
if (props.step === undefined) internalStep.value = val;
|
||||
else emit('update:step', val);
|
||||
emit('step-change', val);
|
||||
},
|
||||
});
|
||||
|
||||
const basicForm = ref<PageBasicInfo>({
|
||||
category: 'dashboard',
|
||||
code: '',
|
||||
description: '',
|
||||
name: '',
|
||||
sort: 0,
|
||||
});
|
||||
|
||||
const pageConfigText = ref('{}');
|
||||
const publishData = ref<PagePublishInfo>({
|
||||
menu_icon: 'lucide:layout-dashboard',
|
||||
menu_name: '',
|
||||
menu_order: 0,
|
||||
menu_parent_id: undefined,
|
||||
});
|
||||
|
||||
const steps = computed(() => {
|
||||
const base = [
|
||||
{ title: $t('page-manager.editor.steps.basic') || '基础信息' },
|
||||
{ title: $t('page-manager.editor.steps.design') || '页面设计' },
|
||||
];
|
||||
if (props.workflowMode) {
|
||||
base.push({ title: $t('page-manager.editor.steps.publish') || '发布配置' });
|
||||
}
|
||||
return base;
|
||||
});
|
||||
|
||||
const canGoPrev = computed(() => currentStep.value > 0);
|
||||
const isLastStep = computed(() => currentStep.value === steps.value.length - 1);
|
||||
|
||||
watch(
|
||||
() => props.initialBasicForm,
|
||||
(val) => {
|
||||
if (val) basicForm.value = { ...val };
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.initialPageConfig,
|
||||
(val) => {
|
||||
if (val) pageConfigText.value = JSON.stringify(val, null, 2);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.initialPublishData,
|
||||
(val) => {
|
||||
if (val) publishData.value = { ...val };
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => basicForm.value.name,
|
||||
(name) => {
|
||||
if (props.workflowMode && name && !publishData.value.menu_name) {
|
||||
publishData.value.menu_name = name;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function getData(): PageEditorData {
|
||||
const pageConfig = pageConfigText.value.trim()
|
||||
? JSON.parse(pageConfigText.value)
|
||||
: {};
|
||||
return {
|
||||
basicForm: { ...basicForm.value },
|
||||
pageConfig,
|
||||
publishData: props.workflowMode ? { ...publishData.value } : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function setData(data: Partial<PageEditorData>) {
|
||||
if (data.basicForm) basicForm.value = { ...data.basicForm };
|
||||
if (data.pageConfig) pageConfigText.value = JSON.stringify(data.pageConfig, null, 2);
|
||||
if (data.publishData) publishData.value = { ...publishData.value, ...data.publishData };
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
if (canGoPrev.value) currentStep.value -= 1;
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (!isLastStep.value) currentStep.value += 1;
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
try {
|
||||
emit('save', getData());
|
||||
} catch {
|
||||
ElMessage.error('页面配置不是有效 JSON');
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ getData, setData });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<div v-if="showSteps" class="border-border border-b px-6 py-4">
|
||||
<ElSteps :active="currentStep" align-center finish-status="success">
|
||||
<ElStep v-for="item in steps" :key="item.title" :title="item.title" />
|
||||
</ElSteps>
|
||||
</div>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-auto p-6">
|
||||
<PageBasicInfoEditor
|
||||
v-if="currentStep === 0"
|
||||
v-model="basicForm"
|
||||
:is-edit-mode="isEditMode"
|
||||
/>
|
||||
<div v-else-if="currentStep === 1" class="h-full min-h-[460px]">
|
||||
<div class="mb-3 text-sm text-muted-foreground">
|
||||
轻量版保留 AI 生成页面配置确认，不加载大屏可视化设计器。
|
||||
</div>
|
||||
<ElInput
|
||||
v-model="pageConfigText"
|
||||
:readonly="readonly"
|
||||
class="h-full"
|
||||
resize="none"
|
||||
type="textarea"
|
||||
placeholder="页面配置 JSON"
|
||||
/>
|
||||
</div>
|
||||
<PagePublishInfoEditor
|
||||
v-else
|
||||
v-model="publishData"
|
||||
:page-code="basicForm.code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showActions" class="border-border flex justify-end gap-2 border-t px-6 py-4">
|
||||
<ElButton @click="emit('cancel')">{{ $t('common.cancel') }}</ElButton>
|
||||
<ElButton :disabled="!canGoPrev" @click="handlePrev">上一步</ElButton>
|
||||
<ElButton v-if="!isLastStep" type="primary" @click="handleNext">下一步</ElButton>
|
||||
<ElButton v-else type="primary" @click="handleSave">{{ $t('common.save') }}</ElButton>
|
||||
</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>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script lang="ts" setup>
|
||||
/**
|
||||
* 页面发布信息编辑器
|
||||
* 供 page-manager 和工作流节点共用
|
||||
*/
|
||||
import type { MenuItem } from '#/components/zq-form/zq-menu-selector/types';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';
|
||||
|
||||
import { ZqIconPicker } from '#/components/zq-form/zq-icon-picker';
|
||||
import { ZqMenuSelector } from '#/components/zq-form/zq-menu-selector';
|
||||
import { useAppContextStore } from '#/store/app-context';
|
||||
|
||||
export interface PagePublishInfo {
|
||||
menu_name: string;
|
||||
menu_parent_id?: string;
|
||||
menu_icon: string;
|
||||
menu_order: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: PagePublishInfo;
|
||||
pageCode?: string;
|
||||
showRouteInfo?: boolean;
|
||||
routePrefix?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
pageCode: '',
|
||||
showRouteInfo: true,
|
||||
routePrefix: '/page/',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: PagePublishInfo];
|
||||
}>();
|
||||
|
||||
const appContextStore = useAppContextStore();
|
||||
|
||||
// 更新表单数据
|
||||
function updateFormData(key: keyof PagePublishInfo, value: any) {
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
[key]: value,
|
||||
});
|
||||
}
|
||||
|
||||
// 菜单选择回调
|
||||
function handleMenuChange(menu: MenuItem | MenuItem[] | null) {
|
||||
if (menu && !Array.isArray(menu)) {
|
||||
updateFormData('menu_parent_id', menu.id);
|
||||
} else {
|
||||
updateFormData('menu_parent_id', undefined);
|
||||
}
|
||||
}
|
||||
|
||||
// 监听 modelValue 变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElForm :model="modelValue" label-width="100px">
|
||||
<!-- 菜单配置 -->
|
||||
<div class="mb-4 font-medium">
|
||||
{{ $t('page-manager.publishDialog.menuConfig') }}
|
||||
</div>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.publishDialog.menuName')" required>
|
||||
<ElInput
|
||||
:model-value="modelValue.menu_name"
|
||||
:placeholder="$t('page-manager.placeholder.name')"
|
||||
@update:model-value="updateFormData('menu_name', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.publishDialog.parentMenu')">
|
||||
<ZqMenuSelector
|
||||
:model-value="modelValue.menu_parent_id || null"
|
||||
mode="dialog"
|
||||
:placeholder="$t('page-manager.publishDialog.parentMenuPlaceholder')"
|
||||
:application-id="appContextStore.currentApp?.id"
|
||||
@change="handleMenuChange"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.publishDialog.menuIcon')">
|
||||
<ZqIconPicker
|
||||
:model-value="modelValue.menu_icon"
|
||||
prefix="lucide"
|
||||
:auto-fetch-api="false"
|
||||
class="w-full"
|
||||
@update:model-value="updateFormData('menu_icon', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('common.sort')">
|
||||
<ElInputNumber
|
||||
:model-value="modelValue.menu_order"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="w-full"
|
||||
@update:model-value="updateFormData('menu_order', $event ?? 0)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<!-- 路由信息 -->
|
||||
<template v-if="showRouteInfo && pageCode">
|
||||
<div class="mb-4 mt-6 font-medium">
|
||||
{{ $t('page-manager.publishDialog.routeInfo') }}
|
||||
</div>
|
||||
|
||||
<ElFormItem :label="$t('page-manager.publishDialog.accessPath')">
|
||||
<ElInput
|
||||
:model-value="`${routePrefix}${pageCode}`"
|
||||
disabled
|
||||
class="text-muted-foreground"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</template>
|
||||
</ElForm>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MenuItem } from '#/components/zq-form/zq-menu-selector/types';
|
||||
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { ElForm, ElFormItem, ElInput, ElInputNumber } from 'element-plus';
|
||||
|
||||
import { ZqIconPicker } from '#/components/zq-form/zq-icon-picker';
|
||||
import { ZqMenuSelector } from '#/components/zq-form/zq-menu-selector';
|
||||
import { useAppContextStore } from '#/store/app-context';
|
||||
|
||||
interface Props {
|
||||
modelValue: FormPublishInput;
|
||||
formCode?: string;
|
||||
showRouteInfo?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
formCode: '',
|
||||
showRouteInfo: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: FormPublishInput];
|
||||
}>();
|
||||
|
||||
const appContextStore = useAppContextStore();
|
||||
|
||||
// 更新表单数据
|
||||
function updateFormData(key: keyof FormPublishInput, value: any) {
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
[key]: value,
|
||||
});
|
||||
}
|
||||
|
||||
// 菜单选择回调
|
||||
function handleMenuChange(menu: MenuItem | MenuItem[] | null) {
|
||||
if (menu && !Array.isArray(menu)) {
|
||||
updateFormData('menu_parent_id', menu.id);
|
||||
} else {
|
||||
updateFormData('menu_parent_id', undefined);
|
||||
}
|
||||
}
|
||||
|
||||
// 监听 modelValue 变化，确保响应式
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElForm :model="modelValue" label-width="100px">
|
||||
<!-- 菜单配置 -->
|
||||
<div class="mb-4 font-medium">
|
||||
{{ $t('form-manager.publishDialog.menuConfig') }}
|
||||
</div>
|
||||
|
||||
<ElFormItem :label="$t('form-manager.publishDialog.menuName')" required>
|
||||
<ElInput
|
||||
:model-value="modelValue.menu_name"
|
||||
:placeholder="$t('form-manager.placeholder.name')"
|
||||
@update:model-value="updateFormData('menu_name', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('form-manager.publishDialog.parentMenu')">
|
||||
<ZqMenuSelector
|
||||
:model-value="modelValue.menu_parent_id || null"
|
||||
mode="dialog"
|
||||
:placeholder="$t('form-manager.publishDialog.parentMenuPlaceholder')"
|
||||
:application-id="appContextStore.currentApp?.id"
|
||||
@change="handleMenuChange"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('form-manager.publishDialog.menuIcon')">
|
||||
<ZqIconPicker
|
||||
:model-value="modelValue.menu_icon"
|
||||
prefix="lucide"
|
||||
:auto-fetch-api="false"
|
||||
class="w-full"
|
||||
@update:model-value="updateFormData('menu_icon', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem :label="$t('common.sort')">
|
||||
<ElInputNumber
|
||||
:model-value="modelValue.menu_order"
|
||||
:min="0"
|
||||
:max="999"
|
||||
class="w-full"
|
||||
@update:model-value="updateFormData('menu_order', $event)"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<!-- 路由信息 -->
|
||||
<template v-if="showRouteInfo && formCode">
|
||||
<div class="mb-4 mt-6 font-medium">
|
||||
{{ $t('form-manager.publishDialog.routeInfo') }}
|
||||
</div>
|
||||
|
||||
<ElFormItem :label="$t('form-manager.publishDialog.accessPath')">
|
||||
<ElInput
|
||||
:model-value="`/form-render/${formCode}`"
|
||||
disabled
|
||||
class="text-muted-foreground"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</template>
|
||||
</ElForm>
|
||||
</template>
|
||||
export interface FormPublishInput {
|
||||
menu_icon: string;
|
||||
menu_name: string;
|
||||
menu_order: number;
|
||||
menu_parent_id?: string;
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import {
|
||||
AppWindow,
|
||||
CircleCheck,
|
||||
ExternalLink,
|
||||
FileText,
|
||||
LayoutDashboard,
|
||||
Maximize,
|
||||
Minimize,
|
||||
} from '@vben/icons';
|
||||
import { useI18n } from '@vben/locales';
|
||||
|
||||
import { ElButton, ElCard, ElEmpty } from 'element-plus';
|
||||
|
||||
export interface SystemSummaryData {
|
||||
type: 'system_summary';
|
||||
title: string;
|
||||
data: {
|
||||
app?: {
|
||||
code: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
id: string;
|
||||
link: string;
|
||||
name: string;
|
||||
};
|
||||
base_url?: string;
|
||||
created_at: string;
|
||||
dashboard?: {
|
||||
code: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
id: string;
|
||||
link: string;
|
||||
name: string;
|
||||
};
|
||||
forms: Array<{
|
||||
code: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
id: string;
|
||||
link: string;
|
||||
name: string;
|
||||
}>;
|
||||
statistics?: {
|
||||
forms_count: number;
|
||||
has_app: boolean;
|
||||
has_dashboard: boolean;
|
||||
total_modules: number;
|
||||
};
|
||||
title: string;
|
||||
};
|
||||
nodeId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
data?: SystemSummaryData;
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
confirm: [data: any];
|
||||
'update:visible': [value: boolean];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
};
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (val) => emit('update:visible', val),
|
||||
});
|
||||
|
||||
const summaryData = computed(() => props.data?.data || ({} as any));
|
||||
const statistics = computed(() => summaryData.value.statistics);
|
||||
const app = computed(() => summaryData.value.app);
|
||||
const forms = computed(() => summaryData.value.forms || []);
|
||||
const dashboard = computed(() => summaryData.value.dashboard);
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', summaryData.value);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const openLink = (link: string) => {
|
||||
if (link) {
|
||||
const baseUrl = summaryData.value.base_url || '';
|
||||
const fullUrl = baseUrl ? `${baseUrl}${link}` : link;
|
||||
window.open(fullUrl, '_blank');
|
||||
}
|
||||
};
|
||||
</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 items-center justify-between border-b px-4 py-3"
|
||||
>
|
||||
<div class="text-foreground font-medium">
|
||||
{{ data?.title || t('ai.systemSummary.title') }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ElButton size="small" @click="handleClose">
|
||||
{{ t('common.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton size="small" type="primary" @click="handleConfirm">
|
||||
<CircleCheck class="mr-1 size-4" />
|
||||
{{ t('ai.systemSummary.complete') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
link
|
||||
:icon="isFullscreen ? Minimize : Maximize"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="flex-1 overflow-auto p-6">
|
||||
<div
|
||||
class="mb-6 flex items-center gap-3 border-b border-green-200 pb-4 dark:border-green-800"
|
||||
>
|
||||
<div
|
||||
class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900"
|
||||
>
|
||||
<CircleCheck class="size-6 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-green-700 dark:text-green-300">
|
||||
{{ summaryData.title || t('ai.systemSummary.title') }}
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{{ t('ai.systemSummary.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="statistics" class="mb-6 grid grid-cols-3 gap-4">
|
||||
<div
|
||||
class="rounded-lg border bg-blue-50 p-4 text-center dark:bg-blue-950"
|
||||
>
|
||||
<div class="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||
{{ statistics.has_app ? 1 : 0 }}
|
||||
</div>
|
||||
<div class="text-muted-foreground mt-1 text-sm">
|
||||
{{ t('ai.systemSummary.app') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border bg-purple-50 p-4 text-center dark:bg-purple-950"
|
||||
>
|
||||
<div class="text-3xl font-bold text-purple-600 dark:text-purple-400">
|
||||
{{ statistics.forms_count }}
|
||||
</div>
|
||||
<div class="text-muted-foreground mt-1 text-sm">
|
||||
{{ t('ai.systemSummary.formModules') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-lg border bg-orange-50 p-4 text-center dark:bg-orange-950"
|
||||
>
|
||||
<div class="text-3xl font-bold text-orange-600 dark:text-orange-400">
|
||||
{{ statistics.has_dashboard ? 1 : 0 }}
|
||||
</div>
|
||||
<div class="text-muted-foreground mt-1 text-sm">
|
||||
{{ t('ai.systemSummary.dashboard') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="app" class="mb-6">
|
||||
<h3 class="mb-3 flex items-center gap-2 font-medium">
|
||||
<AppWindow class="size-5 text-blue-500" />
|
||||
{{ t('ai.systemSummary.appInfo') }}
|
||||
</h3>
|
||||
<ElCard
|
||||
shadow="hover"
|
||||
class="cursor-pointer"
|
||||
@click="openLink(app.link)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex size-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900"
|
||||
>
|
||||
<AppWindow class="size-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">{{ app.name }}</div>
|
||||
<div class="text-muted-foreground text-sm">
|
||||
{{ app.description || app.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElButton
|
||||
v-if="app.link"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openLink(app.link)"
|
||||
>
|
||||
<ExternalLink class="mr-1 size-4" />
|
||||
{{ t('ai.systemSummary.visit') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
|
||||
<div v-if="forms.length > 0" class="mb-6">
|
||||
<h3 class="mb-3 flex items-center gap-2 font-medium">
|
||||
<FileText class="size-5 text-purple-500" />
|
||||
{{ t('ai.systemSummary.formModulesTitle') }}
|
||||
<span class="text-muted-foreground text-sm">({{ forms.length }})</span>
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<ElCard
|
||||
v-for="form in forms"
|
||||
:key="form.id || form.code"
|
||||
shadow="hover"
|
||||
class="cursor-pointer"
|
||||
@click="openLink(form.link)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex size-10 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900"
|
||||
>
|
||||
<FileText
|
||||
class="size-5 text-purple-600 dark:text-purple-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">{{ form.name }}</div>
|
||||
<div class="text-muted-foreground text-sm">
|
||||
{{ form.description || form.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElButton
|
||||
v-if="form.link"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openLink(form.link)"
|
||||
>
|
||||
<ExternalLink class="mr-1 size-4" />
|
||||
{{ t('ai.systemSummary.visit') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="dashboard" class="mb-6">
|
||||
<h3 class="mb-3 flex items-center gap-2 font-medium">
|
||||
<LayoutDashboard class="size-5 text-orange-500" />
|
||||
{{ t('ai.systemSummary.dashboardTitle') }}
|
||||
</h3>
|
||||
<ElCard
|
||||
shadow="hover"
|
||||
class="cursor-pointer"
|
||||
@click="openLink(dashboard.link)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex size-10 items-center justify-center rounded-lg bg-orange-100 dark:bg-orange-900"
|
||||
>
|
||||
<LayoutDashboard
|
||||
class="size-5 text-orange-600 dark:text-orange-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">{{ dashboard.name }}</div>
|
||||
<div class="text-muted-foreground text-sm">
|
||||
{{ dashboard.description || dashboard.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElButton
|
||||
v-if="dashboard.link"
|
||||
type="primary"
|
||||
link
|
||||
@click.stop="openLink(dashboard.link)"
|
||||
>
|
||||
<ExternalLink class="mr-1 size-4" />
|
||||
{{ t('ai.systemSummary.visit') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
|
||||
<ElEmpty
|
||||
v-if="!app && forms.length === 0 && !dashboard"
|
||||
:description="t('ai.systemSummary.noData')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user