temp

2025-05-08 19:42:45 +08:00 · 2025-05-08 19:42:45 +08:00 · f90d025e5a
commit f90d025e5a
parent c2c1d8eb5f
9 changed files with 2617 additions and 515 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/_ant.scss
+++ b/src/_ant.scss
@ -79,7 +79,9 @@
    }

    & > .ant-card-body {
+      max-height: calc(100% - 48px);
      padding: 16px;
+      overflow-y: auto;
    }
  }

@ -293,6 +295,10 @@
      outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
    }

+    &:disabled {
+      background-color: get-color(neutral3);
+    }
+
    &:not(:disabled):focus {
      border-color: get-color(primary);
      outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
--- a/src/apis/map/constant.ts
+++ b/src/apis/map/constant.ts
@ -1,4 +1,5 @@
 import { KeydownType, type Options } from '@meta2d/core';
+import { invert } from 'lodash-es';

 //#region 点位
 export enum MapPointType {
@ -26,6 +27,7 @@ export enum MapRouteType {
  直线 = 'line',
  三阶贝塞尔曲线 = 'bezier3',
 }
+export const MAP_ROUTE_TYPE = invert(MapRouteType);
 export const MAP_ROUTE_TYPES = Object.freeze(<[string, MapRouteType][]>Object.entries(MapRouteType));

 export enum MapRoutePassType {
--- a/src/components/card/area-edit-card.vue
+++ b/src/components/card/area-edit-card.vue
@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } from '@api/map';
+import type { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
+import type { RouteBindModalRef } from '@common/modal/route-bind-modal.vue';
+import type { EditorService } from '@core/editor.service';
+import sTheme from '@core/theme.service';
+import { ref, shallowRef } from 'vue';
+import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+  id?: string;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+const pen = computed<MapPen | null>(() => {
+  const v = editor.value.current.value;
+  if (v?.id !== props.id) return null;
+  return v!;
+});
+const area = computed<MapAreaInfo | null>(() => {
+  const v = pen.value?.area;
+  if (!v?.type) return null;
+  return v;
+});
+
+const refBindPoint = shallowRef<PointBindModalRef>();
+const pointKeyword = ref<string>('');
+const points = computed<MapPen[]>(
+  () =>
+    <MapPen[]>(
+      area.value?.points?.map((v) => editor.value.getPenById(v)).filter((v) => v?.label?.includes(pointKeyword.value))
+    ),
+);
+
+const refBindRoute = shallowRef<RouteBindModalRef>();
+const routeKeyword = ref<string>('');
+const routes = computed<MapPen[]>(
+  () =>
+    <MapPen[]>(
+      area.value?.routes?.map((v) => editor.value.getPenById(v)).filter((v) => v?.label?.includes(routeKeyword.value))
+    ),
+);
+</script>
+
+<template>
+  <PointBindModal ref="refBindPoint" :token="token" />
+  <RouteBindModal ref="refBindRoute" :token="token" />
+
+  <a-card class="full" :title="$t('属性')" :bordered="false">
+    <a-flex v-if="id && pen && area" :gap="24" vertical>
+      <a-row :gutter="[8, 8]">
+        <a-col :span="12">
+          <a-input :value="$t(MapAreaType[area.type])" disabled />
+        </a-col>
+        <a-col :span="12">
+          <a-input
+            :maxlength="10"
+            :value="pen.label"
+            @change="editor.updatePen(id, { label: $event.target.value }, false)"
+          >
+            <template #suffix><EditOutlined /></template>
+          </a-input>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="[8, 8]">
+        <a-col :span="24">
+          <a-typography-text>{{ $t('描述') }}:</a-typography-text>
+        </a-col>
+        <a-col :span="24">
+          <a-textarea
+            class="prop"
+            :placeholder="$t('请输入描述内容')"
+            :maxlength="100"
+            :autoSize="{ minRows: 3, maxRows: 3 }"
+            :value="pen?.desc"
+            @change="editor.updatePen(id, { desc: $event.target.value }, false)"
+          />
+        </a-col>
+      </a-row>
+
+      <a-collapse expand-icon-position="end" :bordered="false">
+        <template #expandIcon="v">
+          <i class="icon dropdown" :class="{ active: v?.isActive }" />
+        </template>
+
+        <a-collapse-panel v-if="MapAreaType.库区 === area.type" :header="$t('绑定动作点')">
+          <template #extra>
+            <a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen, [MapPointType.动作点])">
+              <i class="mask plus" />
+            </a-button>
+          </template>
+          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
+            <template #suffix>
+              <i class="icon search size-16" />
+            </template>
+          </a-input>
+          <a-list rowKey="id" :data-source="points">
+            <template #renderItem="{ item }">
+              <a-list-item class="ph-16" style="height: 36px">
+                <a-typography-text>{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+
+        <a-collapse-panel
+          v-if="[MapAreaType.互斥区, MapAreaType.非互斥区].includes(area.type)"
+          :header="$t('绑定站点')"
+        >
+          <template #extra>
+            <a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen)">
+              <i class="mask plus" />
+            </a-button>
+          </template>
+          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
+            <template #suffix>
+              <i class="icon search size-16" />
+            </template>
+          </a-input>
+          <a-list rowKey="id" :data-source="points">
+            <template #renderItem="{ item }">
+              <a-list-item class="ph-16" style="height: 36px">
+                <a-typography-text>{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+
+        <a-collapse-panel v-if="MapAreaType.互斥区 === area.type" :header="$t('绑定路段')">
+          <template #extra>
+            <a-button class="icon-btn" size="small" @click.stop="refBindRoute?.open(pen)">
+              <i class="mask plus" />
+            </a-button>
+          </template>
+          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="routeKeyword">
+            <template #suffix>
+              <i class="icon search size-16" />
+            </template>
+          </a-input>
+          <a-list rowKey="id" :data-source="routes">
+            <template #renderItem="{ item }">
+              <a-list-item class="ph-16" style="height: 36px">
+                <a-typography-text>{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-flex>
+    <a-empty v-else :image="sTheme.empty" />
+  </a-card>
+</template>
--- a/src/components/card/point-edit-card.vue
+++ b/src/components/card/point-edit-card.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MAP_POINT_TYPES, MapAreaType, type MapPen, type MapPointInfo, MapPointType, type MapRect } from '@api/map';
 import type { RobotInfo } from '@api/robot';
+import type { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
 import type { RobotBindModalRef } from '@common/modal/robot-bind-modal.vue';
 import type { EditorService } from '@core/editor.service';
 import sTheme from '@core/theme.service';
@ -36,18 +37,32 @@ const robotKeyword = ref<string>('');
 const robots = computed<RobotInfo[]>(
  () =>
    <RobotInfo[]>(
-      point.value?.robots?.map((v) => editor.value.getRobotById(v)).filter((v) => v?.label.includes(robotKeyword.value))
+      point.value?.robots
+        ?.map((v) => editor.value.getRobotById(v))
+        .filter((v) => v?.label?.includes(robotKeyword.value))
    ) ?? [],
 );

+const refBindPoint = shallowRef<PointBindModalRef>();
+const pointKeyword = ref<string>('');
+const actions = computed<MapPen[]>(
+  () =>
+    <MapPen[]>(
+      point.value?.actions
+        ?.map((v) => editor.value.getPenById(v))
+        .filter((v) => v?.point?.type === MapPointType.动作点 && v?.label?.includes(pointKeyword.value))
+    ),
+);
+
 const coArea1 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.库区));
 const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'point', MapAreaType.互斥区));
 </script>

 <template>
  <RobotBindModal ref="refBindRobot" :token="token" />
+  <PointBindModal ref="refBindPoint" :token="token" />

-  <a-card :title="$t('属性')" :bordered="false">
+  <a-card class="full" :title="$t('属性')" :bordered="false">
    <a-flex v-if="id && pen && point" :gap="24" vertical>
      <a-row :gutter="[8, 8]">
        <a-col :span="12">
@ -144,14 +159,19 @@ const coArea2 = computed<MapPen[]>(() => editor.value.getBoundAreas(props.id, 'p

        <a-collapse-panel v-if="MapPointType.等待点 === point.type" :header="$t('绑定动作点')">
          <template #extra>
-            <a-button class="icon-btn" size="small" @click.stop>
+            <a-button class="icon-btn" size="small" @click.stop="refBindPoint?.open(pen, [MapPointType.动作点])">
              <i class="mask plus" />
            </a-button>
          </template>
-          <a-list rowKey="id" :data-source="point.actions">
+          <a-input class="search mv-8" :placeholder="$t('请输入搜索关键字')" v-model:value="pointKeyword">
+            <template #suffix>
+              <i class="icon search size-16" />
+            </template>
+          </a-input>
+          <a-list rowKey="id" :data-source="actions">
            <template #renderItem="{ item }">
              <a-list-item class="ph-16" style="height: 36px">
-                <a-typography-text>{{ editor.getPenById(item)?.label }}</a-typography-text>
+                <a-typography-text>{{ item.label }}</a-typography-text>
              </a-list-item>
            </template>
          </a-list>
--- a/src/components/modal/point-bind-modal.vue
+++ b/src/components/modal/point-bind-modal.vue
@ -0,0 +1,96 @@
+<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, toRaw } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+export type PointBindModalRef = Ref;
+type Ref = {
+  open: (pen: MapPen, filter?: MapPointType[]) => void;
+};
+const open: Ref['open'] = (pen, filter = []) => {
+  if (!pen?.id) return;
+  keyword.value = '';
+  types.value = [MapPointType.禁行点, ...filter];
+  id.value = pen.id;
+  sn.value = pen.name;
+  switch (sn.value) {
+    case 'point':
+      selected.value = pen.point?.actions ?? [];
+      break;
+    case 'area':
+      selected.value = pen.area?.points ?? [];
+      break;
+    default:
+      selected.value = [];
+      break;
+  }
+  show.value = true;
+};
+defineExpose<Ref>({ open });
+
+const show = ref<boolean>(false);
+const keyword = ref<string>('');
+
+const types = ref<MapPointType[]>([MapPointType.禁行点]);
+const points = computed<MapPen[]>(() =>
+  editor.value.points.value
+    .filter(({ point }) => point?.type && !types.value.includes(point.type))
+    .filter(({ label }) => label?.includes(keyword.value)),
+);
+
+const id = ref<string>('');
+const sn = ref<string>();
+const selected = ref<string[]>([]);
+
+const submit = () => {
+  switch (sn.value) {
+    case 'point':
+      editor.value.updatePoint(id.value, { actions: toRaw(selected.value) });
+      break;
+    case 'area':
+      editor.value.updateArea(id.value, { points: toRaw(selected.value) });
+      break;
+    default:
+      selected.value = [];
+      break;
+  }
+  show.value = false;
+};
+</script>
+
+<template>
+  <a-modal :width="300" :title="$t('绑定站点')" v-model:open="show" :mask-closable="false" centered @ok="submit">
+    <a-input class="search" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
+      <template #suffix>
+        <i class="icon search size-16" />
+      </template>
+    </a-input>
+
+    <a-table
+      class="mt-10"
+      rowKey="id"
+      :dataSource="points"
+      :pagination="false"
+      :rowSelection="{
+        columnWidth: 32,
+        selectedRowKeys: selected,
+        onChange: (keys) => (selected = <string[]>keys),
+      }"
+      :scroll="{ y: 80 }"
+      bordered
+    >
+      <a-table-column dataIndex="label" :title="$t('站点')" />
+      <a-table-column :dataIndex="['point', 'type']" :title="$t('站点类型')">
+        <template #default="{ text }">
+          {{ $t(MapPointType[text]) }}
+        </template>
+      </a-table-column>
+    </a-table>
+  </a-modal>
+</template>
--- a/src/components/modal/route-bind-modal.vue
+++ b/src/components/modal/route-bind-modal.vue
@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { MAP_ROUTE_TYPE, type MapPen, MapRoutePassType } from '@api/map';
+import type { EditorService } from '@core/editor.service';
+import { computed, inject, type InjectionKey, ref, type ShallowRef, toRaw } from 'vue';
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+};
+const props = defineProps<Props>();
+const editor = inject(props.token)!;
+
+export type RouteBindModalRef = Ref;
+type Ref = {
+  open: (pen: MapPen) => void;
+};
+const open: Ref['open'] = (pen) => {
+  if (!pen?.id) return;
+  keyword.value = '';
+  id.value = pen.id;
+  selected.value = pen.area?.routes ?? [];
+  show.value = true;
+};
+defineExpose<Ref>({ open });
+
+const show = ref<boolean>(false);
+const keyword = ref<string>('');
+
+const routes = computed<MapPen[]>(() =>
+  editor.value.routes.value.filter(({ label }) => label?.includes(keyword.value)),
+);
+
+const id = ref<string>('');
+const selected = ref<string[]>([]);
+
+const submit = () => {
+  editor.value.updateArea(id.value, { routes: toRaw(selected.value) });
+  show.value = false;
+};
+</script>
+
+<template>
+  <a-modal :width="572" :title="$t('绑定路段')" v-model:open="show" :mask-closable="false" centered @ok="submit">
+    <a-input class="search" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
+      <template #suffix>
+        <i class="icon search size-16" />
+      </template>
+    </a-input>
+
+    <a-table
+      class="mt-10"
+      rowKey="id"
+      :dataSource="routes"
+      :pagination="false"
+      :rowSelection="{
+        columnWidth: 32,
+        selectedRowKeys: selected,
+        onChange: (keys) => (selected = <string[]>keys),
+      }"
+      :scroll="{ y: 80 }"
+      bordered
+    >
+      <a-table-column dataIndex="label" :title="$t('路段')" />
+      <a-table-column :dataIndex="['route', 'type']" :title="$t('路段类型')">
+        <template #default="{ text }">
+          {{ $t(MAP_ROUTE_TYPE[text]) }}
+        </template>
+      </a-table-column>
+      <a-table-column :dataIndex="['route', 'pass']" :title="$t('可通行类型')">
+        <template #default="{ text }">
+          {{ $t(MapRoutePassType[text]) }}
+        </template>
+      </a-table-column>
+    </a-table>
+  </a-modal>
+</template>
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@ -145,7 +145,7 @@ const selectRobot = (id: string) => {
        <div v-if="editable"></div>
      </template>
      <template v-if="isArea">
-        <div v-if="editable"></div>
+        <AreaEditCard v-if="editable" :token="EDITOR_KEY" :id="current.id" />
        <AreaDetailCard v-else :token="EDITOR_KEY" :current="current.id" />
      </template>
    </div>
@ -159,10 +159,10 @@ const selectRobot = (id: string) => {

 .toolbar-container {
  position: fixed;
-  right: 50%;
  bottom: 40px;
  left: 50%;
  z-index: 100;
+  transform: translateX(-50%);
 }

 .card-container {
@ -171,7 +171,8 @@ const selectRobot = (id: string) => {
  right: 64px;
  z-index: 100;
  width: 320px;
-  max-height: calc(100% - 96px);
+  height: calc(100% - 96px);
+  overflow: visible;
 }

 .ant-typography.title {
--- a/src/services/editor.service.ts
+++ b/src/services/editor.service.ts
@ -1,4 +1,4 @@
-import { EDITOR_CONFIG, MapAreaType, type MapPen, type MapPointInfo, MapPointType } from '@api/map';
+import { EDITOR_CONFIG, type MapAreaInfo, MapAreaType, type MapPen, type MapPointInfo, MapPointType } from '@api/map';
 import type { RobotGroup, RobotInfo } from '@api/robot';
 import type { SceneData } from '@api/scene';
 import sTheme from '@core/theme.service';
@ -198,8 +198,8 @@ export class EditorService extends Meta2d {
  public updatePoint(id: string, info: Partial<MapPointInfo>): void {
    const { point } = this.getPenById(id) ?? {};
    if (!point?.type) return;
-    const p = { ...point, ...info };
-    this.setValue({ id, point: p }, { render: true, history: true, doEvent: true });
+    const o = { ...point, ...info };
+    this.setValue({ id, point: o }, { render: true, history: true, doEvent: true });
  }
  public changePointType(id: string, type: MapPointType): void {
    this.setValue(
@ -223,6 +223,15 @@ export class EditorService extends Meta2d {
  //#endregion

  //#region 线路
+  public readonly routes = useObservable<MapPen[], MapPen[]>(
+    this.#change$$.pipe(
+      filter((v) => v),
+      debounceTime(100),
+      map(() => this.find('route').map((v) => (v.label = this.getRouteLabel(v.id)))),
+    ),
+    { initialValue: new Array<MapPen>() },
+  );
+
  public getRouteLabel(id?: string): string {
    if (!id) return '';
    const pen = this.getPenById(id);
@ -296,6 +305,13 @@ export class EditorService extends Meta2d {
    this.bottom(area);
    // this.pushHistory({ type: EditType.Add, pens: [cloneDeep(pen)] });
  }
+
+  public updateArea(id: string, info: Partial<MapAreaInfo>): void {
+    const { area } = this.getPenById(id) ?? {};
+    if (!area?.type) return;
+    const o = { ...area, ...info };
+    this.setValue({ id, area: o }, { render: true, history: true, doEvent: true });
+  }
  //#endregion

  constructor(container: HTMLDivElement) {