cabi看板二开导图
2023-10-13 17:31:01 1 举报AI智能生成
登录查看完整内容
cabi
作者其他创作
大纲/内容
<Resizable></Resizable>
idOrSlug
perms
<DashboardPage />
<Content></Content>
src\\views\\CRUD\\dashboard\\DashboardList.tsx
获取看板数据
将获取的看板数据存入redux
src\\dashboard\\containers\\DashboardPage.tsx
连接redux数据
src\\dashboard\\containers\\Dashboard.ts
根据layoutMode变量区分加载移动端和pc端组件
src\\dashboard\\components\\Dashboard.jsx
控制编辑与非编辑状态下的看板
src\\dashboard\\components\\DashboardBuilder\\DashboardBuilder.tsx
区分加载行列模式和网格模式
src\\dashboard\\components\\DashboardBuilder\\DashboardContainer.tsx
src\\dashboard\\containers\\DashDataV.jsx
新增时会同时触发drop与handleDrop函数
新增组件
1.通过props拿到所有组件—props.dashboardLayout.present
2.遍历所有组件，为所有从行列模式新增的组件添加网格模式渲染所需的默认参数，并且将所有悬浮组件筛选出来
3.遍历所有筛选出来的悬浮组件，与旧数据悬浮组件，去重。
4.将处理好的所有悬浮组件和非悬浮组件保存到组件state:floatCharts和charts
流程：
渲染组件
文档地址
react-grid-layout
子主题
react-moveable
拖拽插件
网格模式的核心底座
src\\dashboard\\components\\DashDataV\\index.jsx
src\\dashboard\\containers\\DashboardComponent.jsx
网格模式
src\\dashboard\\containers\\DashboardGrid.jsx
src\\dashboard\\components\\DashboardGrid.jsx
行列模式
组件嵌套及数据大体流向
行列模式的编辑开关
editMode：true || false
网格模式的编辑开关
editGrid：true || false
注意：editMode与editGrid不能同时为true
网格模式与行列模式的切换
layoutType：grid || rowAndColum
重要变量
cabi看板二开导图
收藏
0 条评论
回复 删除
下一页
