feat(ideContainer): 添加组件测试页面并优化组件渲染逻辑

- 引入 ComponentTest 组件并移除原有占位实现
- 新增获取项目组件数据逻辑并更新至 Redux
- 调整组件渲染条件以匹配选中状态
- 优化容器样式以确保正确布局显示
- 同步加载应用列表与项目组件数据
master
钟良源 4 months ago
parent dd2281dacc
commit 3dbf1ccac6

@ -6,9 +6,10 @@ import LogBar from './logBar';
import RightSideBar from './rightSideBar'; import RightSideBar from './rightSideBar';
import NavBar, { NavBarRef } from './navBar'; import NavBar, { NavBarRef } from './navBar';
import { Selected } from '@/pages/ideContainer/types'; import { Selected } from '@/pages/ideContainer/types';
import { updateInfo } from '@/store/ideContainer'; import { updateInfo, updateProjectComponentData } from '@/store/ideContainer';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { getAppListBySceneId } from '@/api/apps'; import { getAppListBySceneId } from '@/api/apps';
import { getProjectComp } from '@/api/scene';
import ProjectContainer from '@/pages/orchestration/project'; import ProjectContainer from '@/pages/orchestration/project';
import ApplicationContainer from '@/pages/orchestration/application'; import ApplicationContainer from '@/pages/orchestration/application';
@ -18,6 +19,8 @@ import AppCompComponent from '@/pages/orchestration/appCompComponent';
import ComponentList from '@/pages/componentDevelopment/componentList'; import ComponentList from '@/pages/componentDevelopment/componentList';
import ComponentCoding from '@/pages/componentDevelopment/componentCoding'; import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment'; import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment';
import ComponentTest from '@/pages/componentDevelopment/componentTest';
type UrlParamsOptions = { type UrlParamsOptions = {
identity?: string; identity?: string;
@ -29,7 +32,6 @@ const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }
const MyComponents = () => <div style={{ height: '100%', width: '100%' }}></div>; const MyComponents = () => <div style={{ height: '100%', width: '100%' }}></div>;
const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}></div>; const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}></div>;
const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}></div>; const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}></div>;
const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}></div>;
const EnvConfig = () => <div style={{ height: '100%', width: '100%' }}></div>; const EnvConfig = () => <div style={{ height: '100%', width: '100%' }}></div>;
// 所有可显示的组件路径列表 // 所有可显示的组件路径列表
@ -59,6 +61,11 @@ function IDEContainer() {
if (res.code === 200) setSubMenuData({ 'appList': res.data.list.reverse() }); if (res.code === 200) setSubMenuData({ 'appList': res.data.list.reverse() });
}; };
const getProjectCompData = async () => {
const res: any = await getProjectComp(urlParams.id);
if (res.code === 200) dispatch(updateProjectComponentData({ [urlParams.id]: res.data }));
};
useEffect(() => { useEffect(() => {
setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions); setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions);
dispatch(updateInfo(getUrlParams(window.location.href) as UrlParamsOptions)); dispatch(updateInfo(getUrlParams(window.location.href) as UrlParamsOptions));
@ -66,7 +73,10 @@ function IDEContainer() {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (urlParams.id) getAppList(); if (urlParams.id) {
getProjectCompData();
getAppList();
}
}, [urlParams.id]); }, [urlParams.id]);
// 当selected.path变化时添加到已打开的tab集合中 // 当selected.path变化时添加到已打开的tab集合中
@ -79,15 +89,15 @@ function IDEContainer() {
// 根据选中的菜单项渲染对应组件 // 根据选中的菜单项渲染对应组件
const renderContent = () => { const renderContent = () => {
return ( return (
<div style={{ height: '100%', position: 'relative' }}> <div style={{ height: '100%', width: '100%', position: 'relative', boxSizing: 'border-box' }}>
{ALL_PATHS.map((path, i) => { {ALL_PATHS.map((path, i) => {
// 检查该路径的组件是否已打开 // 检查该路径的组件是否已打开
const isOpened = openedTabs.has(path); const isOpened = openedTabs.has(selected.key);
// 检查是否是当前选中的路径 // 检查是否是当前选中的路径
const isSelected = selected.path === path; const isSelected = selected.path === path;
// 只有已打开的组件才渲染通过CSS控制显示/隐藏 // 只有已打开且已经选中的组件才渲染通过CSS控制显示/隐藏
return isOpened ? ( return isOpened && isSelected ? (
<div <div
key={`${selected.key}-${i}`} key={`${selected.key}-${i}`}
style={{ style={{

Loading…
Cancel
Save