From fe1ba733ef1769d676942d4c7101d68f1ef2939f Mon Sep 17 00:00:00 2001
From: chndfang <chndfang@outlook.com>
Date: Tue, 6 May 2025 23:48:21 +0800
Subject: [PATCH] temp

---
 README.md                                     |  16 +-
 src/_ant.scss                                 |   5 +
 src/apis/map/constant.ts                      |   7 +
 src/apis/map/type.ts                          |   8 +-
 src/assets/icons/_icon.scss                   |  12 +-
 src/assets/icons/dark/area1-detail.png        | Bin 0 -> 590 bytes
 .../{area2-active.png => area11-active.png}   | Bin
 src/assets/icons/dark/area11-detail.png       | Bin 0 -> 1111 bytes
 .../icons/dark/{area2.png => area11.png}      | Bin
 .../{area3-active.png => area12-active.png}   | Bin
 src/assets/icons/dark/area12-detail.png       | Bin 0 -> 1149 bytes
 .../icons/dark/{area3.png => area12.png}      | Bin
 src/assets/icons/dark/point.png               | Bin 0 -> 1250 bytes
 src/assets/themes/editor-dark.json            |   9 +
 src/components/card/area-detail-card.vue      |  79 ++++++++
 src/components/card/point-detail-card.vue     | 115 +++++++++++
 src/components/card/robot-detail-card.vue     |   9 +-
 src/components/editor-toolbar.vue             |   4 +-
 src/components/pen-groups.vue                 | 190 +++++++++++-------
 src/pages/scene-editor.vue                    |  31 ++-
 src/services/editor.service.ts                |  87 +++++++-
 21 files changed, 464 insertions(+), 108 deletions(-)
 create mode 100644 src/assets/icons/dark/area1-detail.png
 rename src/assets/icons/dark/{area2-active.png => area11-active.png} (100%)
 create mode 100644 src/assets/icons/dark/area11-detail.png
 rename src/assets/icons/dark/{area2.png => area11.png} (100%)
 rename src/assets/icons/dark/{area3-active.png => area12-active.png} (100%)
 create mode 100644 src/assets/icons/dark/area12-detail.png
 rename src/assets/icons/dark/{area3.png => area12.png} (100%)
 create mode 100644 src/assets/icons/dark/point.png
 create mode 100644 src/components/card/area-detail-card.vue
 create mode 100644 src/components/card/point-detail-card.vue

diff --git a/README.md b/README.md
index b90a4d0..2f6c1c6 100644
--- a/README.md
+++ b/README.md
@@ -102,10 +102,14 @@ interface MapPen {
 interface MapPointInfo {
   type: MapPointType; // 点位类型
   robots?: Array<RobotInfo['id']>; // 绑定机器人id集合
+  actions?: Array<string>; // 绑定动作点id集合
+  isBlock?: boolean; // 是否禁行
+  isForbidAvoid?: boolean; // 是否禁止避让
 }
 interface MapRouteInfo {
   type: MapRouteType; // 线路类型
-  direction?: -1 | 1; // 线路方向
+  direction?: -1 | 1; // 方向
+  pass?: MapRoutePassType; // 可通行类型
 }
 interface MapAreaInfo {
   type: MapAreaType; // 区域类型
@@ -128,10 +132,20 @@ enum MapPointType {
 
   障碍点 = 99, // 待优化，后续将单独抽离
 }
+
 enum MapRouteType {
   直线 = 'line',
   三阶贝塞尔曲线 = 'bezier3',
 }
+enum MapRoutePassType {
+  无,
+
+  仅空载可通行,
+  仅载货可通行,
+
+  禁行 = 10,
+}
+
 enum MapAreaType {
   库区 = 1,
 
diff --git a/src/_ant.scss b/src/_ant.scss
index 31347ab..aee3eea 100644
--- a/src/_ant.scss
+++ b/src/_ant.scss
@@ -650,6 +650,11 @@
       color: get-color(text4);
     }
 
+    &.card-title {
+      font-size: 20px;
+      line-height: 28px;
+    }
+
     & > strong {
       font: 500 16px/22px Roboto;
     }
diff --git a/src/apis/map/constant.ts b/src/apis/map/constant.ts
index aefe14b..fff7027 100644
--- a/src/apis/map/constant.ts
+++ b/src/apis/map/constant.ts
@@ -27,6 +27,13 @@ export enum MapRouteType {
   三阶贝塞尔曲线 = 'bezier3',
 }
 export const MAP_ROUTE_TYPES = Object.freeze(<[string, MapRouteType][]>Object.entries(MapRouteType));
+
+export enum MapRoutePassType {
+  无,
+  仅空载可通行,
+  仅载货可通行,
+  禁行 = 10,
+}
 //#endregion
 
 //#region 区域
diff --git a/src/apis/map/type.ts b/src/apis/map/type.ts
index 46ea61b..cc61976 100644
--- a/src/apis/map/type.ts
+++ b/src/apis/map/type.ts
@@ -1,7 +1,7 @@
 import type { RobotInfo } from '@api/robot';
 import type { Pen } from '@meta2d/core';
 
-import type { MapAreaType, MapPointType, MapRouteType } from './constant';
+import type { MapAreaType, MapPointType, MapRoutePassType, MapRouteType } from './constant';
 
 export interface MapPen extends Pen {
   label?: string; // 展示名称
@@ -19,13 +19,17 @@ export interface MapPen extends Pen {
 export interface MapPointInfo {
   type: MapPointType; // 点位类型
   robots?: Array<RobotInfo['id']>; // 绑定机器人id集合
+  actions?: Array<string>; // 绑定动作点id集合
+  isBlock?: boolean; // 是否禁行
+  isForbidAvoid?: boolean; // 是否禁止避让
 }
 //#endregion
 
 //#region 线路
 export interface MapRouteInfo {
   type: MapRouteType; // 线路类型
-  direction?: -1 | 1; // 线路方向
+  direction?: -1 | 1; // 方向
+  pass?: MapRoutePassType; // 可通行类型
 }
 //#endregion
 
diff --git a/src/assets/icons/_icon.scss b/src/assets/icons/_icon.scss
index 6c12269..c37388e 100644
--- a/src/assets/icons/_icon.scss
+++ b/src/assets/icons/_icon.scss
@@ -1,10 +1,13 @@
 $icons: (
   area1-active,
+  area1-detail,
   area1,
-  area2-active,
-  area2,
-  area3-active,
-  area3,
+  area11-active,
+  area11-detail,
+  area11,
+  area12-active,
+  area12-detail,
+  area12,
   battery_charge,
   battery,
   connect_off,
@@ -17,6 +20,7 @@ $icons: (
   exit,
   pen,
   plus,
+  point,
   redo,
   register,
   robot,
diff --git a/src/assets/icons/dark/area1-detail.png b/src/assets/icons/dark/area1-detail.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecb5c796027abc0af35d1d156beefa9cd9d72965
GIT binary patch
literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%2uVaiRA@u(nZ0fkQ4oc{BOxU;P=x|Pm4X5q%0x62NO=P2sGv)i=b)o=Nrj&v
zQi>Fj;)>D|6^*4tf{HY;g{6r`@>-kq{%GyJ>$SPltu(uL&ive&og+3}wBhy>0jxWM
zg%L2bUEnqF9C!lkv~27I_zest4U5js1z={6f%m|pmW?ht?gr>f`kPfK0`R#*#wRvA
zh;Nd{X%Gtl%<Ls_)Dh2T&A5~_r~>c-c$QM~{PP#x1FeafdHNm#?$AU=lKNEujxz<@
zYuot5z!?Zn=R_uwzE%M^xu+m~Y0d392bo!^J$W_oe*rMFr@#x~AMi`kRawNA&<`5{
zGkXI(oEbfpbY20Vu6}R;?=m%WRso={egsf@3z=D6kJi<X5r`2;7xfY;7gK0EQYh6y
z9|WF_ZqpsTu~{h7aRXyu-qD)`@D>Q|{lqb2Nf-XmBmf`U_5uId4=GdNr=;sf0Tfxh
z#I+bZaif1^F#=N6_#Hd(c68!+3(Y*RM9~MYfpmwSchHiE)zuFUAnDLPX3RTi34pr#
zVF84kDOwpNx(J|4%Uvg0KGj|B=B?KUdF)6?@2|36_nrJfNaI%c_Gy+c%iB&nnfI}a
z6qBT07JLy$=In^4QkO`+?|DQ^DbYRS%U%I{Yob~I03+asB&S^$Br^3Y6l5c>#t1ax
c#uYwt2ZM9^K;?M>kN^Mx07*qoM6N<$f^rN3tN;K2

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area2-active.png b/src/assets/icons/dark/area11-active.png
similarity index 100%
rename from src/assets/icons/dark/area2-active.png
rename to src/assets/icons/dark/area11-active.png
diff --git a/src/assets/icons/dark/area11-detail.png b/src/assets/icons/dark/area11-detail.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2b547b3c0f44f7ca714ad20004e2c4c30c5678a
GIT binary patch
literal 1111
zcmV-d1gQIoP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(5lKWrRA@u(T0LtOK@>d~1hr7HP*Bvu4-{?uDpV}Av$NAmEA8z39d=s9N-OQs
zrBXpKO$=D1kt84i3sZ<uFu}mlBeReD=FPsD-S_fdB2Kg9?d<G5cjn%E?%5c&_^>T*
zKY9R=+yUSmfD-_A1K6GcxeVY7fN3-PHfo1-0U)^tz^!0-Q(IR40G~87ff?E802t8t
z%HTBs&)e(-$(;Z$goQqqI>H0E4&eL{TsLcGubZwz@)&@l?zuTL`<z?H1Go!dpL<{y
zz&kUOSCfOJ;zM4$>?W+4+2h=c<NG9c0k{ZYTN4l-z=J4YpP1Qdi6JCgKkL_T1HuD%
z=od4yM<vE<4$1pb;7^#Dg1Yf&3S!d%2o5PeP9p&jys9Ae=R3DMsz=I9e)I(Pr~q67
zAg>NO*5eE}DgeqZdk3{1z^a+O?TXdv50V=e#GyzDKzt<nVLA}aS4NyMv!5de(A4vZ
zqLwsX>u#z#5He6)k!y{Q0mQjnRd_n*J(8jyq9N62Rf*de9|K5nA<>9hDiJDoOt+Ql
zrgFgJ`y@qU&br_GdcK<HkC3>(_)w1j=WJ_Lg-IR(a55}jWPH~Sge{a8ZVv!r%FO0+
z2vhe-s>lg|uA<Xj*`{vIR7a+rxB}pKArKugb!D&2OxKZ)zCCfE%l(d&0=8d_Y&e*I
zuc_Z~mks#^|94=>4sE>LSa%?3P^SSL2C(0Cb;@SanC5e7d29ekDox)gNY!dhMQf7v
zr5He<#40quLZQ*M)gXDzX+WiGB)M4;04F+Cd|s9EQ|X)iJd!GsUWRG1OpoT21&}aa
zFZ@udoJGc;3CG6&tU@RaYRSx&9Ho)or1|lXd^unJn5)E<+~+%~1v6W0;<jpTLVnTt
zeo-gEkQA*EH`BEm0{pbntZD(&czzJ$Q{K-q*8n1B$#2Z;y$~e<4BPl{EN%vZSb4Iz
zZ%D+A((7arK#lR@=UJiEZL_HGS5Jva#@ee?>>??ir0RrZ|7xt5*+d<Hs}0qIx^NJH
z8F&6$s~%wolh3F60kxJ*6tp@3KYUL;h-}joz`;cN(h(}^kOCSNxkWSk-X{aStkPyK
zqmdNNxZ~z6o7uB|K^%iv528}XpxjI2`y}HaE>b;$_eD8;O{foI=dq!JNXaiHpQFO3
zuX~Y0I=y$UkPQt)Xiud*`4&}$Oh+mCb+hKXT_*$89wCpG<S;>qf$Av5LrhaV=WkjK
zY4cDZd~r|SrF>+$P*^Yqp#WWI8V6ymK|Ut-#7z-^@M393r-IQvDsdAqEg5O@>t`{5
zCI*(wC8?|;YVC<y>QRw59h(jV^^?X1z-2oDQEceH1gg)x3U0-N=(RXgt@bo_042NC
dZ_btn@Ec~O_&|zr-|zqc002ovPDHLkV1l>K0Gj{+

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area2.png b/src/assets/icons/dark/area11.png
similarity index 100%
rename from src/assets/icons/dark/area2.png
rename to src/assets/icons/dark/area11.png
diff --git a/src/assets/icons/dark/area3-active.png b/src/assets/icons/dark/area12-active.png
similarity index 100%
rename from src/assets/icons/dark/area3-active.png
rename to src/assets/icons/dark/area12-active.png
diff --git a/src/assets/icons/dark/area12-detail.png b/src/assets/icons/dark/area12-detail.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f365ebad875f5996972905cabf83680fe4c4c74
GIT binary patch
literal 1149
zcmV-@1cLjCP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(H%UZ6RA@u(S-*>3MHD?pj2b~Df))}|s3@oqQ45P$SOo2C#8jrU6C1(*!cHqY
ztqdtlw~!)*3vQ7F1ryBTE@X>Ub|FjLh3t~R(UZ(u<{Rg|nfHD35f*mfvFyJ4?!D*!
zm^pWrIN*y1+<zPbc-R>%W<b*G0A2?0Jb=f;Q|tF8fZG86Bzdj&qcL*503<yF;3ELf
zjZrut`wxI~Bn_z9$^r<^e*)m?W|kf(Y7U|gz-M!CzKg{s$?sbQ=6?V}&3~8}xC-ER
zN08)Rjd4lt7iaKo0PdrBEwt*1901q7o3>lmNG{Yk-6tdIeE@Go@7>fFX3^Pwn*(q*
zY1|)3Zp>m#l6SCABOT7<ceCgm0`O&`_*;^@vlt8I^m(LXkK{MA=&S}n^6M6cBuxaS
zmEK$l&Bf3mfSxiq%s@?lNO~5)R{)LzcnrWJ0L}xr2VgrqKHzTE=!<3MngK~K0C+Jt
z{&C`*0i^2=fK`&~wLs<qK$0VU62McDBQ*dzaRa$R(mw}Ra{wXguL5{9u{;KVKXrMT
z1q>ddO#y@x*O5<`o%sNOBWf;n*XMvFXXuGAYq;EU%OHA7su_S#Ht%L4?+9K8@Wn*)
zB?n~q-u;pSG5Dpva>@blk#8p1ttu)Z=~QUe*v}gz*D_QBeJ8ObgLo-P#Wu;MTzYZ<
z(pjKL=0e@4lzD~Zs*PsI+~7<g=>!1xQM|IHR70n)lDssu6=b5n9`k)ko-bm6MLI3X
zy<`@<zcZ0sO#P@GXgrX6s4)$mV5Z@a^3W158&Vi(UJFA_{JuEQNb)ZBUeZ&SNp4N_
zQZBNR%-v)3LkaNEe=HL4-23;y2i3EHB$tuPsatC#Z`1(rD0rrFE<O(6$w;ZUyqz8Z
z2KOUL|12&^4$hmA;10=OiU2GisTPFCPjj37C;`X~K)xgTsn+@6gHLqtZr!?<_T!j~
zE#DL6?ucGVLb)7%_krcd=fKn#Tar#sM4Y@>m4RY@gFwkZt)4!)lKx@_N)Ch@hnV*)
z){wB0-cUlO8a~~pFQJklNj4C(&fiJ|tfaGhpK0PPl9yYTP;slPbvTs^muxXNs@q1#
z7?k8Q;GH<l09;0Q$LPs8pYA{wsXNHV8kXb})3mr-<~qNQ)f3BSqQ6V>=Tzs+O&prd
zX->)9GRd3MfRJQ1YE~MrIx;tn!2lv{X8+mq?aCOPJxnwked}$KfdIfYn;U3MEevFE
zzLj+3zkh(3_@x|d+(0uXTA9Ynl~N~WAf^+J=6x;{rZ8{8-U$3{I!9Y<a9eJcfzHdY
zcfZl&%$WE%@_&&0Yv`lq0HVlxYmIlNG0yw4%aI>{tun?+Nj8j{-cf3Sn8kV&o&I90
z<kU3p!(r#<biMoOYTaexD0|A<NT;nDTXQL)8pEw*4gs`^<g|JYd<OmnTK}^^0){p7
P00000NkvXXu0mjfm@piK

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area3.png b/src/assets/icons/dark/area12.png
similarity index 100%
rename from src/assets/icons/dark/area3.png
rename to src/assets/icons/dark/area12.png
diff --git a/src/assets/icons/dark/point.png b/src/assets/icons/dark/point.png
new file mode 100644
index 0000000000000000000000000000000000000000..f15007e9ced3a26a97e37cb4fc2a21e6fda77001
GIT binary patch
literal 1250
zcmV<81ReW{P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(oJmAMRA@u(Sv!wSQ561GLQo(i6ylMHS7-!@M@T3nIvo`iozCyjQBhG*(TylZ
zF)<`YA~6Mq0#Q(iM}jDp`6lb!>{<3YXYc!nOfoB(WODC5`>b!RZ#}PIfr~6~{V_5C
zs=5cj2>`zVJQ9)VQ5b8K04@SpWlH}Rk*f<0z~xk75xKGmAY*}{QAkxumu&#n1K5<%
zr+MvX0AB&T2k=Hj`2WB%FaQfy1}v4X5dxYTG`RZ)psG~(RL0UZAb9rMAX%y!fT}JB
za0tNuT1`97KLao+BEM?xtpcE`s{xz_ur7GX2LP{)=ifwxH2|u*%wmJjZ3nP1c%I(4
zQxhM>08IHa0cBXESgfc(r&z!r0l?VtQU#(2fYIh$MtQ#Mu81%otHpqv4Kfxz(MhLL
z0LL?&r`5+BnpA6V4;a0e448sbc_t#`UH5hZur$dRq%tES_qr~x`Ce7|4o@k1fpsI4
z5&&sW!;46pn}b^3Yh<1{@94xtaJ_E;f%UJq1*@vAwJgPo%#=&{Zhvn@<Y%OisxnIv
zL@Hx##je!@s>;jKlsPRTV>ty>b?K~UwgTAPL7jKAN)pJQ;2uw<_abs9x-$e|Y4d`6
zFl&8No`r2?A@AuCwh{k;u*^i-rV@I+4ZuDdNScd6OQ`D30?T`B??mKf;031EwAeiq
zk*VC-HUO-+X==+}qN*zZ9Cep7f4>0mgH|?f?@D5#IsQ~czGMR08!x188vxJ$Y)Z30
z-;gLl<sW-`sOk~`haHHl7gUuAfQ7S>FdOv%Br`1gmYiJ6RYp~1W0!LOxrlrUsIdmX
zf#kcNA~KQj0Cl(&=rON*O#%3PKkxZyBvjRt=|K^B5CyV%frEZeqVuXcZzOeh_Gau9
z01-#lM=1aRjFoJPq!OioI{@@3<tfAtvDqYeLq-%j=6IbAOjDjUWp8pZgM6}*LTu65
zgUzjJ+Je|q>Q;{1nH0)O`y>;@EOZ9}Fl#mPF;``6+GFe9$Y&9`nWJVK0ACTKH0lGB
z?;(g+1Z+i)LB885&vO&G)<RW%8V#GrVHL6+0JcQI8+<<ULdIC|CH+Qj+_UV$^f-)G
zf@5n@3)30{7IeO(w>5JtRBYzDJW<=sh5Ro8zyZS#GudEnXkx7efzTU`M_8R%+&<-6
zhveCu_4{w9%?r7Kh9ElU)tZ<H=I+4;8Uw%uR+`fIaY&^arPH&j>YGP?-D>?#3MH;(
z`DbcNWoEWHyFaKW%<^0s_<49ZL%n%{Ee5^7E-{s=9gg>ob)B@lul~hzcjr)_c!4j;
z?QrHOWoyBrjk8UAY^|fk*6q?ISup_fL>mYm;R=M*;-ZV`Z!XY{CVZAt7Kfy0lg;P2
zC@b3V6~}-JHqwbrpO1-t<F|Q^%U!M~=k}?kQsn^$gzj(aUQ2bLwV7>N7g*6{eFI2h
zgFv{Eh&I;IySd4J@!x*n$Yhk}CnoZn71aZxrD<hWWOkRuJa2R5z#fP$_Y>9PuatqM
zM(Kfc#_sHCN+aH%8zq1yOEK;CX4rle9a$C{wnDY{jm!hJiu8N_FN)O%Pb@ApNdN!<
M07*qoM6N<$g1b&T`2YX_

literal 0
HcmV?d00001

diff --git a/src/assets/themes/editor-dark.json b/src/assets/themes/editor-dark.json
index 3dd99c0..e379b6f 100644
--- a/src/assets/themes/editor-dark.json
+++ b/src/assets/themes/editor-dark.json
@@ -13,5 +13,14 @@
     "stroke": "#595959",
     "strokeActive": "#FCC947"
   },
+  "area": {
+    "stroke-1": "#9ACDFF99",
+    "fill-1": "#9ACDFF33",
+    "stroke-11": "#FF535399",
+    "fill-11": "#FF9A9A33",
+    "stroke-12": "#0DBB8A99",
+    "fill-12": "#0DBB8A33",
+    "strokeActive": "#FCC947"
+  },
   "line": "#8C8C8C"
 }
diff --git a/src/components/card/area-detail-card.vue b/src/components/card/area-detail-card.vue
new file mode 100644
index 0000000..a78b728
--- /dev/null
+++ b/src/components/card/area-detail-card.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { type MapAreaInfo, MapAreaType, type MapPen } 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>>;
+  current?: string;
+};
+const props = defineProps<Props>();
+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 icon = computed<string>(() => `area${area.value?.type}-detail`);
+
+const bindPoint = computed<string>(
+  () =>
+    area.value?.points
+      ?.map((v) => editor.value.getPenById(v)?.label)
+      .filter((v) => !!v)
+      .join('、') ?? '',
+);
+const bindRoute = computed<string>(
+  () =>
+    area.value?.routes
+      ?.map((v) => editor.value.getRouteLabel(v))
+      .filter((v) => !!v)
+      .join('、') ?? '',
+);
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <template v-if="pen && area">
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-flex align="center" :gap="8">
+            <i class="icon" :class="icon" />
+            <a-typography-text class="card-title" style="flex: auto" :content="pen.label" ellipsis />
+            <a-tag :bordered="false">{{ $t(MapAreaType[area.type]) }}</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 v-if="MapAreaType.库区 === area.type">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('绑定动作点') }}</a-typography-text>
+            <a-typography-text>{{ bindPoint || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+        <a-list-item v-if="[MapAreaType.互斥区, MapAreaType.非互斥区].includes(area.type)">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('绑定站点') }}</a-typography-text>
+            <a-typography-text>{{ bindPoint || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+        <a-list-item v-if="MapAreaType.互斥区 === area.type">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('绑定路段') }}</a-typography-text>
+            <a-typography-text>{{ bindRoute || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+      </a-list>
+    </template>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
diff --git a/src/components/card/point-detail-card.vue b/src/components/card/point-detail-card.vue
new file mode 100644
index 0000000..cd1d2dc
--- /dev/null
+++ b/src/components/card/point-detail-card.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { MapAreaType, type MapPen, type MapPointInfo, MapPointType } 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>>;
+  current?: string;
+};
+const props = defineProps<Props>();
+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 bindRobot = computed<string>(
+  () =>
+    point.value?.robots
+      ?.map((v) => editor.value.getRobotById(v)?.label)
+      .filter((v) => !!v)
+      .join('、') ?? '',
+);
+const bindAction = computed<string>(
+  () =>
+    point.value?.actions
+      ?.map((v) => editor.value.getPenById(v)?.label)
+      .filter((v) => !!v)
+      .join('、') ?? '',
+);
+
+const mapAreas = (type: MapAreaType): string => {
+  const id = pen.value?.id;
+  if (!id) return '';
+  return (
+    editor.value
+      .find(`area-${type}`)
+      .filter(({ area }) => area?.points?.includes(id))
+      ?.map(({ label }) => label)
+      .filter((v) => !!v)
+      .join('、') ?? ''
+  );
+};
+const coArea1 = computed<string>(() => mapAreas(MapAreaType.库区));
+const coArea2 = computed<string>(() => mapAreas(MapAreaType.互斥区));
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <template v-if="pen && point">
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-flex align="center" :gap="8">
+            <i class="icon point" />
+            <a-typography-text class="card-title" style="flex: auto" :content="pen.label" ellipsis />
+            <a-tag :bordered="false">{{ $t(MapPointType[point.type]) }}</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>({{ pen.x?.toFixed() }},{{ pen.y?.toFixed() }})</a-typography-text>
+        </a-list-item>
+        <a-list-item v-if="[MapPointType.充电点, MapPointType.停靠点].includes(point.type)">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('绑定机器人') }}</a-typography-text>
+            <a-typography-text>{{ bindRobot || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+        <a-list-item v-if="MapPointType.等待点 === point.type">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('绑定动作点') }}</a-typography-text>
+            <a-typography-text>{{ bindAction || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+        <a-list-item v-if="MapPointType.动作点 === point.type">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('关联库区') }}</a-typography-text>
+            <a-typography-text>{{ coArea1 || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+        <a-list-item
+          v-if="
+            [
+              MapPointType.普通点,
+              MapPointType.电梯点,
+              MapPointType.自动门点,
+              MapPointType.等待点,
+              MapPointType.充电点,
+              MapPointType.停靠点,
+              MapPointType.动作点,
+              MapPointType.临时避让点,
+            ].includes(point.type)
+          "
+        >
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('关联互斥区') }}</a-typography-text>
+            <a-typography-text>{{ coArea2 || $t('暂无') }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
+      </a-list>
+    </template>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
diff --git a/src/components/card/robot-detail-card.vue b/src/components/card/robot-detail-card.vue
index 24fec2a..f9f4030 100644
--- a/src/components/card/robot-detail-card.vue
+++ b/src/components/card/robot-detail-card.vue
@@ -22,13 +22,13 @@ const stateDot = computed<string>(() => `state-${robot.value?.state}`);
 </script>
 
 <template>
-  <a-card class="card-container" :bordered="false">
+  <a-card :bordered="false">
     <template v-if="robot">
       <a-row :gutter="[8, 8]">
         <a-col :span="24">
           <a-flex align="center" :gap="8">
             <i class="icon robot" />
-            <a-typography-text class="title" style="flex: auto" :content="robot.label" ellipsis />
+            <a-typography-text class="card-title" style="flex: auto" :content="robot.label" ellipsis />
             <a-tag :bordered="false">{{ $t(RobotType[robot.type]) }}</a-tag>
           </a-flex>
         </a-col>
@@ -81,11 +81,6 @@ const stateDot = computed<string>(() => `state-${robot.value?.state}`);
 </template>
 
 <style scoped lang="scss">
-.ant-typography.title {
-  font-size: 20px;
-  line-height: 28px;
-}
-
 .dot {
   width: 8px;
   height: 8px;
diff --git a/src/components/editor-toolbar.vue b/src/components/editor-toolbar.vue
index cd21161..b50b079 100644
--- a/src/components/editor-toolbar.vue
+++ b/src/components/editor-toolbar.vue
@@ -38,7 +38,7 @@ watch(editor.value.mouseBrush, (v) => {
       size="large"
       @click="mode = MapAreaType.互斥区"
     >
-      <i class="icon" :class="mode === MapAreaType.互斥区 ? 'area2-active' : 'area2'" />
+      <i class="icon" :class="mode === MapAreaType.互斥区 ? 'area11-active' : 'area11'" />
     </a-button>
     <a-button
       class="icon-btn tool-btn ml-12"
@@ -46,7 +46,7 @@ watch(editor.value.mouseBrush, (v) => {
       size="large"
       @click="mode = MapAreaType.非互斥区"
     >
-      <i class="icon" :class="mode === MapAreaType.非互斥区 ? 'area3-active' : 'area3'" />
+      <i class="icon" :class="mode === MapAreaType.非互斥区 ? 'area12-active' : 'area12'" />
     </a-button>
 
     <a-divider class="size-24 mh-8" type="vertical" />
diff --git a/src/components/pen-groups.vue b/src/components/pen-groups.vue
index 0d631c8..f5daf83 100644
--- a/src/components/pen-groups.vue
+++ b/src/components/pen-groups.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { type MapPen, MapPointType } from '@api/map';
+import { MapAreaType, type MapPen, MapPointType } from '@api/map';
 import type { EditorService } from '@core/editor.service';
 import { computed, inject, type InjectionKey, ref, type ShallowRef } from 'vue';
 
 type Props = {
   token: InjectionKey<ShallowRef<EditorService>>;
   current?: string;
+  onlyArea1?: boolean;
 };
 const props = defineProps<Props>();
 const editor = inject(props.token)!;
@@ -22,89 +23,134 @@ const points = computed<MapPen[]>(() =>
 //#endregion
 
 //#region 区域列表
+const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label }) => label?.includes(keyword.value)));
 //#endregion
 </script>
 
 <template>
-  <a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
-    <template #suffix>
-      <i class="icon search size-16" />
-    </template>
-  </a-input>
+  <a-flex class="full" vertical>
+    <a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
+      <template #suffix>
+        <i class="icon search size-16" />
+      </template>
+    </a-input>
 
-  <a-collapse style="flex: auto; overflow-y: auto" expand-icon-position="end" ghost>
-    <template #expandIcon="v">
-      <i class="icon dropdown" :class="{ active: v?.isActive }" />
-    </template>
+    <a-collapse style="flex: auto; overflow-y: auto" expand-icon-position="end" ghost>
+      <template #expandIcon="v">
+        <i class="icon dropdown" :class="{ active: v?.isActive }" />
+      </template>
 
-    <a-collapse-panel :header="$t('互斥区')"></a-collapse-panel>
+      <a-collapse-panel v-if="onlyArea1" :header="$t('库区')">
+        <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.库区)">
+          <template #renderItem="{ item }">
+            <a-list-item
+              class="ph-16"
+              :class="{ selected: item.id === current }"
+              style="height: 36px"
+              @click="editor.active(item.id)"
+            >
+              <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-collapse-panel>
+      <template v-else>
+        <a-collapse-panel :header="$t('互斥区')">
+          <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.互斥区)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
 
-    <a-collapse-panel :header="$t('非互斥区')"></a-collapse-panel>
+        <a-collapse-panel :header="$t('非互斥区')">
+          <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.非互斥区)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
 
-    <a-collapse-panel :header="$t('仅载货可通行路线')"></a-collapse-panel>
+        <a-collapse-panel :header="$t('仅载货可通行路线')"></a-collapse-panel>
 
-    <a-collapse-panel :header="$t('仅空载可通行路线')"></a-collapse-panel>
+        <a-collapse-panel :header="$t('仅空载可通行路线')"></a-collapse-panel>
 
-    <a-collapse-panel :header="$t('禁行路线')"></a-collapse-panel>
+        <a-collapse-panel :header="$t('禁行路线')"></a-collapse-panel>
 
-    <a-collapse-panel :header="$t('等待点')">
-      <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.等待点)">
-        <template #renderItem="{ item }">
-          <a-list-item
-            class="ph-16"
-            :class="{ selected: item.id === current }"
-            style="height: 36px"
-            @click="editor.active(item.id)"
-          >
-            <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-collapse-panel>
+        <a-collapse-panel :header="$t('等待点')">
+          <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.等待点)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
 
-    <a-collapse-panel :header="$t('充电点')">
-      <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.充电点)">
-        <template #renderItem="{ item }">
-          <a-list-item
-            class="ph-16"
-            :class="{ selected: item.id === current }"
-            style="height: 36px"
-            @click="editor.active(item.id)"
-          >
-            <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-collapse-panel>
+        <a-collapse-panel :header="$t('充电点')">
+          <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.充电点)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
 
-    <a-collapse-panel :header="$t('停靠点')">
-      <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.停靠点)">
-        <template #renderItem="{ item }">
-          <a-list-item
-            class="ph-16"
-            :class="{ selected: item.id === current }"
-            style="height: 36px"
-            @click="editor.active(item.id)"
-          >
-            <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-collapse-panel>
+        <a-collapse-panel :header="$t('停靠点')">
+          <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.停靠点)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
 
-    <a-collapse-panel :header="$t('禁行点')">
-      <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.禁行点)">
-        <template #renderItem="{ item }">
-          <a-list-item
-            class="ph-16"
-            :class="{ selected: item.id === current }"
-            style="height: 36px"
-            @click="editor.active(item.id)"
-          >
-            <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-collapse-panel>
-  </a-collapse>
+        <a-collapse-panel :header="$t('禁行点')">
+          <a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.禁行点)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="editor.active(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+      </template>
+    </a-collapse>
+  </a-flex>
 </template>
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index 81f42bb..ac84fc9 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { getSceneById } from '@api/scene';
 import { EditorService } from '@core/editor.service';
-import { computed, nextTick, watch } from 'vue';
+import { isNil } from 'lodash-es';
+import { computed, watch } from 'vue';
 import { ref } from 'vue';
 import { onMounted, provide, shallowRef } from 'vue';
 
@@ -16,7 +17,7 @@ const props = defineProps<Props>();
 const readScene = async () => {
   const res = await getSceneById(props.id);
   title.value = res?.label ?? '';
-  editor.value?.load(res?.json, !editable.value);
+  editor.value?.load(res?.json, editable.value);
 };
 //#endregion
 
@@ -42,12 +43,10 @@ const current = ref<{ type: 'robot' | 'point' | 'line' | 'area'; id: string }>()
 watch(
   () => editor.value?.selected.value[0],
   (v) => {
-    if (v) {
-      const [pen] = editor.value?.find(v) ?? [];
-      if (pen?.id) {
-        current.value = { type: <'point' | 'line' | 'area'>pen.name, id: pen.id };
-        return;
-      }
+    const pen = editor.value?.getPenById(v);
+    if (pen?.id) {
+      current.value = { type: <'point' | 'line' | 'area'>pen.name, id: pen.id };
+      return;
     }
     if (current.value?.type === 'robot') return;
     current.value = undefined;
@@ -97,7 +96,9 @@ const selectRobot = (id: string) => {
               @change="selectRobot"
             />
           </a-tab-pane>
-          <a-tab-pane key="2" :tab="$t('库区')">Content of Tab Pane 2</a-tab-pane>
+          <a-tab-pane key="2" :tab="$t('库区')">
+            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-area1 />
+          </a-tab-pane>
           <a-tab-pane key="3" :tab="$t('高级组')">
             <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" />
           </a-tab-pane>
@@ -120,7 +121,17 @@ const selectRobot = (id: string) => {
     <div v-if="show" class="card-container">
       <RobotDetailCard v-if="isRobot" :token="EDITOR_KEY" :current="current.id" />
 
-      <template v-if="isPoint"> </template>
+      <template v-if="isPoint">
+        <div v-if="editable"></div>
+        <PointDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
+      </template>
+      <template v-if="isRoute">
+        <div v-if="editable"></div>
+      </template>
+      <template v-if="isArea">
+        <div v-if="editable"></div>
+        <AreaDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
+      </template>
     </div>
   </template>
 </template>
diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts
index 66b65de..dd0dbb0 100644
--- a/src/services/editor.service.ts
+++ b/src/services/editor.service.ts
@@ -15,6 +15,17 @@ export class EditorService extends Meta2d {
     const data = map ? JSON.parse(map) : undefined;
     this.open(data);
     this.setState(editable);
+    this.addPoint({ x: 100, y: 100 }, 1);
+    this.addPoint({ x: 200, y: 100 }, 2);
+    this.addPoint({ x: 300, y: 100 }, 3);
+    this.addPoint({ x: 400, y: 100 }, 4);
+
+    this.addPoint({ x: 100, y: 200 }, 11);
+    this.addPoint({ x: 200, y: 200 }, 12);
+    this.addPoint({ x: 300, y: 200 }, 13);
+    this.addPoint({ x: 400, y: 200 }, 14);
+    this.addPoint({ x: 500, y: 200 }, 15);
+    this.addPoint({ x: 600, y: 200 }, 16);
   }
   public save(): string {
     const data = this.data();
@@ -26,7 +37,7 @@ export class EditorService extends Meta2d {
   }
 
   public setState(editable?: boolean): void {
-    this.lock(editable ? LockState.None : LockState.Disable);
+    this.lock(editable ? LockState.None : LockState.DisableMoveScale);
   }
 
   public override data(): SceneData {
@@ -99,7 +110,7 @@ export class EditorService extends Meta2d {
 
   public createRobotGroup(): void {
     const id = s8();
-    const label = `RG-${id}`;
+    const label = `RG${id}`;
     const groups = clone(this.#robotGroups$$.value);
     groups.push({ id, label });
     this.#robotGroups$$.next(groups);
@@ -145,6 +156,10 @@ export class EditorService extends Meta2d {
   public override find(target: string): MapPen[] {
     return super.find(target);
   }
+  public getPenById(id?: string): MapPen | undefined {
+    if (!id) return;
+    return this.find(id)[0];
+  }
 
   public override active(target: string | Pen[], emit?: boolean): void {
     const pens = isString(target) ? this.find(target) : target;
@@ -175,7 +190,7 @@ export class EditorService extends Meta2d {
       id,
       name: 'point',
       tags: ['point', `point-${type}`],
-      label: `P-${id}`,
+      label: `P${id}`,
       point: { type },
     };
     const { x, y, width, height } = this.getPenRect(pen);
@@ -200,27 +215,69 @@ export class EditorService extends Meta2d {
   //#endregion
 
   //#region 线路
+  public getRouteLabel(id?: string): string {
+    if (!id) return '';
+    const pen = this.getPenById(id);
+    if (isNil(pen)) return '';
+    const [a1, a2] = pen.anchors ?? [];
+    if (!a1?.connectTo || !a2?.connectTo) return '';
+    const p1 = this.getPenById(a1.connectTo);
+    const p2 = this.getPenById(a2.connectTo);
+    if (isNil(p1) || isNil(p2)) return '';
+    const { direction = 1 } = pen.route ?? {};
+    return `${p1.text} ${direction > 0 ? '→' : '←'} ${p2.text}`;
+  }
   //#endregion
 
   //#region 区域
+  public readonly areas = useObservable<MapPen[], MapPen[]>(
+    this.#change$$.pipe(
+      filter((v) => v),
+      debounceTime(100),
+      map(() => this.find('area')),
+    ),
+    { initialValue: new Array<MapPen>() },
+  );
+
   public async addArea(p1: Point, p2: Point, type = MapAreaType.库区) {
     const scale = this.data().scale ?? 1;
     const w = Math.abs(p1.x - p2.x);
     const h = Math.abs(p1.y - p2.y);
     if (w * scale < 50 || h * scale < 60) return;
+    const selected = <MapPen[]>this.store.active;
+    const id = s8();
+    const points = new Array<string>();
+    const routes = new Array<string>();
+    switch (type) {
+      case MapAreaType.库区:
+        selected?.filter(({ point }) => point?.type === MapPointType.动作点).forEach(({ id }) => points.push(id!));
+        break;
+      case MapAreaType.互斥区:
+        selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
+        selected?.filter(({ route }) => route?.type).forEach(({ id }) => routes.push(id!));
+        break;
+      case MapAreaType.非互斥区:
+        selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
+        break;
+      default:
+        break;
+    }
     const pen: MapPen = {
+      id,
       name: 'area',
       tags: ['area', `area-${type}`],
+      label: `A${id}`,
       x: Math.min(p1.x, p2.x),
       y: Math.min(p1.y, p2.y),
       width: w,
       height: h,
-      area: { type },
+      lineWidth: 1,
+      area: { type, points, routes },
       locked: LockState.DisableMoveScale,
     };
     const area = await this.addPen(pen, false, true, true);
     this.bottom(area);
-    this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
+    // this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
   }
   //#endregion
 
@@ -399,13 +456,23 @@ function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
 }
 
 function drawArea(ctx: CanvasRenderingContext2D, pen: MapPen): void {
-  const { x = 0, y = 0, width = 0, height = 0 } = pen.calculative?.worldRect ?? {};
+  const theme = sTheme.editor;
+  const { active, fontSize = 14, lineHeight = 1.5, fontFamily } = pen.calculative ?? {};
+  const { x = 0, y = 0, width: w = 0, height: h = 0 } = pen.calculative?.worldRect ?? {};
   const { type } = pen.area ?? {};
+  const { label = '' } = pen ?? {};
+
   ctx.save();
-  ctx.lineWidth = 1;
-  ctx.strokeRect(x, y, width, height);
-  ctx.fillStyle = '#fff';
-  ctx.fillText(String(type), x + width / 2, y);
+  ctx.rect(x, y, w, h);
+  ctx.fillStyle = get(theme, `area.fill-${type}`) ?? '';
+  ctx.fill();
+  ctx.strokeStyle = get(theme, active ? 'area.strokeActive' : `area.stroke-${type}`) ?? '';
+  ctx.stroke();
+  ctx.fillStyle = get(theme, 'color') ?? '';
+  ctx.font = `${fontSize}px/${lineHeight} ${fontFamily}`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'top';
+  ctx.fillText(label, x + w / 2, y - fontSize * lineHeight);
   ctx.restore();
 }
 //#endregion