Initial commit

2026-02-08 21:36:39 +08:00
parent 1058d666a0
commit e7abfca9f7
5 changed files with 89 additions and 16 deletions
--- a/modeler/src/views/decision/api.ts
+++ b/modeler/src/views/decision/api.ts
@@ -8,7 +8,7 @@
 */

 import { HttpRequestClient } from '@/utils/request';
-import type { BehaviorTree, BehaviorTreeDetailsResponse, BehaviorTreePageResponse, NodeTemplatesResponse } from './types';
+import type { BehaviorTree, BehaviorTreeDetailsResponse, BehaviorTreePageResponse, BehaviorTreeRequest, NodeTemplatesResponse } from './types';
 import type { BasicResponse } from '@/types';

 const req = HttpRequestClient.create<BasicResponse>({
@@ -19,7 +19,7 @@ export const findNodeTemplates = (): Promise<NodeTemplatesResponse> => {
  return req.get('/system/nodetemplate/all');
 };

-export const findTreesByQuery = (query: Partial<BehaviorTree> = {}): Promise<BehaviorTreePageResponse> => {
+export const findTreesByQuery = (query: Partial<BehaviorTreeRequest> = {}): Promise<BehaviorTreePageResponse> => {
  return req.get<BehaviorTreePageResponse>('/system/behaviortree/list', query);
 };

--- a/modeler/src/views/decision/builder/node.vue
+++ b/modeler/src/views/decision/builder/node.vue
@@ -19,15 +19,11 @@
      <div class="w-full">
        <a-tooltip>
          <template #title>
-            {{element?.description}}
+            {{element?.description ?? element?.name}}
          </template>
-          <div class="ks-designer-node-content">
-            <div class="ks-designer-node-row">
-              <div class="ks-designer-node-name">
-                {{ substring(element?.description ?? '-' ,40) }}
-              </div>
-            </div>
-          </div>
+          <p>
+            {{ substring(element?.description ?? (element?.name ?? '-') ,40) }}
+          </p>
        </a-tooltip>
      </div>
    </a-card>
@@ -172,8 +168,11 @@ export default defineComponent({
    padding: 8px 15px;
    border-top: 1px solid #195693;
    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
  }

+  &.ks-designer-model-node,
  &.ks-designer-task-node {
    background: linear-gradient(150deg, #20421b 1%, #4a6646 55%);

@@ -208,6 +207,8 @@ export default defineComponent({
      background: url('@/assets/icons/bg-fk-point.png') center / 100% 100%;
    }
  }
+
+  &.ks-designer-precondition-node,
  &.ks-designer-component-node {
    background: linear-gradient(150deg, #06226b 1%, #1a43a7 55%);

@@ -216,6 +217,7 @@ export default defineComponent({
    }
  }

+  &.ks-designer-select-node,
  &.ks-designer-control-node {
    background: linear-gradient(150deg, #1d4f32 1%, #326a5d 55%);

--- a/modeler/src/views/decision/trees-card.vue
+++ b/modeler/src/views/decision/trees-card.vue
@@ -1,9 +1,12 @@
 <template>
-  <a-collapse v-model:activeKey="activeKey" :accordion="false">
+  <a-collapse v-model:activeKey="activeKey" :accordion="false" class="ks-trees-collapse">
    <a-collapse-panel key="1">
      <template #header>
        <span class="ks-model-builder-title-icon icon-model"></span>我的行为树
      </template>
+      <div class="w-full" style="padding: 5px;">
+        <a-input-search size="small" allowClear v-model:value="behaviorTreeQuery.name" placeholder="行为树名称" @search="loadTress" />
+      </div>
      <a-list size="small" :data-source="behaviorTrees || []" style="min-height: 25vh">
        <template #renderItem="{ item }">
          <a-tooltip placement="right">
@@ -17,6 +20,11 @@
          </a-tooltip>
        </template>
      </a-list>
+      <a-pagination
+        size="small"
+        v-model:current="behaviorTreeQuery.pageNum"
+        :page-size="behaviorTreeQuery.pageSize"
+        simple :total="totalTress" @change="handleChange" />
    </a-collapse-panel>
  </a-collapse>
 </template>
@@ -24,9 +32,9 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
-import type { BehaviorTree } from './types';
+import type { BehaviorTree, BehaviorTreeRequest } from './types';
 import { findTreesByQuery } from './api';
-import {substring} from '@/utils/strings'
+import { substring } from '@/utils/strings';

 export default defineComponent({
  emits: ['select-tree'],
@@ -35,14 +43,26 @@ export default defineComponent({
  },
  setup(_props, { emit }) {
    const behaviorTrees = ref<BehaviorTree[]>([]);
-    const behaviorTreeQuery = ref<Partial<BehaviorTree>>({});
+    const behaviorTreeQuery = ref<Partial<BehaviorTreeRequest>>({
+      name: null,
+      pageNum: 1,
+      pageSize: 8,
+    });
    const activeKey = ref<number>(1)
+    const totalTress = ref<number>(0);
    const loadTress = () => {
      findTreesByQuery(behaviorTreeQuery.value).then(r => {
        behaviorTrees.value = r.rows;
+        totalTress.value = r.total ?? 0;
      });
    };

+    const handleChange = (page: number, pageSize: number) => {
+      behaviorTreeQuery.value.pageNum = page;
+      behaviorTreeQuery.value.pageSize = pageSize;
+      loadTress();
+    };
+
    const columns = [
      {
        title: '名称',
@@ -67,6 +87,7 @@ export default defineComponent({
    });

    return {
+      totalTress,
      substring,
      activeKey,
      behaviorTrees,
@@ -75,6 +96,7 @@ export default defineComponent({
      columns,
      customRow,
      handleSelect,
+      handleChange,
    };
  },
 })
@@ -82,12 +104,52 @@ export default defineComponent({

 </script>

-<style lang="less" scoped>
+<style lang="less">
+.ant-collapse {
+  .ant-list-sm {
+    .ant-list-item {
+      padding: 4px 15px;
+      cursor: pointer;
+      color: rgb(130 196 233);
+
+      &:hover {
+        background: #0d2d4e;
+      }
+    }
+  }
+
+  &.ks-trees-collapse {
+    .ant-collapse-content-box {
+      padding: 0;
+      height: 40vh;
+      position: relative;
+    }
+
+    .ant-pagination{
+      position: absolute;
+      bottom: 10px;
+      width: 100%;
+      .ant-pagination-disabled .ant-pagination-item-link,
+      .ant-pagination-disabled:hover .ant-pagination-item-link,
+      .ant-pagination-prev .ant-pagination-item-link,
+      .ant-pagination-next .ant-pagination-item-link,
+      &.ant-pagination-mini .ant-pagination-total-text,
+      &.ant-pagination-mini .ant-pagination-simple-pager{
+        color: rgb(255 255 255 / 95%);
+      }
+      &.ant-pagination-simple .ant-pagination-simple-pager input {
+        background-color: transparent;
+        border: 1px solid #0f4a7c;
+        color:#eee;
+      }
+    }
+  }
+}
 .create-tree-icon{
  cursor: pointer;
 }
 .ant-list-item {
-  padding: 5px 5px;
+  padding: 3px 5px;
  cursor: pointer;
  color: rgb(130 196 233);

--- a/modeler/src/views/decision/types/tree.ts
+++ b/modeler/src/views/decision/types/tree.ts
@@ -21,6 +21,11 @@ export interface BehaviorTree {
  graph: NodeGraph
 }

+export interface BehaviorTreeRequest extends BehaviorTree {
+  pageNum: number,
+  pageSize: number,
+}
+

 export interface BehaviorTreeDetailsResponse extends ApiDataResponse<BehaviorTree> {

--- a/modeler/types/components.d.ts
+++ b/modeler/types/components.d.ts
@@ -28,6 +28,7 @@ declare module 'vue' {
    AInput: typeof import('ant-design-vue/es')['Input']
    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
    ALayout: typeof import('ant-design-vue/es')['Layout']
    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
@@ -36,6 +37,7 @@ declare module 'vue' {
    AListItem: typeof import('ant-design-vue/es')['ListItem']
    AMenu: typeof import('ant-design-vue/es')['Menu']
    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
    ARow: typeof import('ant-design-vue/es')['Row']
    ASpace: typeof import('ant-design-vue/es')['Space']
@@ -68,6 +70,7 @@ declare global {
  const AInput: typeof import('ant-design-vue/es')['Input']
  const AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
  const AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+  const AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
  const ALayout: typeof import('ant-design-vue/es')['Layout']
  const ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
  const ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
@@ -76,6 +79,7 @@ declare global {
  const AListItem: typeof import('ant-design-vue/es')['ListItem']
  const AMenu: typeof import('ant-design-vue/es')['Menu']
  const AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+  const APagination: typeof import('ant-design-vue/es')['Pagination']
  const APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
  const ARow: typeof import('ant-design-vue/es')['Row']
  const ASpace: typeof import('ant-design-vue/es')['Space']