Initial commit

modeler/src/style.less

@@ -979,6 +979,8 @@
       border-right: 1px solid #062850;
       width: 100%;
       overflow: hidden;
+
+      background: #081229;
     }
   }
 
@@ -1486,3 +1488,26 @@
 .ant-divider {
   border-block-start: 1px solid rgb(255 255 255 / 17%);
 }
+
+
+
+.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;
+  }
+}

modeler/src/views/decision/algorithm/api.ts

@@ -0,0 +1,32 @@
+/*
+ * This file is part of the kernelstudio package.
+ *
+ * (c) 2014-2026 zlin <admin@kernelstudio.com>
+ *
+ * For the full copyright and license information, please view the LICENSE file
+ * that was distributed with this source code.
+ */
+
+import { HttpRequestClient } from '@/utils/request';
+import type { Algorithm, AlgorithmPageableResponse, AlgorithmRequest } from './types';
+import type { BasicResponse } from '@/types';
+
+const req = HttpRequestClient.create<BasicResponse>({
+  baseURL: '/api',
+});
+
+export const findAlgorithmsByQuery = (query: Partial<AlgorithmRequest> = {}): Promise<AlgorithmPageableResponse> => {
+  return req.get('/algo/algorithm/list', query);
+};
+
+export const createAlgorithm = (algorithm: Algorithm): Promise<BasicResponse> => {
+  return req.postJson('/algo/algorithm', algorithm);
+};
+
+export const updateAlgorithm = (algorithm: Algorithm): Promise<BasicResponse> => {
+  return req.putJson('/algo/algorithm', algorithm);
+};
+
+export const deleteAlgorithm = (id: number): Promise<BasicResponse> => {
+  return req.delete(`/algo/algorithm/${id}`);
+};

modeler/src/views/decision/algorithm/config.ts

@@ -0,0 +1,23 @@
+/*
+ * This file is part of the kernelstudio package.
+ *
+ * (c) 2014-2026 zlin <admin@kernelstudio.com>
+ *
+ * For the full copyright and license information, please view the LICENSE file
+ * that was distributed with this source code.
+ */
+
+export const algorithmTypes = [
+  {
+    type: 'defense',
+    name: '防守',
+  },
+  {
+    type: 'offense',
+    name: '进攻',
+  },
+  {
+    type: 'formation',
+    name: '队形',
+  }
+]

modeler/src/views/decision/algorithm/management.vue

@@ -1,11 +1,395 @@
 <template>
   <Layout>
     <template #sidebar>
-      ddd
+      <div class="ks-sidebar-header">
+        <span class="ks-sidebar-title">指挥决策规则库管理</span>
+        <a-button class="ks-sidebar-add" size="small" @click="handleCreate">
+          <PlusOutlined />
+          新增
+        </a-button>
+      </div>
+      <a-list item-layout="horizontal" :data-source="algorithms" class="ks-algorithm-list">
+        <template #renderItem="{ item }">
+          <a-list-item @click="()=> handleSelect(item)" :class="selectedAlgorithm?.id === item.id ? 'selected' : null">
+            <a-list-item-meta :description="substring(item.description,20)">
+              <template #title>
+                <span class="ks-algorithm-name">{{ substring(item.name, 20) }}</span>
+                <span class="ks-algorithm-type"><a-badge size="small" :count="getAlgorithmTypeName(item.type)"></a-badge></span>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+
+      <a-pagination
+        v-model:current="query.pageNum"
+        :page-size="query.pageSize"
+        :total="algorithmsTotal"
+        simple size="small" @change="handleChange" />
     </template>
+
+    <div class="w-full h-full">
+
+      <a-card class="ks-page-card ks-workspace-card ks-algorithm-card">
+
+        <template #title>
+          <a-space>
+            <span class="point"></span>
+            <span class="text">规则配置</span>
+          </a-space>
+        </template>
+
+        <div class="ks-scrollable" style="height: 79vh;overflow-y: auto;padding-right: 10px">
+
+          <a-row :gutter="15">
+            <a-col :span="16">
+              <a-form
+                ref="formRef"
+                :label-col="{span: 6}"
+                :model="selectedAlgorithm"
+                autocomplete="off"
+                layout="horizontal"
+                name="basic"
+              >
+
+                <a-form-item
+                  label="规则名称"
+                  :rules="[{ required: true, message: '请输入算法名称!', trigger: ['input', 'change'] }]"
+                  :name="['name']"
+                >
+                  <a-input v-model:value="selectedAlgorithm.name" placeholder="请输入算法名称" />
+                </a-form-item>
+
+                <a-form-item
+                  label="业务类型"
+                  :rules="[{ required: true, message: '请输入业务类型!', trigger: ['input', 'change'] }]"
+                  :name="['type']"
+                >
+                  <a-select allow-clear v-model:value="selectedAlgorithm.type" @change="(v: any)=> selectedAlgorithm.type = v">
+                    <a-select-option v-for="a in algorithmTypes" :value="a.type">{{ a.name }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+
+                <a-form-item
+                  label="算法文件路径"
+                  :rules="[{ required: true, message: '请输入算法文件路径!', trigger: ['input', 'change'] }]"
+                  :name="['codePath']"
+                >
+                  <a-input v-model:value="selectedAlgorithm.codePath" placeholder="请输入算法文件路径" />
+                </a-form-item>
+
+                <a-form-item
+                  label="算法配置"
+                  :rules="[{ required: true, message: '请输入算法配置', trigger: ['input', 'change'] }]"
+                  :name="['algoConfig']"
+                >
+                  <a-textarea v-model:value="selectedAlgorithm.algoConfig" placeholder="请输入算法配置" />
+                </a-form-item>
+
+                <a-form-item
+                  label="算法描述"
+                  :rules="[{ required: false, message: '请输入算法描述', trigger: ['input', 'change'] }]"
+                  :name="['description']"
+                >
+                  <a-textarea v-model:value="selectedAlgorithm.description" placeholder="请输入算法描述" />
+                </a-form-item>
+
+                <a-form-item
+                  label="算法参数定义"
+                  :rules="[{ required: true, message: '请输入算法参数定义', trigger: ['input', 'change'] }]"
+                  :name="['algorithmParamList']"
+                >
+                  <a-form-item-rest>
+                    <div class="ks-algorithm-param-list">
+                      <div class="ks-algorithm-param-item" v-for="(item,index) in selectedAlgorithm.algorithmParamList">
+                        <a-row :gutter="15">
+                          <a-col :span="7">
+                            <a-input v-model:value="item.paramName" placeholder="请输入参数名" />
+                          </a-col>
+                          <a-col :span="7">
+                            <a-input v-model:value="item.defaultValue" placeholder="请输入默认值" />
+                          </a-col>
+                          <a-col :span="7">
+                            <a-input v-model:value="item.description" placeholder="请输入描述" />
+                          </a-col>
+                          <a-col :span="3">
+                            <a-space class="ks-algorithm-param-actions">
+                              <MinusCircleOutlined @click="()=> handleMinus(index)" />
+                              <PlusCircleOutlined @click="handleAdd" v-if="index === 0" />
+                            </a-space>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-form-item-rest>
+                </a-form-item>
+
+                <a-form-item
+                  :wrapper-col="{offset: 6}"
+                >
+                  <a-space>
+                    <a-button @click="handleSave">保存规则</a-button>
+                    <a-popconfirm
+                      v-if="selectedAlgorithm && selectedAlgorithm.id > 0"
+                      title="确定删除?"
+                      @confirm="handleDelete"
+                    >
+                      <a-button danger>删除规则</a-button>
+                    </a-popconfirm>
+                  </a-space>
+                </a-form-item>
+
+              </a-form>
+            </a-col>
+          </a-row>
+
+        </div>
+
+      </a-card>
+
+    </div>
   </Layout>
 </template>
 
 <script setup lang="ts">
-import Layout from '../layout.vue'
+import { onMounted, ref } from 'vue';
+import { type FormInstance, message } from 'ant-design-vue';
+import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import Layout from '../layout.vue';
+import { createAlgorithm, deleteAlgorithm, findAlgorithmsByQuery, updateAlgorithm } from './api';
+import type { Algorithm, AlgorithmParam, AlgorithmRequest } from './types';
+import { substring } from '@/utils/strings';
+import { algorithmTypes } from './config';
+import type { NullableString } from '@/types';
+
+const query = ref<Partial<AlgorithmRequest>>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+const defaultAlgorithmParam: AlgorithmParam = {
+  id: 0,
+  algorithmId: 0,
+  // 参数名
+  paramName: null,
+  // 默认值
+  defaultValue: null,
+  // 描述
+  description: null,
+};
+const defaultAlgorithm: Algorithm = {
+  id: 0,
+  // 算法名称
+  name: null,
+  // 业务类型
+  type: undefined,
+  // 算法文件路径
+  codePath: null,
+  // 算法描述
+  description: null,
+  // 算法配置
+  algoConfig: null,
+  // 算法参数定义信息
+  algorithmParamList: [
+    { ...defaultAlgorithmParam },
+  ],
+};
+const algorithms = ref<Algorithm[]>([]);
+const algorithmsTotal = ref<number>(0);
+const selectedAlgorithm = ref<Algorithm>(JSON.parse(JSON.stringify(defaultAlgorithm)));
+const formRef = ref<FormInstance | null>(null);
+
+const getAlgorithmTypeName = (type: NullableString): NullableString => {
+  let v = algorithmTypes.find(c => c.type === type);
+  return v && v.name ? v.name : type;
+};
+
+const load = () => {
+  algorithms.value = [];
+  algorithmsTotal.value = 0;
+  formRef.value?.resetFields();
+  selectedAlgorithm.value = JSON.parse(JSON.stringify(defaultAlgorithm));
+
+  findAlgorithmsByQuery(query.value).then(r => {
+    algorithms.value = r.rows ?? [];
+    algorithmsTotal.value = r.total ?? 0;
+  });
+};
+
+const handleCreate = () => {
+  selectedAlgorithm.value = JSON.parse(JSON.stringify(defaultAlgorithm));
+};
+
+const handleSelect = (item: Algorithm) => {
+  let newItem = JSON.parse(JSON.stringify(item))
+  if (!newItem.algorithmParamList) {
+    newItem.algorithmParamList = [];
+  }
+  if (newItem.algorithmParamList.length === 0) {
+    newItem.algorithmParamList.push({ ...defaultAlgorithmParam });
+  }
+  selectedAlgorithm.value = newItem;
+};
+
+const handleAdd = () => {
+  selectedAlgorithm.value.algorithmParamList.push({ ...defaultAlgorithmParam });
+};
+
+const handleMinus = (index: number) => {
+  const paramList = selectedAlgorithm.value.algorithmParamList;
+  if (index === 0 && selectedAlgorithm.value.algorithmParamList.length === 1) {
+    selectedAlgorithm.value.algorithmParamList = [{ ...defaultAlgorithmParam }];
+  } else if (index >= 0 && index < paramList.length && paramList.length > 1) {
+    paramList.splice(index, 1);
+    selectedAlgorithm.value.algorithmParamList = [...paramList];
+  }
+};
+
+const handleDelete = () => {
+  if (selectedAlgorithm.value && selectedAlgorithm.value.id > 0) {
+    deleteAlgorithm(selectedAlgorithm.value.id).then(r => {
+      if (r.code === 200) {
+        load();
+        message.info(r.msg ?? '删除成功');
+      } else {
+        message.error(r.msg ?? '删除失败');
+      }
+    });
+  }
+};
+
+const handleSave = () => {
+  if (formRef.value) {
+    formRef.value.validate().then(() => {
+      let res = null;
+      if (selectedAlgorithm.value.id > 0) {
+        res = updateAlgorithm(selectedAlgorithm.value);
+      } else {
+        res = createAlgorithm(selectedAlgorithm.value);
+      }
+      if (res) {
+        res.then(r => {
+          if (r.code === 200) {
+            load();
+            message.info(r.msg ?? '操作成功');
+          } else {
+            message.error(r.msg ?? '操作失败');
+          }
+        });
+      }
+    });
+  }
+};
+
+const handleChange = (page: number, pageSize: number) => {
+  query.value.pageNum = page;
+  query.value.pageSize = pageSize;
+  load();
+};
+
+onMounted(() => load());
+
 </script>
+
+<style lang="less">
+.ks-algorithm-card {
+  .ant-card-head-title {
+    span.text {
+      display: block;
+      line-height: 30px;
+    }
+  }
+}
+
+.ks-sidebar-header {
+  height: 50px;
+  line-height: 40px;
+  padding: 5px 15px;
+  background: #081d36;
+
+  .ks-sidebar-title {
+    color: #7ae8fc;
+    font-size: 16px;
+  }
+
+  .ks-sidebar-add {
+    position: absolute;
+    right: 15px;
+    top: 14px;
+    font-size: 12px;
+
+    .anticon {
+      display: block;
+      float: left;
+      line-height: 16px;
+    }
+  }
+}
+
+.ant-list {
+  &.ks-algorithm-list {
+    .ant-list-item {
+      cursor: pointer;
+      transition: all 0.5s;
+      border-left: 2px solid transparent;
+      position: relative;
+
+      &.selected,
+      &:hover {
+        background: #0a1b3c;
+        border-left: 2px solid #11377e;
+      }
+    }
+
+    .ks-algorithm-type {
+      position: absolute;
+      right: 10px;
+
+      .ant-badge {
+        .ant-badge-count {
+          color: #c3c2c2;
+          background: #333f7d;
+          box-shadow: 0 0 0 1px #325478;
+        }
+      }
+    }
+
+    .ant-list-item-meta {
+      .ant-list-item-meta-title {
+        color: #7ae8fc;
+      }
+
+      .ant-list-item-meta-description {
+        color: #4d8c98;
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+.ks-algorithm-param-list {
+  padding: 15px;
+  border: 1px solid #475f71;
+  border-radius: 2px;
+
+  .ks-algorithm-param-item {
+    margin-bottom: 15px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+}
+
+
+.ks-algorithm-param-actions {
+  .anticon {
+    color: #7ae8fc;
+    font-size: 20px;
+    display: block;
+    line-height: 26px;
+    cursor: pointer;
+  }
+}
+</style>

modeler/src/views/decision/algorithm/types.ts

@@ -0,0 +1,47 @@
+/*
+ * This file is part of the kernelstudio package.
+ *
+ * (c) 2014-2026 zlin <admin@kernelstudio.com>
+ *
+ * For the full copyright and license information, please view the LICENSE file
+ * that was distributed with this source code.
+ */
+
+import type { NullableString, PageableResponse } from '@/types';
+
+export interface AlgorithmParam {
+  id: number,
+  algorithmId: number,
+  // 参数名
+  paramName: NullableString,
+  // 默认值
+  defaultValue: NullableString,
+  // 描述
+  description: NullableString,
+}
+
+export interface Algorithm {
+
+  id: number,
+  // 算法名称
+  name: NullableString,
+  // 业务类型
+  type: NullableString | undefined,
+  // 算法文件路径
+  codePath: NullableString,
+  // 算法描述
+  description: NullableString,
+  // 算法配置
+  algoConfig: NullableString,
+  // 算法参数定义信息
+  algorithmParamList: AlgorithmParam[]
+}
+
+export interface AlgorithmRequest extends Algorithm {
+  pageNum: number,
+  pageSize: number,
+}
+
+export interface AlgorithmPageableResponse extends PageableResponse<Algorithm> {
+
+}

modeler/src/views/decision/builder/node.vue

@@ -9,14 +9,13 @@
     >
       <template #title>
         <a-space>
-          <div class="port port-in" data-port="in-0" magnet="passive"></div>
           <span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
-          <div class="port port-out" data-port="out-0" magnet="active"></div>
         </a-space>
       </template>
 
+      <div class="port port-in" data-port="in-0" magnet="passive"></div>
       <div class="w-full">
-        <a-tooltip>
+        <a-tooltip v-if="(element?.description ?? (element?.name ?? '-')).length >= 38">
           <template #title>
             {{ element?.description ?? element?.name }}
           </template>
@@ -24,7 +23,11 @@
             {{ substring(element?.description ?? (element?.name ?? '-'), 40) }}
           </p>
         </a-tooltip>
+        <p v-else>
+          {{ substring(element?.description ?? (element?.name ?? '-'), 40) }}
+        </p>
       </div>
+      <div class="port port-out" data-port="out-0" magnet="active"></div>
     </a-card>
 
     <template #overlay>
@@ -135,15 +138,17 @@ export default defineComponent({
   background: #1e2533;
   border: 1px solid #4a7aff;
 
+  border: 2px solid #000000;
+
   &:hover {
-    border: 1px solid #4a7aff;
+    border: 2px solid #4a7aff;
     box-shadow: 0 0 10px rgba(74, 122, 255, 0.3);
   }
 
   .ant-card-head {
     border: 0;
-    height: 35px;
+    height: 25px;
-    min-height: 35px;
+    min-height: 25px;
     border-radius: 0;
     color: #fff;
     font-size: 12px;
@@ -175,10 +180,10 @@ export default defineComponent({
 
   .ant-card-body {
     color: #f5f5f5;
-    height: calc(100% - 38px);
+    height: calc(100% - 25px);
     border-radius: 0;
     font-size: 12px;
-    padding: 8px 15px;
+    padding: 8px 15px !important;
     border-top: 1px solid rgba(108, 99, 255, 0.5);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -296,8 +301,9 @@ export default defineComponent({
     background: url('@/assets/icons/point.svg') center / 100% 100%;
 
     position: absolute;
-    left: 5px;
+    //top: 7px;
-    top: 12px;
+    left: -8px;
+    top: 50%;
   }
 
   .port-out {
@@ -311,8 +317,11 @@ export default defineComponent({
     background: url('@/assets/icons/point.svg') center / 100% 100%;
 
     position: absolute;
-    right: 5px;
+    //right: 8px;
-    top: 12px;
+    //top: 7px;
+    top: 50%;
+    right: -12px;
+
   }
 
   // 节点文本样式

modeler/src/views/decision/builder/utils.ts

@@ -13,10 +13,10 @@ export const defaultHeight: Record<string, number> = {
   component: 110,
 };
 
-export const createGraphTaskElement = (element: GraphTaskElement, width: number = 160, height: number = 100): any => {
+export const createGraphTaskElement = (element: GraphTaskElement, width: number = 250, height: number = 120): any => {
   let realHeight = defaultHeight[element.category as string];
   if (!realHeight) {
-    realHeight = 100;
+    realHeight = 120;
   }
   return {
     shape: 'task',

modeler/src/views/decision/trees-card.vue

@@ -173,27 +173,6 @@ export default defineComponent({
       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;
-      }
-    }
   }
 }
 

modeler/types/components.d.ts

@@ -13,6 +13,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -25,6 +26,7 @@ declare module 'vue' {
     AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AFormItemRest: typeof import('ant-design-vue/es')['FormItemRest']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
@@ -35,11 +37,14 @@ declare module 'vue' {
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AList: typeof import('ant-design-vue/es')['List']
     AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     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']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
@@ -55,6 +60,7 @@ declare module 'vue' {
 // For TSX support
 declare global {
   const AAvatar: typeof import('ant-design-vue/es')['Avatar']
+  const ABadge: typeof import('ant-design-vue/es')['Badge']
   const AButton: typeof import('ant-design-vue/es')['Button']
   const ACard: typeof import('ant-design-vue/es')['Card']
   const ACol: typeof import('ant-design-vue/es')['Col']
@@ -67,6 +73,7 @@ declare global {
   const AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
   const AForm: typeof import('ant-design-vue/es')['Form']
   const AFormItem: typeof import('ant-design-vue/es')['FormItem']
+  const AFormItemRest: typeof import('ant-design-vue/es')['FormItemRest']
   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']
@@ -77,11 +84,14 @@ declare global {
   const ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
   const AList: typeof import('ant-design-vue/es')['List']
   const AListItem: typeof import('ant-design-vue/es')['ListItem']
+  const AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
   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 ASelect: typeof import('ant-design-vue/es')['Select']
+  const ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
   const ASpace: typeof import('ant-design-vue/es')['Space']
   const ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
   const ATable: typeof import('ant-design-vue/es')['Table']