From f48e48eb7b02e8d04ca481275345bbe73d395b69 Mon Sep 17 00:00:00 2001
From: chndfang <chndfang@outlook.com>
Date: Mon, 5 May 2025 23:21:31 +0800
Subject: [PATCH] temp

---
 mocks/robot/seizeByIds                    |   6 +-
 mocks/scene/getById                       |   2 +-
 public/point/16-dark.png                  | Bin 0 -> 1971 bytes
 src/App.vue                               |   5 +-
 src/_ant.scss                             | 134 +++++++++++++++++++-
 src/_icon.scss                            |  20 ++-
 src/apis/map/constant.ts                  |   1 +
 src/apis/robot/api.ts                     |  40 +++---
 src/apis/robot/constant.ts                |   8 +-
 src/assets/icons/_icon.scss               |  29 ++++-
 src/assets/icons/dark/area1-active.png    | Bin 0 -> 660 bytes
 src/assets/icons/dark/area1.png           | Bin 0 -> 578 bytes
 src/assets/icons/dark/area2-active.png    | Bin 0 -> 1293 bytes
 src/assets/icons/dark/area2.png           | Bin 0 -> 1094 bytes
 src/assets/icons/dark/area3-active.png    | Bin 0 -> 1245 bytes
 src/assets/icons/dark/area3.png           | Bin 0 -> 1057 bytes
 src/assets/icons/dark/battery.png         | Bin 0 -> 455 bytes
 src/assets/icons/dark/battery_charge.png  | Bin 0 -> 693 bytes
 src/assets/icons/dark/connect_off.png     | Bin 0 -> 930 bytes
 src/assets/icons/dark/connect_on.png      | Bin 0 -> 772 bytes
 src/assets/icons/dark/detail.png          | Bin 0 -> 613 bytes
 src/assets/icons/dark/redo.png            | Bin 0 -> 620 bytes
 src/assets/icons/dark/robot.png           | Bin 0 -> 1106 bytes
 src/assets/icons/dark/save.png            | Bin 0 -> 689 bytes
 src/assets/icons/dark/search.png          | Bin 0 -> 701 bytes
 src/assets/icons/dark/undo.png            | Bin 0 -> 620 bytes
 src/components/card/robot-detail-card.vue | 112 ++++++++++++++++
 src/components/editor-toolbar.vue         |  67 ++++++++++
 src/components/modal/robot-add-modal.vue  |   4 +-
 src/components/pen-groups.vue             | 110 ++++++++++++++++
 src/components/robot-groups.vue           | 114 ++++++++++++++---
 src/components/test-2.vue                 |  21 +++
 src/pages/scene-editor.vue                |  77 +++++++++--
 src/services/editor.service.ts            | 148 ++++++++++++++++++----
 src/services/theme.service.ts             |   5 +
 35 files changed, 813 insertions(+), 90 deletions(-)
 create mode 100644 public/point/16-dark.png
 create mode 100644 src/assets/icons/dark/area1-active.png
 create mode 100644 src/assets/icons/dark/area1.png
 create mode 100644 src/assets/icons/dark/area2-active.png
 create mode 100644 src/assets/icons/dark/area2.png
 create mode 100644 src/assets/icons/dark/area3-active.png
 create mode 100644 src/assets/icons/dark/area3.png
 create mode 100644 src/assets/icons/dark/battery.png
 create mode 100644 src/assets/icons/dark/battery_charge.png
 create mode 100644 src/assets/icons/dark/connect_off.png
 create mode 100644 src/assets/icons/dark/connect_on.png
 create mode 100644 src/assets/icons/dark/detail.png
 create mode 100644 src/assets/icons/dark/redo.png
 create mode 100644 src/assets/icons/dark/robot.png
 create mode 100644 src/assets/icons/dark/save.png
 create mode 100644 src/assets/icons/dark/search.png
 create mode 100644 src/assets/icons/dark/undo.png
 create mode 100644 src/components/card/robot-detail-card.vue
 create mode 100644 src/components/editor-toolbar.vue
 create mode 100644 src/components/pen-groups.vue
 create mode 100644 src/components/test-2.vue

diff --git a/mocks/robot/seizeByIds b/mocks/robot/seizeByIds
index 8ecc2d2..3e6737a 100644
--- a/mocks/robot/seizeByIds
+++ b/mocks/robot/seizeByIds
@@ -1,5 +1,9 @@
 {
   "code": 200,
-  "success": false,
+  "success": true,
+  "data": [
+    "mock-robot-1",
+    "mock-robot-2"
+  ],
   "message": "模拟提示"
 }
diff --git a/mocks/scene/getById b/mocks/scene/getById
index f716eb6..176003e 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\":[],\"origin\":{\"x\":0,\"y\":0},\"center\":{\"x\":0,\"y\":0},\"paths\":{},\"template\":\"4c2a10f\",\"locked\":10,\"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},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-2\",\"label\":\"模拟机器人B\",\"brand\":\"模拟品牌A\",\"type\":2},{\"gid\":\"mock-robot-group-1\",\"id\":\"mock-robot-3\",\"label\":\"模拟机器人C\",\"brand\":\"模拟品牌A\",\"type\":3},{\"gid\":\"mock-robot-group-2\",\"id\":\"mock-robot-4\",\"label\":\"模拟机器人D\",\"brand\":\"模拟品牌B\",\"type\":1}]}"
+    "json": "{\"x\":0,\"y\":0,\"scale\":1,\"pens\":[],\"origin\":{\"x\":0,\"y\":0},\"center\":{\"x\":0,\"y\":0},\"paths\":{},\"template\":\"4c2a10f\",\"locked\":10,\"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\"}]}"
   },
   "message": "模拟提示"
 }
diff --git a/public/point/16-dark.png b/public/point/16-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9d2cb0f239fbdd12cbd67ce59832004637a5dcd
GIT binary patch
literal 1971
zcmcJQ>p#;C1ID+7&0+ab&sYgla~Kt+M#Rj74kN=fl0!<COoWDL`#GO0Dd~17H>M%1
zh%kh^=`b>toKjA^C!(#mbw6G_|HAX)y1t*!_4!<Ht~XbjE7=jLv`q;DfgqioNNyYS
z-%t!fVZ%R<7cFi88sX+hgw(v&nu9>#q0S^b_ZVNvecM!bN3GuT2XhmF2;$LZd=$U)
zjy}TD^`01}0D56@{C#8B9dL)aZipHqY>^{J8KDPN-oBRsb-tOA^e`go@z(mHZa-a_
z;2PelcdWSuzdY88Z=YF1T6?~}JKn!`ZCZA(T@d1-iw-0kmS?LA!{cz}=aOBZ)jXq*
zl%uDtY2xvGH@fH}&zd`2nv`j_-`m?;gC|l(s(+&DA0yGZo?;FUmDqX%50?I<CV!4a
zhh5g!qb(&(%JVfN@=|X<oPkFhgSeO%FB@;f67Sr<{~Yt&*6W`g@~M@hk|+&>Q+E;2
z$&}OuDO^jX?MAwBT`AAz0{2B?+s+eUZqSFYF0{+i{0kPvk2^S5w8GNGRJQu=-(&uK
zTCwL&11Ykl^;~KY_eUA;iR9LMC|@&hRk=3hsL@Whd=9~d9^aRxYNgx%`t_KIR=k_X
zG_!H_GdBsf*JSc3!pcMPjUxC2as&uq@@<RbN`9}#k%ev1oY)6SAt8qoN~P;7)y%a5
z+p>2@NYs|mg@J>hiC{whWDjfX>6uEdY&>hg_0o|Q0d>A(c)T~nvvzP!OOw!XX_i6A
z4rrB)QbWYZWtc&~_nR}7vbJBCbh0T+zKC5%B2fcQ9kEzl8_XGM54(eJ^lfunyXKRF
z%1#DQaG>6#OWIxK1$1Y(!)W5z&8&+je~M976<2`Yw?gONe`JoVC8QSyp|5J>WeWcT
zAcR;X-Vo?Kkl{<zB^8)|Dj^_-O_++;fztyFHVos_FpHHVMml#Pl|aU;vV#AAp%MwM
zugR*tpI)j8?9INKwm8AxbY*S;%WH0)%eM{s^CQ6`ezo!0wRL8$=Wxwwia;Q+3vxSK
zg9L|$Ji_)eh&Id>r~8%>`bjl*S41!vQ8?9`!}e9VtCl`JJ^eoAA&qdSxL79>epTHX
zs?E0?g28%VnTl7{d*m{aMU>sTk7{eH*>KhA0X58AU*68<m!2M}hrzBC)#^3bH;n;y
ztW$vM<UhZb=f8gyB<VJegeIlX15`0@-n~m(|NF!KB!}(Vui5+Q2u--D_D}upgw!l}
z=O*F~bvh!Jdjqq2)4)Z6HFYy0tXPEhve(2PxDsGBDXzme7U1iX6J5cf`i!}sDr!4|
z%vw4FR7)kDNy@Qvd0+nhKuk=GAx<44^^%Rj-gf^kYz@WZ2@uz^i)lfM?#xMV8&Mdp
z3X$j%zMK@=dk*+Sd(ff$v;~{^=VyIvF8YI+#t!q}cMH^EOshXDranLWmT}@`?@~z$
zR_>zrCIUJw&?!I>3bz<kc(2E>&|axyCpP7*m+jl~v<hd1aM;X<<A+<#`ol~6pxJxn
zOd#RXe(Ylw@Qh9)kqC&>SsGQf2e-$>N(y_nULSPN&o|g=*`Wvp(dti3n|xFPH(|bw
z>gg;wzS&`+Ev>um`sI?)0$2cF#jkc8%}+ssWfV&EAAgf(p4hr)T(^u2QOaA^mJ)!c
z=)Osmg0jnEv$y%SVc|%4Kl+C0x<g;Y=ax{l&DG~ofd1(2%K<Z%F3El5$T;%HjL(d>
zT`<<YLR6ag!OUN?lEpp6-Tu^kdAS(kA5{;ww9Gc!&$G2rKpfNL`|)&f+gF3HUBjG(
zPtBBf#}~do!ZbD6FhjAjdt@U71d@k)%rf0JJUWz*1D)gJZ7jhHGLQqAn0K=DIH3fk
zj+q%oI2l!NoG}vuoi@r}^>*b&9DTOy*Nu%j+$lq60giRYQc~`Gi2)ki_YL(cz0K+j
zC)XV(w-Tk&7Bq@^X&e=7d9lK8Vh`PpiUZ$D=3K)${b#0WW$uWev4_>_ka^s4;qfW}
z$VQ=1mlM=lLrM*X;CnktP74^_4x|N%;n0?*cIyJEqMX7mITpdM1j5!&H9*KID47Pc
zV*VFcxa1b6xWEI~W+sbq<;R~znLnFG&L~FbyH#x4?NC-QOdH=$Fzqn`gjpm>a3qf=
zuHM|KsK<OCd_etqt7!EL1m<=-XrBdDwKM9_eftq0)9e^2vV1kl{OJ+yk93~&lOc%K
zW8s}RPEhU-44pfgY^qf<5)Wt?huA-;4)=wqMcF6f{a%?41}D8txS9b)`z~&iyIXU+
z_BSDt`{op#>Jw^Z&0iO4?)0zPrA>-#7?JGBEYwl<pH)*$n<Y7iUf_JlB3CR67Yd3M
zpi`Sr499yMuYQ?`R%=vl(;$+zVw{50Q~Z1o-<2F6+|4vQpQ3E};Q}&nuxl)r7d4-Q
zKd$1~BHp)-z4C9Emq!9xlzndc$hR;a?buYO3&WxiHq}&Q*DB(_T@I5Dp9<Aksvw_?
zU#l@wXfUwWfg#lR-i7sVyCBL!{4F<I*_*(Fk9eAK?7@W7b-sIM`{GqMUKrx+Kql1?
H{aF76BQlh2

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index eeef236..0ac80ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import sLocale from '@core/locale.service';
 import sTheme from '@core/theme.service';
-import { computed } from 'vue';
-
-const empty = computed<string>(() => new URL(`./assets/images/empty-${sTheme.theme}.png`, import.meta.url).href);
 </script>
 
 <template>
@@ -16,7 +13,7 @@ const empty = computed<string>(() => new URL(`./assets/images/empty-${sTheme.the
   >
     <template #renderEmpty>
       <a-flex justify="center" align="center" :gap="8" vertical>
-        <img height="40" :src="empty" />
+        <img height="40" :src="sTheme.empty" />
         <a-typography-text disabled>{{ $t('暂无数据') }}</a-typography-text>
       </a-flex>
     </template>
diff --git a/src/_ant.scss b/src/_ant.scss
index 5756e62..31347ab 100644
--- a/src/_ant.scss
+++ b/src/_ant.scss
@@ -55,6 +55,21 @@
       &.ant-btn-sm {
         padding: 0;
       }
+
+      &.ant-btn-lg {
+        padding: 8px;
+        border-radius: 8px;
+      }
+    }
+  }
+
+  .ant-card {
+    background-color: get-color(sider_bg2);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px 0 get-color(shadow1);
+
+    & > .ant-card-body {
+      padding: 16px;
     }
   }
 
@@ -89,6 +104,7 @@
     align-items: center;
     font: 400 14px/22px Roboto;
     color: get-color(text2);
+    vertical-align: top;
   }
 
   .ant-collapse.ant-collapse-ghost {
@@ -136,6 +152,14 @@
     }
   }
 
+  .ant-divider {
+    border-color: get-color(border1);
+
+    &.ant-divider-vertical {
+      height: 1em;
+    }
+  }
+
   .ant-dropdown-menu-root {
     padding: 0;
     overflow: hidden;
@@ -155,12 +179,57 @@
     }
   }
 
+  .ant-empty {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 0;
+
+    & > .ant-empty-image {
+      height: 40px;
+      margin: 0;
+    }
+
+    & > .ant-empty-description {
+      margin: 0;
+      font: 400 14px/22px Roboto;
+      color: get-color(text4);
+    }
+  }
+
   .ant-flex {
     & > * {
       flex: none;
     }
   }
 
+  .ant-float-btn {
+    height: fit-content;
+    overflow: hidden;
+    background-color: transparent;
+    box-shadow: none !important;
+
+    &.ant-float-btn-square > .ant-badge > .ant-float-btn-body {
+      background-color: get-color(sider_bg2);
+      border-radius: 4px;
+      box-shadow: 0 1px 2px 0 get-color(shadow1);
+
+      & > .ant-float-btn-content {
+        padding: 0;
+
+        & > .ant-float-btn-icon {
+          width: auto;
+          height: auto;
+          margin: 0;
+        }
+      }
+    }
+
+    &:hover > .ant-badge > .ant-float-btn-body {
+      background-color: get-color(fill1);
+    }
+  }
+
   .ant-form {
     & > .ant-form-item {
       margin-block-end: 8px;
@@ -297,6 +366,17 @@
     }
   }
 
+  .ant-list.block .ant-list-item {
+    padding: 12px;
+    background-color: get-color(fill4);
+    border: none;
+    border-radius: 4px;
+
+    &:not(:first-child) {
+      margin-block-start: 8px;
+    }
+  }
+
   .ant-modal.ant-modal-confirm .ant-modal-content {
     padding: 32px 32px 24px;
     background-color: get-color(popover);
@@ -490,6 +570,8 @@
   }
 
   .ant-tabs {
+    height: 100%;
+    overflow: hidden;
     border-radius: 8px;
 
     & > .ant-tabs-nav {
@@ -531,17 +613,61 @@
     }
   }
 
+  .ant-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 5px;
+    margin: 0;
+    font: 500 14px/22px Roboto;
+    color: get-color(text1);
+    vertical-align: top;
+    background-color: transparent;
+    border-color: get-color(border1);
+    border-radius: 4px;
+    box-shadow: none !important;
+
+    &.ant-tag-borderless {
+      padding: 4px 8px;
+      font: 400 14px/16px Roboto;
+      color: get-color(text2);
+      background-color: get-color(fill3);
+      border: none;
+    }
+  }
+
   .ant-typography {
-    font: 400 14px/22px Roboto;
-    color: get-color(text2);
+    font: 500 16px/22px Roboto;
+    color: get-color(text1);
+
+    &.ant-typography-secondary {
+      font: 400 14px/22px Roboto;
+      color: get-color(text2);
+    }
 
     &.ant-typography-disabled {
+      font: 400 14px/22px Roboto;
       color: get-color(text4);
     }
 
     & > strong {
-      font: 500 16px/22px SourceHanSansSC;
-      color: get-color(text1);
+      font: 500 16px/22px Roboto;
+    }
+
+    & > code {
+      padding: 0;
+      margin: 0;
+      font: 400 14px/22px Roboto;
+      color: get-color(text3);
+      background-color: transparent;
+      border: none;
     }
   }
+
+  .toolbar {
+    padding: 8px;
+    background-color: get-color(sider_bg);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px 0 get-color(shadow2);
+  }
 }
diff --git a/src/_icon.scss b/src/_icon.scss
index 1d46a9f..8147d16 100644
--- a/src/_icon.scss
+++ b/src/_icon.scss
@@ -4,10 +4,26 @@
 @include themed {
   .icon-btn {
     &.panel-btn {
-      color: get-color(ffffffd9);
+      color: get-color(icon);
 
       &:disabled {
-        color: get-color(ffffff2e);
+        color: get-color(icon-disabled);
+      }
+    }
+
+    &.tool-btn {
+      color: get-color(icon);
+
+      &:disabled {
+        color: get-color(icon-disabled);
+      }
+
+      &.active {
+        background-color: get-color(primary) !important;
+      }
+
+      &:not(:disabled):hover {
+        background-color: get-color(bg_layout);
       }
     }
   }
diff --git a/src/apis/map/constant.ts b/src/apis/map/constant.ts
index f957a67..aefe14b 100644
--- a/src/apis/map/constant.ts
+++ b/src/apis/map/constant.ts
@@ -12,6 +12,7 @@ export enum MapPointType {
   充电点,
   停靠点,
   动作点,
+  禁行点,
 
   障碍点 = 99,
 }
diff --git a/src/apis/robot/api.ts b/src/apis/robot/api.ts
index 229b5b8..33df5f0 100644
--- a/src/apis/robot/api.ts
+++ b/src/apis/robot/api.ts
@@ -12,28 +12,38 @@ const enum API {
 
 export async function getAllRobots(): Promise<Array<RobotInfo>> {
   type D = RobotInfo[];
-  const data = await http.post<D>(API.获取所有机器人);
-  return data ?? [];
+  try {
+    const data = await http.post<D>(API.获取所有机器人);
+    return data ?? [];
+  } catch (error) {
+    console.debug(error);
+    return [];
+  }
 }
 
 export async function registerRobot(robot: Omit<RobotDetail, 'id'>): Promise<RobotInfo | null> {
   type B = Omit<RobotDetail, 'id'>;
   type D = RobotInfo;
-  const body = robot;
-  const data = await http.post<D, B>(API.注册机器人, body);
-  return data ?? null;
-}
-
-export async function seizeRobotByIds(ids: Array<RobotInfo['id']>): Promise<boolean> {
-  if (!ids.length) return false;
-  type B = { ids: string[] };
-  type D = void;
   try {
-    const body = { ids };
-    await http.post<D, B>(API.批量抢占控制权, body);
-    return true;
+    const body = robot;
+    const data = await http.post<D, B>(API.注册机器人, body);
+    return data ?? null;
   } catch (error) {
     console.debug(error);
-    return false;
+    return null;
+  }
+}
+
+export async function seizeRobotByIds(ids: Array<RobotInfo['id']>): Promise<Array<RobotInfo['id']>> {
+  if (!ids.length) return [];
+  type B = { ids: string[] };
+  type D = string[];
+  try {
+    const body = { ids };
+    const data = await http.post<D, B>(API.批量抢占控制权, body);
+    return data ?? [];
+  } catch (error) {
+    console.debug(error);
+    return [];
   }
 }
diff --git a/src/apis/robot/constant.ts b/src/apis/robot/constant.ts
index 19ed990..da29310 100644
--- a/src/apis/robot/constant.ts
+++ b/src/apis/robot/constant.ts
@@ -15,8 +15,8 @@ export enum RobotType {
 export const ROBOT_TYPE_OPTIONS = <Array<[string, RobotType]>>Object.entries(RobotType).filter(([, v]) => isNumber(v));
 
 export enum RobotState {
-  '任务执行中' = 1,
-  '充电中',
-  '停靠中',
-  '故障中',
+  任务执行中 = 1,
+  充电中,
+  停靠中,
+  空闲中,
 }
diff --git a/src/assets/icons/_icon.scss b/src/assets/icons/_icon.scss
index 51a6034..6c12269 100644
--- a/src/assets/icons/_icon.scss
+++ b/src/assets/icons/_icon.scss
@@ -1 +1,28 @@
-$icons: (control, dot, dropdown, edit, exit, pen, plus, register, trash_fill, trash);
+$icons: (
+  area1-active,
+  area1,
+  area2-active,
+  area2,
+  area3-active,
+  area3,
+  battery_charge,
+  battery,
+  connect_off,
+  connect_on,
+  control,
+  detail,
+  dot,
+  dropdown,
+  edit,
+  exit,
+  pen,
+  plus,
+  redo,
+  register,
+  robot,
+  save,
+  search,
+  trash_fill,
+  trash,
+  undo
+);
diff --git a/src/assets/icons/dark/area1-active.png b/src/assets/icons/dark/area1-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6dbdfd1002018620466da120ffc8ca99b700f99
GIT binary patch
literal 660
zcmV;F0&D$=P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%PDw;TRA@u(nX!`7Fc5}!<G6sN5QF4N>AV4yP;n1HNzGAFGPE?8YiOaR;%KSq
z4;m=p4bEl8)(tK)M-eB>h>0^oaqMwo*$K#<XV%hw+LeE47vabsJaYfR0dyU~tq};r
zkj-YZ7Xa`G0PX<*YuVWp0Dd6iha^cZw#{7#FdB`*#bR+uL}ANL7fy$Wk>`0Q)9Exa
z4GIB-5LbudeD1J<7z_sYqbO35Sw9;9LWol$dVdHjU*N;JlyXuEz&XEM<^3N!m4oy7
ze3GW=M)+((uF`lyL{GJOK1(T2ssMiK8@Au?kBf58rt|sO3L?w0D{Zb+N_nRWfOG>X
zWv5!fIWP5R!?~&t+E{sgjw*ll1_*-S;c~frf{4Em@lzbfU&|ot+FJ(@LcAuTyDO(}
zq?9kq0P5OX2jHB)Gxp5$GJqZI?e2jc9I6ZK07`$OE&@_k?HQLsE`<zb?dC6(D<}Zm
zwt1XD#A{vA8xt}^L2WXqvDb>;7y#$|jqTOfZeQ0)lDtyyjR6Ef@PLROYv&$YQMl>#
zdLQFB{?;hKHgBDfIUzH0qiWNbspL|~rI1UZ<G)g_6<VERas@5Xjk@-B?*p1b-_jLy
z8$ezAs=wmibs<~liG1Au65y}mZkA=^wky;77I)3^`i19t=WSQ08DpXE`)5RSTDQEe
z8VF~$b9<NZ5%HPXFWcC}j4|f>{`W&{F(pYdHo^bRCSOju>X)e&PiJjb0QfQ-4&R#1
uz4i5Tms~ugZ#r!sHL(y5povx7XN=#fR!&c{;;+R30000<MNUMnLSTYmHZp(!

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area1.png b/src/assets/icons/dark/area1.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e28911059771e29d9fe6813bfa823bf64cd7093
GIT binary patch
literal 578
zcmV-I0=@l-P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px${7FPXRA@u(S*=pTKoI^u2?~Z6pl<*Y6ny|B8c;|Ei=h}SSX8M+;{gK_-T+>p
zLsgMWcP7_K(<Iki@7ko?nl#hB-1qHI_OeSfT-b2@hy<4H!9ov+$OeFO00#he0O<W9
zWdPt4K#$}@(Z;z1L}VMlGXTBTLB0XBN$Pb%iU@qw2)qHT;CD%?XT~x`KtxUebn9UD
z91PbaJ2nCuIvV#zdZQnmJokkpnS`-|Jx=ZOLb7cm@RLc{)}p~1fC&i=XCniWn>GS6
zp)m4UNK4zEEh43O@^avR5fG7m07n3R0X&g>E3>MDepnBP$PIw41oV*Pg@r&>{on-d
zGdXi+Ay8F65-5EOiAYt8R@ILlh#p8MwL{3o5L%58N>$Kx+xcbA|NH5R?(Hm;skn1u
zv@Rc4be{xn0fe@`Vb&*ksW(0e>;X7ToqMcibW|7ucqIAml|T^~hu31P#9qJ1q6bLZ
z@jF)H)u_brEtFWmA?btXK)OPYD`<(ws_F+PU@G)lx`LJvsHz{9fa7st=4IZ_LNo8^
zS<!_+<D0wL_PUODv@bt39r0}JiN__K=_>#_uP`!GdtH0-y0DINnw^*Bb*FWh_ff|Y
z6UkQAs;fEVGc1#NnT~jtIc9wwO^oic!##s>snZu9NfrtCu;M(=XuJph0E->^KqjF~
QhyVZp07*qoM6N<$f?g8)=l}o!

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area2-active.png b/src/assets/icons/dark/area2-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f502758cd47767dac72f39549137299cd8f113e1
GIT binary patch
literal 1293
zcmV+o1@iidP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px($4Nv%RA@u(Sv_pqMijnBNroG9P|TxX*cs#{b3A5BgRBkWEM60jom`_^fuc50
zbW7_@9pkQEn!s6$BuhJ1Yr8~1V#ClKRSt%0STbMv1d=#WJn=}&at!oF-rx7Vd+*+N
zkHD^ZgKLhTjSy%yoAu-4;|%~<MZ_j!tUiupIIhJQYgH<h?W3ck_OuN$L||cIp?Q9O
z{w4xm2nzrZ_{TyBA~dy@5V#0<1+8DLR#(cL#M07|b9Q$2b+p!=sUZ>qj^peAz{W*Q
z2LR875MLEthjadrG4@3~&$6svI-Sn%dFvzuIOl&d#_q%u2*}*r+*Z5Y_H~Oy@j_s~
zQ%^xkc{6Y0bpQPP{4L9}=mc&QA)ylZM-5opwr`FDuL9tlm!7MxQ-*{}0M*5$l*U)A
z>$>mN!0-3_%f9cIx{->K_~ZzX5sQ$R3IPHH01p8m@$bAC0RRUP9d%q*U{8er=lom7
z*sVO!2K^^e%1w3Lv<T4ca@zpl*dYMm2_e3jIsr;jy<YEj5Cq(m1OVJsU5LQX%*;GH
zI5_a8PQVm&JT9Hobl_?HCzS^XP!aG$1k!hT*tr$vg6%x(xvsl`h&va}#AUz_5zuHM
z9{{vcA_PuSdq{2rz^)KtJ&$<0-*w$Pi1?)<Wiov}J#R>j_WOO(Lu2)S9<XY)x?Dz$
zI*#)I0M-Up)dXzT-a~RBvcj9PBoJ}k^Ss?Wl3D$Wi;FjUz1~_71fR{$&hDje8{L{C
zdMA1pY$4(!Ln7p2Edbaw)$nBq8WT_ll3ezEU+Yr!dfhiwtdj(tnFlUwgUepmSTbKW
zkh1IlPoS*jCN=L$Pat|zKV^*F0{}{7REMHG&_cvE0K5`HjJ=kxj6kE&SPg>UMc!2%
z)tk0;M2rcLBtAVoU9&9f-&(D<cX)VsQq~PP=RYyVik4n7wV4rtxabt?b41+pJny$M
z1UTnZg4rrF7XWsI5ZNy>-GXWGk&pgdChNMc`xFt$ZPZ4Y{5fOnt(5XDb&#Z?6GFr%
zX<U|NJ??ZmFB8!>&JtPR8DslW%GYHqn3nA1-<3+`zE1pU%ALM#+sm;6(7MnifFH5G
ziE<?p87g^GN;!CgWD=M(c-n|_{%a`uR+FPI@NVFoQ_QI4%U4p$!CE5(G(PVk;vc4N
zV_BA0tJVHeC2>aWb;UG}IOm^-xq@W=ppokdA(k@<xUTy{x}anVJT>lbDdn^HTX_4F
zE?q_^m^pvs1fo0IxPqo52LK<05Z_OoK%>#P8w3HR_oUGi4-tpzG2>1J5l;|tzuWD8
zjK^gZ4erO+X5I-$FGYIp#xB$nLab<mID^DV5ClJVyWJ0Yo9X(~K^(gBwv^H+p}DU6
zBGg8zQT0I_1DG@k&N)d3k`Qq-`W+QrqwiB5u^wxqu~K4^B<l5gy;`jjkmQM4CXuN(
zkk*A%wv!~`IL;~nP(B!HR7)Z`5nrp(wRtZReCfJVVtpe5G$@0_YboV^nRvM1&%}|q
zF;b%hG!j^Y!c$h2xCohy%$hr0_xID7K<*9&2aqx)d0_BU-M1`jT~(k%0bOw4i4Tt?
zHWkt6IXU>vOM!}r^vD05ZQHx!YEM^o0+X`DwI}c&CzSn9iu!7L00000NkvXXu0mjf
DB3WF;

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area2.png b/src/assets/icons/dark/area2.png
new file mode 100644
index 0000000000000000000000000000000000000000..550c758720462a24859fa56c56542c16f74c102f
GIT binary patch
literal 1094
zcmV-M1iAZ(P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(07*naRA@u(SuJc7K@@(U1VsZ9K@FNp6c8)~Fj%NWL4zY9v<bl#T7{%o43O3m
ziUCP27@8E@P*vo|ewW$H+}zCV%-r>kCVk1Jz1!K@_s#qJ-dor)7aVi_Z3qC#GiLVC
z%x;_61vAt4QL@vl)n^63?z9hN002oT{Mjj9s*9Ar13+M=CVc>7D&H!6U}g(7mLPf7
z%pSXq-sK*I4`9u?&bX(y4&YJgCM0i~*$wZ$w*bC&?c)RZZf2Lf8`hiumm6hts!?(A
zB4wX>3l0Fxbv-z|PV&67!08eYK7c<#z|M_Q-dBKR^}WG9#UOkD^fv>LonlG;3Icz=
zCJyxcQcL`I07^kj1%NwM1*z}fU16fEq>nE{fjun%Pt8pJJ+2%ASQ>Ek_6x})ivg0#
z?-$3_-puv^JedUmxq<+kD*$mhaG`xOTLqxMeVK|26)4?X8YyZ~<+b*|ssp9UhXBG{
zt}49Jb$U$^6LS>}X{D+X*C-zXh;bp&h$NM8l{=){8vqu&fQQ#fipD(feowkhDh5QQ
z#fQ51f0u4mRhZ;;GrQ|H&r*KC0?vdw1@!~9AQk~^bRmpgC#fPQ0H@4Mbb27$r1p$;
zWU|C^V~tyxK;&X-VwQ3_d=0>C0RBQpmq%Gc0Xr&2CaG(5uWZJ7<eF4I-~>SB!A<P8
z6AO%UlrBl!Z&LRa*N-a$N|e<!ruo>FmS<)Gk{X=7$w<`#qM=!|zGMS%a~l<!zpl_6
z)}B7eR}Doe9lb=kSr!0q=+w4&s+6B<05px0MldRrHL{lM$WpsSl-JVNHC30S{9SJ2
ziwdD;P}=~uJxU`B-HYg@@#Tm1_mLJzD8C6{tLFG3;}`k&wbTeEG42##5yl<^NCG$l
z<zuJc$y^<XkR^+E^?HyffJrOw+~U0(*|)~a?i-qUgJQ-XUn;#Si$&iLv{Pb#CL?P5
zt-x)x{)bPANrtmmO|i2^@g%Q0n%}Ch3t&D4;6-GhRG@o*=}!Qw?YD8pHqL_4u}`cY
zP>wE{pryd=0eC(O0Gh`r;CzuwWOYdHCKWkltKS}gaA=_H(@UFO;`(K|U@JQS7Dfee
z2to?I1hCiju+(*uVGxTRWEC`$svZ8Jri0i!v5A5pslp`pY$fY;luM(so-h60yQ`2*
z41{BzQp9gjYYJIE10`L^he~piAe6i1N}-5p>fKr|t-7=+iY=>!J^8@oBbUsDAhrN(
z*2F_&iE&;g4#iCt0Cy^y8MT9_p($|*m`G*Kxjp*!GaEq86H3-NW-5Bnc44X873^}G
zJ_Gd^&J2K;?UWuhL=%wqHLrqO@$jYjU7RU7dzv|b606159(w@)023hiKnjbO5C8xG
M07*qoM6N<$f|Wt=ssI20

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area3-active.png b/src/assets/icons/dark/area3-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..dab86eab2932bc09f4989b204c8f45a1f774871f
GIT binary patch
literal 1245
zcmV<31S0#1P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(mq|oHRA@u(Sut!}MG&32v+ql>i_87}C+nO@M-$qlBk53DBA_5`k_HqS0_g%&
zgme~3LzFbJOVUJ<-2xqym=4@<Qf$k*-EZ9Zq&w?w@I?Pkdz<~<{da4?l2>x!zq>Q@
zc4lYh?IE1-fhXL4I0f)ud(i2DBuQ=((ff#ak%+1Qz<*u?5!Z>Rg@`Yul*?Y53NFe8
zu&}Vu?DzXGi0EQLnbzfq*eaLH@9ymEv_i-m%CG{+jQ^R4nn9Hv0|+aCBuV}XZT#rO
z5Z9%YmqH!P8vwGHf2J!y#76+IJU2JjYPDK>KFXWTW_5pmpFMboh;A72ZiTuNZvYTN
zya0d?v=dvFQr_}0I&V!J#}5(lGj0B*Qfj1Q8re1gzX8DL;vQy@OH#`9X_O>M!WoR^
zz8-v`rIc??BQy6B3n54sJU>5w);DbO460VE)tQ-@zqR>2rPSGf1%Oh@Su1=DF%Kq`
zTw4f@c_5UcQvf+`KJ|cS{J#wVe;8|@0zd}<HW6`?h}M--fBMK9t10G&kg-~?*Dn*%
zH6n@u;A0Dbu}_GYBH~)R-TuWF$gzab;^Jc5?RGx}fODE5P5@e+NGp}f($>~i>H-oR
zK)qhSG8ha#0)R7ya&G|Hz78U;xQb{{09nPoZ8<fL^*j1^PS3Sk?OeHB7F_v>=(6p!
zOQq7vQ6Uu!Ko&M%nJ3SeGm4^>Uaz-r0?_~G{k>j~?~4hf6GhSeyl}Ds;F3RLUB0bE
zk|YnZ%Q~`)h@Piu`lF?lfV=`Jgm@1Ct{L9gR7!ng^N_8b9^(Q&%^YW&!C-LHP_U|$
zTH|k)X6{H%5XbRVM7*xc%L^r+cKV@|^7EszfqD9f_^aOUCrR?`kQ?g&o$YiS$G4e>
z>zPSPdC#=Nm(VaFe`F&xLI^HWU+99PD7rU0JKJYMlaZOR3yg?PLepq8&h&b{Z;d;(
zq?Fn?vXJql5MqoIxN>ok`665(Ns{YCbXD`hPg2SsoB;kWq~1)+i1<oMdEW_u7la1E
zZ$#yC`NJa5Dp_iNpc&jzN{!t|Cs`RjY#ow%Cg?@pi1rY1kL$oR4_iWrCr17F#LEM|
zaqUvzD<^NAOTN<sE(3%R-|3m6QmK5oy}hkm`+VkWwc7bosl?TNIEsgmOOX)bYrX44
z#K*1%%q4R;Z|SWzlu}DUL&zu9`5J7l%kJN(H$p_eG+IQV5aI#=+|}Kjg%Nk46Aw!U
zVp)ELtf*GAmEg>irs?CNa`g3<(@(uxiAj{&nz>;oI*B|X1b3s{m5zpYGdGDs-eX?o
zOwO88YPE<=TPMm~*>?IYcj`1cG%k<OaA#VnR90R5mYcV3w|hhHKr`9J2u+dGGS}wt
zg4fF!2mt)v@AuX2?(Qr8)@U@u!NI|K0JuOz?^t*=?>jOr2lIfDyZQG3lhhYIn@*`z
zdfslg8F=mp4uCaf{PwO%F$*BrjH2j!SJ(x;12*G~hb^c5K_0f8S|(V)#g4f(5%EJ8
z{|&>7i`_0FZtxEvCfo8+bu1y|qd3%>Qvjh(a#A@b-UI&ta)xhD)7gvF00000NkvXX
Hu0mjfaeY{(

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/area3.png b/src/assets/icons/dark/area3.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfdd99433fc6c9f67a973b7c5959f44807b49842
GIT binary patch
literal 1057
zcmV++1m63JP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&+et)0RA@u(Sv^b@K@k3?wUTJ5i8k6wr*_6xqZZmKjYb>)I)5tBj);v!8==(3
z7--Q>O0ZKJNuUI!k<NU+&+M6f%iitYu}?zsCb?XAw>vZ6{O!zQ*yCh-Tz?D!?6wD!
z9w2!Qzy$y&0PJ^9uHH)kRsei3v+3MTZPwKSAbAA9d#89Co^@*l<cyi=U5ugtobsOl
z2t-LL4x$dg_W>wh8Dh!IMoU>`8vqycZvp`?dVmzeD`vKtBb=o2MIO8Z;A*gEtW-|K
z04VM+dIG1-Y%E9Vx-~s8lK^ge-<8z9jLz(102YJ99qkEIHR((wRl&r!B6;#?XNKO!
z7yt&0M{>ia!2=4XpWgRPGaLCY0L(0TR^%u`vd=K3_$ED2O3)BMjhlxa$c+Ev0KNum
zUjx_zu;v~eaNlzH`D+I10g|TxoCk0K!1V}#P~Qyzb7uBA7sx;Wkd(r=037lZ$pKI;
z7mx`v)4P$110Z=Cz-0jY0?BOvXsg0&CUuAw1>jEHn-P;q8TCZ}NadNNJao{V{0g@i
z2}Es36$9YH=267*YC~oK{0ag1f4lw4mk@}+kJp7$41kV&9sLz$wGt$sxn%YAdS_<y
zt~2#p3Dg~sB+t3T_xY@u*^`)iVgSNfAlb~hYNOH9r&%+b(+`nmu5l(Hc^1HxfL}C}
za@y%hGrQYV3L@5D@cVs|nlF5S$#$Bga!FlmMH^=JAk-swpwTd+p=R4aLsEy-y@0U<
z{dNP5hMB$u29O+RNUDlG4RT7Qb-6E>VwNQt&IC;kX!|XD79goGQaDxg(ahfF0MID7
z>qC8{EU%i`coKk1ywV_4PA|2&R&k|O)vcnfFdvh{ig&RkKz>rCLPx{D9x2}WVvFRf
zK8u^($nro+yXt#NKrWxUbt(Qy52O?z`8=o;56x^nwJ+y8$-@A2x_1wulpvCigRXNb
z)qtgVdfrvY`n}b%nN5@qp=7DcRXAMd^3U&$^2%r%fh3OsxbM3efWk;kSZ9h<Ao0pO
z$l6Mcv=ZudrrPrH*GH_M*GhB|TGPz^?L<5BQ(LXB)Tg{=u8TnJi6par)_gnLhG$JD
z8nwRo?zoJ46+?4yY@k^Hpw_x^zIDx;8o%(cY&X!fu~wvNsA7b3LA6Xkz5rM^vsLFc
zjgzYNDg-AZ)0~zymgQm|2x_-184mSrZ6nJoj|9AyiUV+#RXC}%>fMEO+4V9Nc13d_
zre$!kl>=nw7h5?}+OBbjo&GPTYZN_IcqvSN0ML}R7*1O`at0DYIf6^A83HI}$*z3%
bya)aOTP&$SX0m*u00000NkvXXu0mjf#PsKH

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/battery.png b/src/assets/icons/dark/battery.png
new file mode 100644
index 0000000000000000000000000000000000000000..09f0fe34a8a94f378aa8d011d74ed16700619052
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px$fk{L`R9HvtmOoO1KorKmH=?1`4m-So_BfNAz$<tIZG%OiFtmCEZ{Q7*8R_K)
z(n+T!iGS843IQg|TMXkc&Qh{(+28y2<Gn}d*h3xTfd=AkL@T5f;uPT4yYHdCXYarF
z(hCC4g@Davq`poONZcDU^LFaRud;n5g;p?ovk4%M)emYKNs%${4P;OyASbX!5b&BF
z(Kuef53iDq=ahlQhmW~B0>1HP-qgw41jM<vJP=09JqtU;4{ma_X@3RC5?N5_CaoI&
z+Yadq_x(QuT7o!ZK4B%G+*<@M943C2rR=@zDyu;Kz_LGp$-=kTAq=L&Bvu2GWTujF
z5w03v^c8-Lu7QfC{znRBHKbC|@(gPVU7d%1ZR#ckur5~RCy<)jn41S}Rq4D;G_6CY
zf%TMk_)5*$Mx|_mSocYaLihQEZykkxvkd^dSGBozZv0qgwu0JCFF|zH=3GRCSbXA+
xn;=^4=<HP~1ZW^mB(0EEh*N-D*B;^&`T~XN3N)Z(ipl^0002ovPDHLkV1hcC%Vq!o

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/battery_charge.png b/src/assets/icons/dark/battery_charge.png
new file mode 100644
index 0000000000000000000000000000000000000000..91a9314c3e4519c68f0ca618aace6cb093dc27bc
GIT binary patch
literal 693
zcmV;m0!safP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px%Z%IT!R9HvtmOpaZP!Ps<F|kZcLB?VxC9V*ixj{HV;uAPj8Ic0}1jZ*oE`X#;
za)NLJd;{nVG^or3dF&#Y*cnHgc@j^S9(ugUaU2S%(&+vBy>GwOF2b5UxMn<%0;wXB
zDwHauQb0An{vMirC>4HQe`^xqYXB;RZ-fY~vgw?Jzn%A<mymu9*f+wBTE+Zgv-ipS
zoddW<ix3L_d>kQCe{(B;x?8ueWJ*O8VlX#9z7GIsPqx5lIKi4b7$2MnPAYGm7JDD}
z^Z^jOSl$OmT5h{0gNgu6dipUDcpJt&;R6@&L#`qcT)CNSl`Ayv>W2W(R_!B>M}Wp%
zeFy-aI_&VRr+G_ulSx<qOaQO=hPaX0FTeTPmtE$(qqh*@co9C^Xv}xx=88bXCxt^J
zE)<mvD<=b*wF`wCEqkfjKQYjKU^v9Mt1B;@2x!_V?zu=TtbX1A^vexrU#5!qT?C5D
z&_qDv&W;6$&6NNMX9U?gH+OjM5>UujJnV^pqQ+c-g?MV1bCzY1=fQ!PF|V~J76Kip
zR5DDb_RoQ25Yu<Xrt6Z$#|g1sG3Ouu3lKAA#=RW|B|;J|2KV5m7H=&6tpU*1a@$qe
z&-Aa-Ud!d5ttx^HZrat`E`VoVv2?_R_Z~pSSx}o|Dtq`4(Ki5aWHg+>N8!159R#nF
zI5HaZs<Lz_(mFU$<(ni$T7-(WAAY@Iz0Gp_fpErCSuB*IZ^EHjRv|(A!4`Y}n$7GX
zBD~~azCY-wVqSQuENja6;qgkNO+=qobr6ek^rw~RaptXmPyIML$WKWXQbizDC{;+M
bfNK0V2}zGMp4Pn?00000NkvXXu0mjf6tFdT

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/connect_off.png b/src/assets/icons/dark/connect_off.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3c6b5775b083b0b9cbb3c532a9d9dff68478fb
GIT binary patch
literal 930
zcmV;T16}-yP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px&TuDShR9Hvtm`zgKFcin%lZRwWZxC)kcd=+^%n3^Bur8bcI04BC2q(Z@gK;?l
zVFqk=<p!iDXtrU-ejPb>BFmQSge*FpdIy%J-~0N%ry%@g5B_C5@NWPG-EJpAb}zik
zsI}jF9#1yq=}HgzU48@%zzsvM>L8!<0T7(0?+}J=7!K5Rf#Yn)aqM6m?}~S1Sud7l
zjeFzq)C6AwN?{PLQtJ^0y)YcA8`J>>wtbQS3dn8c+X+MPs`kv+8G&?ACLo{lD<C*B
zh7i$n!>8k_HI*T|?(zY{EF=}4(g9V#ObFpFjV!?z0O%|rG@;g3nF*>2D6sb~5}?!k
zKmxezN8#dc@qcB{DQmZO)SNPwy$(vwGe9^N$?tO>0Kq{DL@;!p%ZV;t-P(Ki1mt7|
zk$x+Ou2zRsC^rhzZ`4Z6q(FG-;V_Cux*WQ-`G^2cbQM|)RB*My@}@ep5um1rHCgA|
z{54N*0_ydn=!Z6BsoNQ=D%pt|>pJn&2<kZy<RUs@?bb(QQp@zE4YTB3<WDA^c~aMT
z$LCyz(I$Q&hZ+Of_9*~f%sU5;zeZ2{CLrJ5I|ZP0eOiP>-}}!|rFa&AnubjDsbu!{
zdnt100njhT*tqxjI9B0gNif084P5iNvH1w|@-1W~daSi|Cg+AQl+e10i5?C$`jl@`
z3lwmEPJ|B9*0DThq}_Zr8zJDgvQ0R0qo=cVY&8POy@>$s`cXJnV(Gc=esUN~93tw-
zaID?>AbTmR%4ILh_FzfNlMU4Zl^Z3UxdsIm`xn{*EY}xWP1$V|Hwt%*A!}NqrR0@n
zDOnEQ1(a3L&&8;)V!O}@=Gq~<u|FRm#6f0#!JX?Q>8jt9Cq`*rCWOm=Se$9p0|L%>
zA!$u@gMJ=<-8ii7_bwnQ*A{(A4ViCq$`5S<Wt^!^Z9z?ZMr=QUq?2C|@}#aChig3~
zlA303uaw;ws;nxFt66W-&DyI#RS)@`4_JQhnwu~IhV!{4At8<nfs=ca={C|7N-K;v
zUE4#fY70vztBtbmzNSJ|jV?`we9@~^$)6@bLv?np0}`ebprjeAd2>yhXzU<nS7NeW
ztakO4xCxLr*fed{cKcO?Z4*C2Y!qk}c-`9nKy_aH12CE>Lw@Q~r2qf`07*qoM6N<$
Ef=}(G`2YX_

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/connect_on.png b/src/assets/icons/dark/connect_on.png
new file mode 100644
index 0000000000000000000000000000000000000000..b38e26db89cf8dcf5e3479793160e8abe47beb4c
GIT binary patch
literal 772
zcmV+f1N;1mP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px%zDYzuR9Hvtmp^jaP!Pty6-wMvilo6O2yQcC0yn@XFg}4vlZkL)C=8iYZ~{9g
zAU*-ifYX{An8raRWt;&vc>>{w^z;W18H%XXJiYzBZ})w>A{^L52gZZ{Kv5ali$Z48
zC=hVQOgSP>GcY2iVT!ojv+PkARH8tIrjeZjH((Tkf|5q9)UTs@uQr;f)+7cbU}iv<
z8QG|`05sHp9~D(li2(UwXaeRoH1u>}GzGH6C^K;8!V0DOpT{4)@H+#kVCK43{PF2&
z=nZCG8#NHFR__VLfo1pPbvpyC2cbz2j2qN!8r@ZmF|`Mm<4U4Hu0mj7rl(F-%E$rp
zjW;F6yt8;m!$Ea?k|<Dg0k5xcZX)B+!2w47s(rk7AoEM+0?Z{HIQROF@F+04|4bpX
zX<YqHUrhvLqPu%*Tv|(6)3{+q*-?ma+qdlVy(uKaI6)Zo!KLlMiRb;-w>fP(dstn4
zXs7+^&+mHyiU%|A0-O%2pXK}TvUG}Yj<T-dHmDD61Ct^YRr`hdkZgLY8zGJo1tZqv
zo5rKtQp7$%Frf;09asev2Sx^pf(ZnQ(+=Xoh#+y&{!-|Q5|Skb{Ow>9m`#n-S3~R8
z4$Sq`iQEqM38PF|KEk-nMy3Ps!t6Xgv#A=Y^*)8nM&<$FoU>Rl9=KB>Gu_=+$E_qF
zLXA<bADwU<H3RP*NLGjx*6sxm?I1Oqb;S4)<}Y!<{VBW7v_O2ZOj&PW*~OsE7QN}E
z9VAgxexSASz^S9!z_RNqWn`E*rWZ#gW$Q3ym6l@y1K-?%9l!@LRpdsQM7n~Vx|U5(
zUq6e^ytr*4Pg2T+I<;f>0_xRsZB<Wd(-6NozNs+k5D^Cq|9sJhr~-}O5s+o32@wxP
z3cbHDyMRP0l*H!S?6LEI*)~CUN?FnYqxL&Eh5i6zQ<XIImel_M0000<MNUMnLSTZ#
CQeQd%

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/detail.png b/src/assets/icons/dark/detail.png
new file mode 100644
index 0000000000000000000000000000000000000000..f196c87e394512aae20eacff5be7e6c01db90018
GIT binary patch
literal 613
zcmV-r0-F7aP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%A4x<(RA@u(S&K~rF%0$F05+f#022Tkzy#0<U<29>U;^3+fC(rQP$r;EKsPXX
z(p9ReCUMeB!=a0G(n%M8p6zpN2h#C{j_WTyfZ87HJ<u5ssOpi3T#Lv_^Bjl>pElM~
zMEER3WG*6)0QeqVrVvuqd&g-M<<{<o5rA=wWfXv_J~_+W#26L&J^?Tc@eTs0Wcf{f
z#{j(E_X22Q{;QB>Q`ruD|3nDDgNWRwN-DJ9>xB@2HxW56q);l`R{)pWh(Z7uK1`i|
zVJ!d*QUUz5nCEvj!V<t?DgZS~or%c1aqs4~)!`T=cW1)ZXbFXo1wb@U$23z_)4x^<
zKrlzgl;?L<Wsc`bA6%sX%m7@(gonPX>PJ&sRRKVuEV`zdAkM6*x|9bp^-d@20eEc2
z8vY6ZQ)%*2Ri3V_cB6eoDG#)fMol$WDFE!8?vhQvMxd%y0WgGy0A6xHs49!a=b9mu
zqjwffsSwIiCWojb0A`@iW~z{?8>bwmlD!mwIe^ntt=ISW#hlN2ZX#hRr`sszOk<l;
zAw>KWmrB1g!>DL6*ZG#R^G!WZ$gQJ{%y8L-%=@o}dSX+nw~JN@wBDNQ|Be=E9c#m#
zV9A`VdBfe6Bsb(`n&gpRV@=&qH#pjl-VaptglS}B0?>e9(Z%NFxGBI&Tru%_iG?9M
zz4oq{YQ&CJrr85lhWp;v1K794H|6ynsO^DY*?{LURhp$l00000NkvXXu0mjfmtql<

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/redo.png b/src/assets/icons/dark/redo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9eef61b965db5f58979d51b2a844e44e05e7bc42
GIT binary patch
literal 620
zcmV-y0+aoTP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%CP_p=RA@u(m}^l3F%ZXh9e@Ms02F`(9MCGDD1a(}DxfGp0urbL>VP^}@}D_o
z(%jzVb&qr=`PgQY{p~x)bmoiCTz{$nb9=CQpn4$F0yTs(4M-yLKtyjubTntZF!M*u
znX`Mq0Q?Zqm8JAD2BHLjU*mxb$LhflB>*gm=v@h$Ac)xkpty)6Llgm!15pe>DnwBL
zDG<Q`B7#bRSiL2pYp3+Zl<u6pt;F^MG>Si(MzdDRU5+v-vPWjVv;}(sL<9}yYbI-J
zfCtm$7C`_7Di6I^%)AQ)a9cd&Ft2QlM|RA7NQnWTOfwsuDA~xgl*jLC2#Lru1}o<>
z3|VVt2E-^UR(Tbm2_0D9UR$F$l6bV0qI?&C+tv{(H>Fwr-;%8m5)o9LJImB+><#6L
zRLl1PxXBCa?}t*@Jx6&DsMV(He$4}NQl^-_%`OK{MBMj4l*dZ|K+d7+VN`i?>%7l6
z8h{%@i?M3HPq~o)HGoedy0?TkCW_pi5OVe;do%#l`&a9BG%k2yv<8+#ssSJt5k~ey
z8>7Q2=c2J>yG99w3=+#;_;!PED#{aG0I>eIGDf2-Z%mHt$LtL;-s-IJ1CG;xj{f2n
z3Nh7#ruC8vRnWIDsLP6omJ`0S?f+XZsTkqDy+Hstpb04qdH5KMr>6Zqv+oWheRPKn
z1q=oVJ#gxM6<}(MyZ2QOR1aiYpoUPU0kg%c2eM6=dB7j&qQ@~JMYZez0000<MNUMn
GLSTZFKnV8$

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/robot.png b/src/assets/icons/dark/robot.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c3a37cb4d9cf850f633d8fbff719d0f898fa310
GIT binary patch
literal 1106
zcmV-Y1g-mtP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(3`s;mRA@u(T0zTIRTNzdjC4?uP+(+(8Z<~qsewif8U+4=oHfc>vwlajW)2(a
zF9;kcD5+qO0|y2LDL7C_)IcR=#gcn3`|fw{eec}&?)$zEI>UGGIeV|Y*Is*{`+dY7
zU)<yVV<`YhuNWlBf42#CRlB1ABz*wj{l@W|B=2qmgrv6td<0-0fImt8F=TfTfTZ^T
zd>A%9A$fUA0FDEAE!g^<<X<J*MF5fx0PrD>K)e1Sd1XrgJ_Yb*u=O0kRgzD#{UHE3
z0)q$40Z5XgZxAtn4@h2L3P9334gcc1w@BWe!`Y!T3l#RN*GWEzdloVv>2m<4P`mDu
zycst&6gvpu?^0T8fJ*W?wzqJWq)es9B(Dwvkn|RSqsf8G(aA!6EJS5h01Z`4SFZ({
zHntqlxO(<_8Ibfb087|d^mB%8lf1R6(<zfyIjdc}79uRka%x()t5*vh07)*GFOwtJ
zNIq(R8>o-T{XvqI#x#kmCz*wJoGG*7Wn+y1GJT$syp$rgv_5JxQHbzDzmfC>fc@d@
zjz$qcPG^rAO|gBF9PHIct@D1r$-EtmlG)?Aq(R>zfL!r6NZt$d$%ibc(-Z&=h-Jac
z(te-hZ<#{5d1d~O0-Wl610d74*Y%THc}qvLm;o1XOyk8kflA8HdjK<lhTGor48SkB
zm!#TqABb}KoaBX&{VXuu^9bOpcqqy9$;jyQ0)W#1UT=PXM)Jq8EJ>PVe@+13r-1x0
zH-K6SjVh3&l>rnuK8ZqEYx4+^i@c{&1q#&w$VJ@iwgrG)kw*&UF{0OD3tGHM09ht;
z4;lnm)5xq8mQr`b;%uIZz9s`!8K3QYz|&@I?k+E@HnKREc;2{Il0HfMN!rNhs;Pk>
zm&LOs9RYAC80@m2r_q+@Yu~`802qo$Qv)9J7qVZv(D<bn>wZSrB!H${`}2-7^tdO_
z1@$n1V*m~}cY{}#(Pif6?&O}yEGoU5VQ&^{P`&}+>(D`G_O1GO-%ZYueAw>HH4xi>
z_32yMU=TmGLK0=vSGSW}a$;RG9u8lAqly4d0eCl@Y`*!$?n=3?)hYWWc_92Oed@VG
z@>~Y+9e`M{XLj28&>sxK^ln!--Np>8+&QO2a@{>cvOF0;&4s1peC_@@090LA3jL;P
z{~Q3;qFimK{vSYr0#UUdkvvmVsFJGo&yfK)KI^lk_rlm$hmj&)dH==%)I@s|@2&!1
zH#ag5ncpsJWTjE!N}T*Q5y{#!YDNk3@kFhG9eV%gw&r3db}@dli|+z$ta^%<?*ks1
zOr`dd;0^_N(5xrpvvJ5A`ZKE~(q97nJ!UstDenWg1K?MZzG8N3>HkXXwiIN4_B??9
Y08!?NPpp{0Pyhe`07*qoM6N<$g2zMyu>b%7

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/save.png b/src/assets/icons/dark/save.png
new file mode 100644
index 0000000000000000000000000000000000000000..5878ca97d057ced2e68b7eb7af482572677ccf71
GIT binary patch
literal 689
zcmV;i0#5yjP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%Ye_^wRA@u(S&L1>Fc7`l05+f#02|N=fDPISfC(rQKqo*<K$(Ct0c=1wpc@={
z$dMf9QpZl5w8EAUsuExB-T%XM;D-;Kf64&H)}U7dB62}QmqdjBM?`eeBhz0*gue%7
z-o(&t1Rx?{_MV7tV+aS{+2T9Q{1SLi_W{HFI}x3Q672Z?EEI&Q0TFo|Nb(xqAP_YG
zA_5!#b|}L>?~J`xo-wo6kD9b1A}~(~%RQ|@XaJsw=*FT5=FgcKc1j{5_Sd=q(CAsT
zTY=C3!1fVw%5%-ktMbQy0PsmK2n_&C#154cJH!nPzzaeHu+v0F0I(CpJ_48%(Q{kJ
zjsfsvGIGa|uU_9W^RbA`6c7j^2qu+`9Rt91@;-sQG4qv)P8x`15e+MqK@0#m_-6tw
z)FiCriA|BICzUYnim#26nq-FrR2Fz$v;f9Y(9N}i&c{!%2D)$>b2kI%S}Mdy-M*7G
zkTuZJhLV_&38P5&=-AMDb~y;6YxEm~gi*u%Ac?F^{}G%AMC7$dJb&pv!C5o&G-(tP
zk>tf(Y5+-FN;m5D?!-QVp=RZy=X)OG16czhHl8&Q>QvbWoJrrmG@(%kTeit6bJ|ut
zG3p$9tUl;y(E)&x1*J=QYNf{B4R=cbW=8>G+GEaEV--vqF#EAjlJUA$Z4wd2Ca?fZ
zJ=}FxWloFxO$!cp#2y+QQ@mf3{w@G$QpQ*@H37%mXj<+l?3a8?zJ;^wNFiAt&1Lbz
zLSw#B15T|1JH$Nl)YxR7YgUbU_#4{HkHQyL%#3!k@kH;pd}15wc?K|)q?^8T@EZ69
X>1yaeCMSO!00000NkvXXu0mjfSQ07G

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/search.png b/src/assets/icons/dark/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..65bc629778a00f1d1b6e158f8551a35ad9f34c6f
GIT binary patch
literal 701
zcmV;u0z&<XP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%cS%G+R9HvFmcf<UFc5|{=E8#u>42>uyB$CU>!YN{0V+tSU_%FVupB`4Eu?}a
z6@*j}ItUjq7d&D7ES^_uThg)+U#%H^GxKX^fc@tWT<;IVu+wU_x<L?h$R<tGtx{_3
zYF~A(7Jx2ox7))sO&=L!y%HxI09d7II*H?W^B$N=fWctUJ06eEjIpkZ<5Om)yWMWG
zTrRgR=k=LV0M7Xn0DLnXtr%m!8DkVRmEkiY-Wz}$MC|)y;|+j$IRMP|`~A2oGS2xB
z0G<jUn<PmdTr=?sfOFmjfIm8NL>$F&JhP=Vw|mhLRF1`BF}B&!|5pG)2)aD0IRH$Q
zQf3({eVP!BMx#HU&#7#+-x+{&-U9%Ng1%K0MSYvG`TspW&Hz%%XG9#5Q&;*jKq=*~
zT%6k^N$zY~C<2@fqbU018@)a+gqSkMzPJW*1`tBvCF$1yQpzDBQvV<wjg(TgBK~lI
zq7J+Oq?CUVu>$~WrPRX(B?wPV>brLae8p1*c!>tQ#8U&Hd&$;C%pckZ3<1uRQX^X_
z%}z*-C>y&z?Uc?_Ck%pso^rM?AmW|NP<k^9icV-EDy1g2D5RA4h)BZoZsTRskfvMq
zj&miigCH1}_4Ry9qNejzN1od_r9V4c7F|AK&k*?;+IZFgkS!dDNYR#UNgCV<qH-fL
zr(0ba2nrD=w4O1>UUW8Sm#_)Zx|9kbsIi0q@K{W<Zri5~=;z^ZnChWJdhmg;0u&>s
znm3!xOyzY7_kr*Nu)T)je^-dB0T7G}#8m-YAg&HzgSZJm8HC=rZw6pM{D`6`+dpp#
jpodoR3Ev#Re9Hd-4f%2~lnqB>00000NkvXXu0mjf{+%o7

literal 0
HcmV?d00001

diff --git a/src/assets/icons/dark/undo.png b/src/assets/icons/dark/undo.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf41809b26e674ece63bd3f3c59814d51770e4df
GIT binary patch
literal 620
zcmV-y0+aoTP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%CP_p=RA@u(Sc^@=Fc7`l05+f-zzE%d4JZ=;6VOfoOh6fd4PXM;fNs!kaQI0M
za$P5m>zvaFpM=zs+J5ie`95KqxbejCQzbCAf>nX4K&A)&UkHiF4G}#P(atz;$;@w=
zPRv@Kq<{s#c23+e^LZA6%*DM41i<6yjZt8hi6LuwF9I##aqulOyNYCiIc9N`z$t?V
z;Z6dl4!)DX6u`F<m<sqHfe!G;+_9838)P*iLS6Y_W_*s?!5uIJeu(HIx>ElKD3Yt#
zF(Cq5Q)$m)3kyAm3iB>CLIf5>^jZjDpJO^n1k<R9w2@e7^*$nUNksU241_R9Tro5H
zuRUw617nZ?G7&-eE{W*Q!@6Q-{J$RoyIFB18gwFp76qMeWAOgWSD{ZUF$xK*1TvzV
zP#%~Wt^A)w35=<Ph#+KeCmMTa=Idkv9VAre0TV{3M^K@$gZ90b0#01|;iNtfh>>B>
z<K`wGrGQ5QvLZGSldAK;-~{|Mrup60hOfawNE2*m??5d=lQ+)_p;9Dl8in`W#`0i<
zO}fOTz}u|%WM19eduO7M?X}q_N5Fa>;F0lMOK&9#dmN#H)&XAk+xgaXt)_tU1}}HE
zNN=Zy@cclNUHU*X1bBN1b0#}<o-cR@8=3)%q*0s0L&Hg%kKpZZGeUlv)VYoUZ#Gf8
z14Ahp+ouwUc}V+tRY2RrvHhz8F%M}!uL@{;IJW=f75D|b8_O|S!JmZy0000<MNUMn
GLSTY6+6_Gb

literal 0
HcmV?d00001

diff --git a/src/components/card/robot-detail-card.vue b/src/components/card/robot-detail-card.vue
new file mode 100644
index 0000000..24fec2a
--- /dev/null
+++ b/src/components/card/robot-detail-card.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { type RobotInfo, RobotState, RobotType } from '@api/robot';
+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 robot = computed<RobotInfo | null>(() => {
+  const id = props.current;
+  if (!id) return null;
+  return editor.value.getRobotById(id) ?? null;
+});
+
+const batteryIcon = computed<string>(() => (robot.value?.state === RobotState.充电中 ? 'battery_charge' : 'battery'));
+const stateDot = computed<string>(() => `state-${robot.value?.state}`);
+</script>
+
+<template>
+  <a-card class="card-container" :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-tag :bordered="false">{{ $t(RobotType[robot.type]) }}</a-tag>
+          </a-flex>
+        </a-col>
+
+        <a-col :span="24">
+          <a-typography-text code>{{ robot.ip }}</a-typography-text>
+        </a-col>
+
+        <a-col :span="24">
+          <a-space align="center" :size="8">
+            <a-tag v-if="robot.isConnected">
+              <i class="icon connect_on size-18 mr-4" />
+              <span>{{ $t('已连接') }}</span>
+            </a-tag>
+            <a-tag v-else>
+              <i class="icon connect_off size-18 mr-4" />
+              <span>{{ $t('未连接') }}</span>
+            </a-tag>
+
+            <a-tag>
+              <i class="icon size-18 mr-4" :class="batteryIcon" />
+              <span>{{ robot.battery ?? 0 }}%</span>
+            </a-tag>
+
+            <a-tag v-if="robot.state">
+              <i class="dot mr-4" :class="stateDot" />
+              <span>{{ $t(RobotState[robot.state]) }}</span>
+            </a-tag>
+          </a-space>
+        </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(robot.canOrder ? '接单' : '不可接单') }}</a-typography-text>
+        </a-list-item>
+        <a-list-item>
+          <a-typography-text type="secondary">{{ $t('急停状态') }}</a-typography-text>
+          <a-typography-text>{{ $t(robot.canStop ? '是' : '否') }}</a-typography-text>
+        </a-list-item>
+        <a-list-item>
+          <a-typography-text type="secondary">{{ $t('控制权') }}</a-typography-text>
+          <a-typography-text>{{ $t(robot.canControl ? '已抢占' : '当前无控制权') }}</a-typography-text>
+        </a-list-item>
+      </a-list>
+    </template>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
+
+<style scoped lang="scss">
+.ant-typography.title {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  &.state {
+    &-1 {
+      background-color: #19f390;
+    }
+
+    &-2 {
+      background-color: #fdc11c;
+    }
+
+    &-3 {
+      background-color: #1982f3;
+    }
+
+    &-4 {
+      background-color: #888;
+    }
+  }
+}
+</style>
diff --git a/src/components/editor-toolbar.vue b/src/components/editor-toolbar.vue
new file mode 100644
index 0000000..cd21161
--- /dev/null
+++ b/src/components/editor-toolbar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { MapAreaType } from '@api/map';
+import type { EditorService } from '@core/editor.service';
+import { isEmpty } from 'lodash-es';
+import { inject, type InjectionKey, ref, type ShallowRef, watch } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+  editable?: boolean;
+  current?: string;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+const mode = ref<MapAreaType>();
+watch(editor.value.mouseBrush, (v) => {
+  if (!mode.value) return;
+  const [p1, p2] = v ?? [];
+  if (isEmpty(p1) || isEmpty(p2)) return;
+  editor.value.addArea(p1, p2, mode.value);
+  mode.value = undefined;
+});
+</script>
+
+<template>
+  <a-space class="toolbar" :size="0">
+    <a-button
+      class="icon-btn tool-btn"
+      :class="{ active: mode === MapAreaType.库区 }"
+      size="large"
+      @click="mode = MapAreaType.库区"
+    >
+      <i class="icon" :class="mode === MapAreaType.库区 ? 'area1-active' : 'area1'" />
+    </a-button>
+    <a-button
+      class="icon-btn tool-btn ml-12"
+      :class="{ active: mode === MapAreaType.互斥区 }"
+      size="large"
+      @click="mode = MapAreaType.互斥区"
+    >
+      <i class="icon" :class="mode === MapAreaType.互斥区 ? 'area2-active' : 'area2'" />
+    </a-button>
+    <a-button
+      class="icon-btn tool-btn ml-12"
+      :class="{ active: mode === MapAreaType.非互斥区 }"
+      size="large"
+      @click="mode = MapAreaType.非互斥区"
+    >
+      <i class="icon" :class="mode === MapAreaType.非互斥区 ? 'area3-active' : 'area3'" />
+    </a-button>
+
+    <a-divider class="size-24 mh-8" type="vertical" />
+
+    <a-button class="icon-btn tool-btn" size="large">
+      <i class="mask save" />
+    </a-button>
+    <a-button class="icon-btn tool-btn ml-12" size="large">
+      <i class="mask undo" />
+    </a-button>
+    <a-button class="icon-btn tool-btn ml-12" size="large">
+      <i class="mask redo" />
+    </a-button>
+    <a-button class="icon-btn tool-btn ml-12" size="large" :disabled="!editor.selected.value.length">
+      <i class="mask trash" />
+    </a-button>
+  </a-space>
+</template>
diff --git a/src/components/modal/robot-add-modal.vue b/src/components/modal/robot-add-modal.vue
index 6a8a33a..ec7892d 100644
--- a/src/components/modal/robot-add-modal.vue
+++ b/src/components/modal/robot-add-modal.vue
@@ -56,7 +56,9 @@ const submit = () => {
 <template>
   <a-modal :width="420" :title="$t('添加机器人')" v-model:open="show" :mask-closable="false" centered @ok="submit">
     <a-input class="search" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
-      <template #suffix><SearchOutlined /></template>
+      <template #suffix>
+        <i class="icon search size-16" />
+      </template>
     </a-input>
 
     <a-table
diff --git a/src/components/pen-groups.vue b/src/components/pen-groups.vue
new file mode 100644
index 0000000..0d631c8
--- /dev/null
+++ b/src/components/pen-groups.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { 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;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+const keyword = ref<string>('');
+
+//#region 点位列表
+const points = computed<MapPen[]>(() =>
+  editor.value.points.value.filter(({ label }) => label?.includes(keyword.value)),
+);
+//#endregion
+
+//#region 线路列表
+//#endregion
+
+//#region 区域列表
+//#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-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 :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>
+</template>
diff --git a/src/components/robot-groups.vue b/src/components/robot-groups.vue
index e15c3de..2113510 100644
--- a/src/components/robot-groups.vue
+++ b/src/components/robot-groups.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { type RobotGroup, type RobotInfo } from '@api/robot';
+import { type RobotGroup, type RobotInfo, seizeRobotByIds } from '@api/robot';
 import type { RobotAddModalRef } from '@common/modal/robot-add-modal.vue';
 import type { RobotGroupRenameModalRef } from '@common/modal/robot-group-rename-modal.vue';
 import type { RobotRegisterModalRef } from '@common/modal/robot-register-modal.vue';
 import type { EditorService } from '@core/editor.service';
 import { Modal } from 'ant-design-vue';
-import { map } from 'lodash-es';
+import { watch } from 'vue';
+import { reactive } from 'vue';
 import { computed, inject, type InjectionKey, ref, type ShallowRef, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -25,7 +26,10 @@ const emit = defineEmits<Events>();
 const { t } = useI18n();
 
 //#region 接口
-
+const seizeRobots = async () => {
+  const res = await seizeRobotByIds([...selected.keys()]);
+  editor.value.updateRobots(res, { canControl: true });
+};
 //#endregion
 
 const keyword = ref<string>('');
@@ -33,15 +37,39 @@ const keyword = ref<string>('');
 //#region 机器人列表
 const groups = computed<RobotGroup[]>(() => editor.value.robotGroups.value ?? []);
 const robots = computed<RobotInfo[]>(() => editor.value.robots.filter(({ label }) => label.includes(keyword.value)));
-
 const getGroupRobots = (ids: RobotGroup['robots']) =>
   ids?.map((id) => editor.value.getRobotById(id)).filter((robot) => robot?.label.includes(keyword.value));
 
-const selected = ref<RobotInfo['id'][]>([]);
-const isAllSelected = computed<boolean>(() => robots.value.every(({ id }) => selected.value.includes(id)));
+const selected = reactive<Set<RobotInfo['id']>>(new Set());
+watch(
+  () => props.editable,
+  () => selected.clear(),
+);
 
+const isAllSelected = computed<boolean>(() => robots.value.every(({ id }) => selected.has(id)));
 const selectAll = (checked: boolean) => {
-  selected.value = checked ? map(robots.value, 'id') : [];
+  if (checked) {
+    robots.value.forEach(({ id }) => selected.add(id));
+  } else {
+    selected.clear();
+  }
+};
+
+const checkGroupSelected = (ids: RobotGroup['robots']) => !!ids?.length && ids.every((id) => selected.has(id));
+const selectGroup = (ids: RobotGroup['robots'], checked: boolean) => {
+  if (checked) {
+    ids?.forEach((id) => selected.add(id));
+  } else {
+    ids?.forEach((id) => selected.delete(id));
+  }
+};
+
+const selectRobot = (id: RobotInfo['id'], checked: boolean) => {
+  if (checked) {
+    selected.add(id);
+  } else {
+    selected.delete(id);
+  }
 };
 //#endregion
 
@@ -60,6 +88,21 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
     onOk: () => editor.value.deleteRobotGroup(id),
   });
 //#endregion
+
+//#region 机器人操作
+const toRemoveRobots = () =>
+  Modal.confirm({
+    class: 'confirm',
+    title: t('您确定要从场景中移除已选机器人吗？'),
+    centered: true,
+    cancelText: t('返回'),
+    okText: t('移除'),
+    onOk: () => {
+      editor.value.removeRobots([...selected.keys()]);
+      selected.clear();
+    },
+  });
+//#endregion
 </script>
 
 <template>
@@ -69,16 +112,30 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
 
   <a-flex class="full" vertical>
     <a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
-      <template #suffix><SearchOutlined /></template>
+      <template #suffix>
+        <i class="icon search size-16" />
+      </template>
     </a-input>
 
     <a-flex v-if="editable" class="mb-8" style="height: 32px" justify="space-between" align="center">
       <a-checkbox :checked="isAllSelected" @change="selectAll($event.target.checked)">{{ $t('全选') }}</a-checkbox>
       <a-space align="center">
-        <a-button class="icon-btn panel-btn" size="small" :disabled="!selected.length">
+        <a-button
+          class="icon-btn panel-btn"
+          :title="$t('抢占控制权')"
+          size="small"
+          @click="seizeRobots"
+          :disabled="!selected.size"
+        >
           <i class="mask control" />
         </a-button>
-        <a-button class="icon-btn panel-btn" size="small" :disabled="!selected.length">
+        <a-button
+          class="icon-btn panel-btn"
+          :title="$t('移除机器人')"
+          size="small"
+          @click="toRemoveRobots"
+          :disabled="!selected.size"
+        >
           <i class="mask trash_fill" />
         </a-button>
       </a-space>
@@ -88,10 +145,11 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
       <template #expandIcon="v">
         <i class="icon dropdown" :class="{ active: v?.isActive }" />
       </template>
-      <a-collapse-panel v-for="{ id, label, robots } in groups" :key="id" :header="label">
+
+      <a-collapse-panel v-for="{ id, label, robots } in groups" :key="id">
         <template v-if="editable" #extra>
           <a-dropdown placement="bottomRight">
-            <a-button class="icon-btn" size="small">
+            <a-button class="icon-btn" size="small" @click.stop>
               <i class="icon dot" />
             </a-button>
             <template #overlay>
@@ -124,7 +182,20 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
             </template>
           </a-dropdown>
         </template>
-        <a-list :data-source="getGroupRobots(robots)">
+
+        <template #header>
+          <a-space align="center" :size="8">
+            <a-checkbox
+              v-if="editable"
+              :checked="checkGroupSelected(robots)"
+              @change="selectGroup(robots, $event.target.checked)"
+              @click.stop
+            />
+            <span>{{ label }}</span>
+          </a-space>
+        </template>
+
+        <a-list rowKey="id" :data-source="getGroupRobots(robots)">
           <template #renderItem="{ item }">
             <a-list-item
               class="ph-16"
@@ -132,8 +203,15 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
               style="height: 36px"
               @click="emit('change', item.id)"
             >
-              <template #actions> </template>
-              <a-typography-text>{{ item.label }}</a-typography-text>
+              <a-space align="center" :size="8">
+                <a-checkbox
+                  v-if="editable"
+                  :checked="selected.has(item.id)"
+                  @change="selectRobot(item.id, $event.target.checked)"
+                  @click.stop
+                />
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-space>
             </a-list-item>
           </template>
         </a-list>
@@ -146,9 +224,3 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
     </a-button>
   </a-flex>
 </template>
-
-<style scoped lang="scss">
-.btn {
-  justify-self: flex-end;
-}
-</style>
diff --git a/src/components/test-2.vue b/src/components/test-2.vue
new file mode 100644
index 0000000..c5f0eae
--- /dev/null
+++ b/src/components/test-2.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { EditorService } from '@core/editor.service';
+import sTheme from '@core/theme.service';
+import { 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)!;
+</script>
+
+<template>
+  <a-row v-if="true"></a-row>
+  <a-empty v-else :image="sTheme.empty" />
+</template>
+
+<!-- <style scoped lang="scss"></style> -->
+<!-- <style scoped lang="scss"></style> -->
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index 234cc65..81f42bb 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getSceneById } from '@api/scene';
 import { EditorService } from '@core/editor.service';
-import { watch } from 'vue';
+import { computed, nextTick, watch } from 'vue';
 import { ref } from 'vue';
 import { onMounted, provide, shallowRef } from 'vue';
 
@@ -37,14 +37,38 @@ onMounted(() => {
 const editable = ref<boolean>(false);
 watch(editable, (v) => editor.value?.setState(v));
 
-const current = ref<string>();
+const show = ref<boolean>(true);
+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;
+      }
+    }
+    if (current.value?.type === 'robot') return;
+    current.value = undefined;
+  },
+);
+const isRobot = computed(() => current.value?.type === 'robot');
+const isPoint = computed(() => current.value?.type === 'point');
+const isRoute = computed(() => current.value?.type === 'line');
+const isArea = computed(() => current.value?.type === 'area');
+
+const selectRobot = (id: string) => {
+  current.value = { type: 'robot', id };
+  editor.value?.inactive();
+};
 </script>
 
 <template>
   <a-layout class="full">
     <a-layout-header class="p-16" style="height: 64px">
       <a-flex justify="space-between" align="center">
-        <a-typography-text strong>{{ title }}</a-typography-text>
+        <a-typography-text class="title">{{ title }}</a-typography-text>
         <a-space align="center">
           <a-button v-if="editable" class="warning" @click="editable = false">
             <i class="icon exit size-18 mr-8" />
@@ -56,25 +80,27 @@ const current = ref<string>();
           </a-button>
           <a-button>{{ $t('推送') }}</a-button>
           <a-button>{{ $t('导入') }}</a-button>
-          <a-button>{{ $t('导出') }}</a-button>
+          <a-button @click="editor?.export()">{{ $t('导出') }}</a-button>
         </a-space>
       </a-flex>
     </a-layout-header>
 
     <a-layout class="p-16">
       <a-layout-sider :width="320">
-        <a-tabs class="full" type="card">
+        <a-tabs type="card">
           <a-tab-pane key="1" :tab="$t('机器人')">
             <RobotGroups
               v-if="editor"
               :token="EDITOR_KEY"
               :editable="editable"
-              :current="current"
-              @change="current = $event"
+              :current="current?.id"
+              @change="selectRobot"
             />
           </a-tab-pane>
           <a-tab-pane key="2" :tab="$t('库区')">Content of Tab Pane 2</a-tab-pane>
-          <a-tab-pane key="3" :tab="$t('高级组')">Content of Tab Pane 3</a-tab-pane>
+          <a-tab-pane key="3" :tab="$t('高级组')">
+            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" />
+          </a-tab-pane>
         </a-tabs>
       </a-layout-sider>
       <a-layout-content>
@@ -82,10 +108,45 @@ const current = ref<string>();
       </a-layout-content>
     </a-layout>
   </a-layout>
+
+  <div v-if="editable" class="toolbar-container">
+    <EditorToolbar v-if="editor" :token="EDITOR_KEY" />
+  </div>
+
+  <template v-if="current?.id">
+    <a-float-button style="top: 80px; right: 16px" shape="square" @click="show = !show">
+      <template #icon><i class="icon detail" /></template>
+    </a-float-button>
+    <div v-if="show" class="card-container">
+      <RobotDetailCard v-if="isRobot" :token="EDITOR_KEY" :current="current.id" />
+
+      <template v-if="isPoint"> </template>
+    </div>
+  </template>
 </template>
 
 <style scoped lang="scss">
 .editor-container {
   background-color: transparent !important;
 }
+
+.toolbar-container {
+  position: fixed;
+  right: 50%;
+  bottom: 40px;
+  left: 50%;
+  z-index: 8888;
+}
+
+.card-container {
+  position: fixed;
+  top: 80px;
+  right: 64px;
+  z-index: 8888;
+  width: 320px;
+}
+
+.ant-typography.title {
+  font: 500 16px/22px SourceHanSansSC;
+}
 </style>
diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts
index e25fd3f..66b65de 100644
--- a/src/services/editor.service.ts
+++ b/src/services/editor.service.ts
@@ -2,28 +2,35 @@ import { EDITOR_CONFIG, MapAreaType, type MapPen, MapPointType } from '@api/map'
 import type { RobotGroup, RobotInfo } from '@api/robot';
 import type { SceneData } from '@api/scene';
 import sTheme from '@core/theme.service';
-import { CanvasLayer, EditType, LockState, Meta2d, s8 } from '@meta2d/core';
+import { CanvasLayer, EditType, LockState, Meta2d, type Pen, s8 } from '@meta2d/core';
 import { useObservable } from '@vueuse/rxjs';
-import { clone, cloneDeep, get, isNil, pick, remove, some } from 'lodash-es';
+import { clone, cloneDeep, get, isNil, isString, pick, remove, some } from 'lodash-es';
 import { BehaviorSubject, debounceTime, filter, map, Subject, switchMap } from 'rxjs';
-import { watch } from 'vue';
+import { reactive, watch } from 'vue';
 
 export type Point = Record<'x' | 'y', number>;
 
 export class EditorService extends Meta2d {
-  public load(map?: string, readonly = false): void {
+  public async load(map?: string, editable = false): Promise<void> {
     const data = map ? JSON.parse(map) : undefined;
     this.open(data);
-    this.setState(readonly);
+    this.setState(editable);
   }
   public save(): string {
     const data = this.data();
-    const map = JSON.stringify(data);
-    return map;
+    return JSON.stringify(data);
   }
-  public export(): string {
-    const png = this.toPng(10);
-    return png;
+  public export(): void {
+    const json = this.save();
+    console.log(json);
+  }
+
+  public setState(editable?: boolean): void {
+    this.lock(editable ? LockState.None : LockState.Disable);
+  }
+
+  public override data(): SceneData {
+    return super.data();
   }
 
   readonly #mouse$$ = new Subject<{ type: 'click' | 'mousedown' | 'mouseup'; value: Point }>();
@@ -46,19 +53,8 @@ export class EditorService extends Meta2d {
     ),
   );
 
-  public override data(): SceneData {
-    return super.data();
-  }
-  public override find(target: string): MapPen[] {
-    return super.find(target);
-  }
-
-  public setState(readonly?: boolean): void {
-    this.lock(readonly ? LockState.Disable : LockState.None);
-  }
-
   //#region 机器人
-  readonly #robotMap = new Map<RobotInfo['id'], RobotInfo>();
+  readonly #robotMap = reactive<Map<RobotInfo['id'], RobotInfo>>(new Map());
   public get robots(): RobotInfo[] {
     return Array.from(this.#robotMap.values());
   }
@@ -81,6 +77,22 @@ export class EditorService extends Meta2d {
     (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
     (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
   }
+  public removeRobots(ids: RobotInfo['id'][]): void {
+    ids?.forEach((v) => this.#robotMap.delete(v));
+    const groups = clone(this.#robotGroups$$.value);
+    groups.forEach(({ robots }) => remove(robots ?? [], (v) => !this.#robotMap.has(v)));
+    this.#robotGroups$$.next(groups);
+    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
+    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
+  }
+  public updateRobots(ids: RobotInfo['id'][], values: Partial<RobotInfo>): void {
+    ids?.forEach((v) => {
+      const robot = this.#robotMap.get(v);
+      if (isNil(robot)) return;
+      this.#robotMap.set(v, { ...robot, ...values });
+    });
+    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
+  }
 
   readonly #robotGroups$$ = new BehaviorSubject<RobotGroup[]>([]);
   public readonly robotGroups = useObservable<RobotGroup[]>(this.#robotGroups$$.pipe(debounceTime(300)));
@@ -113,7 +125,47 @@ export class EditorService extends Meta2d {
   }
   //#endregion
 
+  readonly #change$$ = new Subject<boolean>();
+  public readonly selected = useObservable<string[], string[]>(
+    this.#change$$.pipe(
+      filter((v) => !v),
+      debounceTime(100),
+      map(() => this.store.active?.map(({ id }) => id).filter((v) => !isNil(v)) ?? []),
+    ),
+    { initialValue: new Array<string>() },
+  );
+  public readonly pens = useObservable<MapPen[]>(
+    this.#change$$.pipe(
+      filter((v) => v),
+      debounceTime(100),
+      map(() => this.data().pens),
+    ),
+  );
+
+  public override find(target: string): MapPen[] {
+    return super.find(target);
+  }
+
+  public override active(target: string | Pen[], emit?: boolean): void {
+    const pens = isString(target) ? this.find(target) : target;
+    super.active(pens, emit);
+    this.render();
+  }
+  public override inactive(): void {
+    super.inactive();
+    this.render();
+  }
+
   //#region 点位
+  public readonly points = useObservable<MapPen[], MapPen[]>(
+    this.#change$$.pipe(
+      filter((v) => v),
+      debounceTime(100),
+      map(() => this.find('point')),
+    ),
+    { initialValue: new Array<MapPen>() },
+  );
+
   public async addPoint(p: Point, type = MapPointType.普通点): Promise<void> {
     const id = s8();
     const pen: MapPen = {
@@ -130,7 +182,7 @@ export class EditorService extends Meta2d {
     pen.x = x - width / 2;
     pen.y = y - height / 2;
     await this.addPen(pen, false, true, true);
-    this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
+    // this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
   }
 
   #mapPoint(type: MapPointType): Required<Pick<MapPen, 'width' | 'height' | 'lineWidth' | 'iconSize'>> {
@@ -186,10 +238,8 @@ export class EditorService extends Meta2d {
     );
   }
 
-  #load(theme?: string): void {
-    if (theme) {
-      this.setTheme(theme);
-    }
+  #load(theme: string): void {
+    this.setTheme(theme);
 
     const { robots, robotGroups } = this.data();
     this.#robotMap.clear();
@@ -208,9 +258,50 @@ export class EditorService extends Meta2d {
   #listen(e: unknown, v: any) {
     switch (e) {
       case 'opened':
-        this.#load();
+        this.#load(sTheme.theme);
+        this.#change$$.next(true);
         break;
 
+      case 'add':
+      case 'delete':
+      case 'update':
+      case 'valueUpdate':
+        this.#change$$.next(true);
+        break;
+
+      case 'active':
+      case 'inactive':
+        this.#change$$.next(false);
+        break;
+
+      // case 'undo':
+      // case 'redo':
+      //   {
+      //     const { type, pens = [], initPens = [] } = data ?? {};
+      //     switch (type) {
+      //       case EditType.Add:
+      //         pens?.forEach((pen: SceneMapPen) => {
+      //           if (pen.name === 'point') {
+      //             const { image } = this.#mapPointType(pen.point!.type);
+      //             const rect = this.#editor?.getPenRect(pen);
+      //             this.#editor?.setValue({ id: pen.id, image, ...rect }, { render: true, history: false });
+      //           }
+      //         });
+      //         break;
+      //       case EditType.Update:
+      //         (event === 'undo' ? initPens : pens)?.forEach((pen: SceneMapPen) => {
+      //           if (pen.name === 'point') {
+      //             const { image } = this.#mapPointType(pen.point!.type);
+      //             this.#editor?.setValue({ id: pen.id, image }, { render: true, history: false });
+      //           }
+      //         });
+      //         break;
+      //       default:
+      //         break;
+      //     }
+      //   }
+      //   break;
+
       case 'click':
       case 'mousedown':
       case 'mouseup':
@@ -280,6 +371,7 @@ function drawPoint(ctx: CanvasRenderingContext2D, pen: MapPen): void {
     case MapPointType.充电点:
     case MapPointType.停靠点:
     case MapPointType.动作点:
+    case MapPointType.禁行点:
       ctx.roundRect(x, y, w, h, r);
       ctx.strokeStyle = get(theme, active ? 'point-l.strokeActive' : 'point-l.stroke') ?? '';
       ctx.stroke();
diff --git a/src/services/theme.service.ts b/src/services/theme.service.ts
index ba98262..8f1a1d8 100644
--- a/src/services/theme.service.ts
+++ b/src/services/theme.service.ts
@@ -41,6 +41,11 @@ class ThemeService {
     return THEME_MAP[`editor-${this.#theme.value}`] ?? {};
   }
 
+  public get empty(): string {
+    const { href } = new URL(`../assets/images/empty-${this.#theme.value}.png`, import.meta.url);
+    return href;
+  }
+
   constructor() {
     watch(this.#theme, (v) => this.#load(v), { immediate: true });
   }