+
+

-
{component.label}
+
{component.label || component.flowName}
{/*两种状态 未添加的是primary 已添加的是secondary*/}
-
+ {
+ component.isAdd ? (
+
+ ) : (
+
+ )
+ }
+
- >
+
))}
);
@@ -280,12 +348,51 @@ const Market: React.FC = () => {
);
}, [compList, firstLevelCategory, secondLevelCategory]);
- useEffect(() => {
+ // 给账号下的组件列表(本地存储中的组件列表)增加一个是否添加至工程的初始状态
+ const addInitState = (componentData) => {
+ // 当前工程下已添加的组件ID列表
+ const projectComponent = projectComponentData[info.id];
+ const compListByProject = projectComponent.compIds.concat(projectComponent.flowIds);
+ const objectKeys = Object.keys(componentData);
+ /*
+ * 账号下的组件列表分两种结构:
+ * 1. myLibs,pubLibs,teamLibs 这三个是带有children数组的结构
+ * 2. pubFlow,myFlow 这两个是直接一个数组
+ * */
+ objectKeys.forEach(key => {
+ if (key === 'pubFlow' || key === 'myFlow') {
+ componentData[key].forEach(item => {
+ item.isAdd = compListByProject.includes(item.id);
+ });
+ }
+ else if (key === 'myLibs' || key === 'pubLibs' || key === 'teamLibs') {
+ componentData[key].length && componentData[key].forEach(item => {
+ item.children.forEach(v => {
+ v.isAdd = compListByProject.includes(v.comp.id);
+ });
+ });
+ }
+ });
+
+ setCompList(componentData);
+ };
+
+ // 从缓存中获取组件列表的信息
+ const getCompList = () => {
const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
const componentData = JSON.parse(sessionStorage.getItem(`compLibs${userInfo.userId}`));
- setCompList(componentData);
+ addInitState(componentData);
+ };
+
+ useEffect(() => {
+ getCompList();
}, []);
+ // 监听 Redux 中 projectComponentData 的变化,更新组件列表状态
+ useEffect(() => {
+ getCompList();
+ }, [projectComponentData]);
+
return (
{/* 头部搜索区域 */}
@@ -300,7 +407,11 @@ const Market: React.FC = () => {
style={{ marginRight: 16 }}
/>
- }>
+ }
+ onClick={() => getCompList()}
+ />
diff --git a/src/pages/ideContainer/rightSideBar.tsx b/src/pages/ideContainer/rightSideBar.tsx
index 588484a..9478952 100644
--- a/src/pages/ideContainer/rightSideBar.tsx
+++ b/src/pages/ideContainer/rightSideBar.tsx
@@ -7,7 +7,11 @@ import Market from './market';
const TabPane = Tabs.TabPane;
-const RightSideBar: React.FC = () => {
+interface RightSideBarProps {
+ updateProjectComp: () => void;
+}
+
+const RightSideBar: React.FC