🐛 fix: 修正只有 stage name 的渲染错误

packages/journey-map/src/Actions/index.tsx

@@ -10,7 +10,9 @@ import type { UserAction } from '../types';
 import './style.less';
 
 const Actions: FC = () => {
-  const { store, actionList, config } = useContext(JourneyMapStore);
+  const { store, actionList, config, emptyAction } = useContext(
+    JourneyMapStore,
+  );
   const { actions, stages } = store;
   const height = config?.height?.action || 140;
 
@@ -31,7 +33,7 @@ const Actions: FC = () => {
     return color;
   };
 
-  return (
+  return emptyAction ? null : (
     <div className="avx-journey-map-actions-container" style={{ height }}>
       <Section height={height}>用户行为</Section>
       <div className="avx-journey-map-actions-content">

packages/journey-map/src/Chart/index.tsx

@@ -34,7 +34,7 @@ const getFormattedEmotion = (text: string | number) => {
 };
 
 const Chart: FC<ChartProps> = ({ color = blue[2] }) => {
-  const { actionList, config } = useContext(JourneyMapStore);
+  const { actionList, config, emptyAction } = useContext(JourneyMapStore);
 
   const height = config?.height?.emotion || 300;
 
@@ -85,7 +85,7 @@ const Chart: FC<ChartProps> = ({ color = blue[2] }) => {
 
     animation: { appear: { animation: 'fade-in' } },
   };
-  return (
+  return emptyAction ? null : (
     <div className="avx-journey-map-chart">
       <Section height={height}>体验情绪</Section>
       <div style={{ width: '100%', height }}>

packages/journey-map/src/Stages/index.tsx

@@ -44,7 +44,7 @@ const Stages: FC = () => {
         {stages.map((stage, index) => {
           const color = stage.color || blue[0];
 
-          const actionCount = actions[stage.id].length;
+          const actionCount = actions[stage.id]?.length || 0;
 
           const { width, margin } = calcStageLength({
             actionCount,

packages/journey-map/src/components/ListSection.tsx

@@ -19,7 +19,7 @@ const ListSection: FC<ListSectionProps> = ({ title, sectionKey, height }) => {
   const { stages, actions } = store;
 
   const getList = (stage: Stage) => {
-    const actionsList = actions[stage.id];
+    const actionsList = actions[stage.id] || [];
 
     return actionsList
       .map((a) => a[sectionKey])

packages/journey-map/src/useJourneyMap.ts

@@ -55,9 +55,19 @@ export const useJourneyMap = ({
     }
   }, [data]);
 
-  const actionList = Object.values(store.actions).flat();
+  const actionList =
+    Object.values(store.actions)
+      .flat()
+      .filter((a) => a) || [];
 
-  return { store, actionList, actionLength: actionList.length, title, config };
+  return {
+    store,
+    actionList,
+    actionLength: actionList.length,
+    title,
+    config,
+    emptyAction: actionList.length === 0,
+  };
 };
 
 export const JourneyMapStore = getServiceToken(useJourneyMap);

packages/journey-map/src/utils/length.ts

@@ -43,6 +43,11 @@ export const calcStageLength = ({
   actionCount: number;
   index: number;
 }) => {
+  // 如果没有 action 时均分阶段
+  if (actionCount === 0) {
+    return { width: 100 / stageCount, margin: { margin: '0 0.5%' } };
+  }
+
   const baseWidth = 100 / (2 * (totalCount - 1));
 
   const isFirst = index === 0;