解决任务编排滚动条的问题

2026-06-10 09:21:04 +08:00
parent 45f0261ed7
commit 0135fbc474
7 changed files with 122 additions and 16 deletions
@@ -0,0 +1,31 @@
+<template>
+  <div class="mission-page">
+    <ReflectionManagerPanel
+      kind="process"
+      kind-label="任务"
+      title="任务编排（Mission / 进程，含插件 MissionType 实例化）"
+      empty-text="当前没有任务；点击右上角「新建任务」从已加载的 MissionType 中选一个实例化。"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * /admin/missions 路由的页面入口。
+ *
+ * 由于「任务」与「进程」在后端 ReflectionApiController 共用 kind=process / mission
+ * （UiDiscoveryCache.MissionCreatableTypes 同源），这里直接用 ReflectionManagerPanel
+ * 接入，按下「新建任务」会列出所有 MissionType 子类（含 taskflow / trigger）。
+ *
+ * 旧版本的 DataTablePro + listMissions mock 已经下线，所有数据走 SimpleLite 反射 API。
+ */
+import ReflectionManagerPanel from '@/components/reflection/ReflectionManagerPanel.vue'
+</script>
+
+<style scoped>
+.mission-page {
+  height: calc(100vh - 56px);
+  padding: 12px 14px;
+  box-sizing: border-box;
+}
+</style>
@@ -0,0 +1,67 @@
+<template>
+  <div class="orchestration-page">
+    <el-tabs v-model="tab" class="orch-tabs" type="border-card" @tab-change="onTabChange">
+      <el-tab-pane label="车辆" name="cars">
+        <CarPanelView v-if="tab === 'cars'" />
+      </el-tab-pane>
+      <el-tab-pane label="进程" name="process">
+        <MissionEditorView v-if="tab === 'process'" />
+      </el-tab-pane>
+      <el-tab-pane label="脚本" name="script">
+        <ReflectionKindTable
+          v-if="tab === 'script'"
+          kind="script"
+          empty-text="脚本（继承 CarProgram 的子类型）未发现可暴露条目"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="任务流" name="taskflow">
+        <ReflectionKindTable
+          v-if="tab === 'taskflow'"
+          kind="mission"
+          extra-filter="taskflow"
+          empty-text="未发现任务流条目"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="触发器" name="trigger">
+        <ReflectionKindTable
+          v-if="tab === 'trigger'"
+          kind="mission"
+          extra-filter="trigger"
+          empty-text="未发现触发器条目"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import CarPanelView from '@/views/admin/CarPanelView.vue'
+import MissionEditorView from '@/views/admin/MissionEditorView.vue'
+import ReflectionKindTable from '@/components/orchestration/ReflectionKindTable.vue'
+
+const tab = ref<'cars' | 'process' | 'script' | 'taskflow' | 'trigger'>('cars')
+
+function onTabChange(name: string | number) {
+  tab.value = name as typeof tab.value
+}
+
+onMounted(() => {
+  const cached = sessionStorage.getItem('orchestration.tab')
+  if (cached) tab.value = cached as typeof tab.value
+})
+</script>
+
+<style scoped>
+.orchestration-page {
+  height: calc(100vh - 56px);
+  padding: 12px;
+}
+.orch-tabs {
+  height: 100%;
+}
+.orch-tabs :deep(.el-tabs__content) {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+</style>