Initial commit

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);
 };
 

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">
+          <p>
-            <div class="ks-designer-node-row">
+            {{ substring(element?.description ?? (element?.name ?? '-') ,40) }}
-              <div class="ks-designer-node-name">
+          </p>
-                {{ substring(element?.description ?? '-' ,40) }}
-              </div>
-            </div>
-          </div>
         </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%);
 

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);
 

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> {
 

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']