From 72f0415f27d865a4a897d20d4ba6cf0aa8065441 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Mon, 4 Aug 2025 14:13:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=82=B9=E4=BD=8D?=
 =?UTF-8?q?=E5=92=8C=E5=8C=BA=E5=9F=9F=E9=9D=A2=E6=9D=BF=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=96=B0=E7=B1=BB=E5=9E=8B=E7=82=B9=E4=BD=8D=E7=9A=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pen-groups.vue | 236 ++++++++++++++++++++++++----------
 1 file changed, 168 insertions(+), 68 deletions(-)

diff --git a/src/components/pen-groups.vue b/src/components/pen-groups.vue
index 3205c7a..0ec2393 100644
--- a/src/components/pen-groups.vue
+++ b/src/components/pen-groups.vue
@@ -63,8 +63,16 @@ const select = (id: string) => {
         </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.互斥区)">
+        <!-- 点位类型面板 -->
+        <a-collapse-panel :header="$t('普通点')">
+          <a-list
+            rowKey="id"
+            :data-source="
+              points.filter(
+                ({ id, point }) => point?.type === MapPointType.普通点 && !id?.includes('view-center-point'),
+              )
+            "
+          >
             <template #renderItem="{ item }">
               <a-list-item
                 class="ph-16"
@@ -78,8 +86,159 @@ const select = (id: string) => {
           </a-list>
         </a-collapse-panel>
 
-        <a-collapse-panel :header="$t('非互斥区')">
-          <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.非互斥区)">
+        <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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="routes.filter(({ route }) => route?.pass === MapRoutePassType.无)">
             <template #renderItem="{ item }">
               <a-list-item
                 class="ph-16"
@@ -144,8 +303,9 @@ const select = (id: string) => {
           </a-list>
         </a-collapse-panel>
 
-        <a-collapse-panel :header="$t('普通路线')">
-          <a-list rowKey="id" :data-source="routes.filter(({ route }) => route?.pass === MapRoutePassType.无)">
+        <!-- 区域类型面板 -->
+        <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"
@@ -159,68 +319,8 @@ const select = (id: string) => {
           </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="select(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="select(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="select(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="select(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.普通点)">
+        <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"