temp

mocks/scene/getById

@@ -4,7 +4,62 @@
   "data": {
     "id": "mock-scene-1",
     "label": "模拟场景A",
-    "robotGroups": [],
+    "robotGroups": [
+      {
+        "id": "mock-robot-group-1",
+        "label": "模拟机器人组A",
+        "robots": [
+          {
+            "id": "mock-robot-1",
+            "label": "模拟机器人A",
+            "brand": "模拟品牌A",
+            "type": 1,
+            "ip": "127.0.1.1"
+          },
+          {
+            "id": "mock-robot-2",
+            "label": "模拟机器人B",
+            "brand": "模拟品牌A",
+            "type": 2,
+            "ip": "127.0.1.2"
+          },
+          {
+            "id": "mock-robot-3",
+            "label": "模拟机器人C",
+            "brand": "模拟品牌A",
+            "type": 3,
+            "ip": "127.0.1.3"
+          }
+        ]
+      },
+      {
+        "id": "mock-robot-group-2",
+        "label": "模拟机器人组B",
+        "robots": [
+          {
+            "id": "mock-robot-4",
+            "label": "模拟机器人D",
+            "brand": "模拟品牌B",
+            "type": 1,
+            "ip": "127.0.2.1"
+          },
+          {
+            "id": "mock-robot-5",
+            "label": "模拟机器人E",
+            "brand": "模拟品牌B",
+            "type": 2,
+            "ip": "127.0.2.2"
+          },
+          {
+            "id": "mock-robot-6",
+            "label": "模拟机器人F",
+            "brand": "模拟品牌B",
+            "type": 3,
+            "ip": "127.0.2.3"
+          }
+        ]
+      }
+    ],
     "map": ""
   },
   "message": "模拟提示"

package-lock.json

@@ -8,6 +8,7 @@
       "name": "arm_system",
       "version": "0.0.0",
       "dependencies": {
+        "@ant-design/icons-vue": "^7.0.1",
         "@meta2d/core": "^1.0.78",
         "@vueuse/rxjs": "^13.1.0",
         "ant-design-vue": "^4.2.6",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "@meta2d/core": "^1.0.78",
     "@vueuse/rxjs": "^13.1.0",
     "ant-design-vue": "^4.2.6",

src/App.vue

@@ -10,6 +10,8 @@ import sTheme from '@core/theme.service';
     :autoInsertSpaceInButton="false"
     :wave="{ disabled: true }"
   >
-    <router-view />
+    <a-app @contextmenu.prevent>
+      <router-view />
+    </a-app>
   </a-config-provider>
 </template>

src/_ant.scss

@@ -0,0 +1,188 @@
+@use 'asset/themes/theme' as *;
+
+@include themed {
+  .ant-app {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .ant-btn {
+    display: inline-flex;
+    align-items: center;
+    font: 400 14px/22px Roboto;
+    border-radius: 2px;
+
+    &.ant-btn-default {
+      color: get-color(primary);
+      background-color: get-color(141414);
+      border-color: get-color(primary);
+      box-shadow: 0 2px 0 0 get-color(00000005);
+    }
+
+    &.ant-btn-primary {
+      font-weight: 500;
+      color: get-color(141414);
+      background-color: get-color(primary);
+      border-color: get-color(primary);
+      box-shadow: 0 2px 0 0 get-color(0000000a);
+    }
+
+    &.warning {
+      font-weight: 500;
+      color: get-color(141414);
+      background-color: get-color(warning);
+      border-color: get-color(warning);
+      box-shadow: 0 2px 0 0 get-color(0000000a);
+    }
+  }
+
+  .ant-collapse.ant-collapse-ghost {
+    border-radius: 0;
+
+    & > .ant-collapse-item {
+      & > .ant-collapse-header {
+        align-items: center;
+        height: 36px;
+        padding: 0 0 0 8px;
+        font: 500 14px/22px Roboto;
+        color: get-color(ffffffd9);
+        background: get-color(ffffff14);
+        border-radius: 2px;
+
+        & > .ant-collapse-expand-icon {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+
+          & > .ant-collapse-arrow {
+            font-size: 24px;
+
+            &.active {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      & > .ant-collapse-content {
+        & > .ant-collapse-content-box {
+          padding: 0;
+        }
+      }
+
+      & + .ant-collapse-item {
+        margin-block-start: 8px;
+      }
+    }
+  }
+
+  .ant-input {
+    color: get-color(ffffffd9);
+    background-color: transparent;
+
+    &::placeholder {
+      color: get-color(ffffff40);
+    }
+  }
+
+  .ant-input-affix-wrapper {
+    box-shadow: none;
+
+    &::before {
+      display: none;
+    }
+
+    & > .ant-input-suffix {
+      margin-inline-start: 12px;
+      font-size: 16px;
+      color: get-color(ffffffd9);
+    }
+
+    &.search {
+      padding-inline-start: 7px;
+      background-color: transparent;
+      border-color: get-color(595959);
+      border-radius: 4px;
+    }
+  }
+
+  .ant-layout {
+    background-color: get-color(2a2c2c);
+
+    & > .ant-layout-header {
+      line-height: unset;
+      background-color: get-color(242525);
+      box-shadow: 0 2px 8px 0 get-color(00000026);
+    }
+
+    & > .ant-layout-sider {
+      background-color: get-color(36393a);
+      border-radius: 8px;
+      box-shadow: 0 2px 8px 0 get-color(ffffff14);
+    }
+  }
+
+  .ant-list-items {
+    & > .ant-list-item {
+      padding: 0;
+      border-color: get-color(f9f9f914);
+
+      &:hover {
+        background-color: get-color(f9f9f914);
+      }
+    }
+  }
+
+  .ant-tabs {
+    border-radius: 8px;
+
+    & > .ant-tabs-nav {
+      margin: 0;
+      background-color: get-color(ffffff2e);
+
+      & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
+        & > .ant-tabs-tab {
+          padding: 14px 32px;
+          margin: 0;
+          font: 400 16px/20px Roboto;
+          color: get-color(ffffff73);
+          background-color: transparent;
+          border: none;
+          border-radius: 0;
+
+          & > .ant-tabs-tab-btn {
+            color: inherit;
+            text-shadow: none;
+          }
+
+          &.ant-tabs-tab-active {
+            font-weight: 600;
+            color: get-color(primary);
+            background-color: get-color(36393a);
+          }
+        }
+
+        & > .ant-tabs-ink-bar {
+          display: none;
+        }
+      }
+    }
+
+    & > .ant-tabs-content-holder > .ant-tabs-content {
+      height: 100%;
+      padding: 16px;
+      overflow-y: auto;
+    }
+  }
+
+  .ant-typography {
+    font: 400 14px/22px Roboto;
+    color: get-color(ffffffa6);
+
+    & > strong {
+      font: 500 16px/22px SourceHanSansSC;
+      color: get-color(ffffffd9);
+    }
+  }
+}

src/_icon.scss

@@ -0,0 +1,19 @@
+@use 'asset/themes/theme' as *;
+@use 'asset/icons/icon' as *;
+
+@include themed {
+  .icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    font-size: 18px;
+    line-height: 1;
+    vertical-align: top;
+
+    @each $icon in $icons {
+      &.#{$icon} {
+        background: get-icon($icon);
+      }
+    }
+  }
+}

src/ant.scss

@@ -1,84 +0,0 @@
-@use 'asset/themes/theme' as *;
-
-@include themed {
-  .ant-btn {
-    display: inline-flex;
-    align-items: center;
-    font: 400 14px/22px Roboto;
-    border-radius: 2px;
-
-    &.ant-btn-default {
-      color: get-color(primary);
-      background-color: get-color(141414);
-      border-color: get-color(primary);
-      box-shadow: 0 2px 0 0 get-color(00000005);
-    }
-
-    &.ant-btn-primary {
-      font-weight: 500;
-      color: get-color(141414);
-      background-color: get-color(primary);
-      border-color: get-color(primary);
-      box-shadow: 0 2px 0 0 get-color(0000000a);
-    }
-  }
-
-  .ant-layout {
-    background-color: get-color(2a2c2c);
-
-    & > .ant-layout-header {
-      line-height: unset;
-      background-color: get-color(242525);
-      box-shadow: 0 2px 8px 0 get-color(00000026);
-    }
-
-    & > .ant-layout-sider {
-      background-color: get-color(36393a);
-      border-radius: 8px;
-      box-shadow: 0 2px 8px 0 get-color(ffffff14);
-    }
-  }
-
-  .ant-tabs {
-    border-radius: 8px;
-
-    & > .ant-tabs-nav {
-      margin: 0;
-      background-color: get-color(ffffff2e);
-
-      & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-        & > .ant-tabs-tab {
-          padding: 14px 32px;
-          margin: 0;
-          font: 400 16px/20px Roboto;
-          color: get-color(ffffff73);
-          background-color: transparent;
-          border: none;
-          border-radius: 0;
-
-          & > .ant-tabs-tab-btn {
-            color: inherit;
-            text-shadow: none;
-          }
-
-          &.ant-tabs-tab-active {
-            font-weight: 600;
-            color: get-color(primary);
-            background-color: get-color(36393a);
-          }
-        }
-
-        & > .ant-tabs-ink-bar {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .ant-typography {
-    & > strong {
-      font: 500 16px/22px SourceHanSansSC;
-      color: get-color(ffffffd9);
-    }
-  }
-}

src/apis/robot/type.ts

@@ -3,7 +3,7 @@ import type { RobotBrand, RobotState, RobotType } from './constant';
 export interface RobotGroup {
   id: string; // 机器人组id
   label: string; // 机器人组名称
-  robotIds: number[]; // 机器人id列表
+  robots: RobotInfo[]; // 机器人列表
 }
 
 export interface RobotInfo {

src/assets/icons/_icon.scss

@@ -1,16 +1 @@
-$icons: (edit upload);
-
-.icon {
-  display: inline;
-  width: 1em;
-  height: 1em;
-  font-size: 18px;
-  line-height: 1;
-  vertical-align: top;
-
-  @each $icon in $icons {
-    &.#{$icon} {
-      background: url(./#{$icon}.png) center / contain no-repeat;
-    }
-  }
-}
+$icons: (dropdown, edit, exit);

src/assets/themes/_dark.scss

@@ -1,4 +1,4 @@
-$color: (
+$colors: (
   primary: #0dbb8a,
   warning: #d89614,
   111e1b: #111e1b,
@@ -8,6 +8,7 @@ $color: (
   00000005: #00000005,
   0000000a: #0000000a,
   00000026: #00000026,
+  f9f9f914: #f9f9f914,
 
   000000: #000,
   2a2c2c: #2a2c2c,

src/assets/themes/_light.scss

@@ -1,3 +1,3 @@
-$color: (
+$colors: (
   text-1: #000,
 );

src/assets/themes/_theme.scss

@@ -4,14 +4,16 @@
 
 $themes: (dark, light);
 $theme-map: (
-  dark-color: dark.$color,
+  dark-colors: dark.$colors,
 
-  light-color: light.$color,
+  light-colors: light.$colors,
 );
 
 @mixin themed {
   @each $theme in $themes {
-    $theme-color: map.get($theme-map, #{$theme}-color) !global;
+    $theme: $theme !global;
+    $theme-colors: map.get($theme-map, #{$theme}-colors) !global;
+
     :root[theme='#{$theme}'] {
       @content;
     }
@@ -19,5 +21,9 @@ $theme-map: (
 }
 
 @function get-color($key) {
-  @return map.get($theme-color, $key);
+  @return map.get($theme-colors, $key);
+}
+
+@function get-icon($name) {
+  @return url(asset/icons/#{$theme}/#{$name}.png) center / contain no-repeat;
 }

src/components/robot-group.vue

@@ -1,49 +1,54 @@
 <script setup lang="ts">
+import type { RobotGroup, RobotInfo } from '@api/robot';
 import type { EditorService } from '@core/editor.service';
-import { isEmpty } from 'lodash-es';
-import { inject, type InjectionKey, ref, type ShallowRef, watch } from 'vue';
-
-const enum Mode {
-  常规,
-  添加点位 = 0x10,
-  添加库区 = 0x31,
-  添加互斥区,
-  添加非互斥区,
-}
+import { chain } from 'lodash-es';
+import { computed, inject, type InjectionKey, ref, type ShallowRef } from 'vue';
 
 type Props = {
   editor: InjectionKey<ShallowRef<EditorService>>;
   editable?: boolean;
+  groups?: RobotGroup[];
 };
 const props = defineProps<Props>();
 const editor = inject(props.editor)!;
 
-const mode = ref<Mode>(Mode.常规);
-watch(editor.value.mouseClick, (v) => {
-  if (mode.value !== Mode.添加点位) return;
-  if (isEmpty(v)) return;
-  editor.value.addPoint(v, 1);
-  editor.value.addPoint(v, 11);
-});
-watch(editor.value.mouseBrush, (v) => {
-  if (![Mode.添加库区, Mode.添加互斥区, Mode.添加非互斥区].includes(mode.value)) return;
-  const [p1, p2] = v ?? [];
-  if (isEmpty(p1) || isEmpty(p2)) return;
-  editor.value.addArea(p1, p2, mode.value & 0xf);
-  mode.value = Mode.常规;
-});
+const keyword = ref<string>('');
+
+//#region 机器人列表
+// const groups = computed<RobotGroup[]>(() => chain(props.groups).filter().value())
+const robots = computed<RobotInfo[]>(() => chain(props.groups).map('robots').flatten().value());
+
+const selected = ref<RobotInfo['id'][]>([]);
+const isAllSelected = computed<boolean>(() => robots.value.every(({ id }) => selected.value.includes(id)));
+//#endregion
 </script>
 
 <template>
-  <a-space direction="vertical">
-    <a-button @click="mode = Mode.常规">常规</a-button>
-    <a-button @click="mode = Mode.添加点位">点位</a-button>
-    <!-- <a-button  @click="editor.addRoute(PenRouteType.直线)">直线</a-button> -->
-    <!-- <a-button  @click="editor.addRoute(PenRouteType.三阶贝塞尔曲线)">曲线</a-button> -->
-    <a-button @click="mode = Mode.添加库区">库区</a-button>
-    <a-button @click="mode = Mode.添加互斥区">互斥区</a-button>
-    <a-button @click="mode = Mode.添加非互斥区">非互斥区</a-button>
-  </a-space>
+  <a-flex class="full" vertical>
+    <a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
+      <template #suffix><SearchOutlined /></template>
+    </a-input>
+
+    <a-flex v-if="editable" class="mb-8" style="height: 32px" flex="none" justify="space-between" align="center">
+      <a-checkbox :checked="isAllSelected">{{ $t('全选') }}</a-checkbox>
+    </a-flex>
+
+    <a-collapse class="scroll" expand-icon-position="end" ghost>
+      <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-list :data-source="robots">
+          <template #renderItem="{ item }">
+            <a-list-item class="ph-16" style="height: 36px">
+              <template #actions> </template>
+              <a-typography-text>{{ item.label }}</a-typography-text>
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-collapse-panel>
+    </a-collapse>
+  </a-flex>
 </template>
 
 <!-- <style scoped lang="scss"></style> -->

src/components/test.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { EditorService } from '@core/editor.service';
+import { isEmpty } from 'lodash-es';
+import { inject, type InjectionKey, ref, type ShallowRef, watch } from 'vue';
+
+const enum Mode {
+  常规,
+  添加点位 = 0x10,
+  添加库区 = 0x31,
+  添加互斥区,
+  添加非互斥区,
+}
+
+type Props = {
+  editor: InjectionKey<ShallowRef<EditorService>>;
+  editable?: boolean;
+};
+const props = defineProps<Props>();
+const editor = inject(props.editor)!;
+
+const mode = ref<Mode>(Mode.常规);
+watch(editor.value.mouseClick, (v) => {
+  if (mode.value !== Mode.添加点位) return;
+  if (isEmpty(v)) return;
+  editor.value.addPoint(v, 1);
+  editor.value.addPoint(v, 11);
+});
+watch(editor.value.mouseBrush, (v) => {
+  if (![Mode.添加库区, Mode.添加互斥区, Mode.添加非互斥区].includes(mode.value)) return;
+  const [p1, p2] = v ?? [];
+  if (isEmpty(p1) || isEmpty(p2)) return;
+  editor.value.addArea(p1, p2, mode.value & 0xf);
+  mode.value = Mode.常规;
+});
+</script>
+
+<template>
+  <a-space class="scroll" direction="vertical">
+    <a-button @click="mode = Mode.常规">常规</a-button>
+    <a-button @click="mode = Mode.添加点位">点位</a-button>
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.直线)">直线</a-button> -->
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.三阶贝塞尔曲线)">曲线</a-button> -->
+    <a-button @click="mode = Mode.添加库区">库区</a-button>
+    <a-button @click="mode = Mode.添加互斥区">互斥区</a-button>
+    <a-button @click="mode = Mode.添加非互斥区">非互斥区</a-button>
+
+    <a-button @click="mode = Mode.常规">常规</a-button>
+    <a-button @click="mode = Mode.添加点位">点位</a-button>
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.直线)">直线</a-button> -->
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.三阶贝塞尔曲线)">曲线</a-button> -->
+    <a-button @click="mode = Mode.添加库区">库区</a-button>
+    <a-button @click="mode = Mode.添加互斥区">互斥区</a-button>
+    <a-button @click="mode = Mode.添加非互斥区">非互斥区</a-button>
+
+    <a-button @click="mode = Mode.常规">常规</a-button>
+    <a-button @click="mode = Mode.添加点位">点位</a-button>
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.直线)">直线</a-button> -->
+    <!-- <a-button  @click="editor.addRoute(PenRouteType.三阶贝塞尔曲线)">曲线</a-button> -->
+    <a-button @click="mode = Mode.添加库区">库区</a-button>
+    <a-button @click="mode = Mode.添加互斥区">互斥区</a-button>
+    <a-button @click="mode = Mode.添加非互斥区">非互斥区</a-button>
+  </a-space>
+</template>
+
+<!-- <style scoped lang="scss"></style> -->

src/pages/scene-editor.vue

@@ -35,6 +35,9 @@ onMounted(() => {
 });
 
 const editable = ref<boolean>(false);
+watch(editable, (v) => {
+  editor.value?.setState(v);
+});
 </script>
 
 <template>
@@ -43,8 +46,12 @@ const editable = ref<boolean>(false);
       <a-flex justify="space-between" align="center">
         <a-typography-text strong>{{ title }}</a-typography-text>
         <a-space align="center">
-          <a-button type="primary">
-            <i class="icon edit mr-2" />
+          <a-button v-if="editable" class="warning" @click="editable = false">
+            <i class="icon exit mr-8" />
+            <span>{{ $t('退出编辑器') }}</span>
+          </a-button>
+          <a-button v-else type="primary" @click="editable = true">
+            <i class="icon edit mr-8" />
             <span>{{ $t('启用编辑器') }}</span>
           </a-button>
           <a-button>{{ $t('推送') }}</a-button>
@@ -58,7 +65,7 @@ const editable = ref<boolean>(false);
       <a-layout-sider :width="320">
         <a-tabs class="full" type="card">
           <a-tab-pane key="1" :tab="$t('机器人')">
-            <RobotGroup v-if="editor" :editor="EDITOR_KEY" :editable="editable" />
+            <RobotGroup v-if="editor" :editor="EDITOR_KEY" :editable="editable" :groups="groups" />
           </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>

src/services/editor.service.ts

@@ -12,7 +12,7 @@ export class EditorService extends Meta2d {
   public load(map?: string, readonly = false): void {
     const data = map ? JSON.parse(map) : undefined;
     this.open(data);
-    this.lock(readonly ? LockState.Disable : LockState.None);
+    this.setState(readonly);
   }
   public save(): string {
     const data = this.data();
@@ -48,6 +48,10 @@ export class EditorService extends Meta2d {
     return super.find(target);
   }
 
+  public setState(readonly?: boolean): void {
+    this.lock(readonly ? LockState.Disable : LockState.None);
+  }
+
   //#region 点位
   public async addPoint(p: Point, type = MapPointType.普通点): Promise<void> {
     const pen: MapPen = {

src/services/router.ts

@@ -7,6 +7,7 @@ export const ROUTES = Object.freeze<RouteRecordRaw[]>([
     props: true,
     component: () => import('@/exception.vue'),
   },
+
   {
     path: '/scene-editor/:id',
     props: true,

src/style.scss

@@ -1,5 +1,5 @@
 @use './ant';
-@use 'asset/icons/icon';
+@use './icon';
 @use 'asset/fonts/font';
 
 html,
@@ -7,13 +7,15 @@ body {
   width: 100vw;
   height: 100vh;
   margin: 0;
+  font: 400 14px/20px system-ui;
   user-select: none;
   -webkit-user-drag: none;
 }
 
-#app {
-  width: 100%;
-  height: 100%;
+* {
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .full {
@@ -22,15 +24,15 @@ body {
   overflow: hidden;
 }
 
-@for $i from 0 through 100 {
+.scroll {
+  overflow-y: auto;
+}
+
+@for $i from 0 through 20 {
   .size-#{$i * 2} {
     font-size: $i * 2px !important;
   }
 
-  .w-#{$i * 4} {
-    width: $i * 4px !important;
-  }
-
   .p-#{$i * 2} {
     padding: $i * 2px !important;
   }