diff --git a/docs/components/biz/examples/JourneyMap/yml.ts b/docs/components/biz/examples/JourneyMap/yml.ts index 4afedbd8..a516a51b 100644 --- a/docs/components/biz/examples/JourneyMap/yml.ts +++ b/docs/components/biz/examples/JourneyMap/yml.ts @@ -35,6 +35,8 @@ stages: thoughts: - 感觉一嗨好像还不错 - 神州好贵 + painPoints: + - 手机上操作效率太低了 - name: 租车 # color 除了使用 hex 色值 也支持 rgb 和 hsl 的写法 diff --git a/packages/journey-map/src/components/ListSection.tsx b/packages/journey-map/src/components/ListSection.tsx index 510781a0..44fa2e09 100644 --- a/packages/journey-map/src/components/ListSection.tsx +++ b/packages/journey-map/src/components/ListSection.tsx @@ -7,26 +7,27 @@ import { JourneyMapStore } from '../useJourneyMap'; import { calcStageLength } from '../utils'; import './ListSection.less'; -import type { UserAction } from '../types'; +import type { CommonSection, Stage } from '../types'; interface ListSectionProps { title: string; - sectionKey: keyof UserAction; + sectionKey: keyof CommonSection; } const ListSection: FC = ({ title, sectionKey }) => { const { store, actionLength } = useContext(JourneyMapStore); const { stages, actions } = store; - const isEmpty = - stages - .map((s) => { - const actionsList = actions[s.id]; - return actionsList - .map((a) => a[sectionKey]) - .flat() - .filter((t) => t); - }) - .flat().length === 0; + const getList = (stage: Stage) => { + const actionsList = actions[stage.id]; + + return actionsList + .map((a) => a[sectionKey]) + .flat() + .concat(stage[sectionKey]) + .filter((t) => t); + }; + + const isEmpty = stages.map(getList).flat().length === 0; return isEmpty ? null : (
@@ -35,21 +36,14 @@ const ListSection: FC = ({ title, sectionKey }) => { {stages.map((stage, index) => { const color = stage.color || blue[1]; - const actionsList = actions[stage.id]; - - const actionCount = actionsList.length; - const { width, margin } = calcStageLength({ - actionCount, + actionCount: actions[stage.id].length, stageCount: stages.length, index, totalCount: actionLength, }); - const list = actionsList - .map((a) => a[sectionKey]) - .flat() - .filter((t) => t); + const list = getList(stage); return list.length === 0 ? null : (