|
|
|
@ -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={{
|
|
|
|
|