diff --git a/mocks/scene/getById b/mocks/scene/getById
index a579637..36ebf3c 100644
--- a/mocks/scene/getById
+++ b/mocks/scene/getById
@@ -4,7 +4,7 @@
   "data": {
     "id": "mock-scene-1",
     "label": "模拟场景A",
-    "json": "{\"x\":0,\"y\":0,\"scale\":1,\"pens\":[{\"height\":0,\"lineName\":\"line\",\"lineWidth\":2,\"name\":\"line\",\"type\":1,\"width\":100,\"x\":100,\"y\":100,\"anchors\":[{\"x\":0,\"y\":0,\"id\":\"c\",\"start\":true,\"lineLength\":100,\"connectTo\":\"21b74c90\"},{\"x\":1,\"y\":0,\"id\":\"5e82ddd8\",\"connectTo\":\"00f32a0\"}],\"id\":\"57e55945\",\"fontSize\":14,\"lineHeight\":1.5,\"length\":100,\"ex\":200,\"ey\":100,\"rotate\":0,\"tags\":[\"route\"],\"route\":{\"type\":\"line\"},\"label\":\"undefined → undefined\"},{\"id\":\"3afaff2\",\"name\":\"area\",\"tags\":[\"area\",\"area-12\"],\"label\":\"A3afaff2\",\"x\":254,\"y\":52,\"width\":183,\"height\":195,\"lineWidth\":1,\"area\":{\"type\":12,\"points\":[\"a6667c8\",\"702ccfa\",\"9fc0ba3\",\"984da11\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"id\":\"8b37b4f\",\"name\":\"area\",\"tags\":[\"area\",\"area-11\"],\"label\":\"A8b37b4f\",\"x\":44,\"y\":49,\"width\":193,\"height\":195,\"lineWidth\":1,\"area\":{\"type\":11,\"points\":[\"21b74c90\",\"00f32a0\",\"7f201a25\",\"8de717e\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"id\":\"5d96dd3d\",\"name\":\"area\",\"tags\":[\"area\",\"area-1\"],\"label\":\"A5d96dd3d\",\"x\":451,\"y\":126,\"width\":196,\"height\":125,\"lineWidth\":1,\"area\":{\"type\":1,\"points\":[\"5170c043\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"x\":88,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"21b74c90\",\"name\":\"point\",\"tags\":[\"point\",\"point-1\"],\"label\":\"P21b74c90\",\"point\":{\"type\":1},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"21b74c90\",\"id\":\"c\"}],\"rotate\":0,\"connectedLines\":[{\"lineId\":\"57e55945\",\"lineAnchor\":\"4d6a84f\"}]},{\"x\":188,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"00f32a0\",\"name\":\"point\",\"tags\":[\"point\",\"point-2\"],\"label\":\"P00f32a0\",\"point\":{\"type\":2},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"00f32a0\",\"id\":\"c\"}],\"rotate\":0,\"connectedLines\":[{\"lineId\":\"57e55945\",\"lineAnchor\":\"5e82ddd8\"}]},{\"x\":288,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"a6667c8\",\"name\":\"point\",\"tags\":[\"point\",\"point-3\"],\"label\":\"Pa6667c8\",\"point\":{\"type\":3},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"a6667c8\",\"id\":\"c\"}],\"rotate\":0},{\"x\":388,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"702ccfa\",\"name\":\"point\",\"tags\":[\"point\",\"point-4\"],\"label\":\"P702ccfa\",\"point\":{\"type\":4},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"702ccfa\",\"id\":\"c\"}],\"rotate\":0},{\"x\":76,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/11-dark.png\",\"canvasLayer\":3,\"id\":\"7f201a25\",\"name\":\"point\",\"tags\":[\"point\",\"point-11\"],\"label\":\"P7f201a25\",\"point\":{\"type\":11},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"7f201a25\",\"id\":\"c\"}],\"rotate\":0},{\"x\":176,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/12-dark.png\",\"canvasLayer\":3,\"id\":\"8de717e\",\"name\":\"point\",\"tags\":[\"point\",\"point-12\"],\"label\":\"P8de717e\",\"point\":{\"type\":12},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"8de717e\",\"id\":\"c\"}],\"rotate\":0},{\"x\":276,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/13-dark.png\",\"canvasLayer\":3,\"id\":\"9fc0ba3\",\"name\":\"point\",\"tags\":[\"point\",\"point-13\"],\"label\":\"P9fc0ba3\",\"point\":{\"type\":13},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"9fc0ba3\",\"id\":\"c\"}],\"rotate\":0},{\"x\":376,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/14-dark.png\",\"canvasLayer\":3,\"id\":\"984da11\",\"name\":\"point\",\"tags\":[\"point\",\"point-14\"],\"label\":\"P984da11\",\"point\":{\"type\":14},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"984da11\",\"id\":\"c\"}],\"rotate\":0},{\"x\":476,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/15-dark.png\",\"canvasLayer\":3,\"id\":\"5170c043\",\"name\":\"point\",\"tags\":[\"point\",\"point-15\"],\"label\":\"P5170c043\",\"point\":{\"type\":15},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"5170c043\",\"id\":\"c\"}],\"rotate\":0},{\"x\":576,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/16-dark.png\",\"canvasLayer\":3,\"id\":\"d292734\",\"name\":\"point\",\"tags\":[\"point\",\"point-16\"],\"label\":\"Pd292734\",\"point\":{\"type\":16},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"d292734\",\"id\":\"c\"}],\"rotate\":0}],\"origin\":{\"x\":0,\"y\":0},\"center\":{\"x\":0,\"y\":0},\"paths\":{},\"template\":\"4c2a10f\",\"theme\":\"dark\",\"background\":\"#1e2430\",\"color\":\"#bdc7db\",\"locked\":4,\"version\":\"1.0.78\",\"dataPoints\":[],\"robotGroups\":[{\"id\":\"mock-robot-group-1\",\"label\":\"模拟机器人组A\",\"robots\":[\"mock-robot-1\",\"mock-robot-2\",\"mock-robot-3\"]},{\"sid\":\"mock-scene-1\",\"id\":\"mock-robot-group-2\",\"label\":\"模拟机器人组B\",\"robots\":[\"mock-robot-4\"]}],\"robots\":[{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-1\",\"label\":\"模拟机器人A\",\"brand\":\"模拟品牌A\",\"type\":1,\"ip\":\"127.0.1.1\"},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-2\",\"label\":\"模拟机器人B\",\"brand\":\"模拟品牌A\",\"type\":2,\"ip\":\"127.0.1.2\"},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-3\",\"label\":\"模拟机器人C\",\"brand\":\"模拟品牌A\",\"type\":3,\"ip\":\"127.0.1.3\"},{\"gid\":\"mock-robot-group-2\",\"id\":\"mock-robot-4\",\"label\":\"模拟机器人D\",\"brand\":\"模拟品牌B\",\"type\":1,\"ip\":\"127.0.2.1\"}]}"
+    "json": "{\"x\":0,\"y\":0,\"scale\":1,\"pens\":[{\"id\":\"81d7368\",\"name\":\"area\",\"tags\":[\"area\",\"area-11\"],\"label\":\"A81d7368\",\"x\":52,\"y\":47,\"width\":192,\"height\":205,\"lineWidth\":1,\"area\":{\"type\":11,\"points\":[\"21b74c90\",\"00f32a0\",\"7f201a25\",\"8de717e\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"id\":\"3afaff2\",\"name\":\"area\",\"tags\":[\"area\",\"area-12\"],\"label\":\"A3afaff2\",\"x\":254,\"y\":52,\"width\":183,\"height\":195,\"lineWidth\":1,\"area\":{\"type\":12,\"points\":[\"a6667c8\",\"702ccfa\",\"9fc0ba3\",\"984da11\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"id\":\"5d96dd3d\",\"name\":\"area\",\"tags\":[\"area\",\"area-1\"],\"label\":\"A5d96dd3d\",\"x\":451,\"y\":126,\"width\":196,\"height\":125,\"lineWidth\":1,\"area\":{\"type\":1,\"points\":[\"5170c043\"],\"routes\":[]},\"locked\":4,\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[],\"rotate\":0},{\"x\":88,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"21b74c90\",\"name\":\"point\",\"tags\":[\"point\",\"point-1\"],\"label\":\"P21b74c90\",\"point\":{\"type\":1},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"21b74c90\",\"id\":\"c\"}],\"rotate\":0,\"connectedLines\":[{\"lineId\":\"57e55945\",\"lineAnchor\":\"4d6a84f\"}]},{\"x\":188,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"00f32a0\",\"name\":\"point\",\"tags\":[\"point\",\"point-2\"],\"label\":\"P00f32a0\",\"point\":{\"type\":2},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"00f32a0\",\"id\":\"c\"}],\"rotate\":0,\"connectedLines\":[{\"lineId\":\"57e55945\",\"lineAnchor\":\"5e82ddd8\"}]},{\"x\":288,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"a6667c8\",\"name\":\"point\",\"tags\":[\"point\",\"point-3\"],\"label\":\"Pa6667c8\",\"point\":{\"type\":3},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"a6667c8\",\"id\":\"c\"}],\"rotate\":0},{\"x\":388,\"y\":88,\"width\":24,\"height\":24,\"lineWidth\":2,\"iconSize\":4,\"image\":\"\",\"canvasLayer\":3,\"id\":\"702ccfa\",\"name\":\"point\",\"tags\":[\"point\",\"point-4\"],\"label\":\"P702ccfa\",\"point\":{\"type\":4},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"702ccfa\",\"id\":\"c\"}],\"rotate\":0},{\"x\":76,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/11-dark.png\",\"canvasLayer\":3,\"id\":\"7f201a25\",\"name\":\"point\",\"tags\":[\"point\",\"point-11\"],\"label\":\"P7f201a25\",\"point\":{\"type\":11},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"7f201a25\",\"id\":\"c\"}],\"rotate\":0},{\"x\":176,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/12-dark.png\",\"canvasLayer\":3,\"id\":\"8de717e\",\"name\":\"point\",\"tags\":[\"point\",\"point-12\"],\"label\":\"P8de717e\",\"point\":{\"type\":12},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"8de717e\",\"id\":\"c\"}],\"rotate\":0},{\"x\":276,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/13-dark.png\",\"canvasLayer\":3,\"id\":\"9fc0ba3\",\"name\":\"point\",\"tags\":[\"point\",\"point-13\"],\"label\":\"P9fc0ba3\",\"point\":{\"type\":13},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"9fc0ba3\",\"id\":\"c\"}],\"rotate\":0},{\"x\":376,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/14-dark.png\",\"canvasLayer\":3,\"id\":\"984da11\",\"name\":\"point\",\"tags\":[\"point\",\"point-14\"],\"label\":\"P984da11\",\"point\":{\"type\":14},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"984da11\",\"id\":\"c\"}],\"rotate\":0},{\"x\":476,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/15-dark.png\",\"canvasLayer\":3,\"id\":\"5170c043\",\"name\":\"point\",\"tags\":[\"point\",\"point-15\"],\"label\":\"P5170c043\",\"point\":{\"type\":15},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"5170c043\",\"id\":\"c\"}],\"rotate\":0},{\"x\":576,\"y\":170,\"width\":48,\"height\":60,\"lineWidth\":3,\"iconSize\":10,\"image\":\"/point/16-dark.png\",\"canvasLayer\":3,\"id\":\"d292734\",\"name\":\"point\",\"tags\":[\"point\",\"point-16\"],\"label\":\"Pd292734\",\"point\":{\"type\":16},\"fontSize\":14,\"lineHeight\":1.5,\"anchors\":[{\"x\":0.5,\"y\":0.5,\"penId\":\"d292734\",\"id\":\"c\"}],\"rotate\":0}],\"origin\":{\"x\":0,\"y\":0},\"center\":{\"x\":0,\"y\":0},\"paths\":{},\"template\":\"4c2a10f\",\"theme\":\"dark\",\"background\":\"#1e2430\",\"color\":\"#bdc7db\",\"locked\":4,\"version\":\"1.0.79\",\"dataPoints\":[],\"robotGroups\":[{\"id\":\"mock-robot-group-1\",\"label\":\"模拟机器人组A\",\"robots\":[\"mock-robot-1\",\"mock-robot-2\",\"mock-robot-3\"]},{\"sid\":\"mock-scene-1\",\"id\":\"mock-robot-group-2\",\"label\":\"模拟机器人组B\",\"robots\":[\"mock-robot-4\"]}],\"robots\":[{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-1\",\"label\":\"模拟机器人A\",\"brand\":\"模拟品牌A\",\"type\":1,\"ip\":\"127.0.1.1\"},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-2\",\"label\":\"模拟机器人B\",\"brand\":\"模拟品牌A\",\"type\":2,\"ip\":\"127.0.1.2\"},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-3\",\"label\":\"模拟机器人C\",\"brand\":\"模拟品牌A\",\"type\":3,\"ip\":\"127.0.1.3\"},{\"gid\":\"mock-robot-group-2\",\"id\":\"mock-robot-4\",\"label\":\"模拟机器人D\",\"brand\":\"模拟品牌B\",\"type\":1,\"ip\":\"127.0.2.1\"}]}"
   },
   "message": "模拟提示"
 }
diff --git a/src/_ant.scss b/src/_ant.scss
index d02ef42..b7031a9 100644
--- a/src/_ant.scss
+++ b/src/_ant.scss
@@ -417,6 +417,7 @@
   }
 
   .ant-list.block .ant-list-item {
+    gap: 8px;
     padding: 12px;
     background-color: get-color(fill4);
     border: none;
diff --git a/src/apis/map/constant.ts b/src/apis/map/constant.ts
index 722057a..f1f800a 100644
--- a/src/apis/map/constant.ts
+++ b/src/apis/map/constant.ts
@@ -36,6 +36,9 @@ export enum MapRoutePassType {
   仅载货可通行,
   禁行 = 10,
 }
+export const MAP_ROUTE_PASS_TYPES = Object.freeze(
+  <[string, MapRoutePassType][]>Object.entries(MapRoutePassType).filter(([, v]) => typeof v === 'number'),
+);
 //#endregion
 
 //#region 区域
diff --git a/src/components/card/area-detail-card.vue b/src/components/card/area-detail-card.vue
index a78b728..cb35bb1 100644
--- a/src/components/card/area-detail-card.vue
+++ b/src/components/card/area-detail-card.vue
@@ -13,9 +13,9 @@ const editor = inject(props.token)!;
 
 const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
 const area = computed<MapAreaInfo | null>(() => {
-  const area = pen.value?.area;
-  if (!area?.type) return null;
-  return area;
+  const v = pen.value?.area;
+  if (!v?.type) return null;
+  return v;
 });
 
 const icon = computed<string>(() => `area${area.value?.type}-detail`);
diff --git a/src/components/card/point-detail-card.vue b/src/components/card/point-detail-card.vue
index a02f29a..fe7efeb 100644
--- a/src/components/card/point-detail-card.vue
+++ b/src/components/card/point-detail-card.vue
@@ -13,9 +13,9 @@ const editor = inject(props.token)!;
 
 const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
 const point = computed<MapPointInfo | null>(() => {
-  const point = pen.value?.point;
-  if (!point?.type) return null;
-  return point;
+  const v = pen.value?.point;
+  if (!v?.type) return null;
+  return v;
 });
 
 const bindRobot = computed<string>(
diff --git a/src/components/card/route-detail-card.vue b/src/components/card/route-detail-card.vue
new file mode 100644
index 0000000..d406090
--- /dev/null
+++ b/src/components/card/route-detail-card.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { MAP_ROUTE_TYPE, type MapPen, type MapRouteInfo, MapRoutePassType } from '@api/map';
+import type { EditorService } from '@core/editor.service';
+import sTheme from '@core/theme.service';
+import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+  editable?: boolean;
+  current?: string;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
+const route = computed<MapRouteInfo | null>(() => {
+  const v = pen.value?.route;
+  if (!v?.type) return null;
+  return v;
+});
+
+const label = computed<string>(() => editor.value.getRouteLabel(pen.value?.id));
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <template v-if="pen && route">
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-flex align="center" :gap="8">
+            <i class="icon route" />
+            <a-typography-text class="card-title" style="flex: auto" :content="label" ellipsis />
+            <a-tag :bordered="false">{{ $t(MapRoutePassType[route.pass ?? MapRoutePassType.无]) }}</a-tag>
+          </a-flex>
+        </a-col>
+
+        <a-col :span="24">
+          <a-typography-text code>{{ pen.desc || $t('暂无描述') }}</a-typography-text>
+        </a-col>
+      </a-row>
+
+      <a-list class="block mt-16">
+        <a-list-item>
+          <a-typography-text type="secondary">{{ $t('路段类型') }}</a-typography-text>
+          <a-typography-text>{{ $t(MAP_ROUTE_TYPE[route.type]) }}</a-typography-text>
+        </a-list-item>
+        <a-list-item>
+          <a-typography-text type="secondary">{{ $t('路段长度') }}</a-typography-text>
+          <a-typography-text>{{ pen.length?.toFixed() }}</a-typography-text>
+        </a-list-item>
+        <a-list-item>
+          <a-typography-text style="flex: none" type="secondary">{{ $t('路段方向') }}</a-typography-text>
+          <a-typography-text :content="label" ellipsis />
+        </a-list-item>
+      </a-list>
+    </template>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
diff --git a/src/components/card/route-edit-card.vue b/src/components/card/route-edit-card.vue
new file mode 100644
index 0000000..6777fa0
--- /dev/null
+++ b/src/components/card/route-edit-card.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import {
+  MAP_ROUTE_PASS_TYPES,
+  MAP_ROUTE_TYPES,
+  type MapPen,
+  type MapRouteInfo,
+  MapRoutePassType,
+  MapRouteType,
+} from '@api/map';
+import type { EditorService } from '@core/editor.service';
+import sTheme from '@core/theme.service';
+import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+  id?: string;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+const pen = computed<MapPen | null>(() => {
+  const v = editor.value.current.value;
+  if (v?.id !== props.id) return null;
+  return v!;
+});
+const route = computed<MapRouteInfo | null>(() => {
+  const v = pen.value?.route;
+  if (!v?.type) return null;
+  return v;
+});
+</script>
+
+<template>
+  <a-card class="full" :title="$t('属性')" :bordered="false">
+    <a-flex v-if="id && pen && route" :gap="24" vertical>
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-select
+            :value="route.pass ?? MapRoutePassType.无"
+            @change="editor.updateRoute(id, { pass: <number>$event })"
+          >
+            <a-select-option v-for="[l, v] in MAP_ROUTE_PASS_TYPES" :key="v">{{ $t(l) }}</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-typography-text>{{ $t('描述') }}:</a-typography-text>
+        </a-col>
+        <a-col :span="24">
+          <a-textarea
+            class="prop"
+            :placeholder="$t('请输入描述内容')"
+            :maxlength="100"
+            :autoSize="{ minRows: 3, maxRows: 3 }"
+            :value="pen?.desc"
+            @change="editor.updatePen(id, { desc: $event.target.value }, false)"
+          />
+        </a-col>
+      </a-row>
+
+      <a-row align="middle" :gutter="10" :wrap="false">
+        <a-col flex="none">
+          <a-typography-text>{{ $t('路段长度') }}:</a-typography-text>
+        </a-col>
+        <a-col flex="auto">
+          <a-input :value="pen.length?.toFixed()" disabled />
+        </a-col>
+      </a-row>
+
+      <a-row align="middle" :gutter="10" :wrap="false">
+        <a-col flex="none">
+          <a-typography-text>{{ $t('路段方向') }}:</a-typography-text>
+        </a-col>
+        <a-col flex="auto">
+          <a-select :value="route.direction || 1" @change="editor.updateRoute(id, { direction: <-1 | 1>$event })">
+            <a-select-option :value="1">{{ editor.getRouteLabel(id, 1) }}</a-select-option>
+            <a-select-option :value="-1">{{ editor.getRouteLabel(id, -1) }}</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+
+      <a-row align="middle" :gutter="10" :wrap="false">
+        <a-col flex="none">
+          <a-typography-text>{{ $t('路段类型') }}:</a-typography-text>
+        </a-col>
+        <a-col flex="auto">
+          <a-select :value="route.type" @change="editor.changeRouteType(id, <MapRouteType>$event)">
+            <a-select-option v-for="[l, v] in MAP_ROUTE_TYPES" :key="v">{{ $t(l) }}</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+
+      <template v-if="MapRouteType.三阶贝塞尔曲线 === route.type">
+        <a-row align="middle" :gutter="8">
+          <a-col flex="auto">
+            <a-typography-text>{{ $t('控制点1') }}:</a-typography-text>
+          </a-col>
+          <a-col flex="none">
+            <a-space :size="8">
+              <a-typography-text code>X:</a-typography-text>
+              <a-input-number
+                style="width: 80px"
+                :placeholder="$t('请输入')"
+                :precision="0"
+                :controls="false"
+                :value="route?.c1?.x.toFixed()"
+                @change="editor.updateRoute(id, { c1: { x: <number>$event, y: route?.c1?.y ?? 0 } })"
+              />
+            </a-space>
+          </a-col>
+          <a-col flex="none">
+            <a-space :size="8">
+              <a-typography-text code>Y:</a-typography-text>
+              <a-input-number
+                style="width: 80px"
+                :placeholder="$t('请输入')"
+                :precision="0"
+                :controls="false"
+                :value="route?.c1?.y.toFixed()"
+                @change="editor.updateRoute(id, { c1: { x: route?.c1?.x ?? 0, y: <number>$event } })"
+              />
+            </a-space>
+          </a-col>
+        </a-row>
+
+        <a-row align="middle" :gutter="8">
+          <a-col flex="auto">
+            <a-typography-text>{{ $t('控制点2') }}:</a-typography-text>
+          </a-col>
+          <a-col flex="none">
+            <a-space :size="8">
+              <a-typography-text code>X:</a-typography-text>
+              <a-input-number
+                style="width: 80px"
+                :placeholder="$t('请输入')"
+                :precision="0"
+                :controls="false"
+                :value="route?.c2?.x.toFixed()"
+                @change="editor.updateRoute(id, { c2: { x: <number>$event, y: route?.c2?.y ?? 0 } })"
+              />
+            </a-space>
+          </a-col>
+          <a-col flex="none">
+            <a-space :size="8">
+              <a-typography-text code>Y:</a-typography-text>
+              <a-input-number
+                style="width: 80px"
+                :placeholder="$t('请输入')"
+                :precision="0"
+                :controls="false"
+                :value="route?.c2?.y.toFixed()"
+                @change="editor.updateRoute(id, { c2: { x: route?.c2?.x ?? 0, y: <number>$event } })"
+              />
+            </a-space>
+          </a-col>
+        </a-row>
+      </template>
+    </a-flex>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index b764b2b..f99567d 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -47,6 +47,7 @@ const importScene = async () => {
 const exportScene = () => {
   const json = editor.value?.save();
   if (!json) return;
+  getSceneById(json);
   const blob = textToBlob(json);
   if (!blob?.size) return;
   const url = URL.createObjectURL(blob);
@@ -142,7 +143,8 @@ const selectRobot = (id: string) => {
         <PointDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
       </template>
       <template v-if="isRoute">
-        <div v-if="editable"></div>
+        <RouteEditCard v-if="editable" :token="EDITOR_KEY" :id="current.id" />
+        <RouteDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
       </template>
       <template v-if="isArea">
         <AreaEditCard v-if="editable" :token="EDITOR_KEY" :id="current.id" />
diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts
index 82d756b..18d5379 100644
--- a/src/services/editor.service.ts
+++ b/src/services/editor.service.ts
@@ -5,6 +5,7 @@ import {
   type MapPen,
   type MapPointInfo,
   MapPointType,
+  type MapRouteInfo,
   MapRoutePassType,
   MapRouteType,
   type Point,
@@ -35,7 +36,7 @@ export class EditorService extends Meta2d {
   }
 
   public setState(editable?: boolean): void {
-    this.lock(editable ? LockState.None : LockState.DisableMoveScale);
+    this.lock(editable ? LockState.None : LockState.DisableEdit);
   }
 
   public override data(): SceneData {
@@ -245,7 +246,7 @@ export class EditorService extends Meta2d {
     { initialValue: new Array<MapPen>() },
   );
 
-  public getRouteLabel(id?: string): string {
+  public getRouteLabel(id?: string, d?: number): string {
     if (!id) return '';
     const pen = this.getPenById(id);
     if (isNil(pen)) return '';
@@ -255,15 +256,15 @@ export class EditorService extends Meta2d {
     const p2 = this.getPenById(a2.connectTo);
     if (isNil(p1) || isNil(p2)) return '';
     const { direction = 1 } = pen.route ?? {};
-    return `${p1.text} ${direction > 0 ? '→' : '←'} ${p2.text}`;
+    return `${p1.label}${(d ?? direction) > 0 ? '→' : '←'}${p2.label}`;
   }
 
   public addRoute(p: [string, string], type = MapRouteType.直线): void {
     const [p1, p2] = p.map((v) => this.getPenById(v));
     if (!p1?.anchors?.length || !p2?.anchors?.length) return;
-    const line = this.connectLine(p1, p2, undefined, undefined, false);
-    const pen: MapPen = { tags: ['route'], route: { type }, lineWidth: 2 };
-    this.bottom(line);
+    const line = this.connectLine(p1, p2, p1.anchors[0], p2.anchors[0], false);
+    const pen: MapPen = { tags: ['route'], route: { type }, lineWidth: 2, iconSize: 10 };
+    // this.bottom(line);
     this.setValue({ id: line.id, ...pen }, { render: false, history: false, doEvent: false });
     this.updateLineType(line, type);
     // this.pushHistory({ type: EditType.Add, pens: [cloneDeep(line)] });
@@ -271,6 +272,12 @@ export class EditorService extends Meta2d {
     this.render();
   }
 
+  public updateRoute(id: string, info: Partial<MapRouteInfo>): void {
+    const { route } = this.getPenById(id) ?? {};
+    if (!route?.type) return;
+    const o = { ...route, ...info };
+    this.setValue({ id, route: o }, { render: true, history: true, doEvent: true });
+  }
   public changeRouteType(id: string, type: MapRouteType): void {
     const pen = this.getPenById(id);
     if (isNil(pen)) return;
@@ -377,6 +384,8 @@ export class EditorService extends Meta2d {
     this.render();
   }
 
+  #onDelete(): void {}
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #listen(e: unknown, v: any) {
     switch (e) {
@@ -386,8 +395,15 @@ export class EditorService extends Meta2d {
         break;
 
       case 'add':
+        this.#change$$.next(true);
+        break;
       case 'delete':
+        this.#onDelete();
+        this.#change$$.next(true);
+        break;
       case 'update':
+        this.#change$$.next(true);
+        break;
       case 'valueUpdate':
         this.#change$$.next(true);
         break;
@@ -438,6 +454,7 @@ export class EditorService extends Meta2d {
   }
 
   #register() {
+    this.register({ line: () => new Path2D() });
     this.registerCanvasDraw({ point: drawPoint, line: drawLine, area: drawArea });
     this.registerAnchors({ point: anchorPoint });
     this.addDrawLineFn('bezier3', lineBezier3);
@@ -511,11 +528,17 @@ function drawPoint(ctx: CanvasRenderingContext2D, pen: MapPen): void {
   ctx.restore();
 }
 function anchorPoint(pen: MapPen): void {
-  pen.anchors = [{ penId: pen.id, id: 'c', x: 0.5, y: 0.5 }];
+  pen.anchors = [
+    { penId: pen.id, id: 't', x: 0.5, y: 0 },
+    { penId: pen.id, id: 'b', x: 0.5, y: 1 },
+    { penId: pen.id, id: 'l', x: 0, y: 0.5 },
+    { penId: pen.id, id: 'r', x: 1, y: 0.5 },
+  ];
 }
 
 function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
   const theme = sTheme.editor;
+  const { iconSize: s = 10 } = pen.calculative ?? {};
   const [p1, p2] = pen.calculative?.worldAnchors ?? [];
   const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
   const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
@@ -524,8 +547,9 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
   const { x: dx2 = 0, y: dy2 = y2 - y1 } = c2 ?? {};
 
   ctx.save();
-  ctx.moveTo(x1, y1);
+  ctx.beginPath();
   ctx.strokeStyle = get(theme, `route.stroke-${pass}`) ?? '';
+  ctx.moveTo(x1, y1);
   switch (type) {
     case MapRouteType.直线:
       ctx.lineTo(x2, y2);
@@ -539,8 +563,32 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
       break;
   }
   if (pass === MapRoutePassType.禁行) {
-    ctx.setLineDash([8, 4]);
+    ctx.setLineDash([s / 2]);
   }
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.setLineDash([0]);
+  let r = (() => {
+    switch (type) {
+      case MapRouteType.直线:
+        return Math.atan2(y2 - y1, x2 - x1);
+      case MapRouteType.三阶贝塞尔曲线:
+        return direction < 0 ? Math.atan2(dy1, dx1) : Math.atan2(dy2, dx2);
+      default:
+        return 0;
+    }
+  })();
+  if (direction < 0) {
+    ctx.translate(x1, y1);
+  } else {
+    ctx.translate(x2, y2);
+    r += Math.PI;
+  }
+  ctx.moveTo(Math.cos(r + Math.PI / 5) * s, Math.sin(r + Math.PI / 5) * s);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(Math.cos(r - Math.PI / 5) * s, Math.sin(r - Math.PI / 5) * s);
+  ctx.stroke();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.restore();
 }
 function lineBezier3(_: Meta2dStore, pen: MapPen): void {