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