📝 docs: 补充文档

arvinxx · Apr 6, 2021 · 0f575eb · 0f575eb
1 parent 4f9e1ae
commit 0f575eb
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 76 deletions.
diff --git a/docs/components/biz/examples/JournalMap/CustomColor.tsx b/docs/components/biz/examples/JournalMap/CustomColor.tsx
@@ -4,16 +4,11 @@
 import React from 'react';
 import JournalMap from '@arvinxu/journal-map';
 
-import { customColor } from './data';
+import { customColor } from './customColor';
 
 const CustomColor = () => {
   return (
-    <div
-      style={{
-        background: '#fafafa',
-        padding: 24,
-      }}
-    >
+    <div style={{ background: '#fafafa', padding: 24 }}>
       <JournalMap
         data={customColor}
         style={{ background: 'white', padding: 24 }}

diff --git a/docs/components/biz/examples/JournalMap/Demo.tsx b/docs/components/biz/examples/JournalMap/Demo.tsx
@@ -8,12 +8,7 @@ import { data } from './data';
 
 const Demo = () => {
   return (
-    <div
-      style={{
-        background: '#fafafa',
-        padding: 24,
-      }}
-    >
+    <div style={{ background: '#fafafa', padding: 24 }}>
       <JournalMap data={data} style={{ background: 'white', padding: 24 }} />
     </div>
   );

diff --git a/docs/components/biz/examples/JournalMap/YAML.tsx b/docs/components/biz/examples/JournalMap/YAML.tsx
@@ -0,0 +1,18 @@
+/**
+ * compact: true
+ */
+import React from 'react';
+import JournalMap from '@arvinxu/journal-map';
+
+const YAML = () => {
+  return (
+    <div style={{ background: '#fafafa', padding: 24 }}>
+      <JournalMap
+        data="https://gw.alipayobjects.com/os/antfincdn/4pyctfdZvf/data.yml"
+        style={{ background: 'white', padding: 24 }}
+      />
+    </div>
+  );
+};
+
+export default YAML;
diff --git a/docs/components/biz/examples/JournalMap/customColor.ts b/docs/components/biz/examples/JournalMap/customColor.ts
@@ -0,0 +1,66 @@
+import { JournalMapData } from '@arvinxu/journal-map';
+
+type Steps = 'plan' | 'rent' | 'take' | 'play' | 'return';
+
+export const customColor: JournalMapData<Steps> = {
+  steps: [
+    {
+      id: 'plan',
+      name: '计划租车',
+      color: '#d0f0fd',
+    },
+    {
+      id: 'rent',
+      name: '租车',
+      color: '#d1f7c4',
+    },
+    {
+      id: 'take',
+      name: '提车',
+      color: '#cfdfff',
+    },
+    {
+      id: 'play',
+      name: '游玩',
+      color: '#ffdaf6',
+    },
+    {
+      id: 'return',
+      name: '还车',
+      color: '#ede2fe',
+    },
+  ],
+  actions: {
+    plan: [
+      { title: '找租车平台', emotion: -1 },
+      { title: '对比不同平台', emotion: -2 },
+      { title: '确定平台', emotion: 1 },
+    ],
+    rent: [
+      { title: '选择租车日期', emotion: -1 },
+      { title: '与同伴讨论车型', emotion: -1 },
+      { title: '选择租车类型', emotion: 0 },
+      { title: '支付费用', emotion: 1 },
+    ],
+    take: [
+      { title: '打车去提车点', emotion: 2 },
+      { title: '确认提车时间和地点', emotion: 2 },
+      { title: '确认车况', emotion: 2 },
+      { title: '确认还车注意事项', emotion: 1 },
+      { title: '取车离开', emotion: 2 },
+    ],
+    play: [
+      { title: '返回接同伴', emotion: 2 },
+      { title: '开车游玩一天', emotion: 0 },
+      { title: '车出了问题', emotion: -2 },
+      { title: '打电话给客服', emotion: -1 },
+      { title: '处理车况', emotion: 2 },
+    ],
+    return: [
+      { title: '加油站加油', emotion: -1 },
+      { title: '确认使用车况', emotion: -1 },
+      { title: '打车返回', emotion: 0 },
+      { title: '完成车辆交接', emotion: 1 },
+    ],
+  },
+};
diff --git a/docs/components/biz/examples/JournalMap/data.ts b/docs/components/biz/examples/JournalMap/data.ts
@@ -59,66 +59,3 @@ export const data: JournalMapData<Steps> = {
     ],
   },
 };
-
-export const customColor: JournalMapData<Steps> = {
-  steps: [
-    {
-      id: 'plan',
-      name: '计划租车',
-      color: '#d0f0fd',
-    },
-    {
-      id: 'rent',
-      name: '租车',
-      color: '#d1f7c4',
-    },
-    {
-      id: 'take',
-      name: '提车',
-      color: '#cfdfff',
-    },
-    {
-      id: 'play',
-      name: '游玩',
-      color: '#ffdaf6',
-    },
-    {
-      id: 'return',
-      name: '还车',
-      color: '#ede2fe',
-    },
-  ],
-  actions: {
-    plan: [
-      { title: '找租车平台', emotion: -1 },
-      { title: '对比不同平台', emotion: -2 },
-      { title: '确定平台', emotion: 1 },
-    ],
-    rent: [
-      { title: '选择租车日期', emotion: -1 },
-      { title: '与同伴讨论车型', emotion: -1 },
-      { title: '选择租车类型', emotion: 0 },
-      { title: '支付费用', emotion: 1 },
-    ],
-    take: [
-      { title: '打车去提车点', emotion: 2 },
-      { title: '确认提车时间和地点', emotion: 2 },
-      { title: '确认车况', emotion: 2 },
-      { title: '确认还车注意事项', emotion: 1 },
-      { title: '取车离开', emotion: 2 },
-    ],
-    play: [
-      { title: '返回接同伴', emotion: 2 },
-      { title: '开车游玩一天', emotion: 0 },
-      { title: '车出了问题', emotion: -2 },
-      { title: '打电话给客服', emotion: -1 },
-      { title: '处理车况', emotion: 2 },
-    ],
-    return: [
-      { title: '加油站加油', emotion: -1 },
-      { title: '确认使用车况', emotion: -1 },
-      { title: '打车返回', emotion: 0 },
-      { title: '完成车辆交接', emotion: 1 },
-    ],
-  },
-};
diff --git a/docs/components/biz/journal-map.md b/docs/components/biz/journal-map.md
@@ -22,4 +22,54 @@ order: 3
 
 <code src='./examples/JournalMap/CustomColor.tsx' />
 
+## 使用 YML
+
+该组件支持使用 YML 格式的数据
+
+<code src='./examples/JournalMap/YAML.tsx' />
+
+数据
+
+```yaml
+steps:
+  - id: plan
+    name: 计划租车
+  - id: rent
+    name: 租车
+  - id: take
+    name: 提车
+  - id: play
+    name: 游玩
+  - id: return
+    name: 还车
+
+actions:
+  plan:
+    - 找租车平台: -1
+    - 对比不同平台: -2
+    - 确定平台: 1
+  rent:
+    - 选择租车日期: -1
+    - 与同伴讨论车型: -1
+    - 选择租车类型: 0
+    - 支付费用: 1
+  take:
+    - 打车去提车点: 2
+    - 确认提车时间和地点: 2
+    - 确认车况: 2
+    - 确认还车注意事项: 1
+    - 取车离开: 2
+  play:
+    - 返回接同伴: 2
+    - 开车游玩一天: 0
+    - 车出了问题: -2
+    - 打电话给客服: -1
+    - 处理车况: 2
+  return:
+    - 加油站加油: -1
+    - 确认使用车况: -1
+    - 打车返回: 0
+    - 完成车辆交接: 1
+```
+
 <API src='../../../packages/journal-map/src/index.tsx'></API>