feat: render lightweight dashboard home
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
|
import { defineAsyncComponent, onMounted, ref, watch } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { ElEmpty, ElMessage, ElScrollbar } from 'element-plus';
|
import { ElEmpty, ElMessage, ElScrollbar } from 'element-plus';
|
||||||
@@ -12,14 +12,164 @@ const route = useRoute();
|
|||||||
const DashboardRenderer = defineAsyncComponent(
|
const DashboardRenderer = defineAsyncComponent(
|
||||||
() => import('#/components/dashboard-design/DashboardRenderer.vue'),
|
() => import('#/components/dashboard-design/DashboardRenderer.vue'),
|
||||||
);
|
);
|
||||||
const DashboardWorkspace = defineAsyncComponent(
|
|
||||||
() => import('#/views/dashboard/workspace/index.vue'),
|
|
||||||
);
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const pageConfig = ref<string>('');
|
const pageConfig = ref<string>('');
|
||||||
const pageName = ref('');
|
const pageName = ref('');
|
||||||
const pageCode = ref('');
|
const pageCode = ref('');
|
||||||
const isWorkbenchHome = computed(() => getPageCode() === 'main_home');
|
|
||||||
|
const aiHomeMenus = [
|
||||||
|
{
|
||||||
|
icon: 'lucide:bot',
|
||||||
|
id: 'ai-agent',
|
||||||
|
path: '/ai-platform/agent',
|
||||||
|
title: '智能体',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:git-branch',
|
||||||
|
id: 'ai-workflow',
|
||||||
|
path: '/ai-platform/workflow',
|
||||||
|
title: '流程编排',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:history',
|
||||||
|
id: 'ai-workflow-runs',
|
||||||
|
path: '/ai-platform/workflow-runs',
|
||||||
|
title: '执行历史',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:message-square-code',
|
||||||
|
id: 'codex-chat',
|
||||||
|
path: '/agent-chat/codex',
|
||||||
|
title: 'Codex',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:database',
|
||||||
|
id: 'knowledge-base',
|
||||||
|
path: '/ai-platform/knowledge-base',
|
||||||
|
title: '知识库',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:settings',
|
||||||
|
id: 'model-config',
|
||||||
|
path: '/ai-platform/model',
|
||||||
|
title: '模型配置',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const adminHomeMenus = [
|
||||||
|
{
|
||||||
|
icon: 'lucide:users',
|
||||||
|
id: 'system-user',
|
||||||
|
path: '/system/user',
|
||||||
|
title: '用户管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:shield-check',
|
||||||
|
id: 'system-role',
|
||||||
|
path: '/system/role',
|
||||||
|
title: '角色权限',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:menu',
|
||||||
|
id: 'system-menu',
|
||||||
|
path: '/system/menu',
|
||||||
|
title: '菜单管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:key-round',
|
||||||
|
id: 'system-permission',
|
||||||
|
path: '/system/new-permission',
|
||||||
|
title: 'API 权限',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:megaphone',
|
||||||
|
id: 'announcement',
|
||||||
|
path: '/message/announcement',
|
||||||
|
title: '公告管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:inbox',
|
||||||
|
id: 'message-list',
|
||||||
|
path: '/message/list',
|
||||||
|
title: '消息列表',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const opsHomeMenus = [
|
||||||
|
{
|
||||||
|
icon: 'lucide:send',
|
||||||
|
id: 'requirements-agent',
|
||||||
|
path: '/ai-platform/agent',
|
||||||
|
title: '需求分析',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:workflow',
|
||||||
|
id: 'collaboration-flow',
|
||||||
|
path: '/ai-platform/workflow',
|
||||||
|
title: '协作流程',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:activity',
|
||||||
|
id: 'observability',
|
||||||
|
path: '/ai-platform/workflow-runs',
|
||||||
|
title: '可观测性',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'lucide:sliders-horizontal',
|
||||||
|
id: 'ui-config',
|
||||||
|
path: '/system/ui-config',
|
||||||
|
title: '界面配置',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function toQuickLinksWidget(widget: any, title: string, menus: any[]) {
|
||||||
|
return {
|
||||||
|
...widget,
|
||||||
|
props: {
|
||||||
|
...widget.props,
|
||||||
|
columns: widget.w >= 6 ? 3 : 4,
|
||||||
|
menus,
|
||||||
|
rows: 2,
|
||||||
|
title,
|
||||||
|
},
|
||||||
|
title,
|
||||||
|
type: 'quick-links',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLightMainHomeConfig(config: Record<string, any>) {
|
||||||
|
const next = JSON.parse(JSON.stringify(config));
|
||||||
|
if (!Array.isArray(next.widgets)) return next;
|
||||||
|
|
||||||
|
next.widgets = next.widgets.map((widget: any) => {
|
||||||
|
if (widget.type === 'welcome-card') {
|
||||||
|
return {
|
||||||
|
...widget,
|
||||||
|
props: {
|
||||||
|
...widget.props,
|
||||||
|
subtitle: '聚焦智能体协作、流程编排和基础权限治理',
|
||||||
|
title: '欢迎回来',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (widget.type === 'approval-center') {
|
||||||
|
return toQuickLinksWidget(widget, 'AI 协作中心', aiHomeMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (widget.type === 'my-apps') {
|
||||||
|
return toQuickLinksWidget(widget, '基础管理', adminHomeMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (widget.type === 'quick-links') {
|
||||||
|
return toQuickLinksWidget(widget, '快捷入口', opsHomeMenus);
|
||||||
|
}
|
||||||
|
|
||||||
|
return widget;
|
||||||
|
});
|
||||||
|
|
||||||
|
return next;
|
||||||
|
}
|
||||||
|
|
||||||
// 获取页面编码
|
// 获取页面编码
|
||||||
function getPageCode(): string {
|
function getPageCode(): string {
|
||||||
@@ -52,22 +202,18 @@ async function loadPageData() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pageCode.value = code;
|
pageCode.value = code;
|
||||||
if (code === 'main_home') {
|
|
||||||
pageName.value = '控制中心';
|
|
||||||
pageConfig.value = '';
|
|
||||||
loading.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const page = await getPageByCodeApi(code);
|
const page = await getPageByCodeApi(code);
|
||||||
pageName.value = page.name;
|
pageName.value = page.name;
|
||||||
pageConfig.value =
|
const config =
|
||||||
page.page_config && Object.keys(page.page_config).length > 0
|
page.page_config && Object.keys(page.page_config).length > 0
|
||||||
? JSON.stringify(page.page_config)
|
? code === 'main_home'
|
||||||
: '';
|
? getLightMainHomeConfig(page.page_config)
|
||||||
|
: page.page_config
|
||||||
|
: undefined;
|
||||||
|
pageConfig.value = config ? JSON.stringify(config) : '';
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
ElMessage.error(error?.message || '加载页面失败');
|
ElMessage.error(error?.message || '加载页面失败');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -89,8 +235,7 @@ watch(
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DashboardWorkspace v-if="isWorkbenchHome" />
|
<ElScrollbar class="rounded-[8px] py-3">
|
||||||
<ElScrollbar v-else class="rounded-[8px] py-3">
|
|
||||||
<div v-loading="loading" class="h-[calc(100vh-120px)] rounded-[8px] px-3">
|
<div v-loading="loading" class="h-[calc(100vh-120px)] rounded-[8px] px-3">
|
||||||
<DashboardRenderer v-if="pageConfig" :config="pageConfig" />
|
<DashboardRenderer v-if="pageConfig" :config="pageConfig" />
|
||||||
<ElEmpty v-else-if="!loading" description="暂无页面配置" />
|
<ElEmpty v-else-if="!loading" description="暂无页面配置" />
|
||||||
|
|||||||
Reference in New Issue
Block a user