✨ feat: 添加想法模块

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

@@ -0,0 +1,68 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { blue } from '@ant-design/colors';
+
+import { Section } from '../components';
+import { JourneyMapStore } from '../useJourneyMap';
+import { calcStageLength } from '../utils';
+
+import './style.less';
+
+const Thoughts: FC = () => {
+  const { store, actionLength } = useContext(JourneyMapStore);
+  const { stages, actions } = store;
+
+  const isEmpty =
+    stages
+      .map((s) => {
+        const actionsList = actions[s.id];
+        return actionsList
+          .map((a) => a.thoughts)
+          .flat()
+          .filter((t) => t);
+      })
+      .flat().length === 0;
+
+  return isEmpty ? null : (
+    <div className="avx-journey-map-thought-container">
+      <Section>想法</Section>
+      <div className="avx-journey-map-thought-content">
+        {stages.map((stage, index) => {
+          const color = stage.color || blue[1];
+
+          const actionsList = actions[stage.id];
+
+          const actionCount = actionsList.length;
+
+          const { width, margin } = calcStageLength({
+            actionCount,
+            stageCount: stages.length,
+            index,
+            totalCount: actionLength,
+          });
+
+          const thoughts = actionsList
+            .map((a) => a.thoughts)
+            .flat()
+            .filter((t) => t);
+
+          return thoughts.length === 0 ? null : (
+            <div
+              key={stage.id}
+              className="avx-journey-map-thought-list"
+              style={{ width: `${width}%`, ...margin, borderColor: color }}
+            >
+              <ul>
+                {thoughts.map((t, index) => (
+                  <li key={index}>{t}</li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Thoughts;

packages/journey-map/src/Thoughts/style.less

@@ -0,0 +1,25 @@
+@import '../token';
+
+.avx-journey-map-thought {
+  &-container {
+    display: flex;
+    flex: 1;
+  }
+
+  &-content {
+    display: flex;
+    flex: 1;
+  }
+
+  &-list {
+    padding: 8px;
+    font-size: 12px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+
+    .secondText;
+    ul {
+      padding-inline-start: 16px;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@ import React from 'react';
 import './Section.less';
 
 interface StageProps {
-  height: number;
+  height?: number;
 }
 const Section: FC<StageProps> = ({ children, height }) => {
   return (

packages/journey-map/src/index.tsx

@@ -5,6 +5,7 @@ import cls from 'classnames';
 import Stage from './Stages';
 import Chart from './Chart';
 import Actions from './Actions';
+import Thoughts from './Thoughts';
 
 import { JourneyMapStore, useJourneyMap } from './useJourneyMap';
 import type { JourneyMapData } from './types';
@@ -53,6 +54,7 @@ const JourneyMap: FC<JourneyMapProps> = ({
           <Stage />
           <Actions />
           <Chart />
+          <Thoughts />
         </div>
       </div>
     </JourneyMapStore.Provider>

packages/journey-map/src/token.less

@@ -5,3 +5,8 @@
   align-content: center;
   justify-content: center;
 }
+
+.secondText {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}