zouju/auto-solution
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
libertyspy
2026-02-08 15:59:14 +08:00
parent 015030d650
commit 9ded6b757c
126 changed files with 2007 additions and 14912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
modeler/src/router/config.ts
View File

@@ -7,9 +7,23 @@
* that was distributed with this source code.
*/
import { type RouteRecordRaw } from 'vue-router';
import { routers } from '@/views/behaviour/router';
import { type RouteRecordRaw, type RouteRecordRedirect } from 'vue-router';
export const routes: RouteRecordRaw[] = [
...routers,
{
name: 'index',
path: '/',
redirect: '/app/decision/designer',
meta: {
hidden: true,
},
} as RouteRecordRedirect,
{
name: 'decision-designer',
path: '/app/decision/designer',
meta: {
title: '决策树',
},
component: () => import('@/views/decision/designer.vue'),
},
]

664
modeler/src/style.less
View File

File diff suppressed because it is too large Load Diff

6
modeler/src/types/core.ts
View File

@@ -34,3 +34,9 @@ export interface PageableResponse<T = any> extends BasicResponse {
[key: string]: unknown;
}
export interface ApiPaginationQuery {
page: number;
limit: number;
keyword: NullableString;
}

22
modeler/src/views/ai/api.ts
View File

@@ -1,22 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import request from '@/utils/request';
import type { DeductionTestResponse, FinderBrowserResult } from './types';
import type { NullableString } from '@/types';
export const findFinderBrowser = (path: NullableString): Promise<FinderBrowserResult> => {
return request.post<FinderBrowserResult>('/finder/browser', {
path: path,
});
};
export const startDeduction = (): Promise<DeductionTestResponse> => {
return request.postJson<DeductionTestResponse>('/deductionTest/startDeduction', {});
};

36
modeler/src/views/ai/applications/api.ts
View File

@@ -1,36 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import request from '@/utils/request';
import type { DeductionPodResult, ModelDeduction, ModelDeductionDataResponse, ModelDeductionDetailsResponse, ModelDeductionPodStatusResponse } from './types';
import type { BasicResponse } from '@/types';
export const findDeductionPodResult = (query: Record<any, any> = { pageSize: 1000 }): Promise<DeductionPodResult> => {
return request.get<DeductionPodResult>('/deductionPodInfo/listAll', query);
};
export const createModelDeduction = (deduction: Partial<ModelDeduction>): Promise<BasicResponse> => {
return request.postJson<BasicResponse>('/deductionPodInfo/add', deduction);
};
export const deleteModelDeduction = (id: number): Promise<BasicResponse> => {
return request.delete<BasicResponse>(`/deductionPodInfo/${id}`);
};
export const findOneModelDeductionDetails = (id: number): Promise<ModelDeductionDetailsResponse> => {
return request.get<ModelDeductionDetailsResponse>(`/deductionPodInfo/${id}`);
}
export const findChartsDataById = (id: number): Promise<ModelDeductionDataResponse> => {
return request.get<ModelDeductionDataResponse>(`/deductionPodData/listByPodId/${id}`);
};
export const runDeductionPodAfsimControl = (data: any): Promise<ModelDeductionPodStatusResponse> => {
return request.postJson<ModelDeductionPodStatusResponse>(`/deductionPodInfo/afsimControl`, data);
};

117
modeler/src/views/ai/applications/charts/area-options.ts
View File

@@ -1,117 +0,0 @@
/*
* 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 { xAxisConfig } from './config';
import * as echarts from 'echarts';
import type { ChartOption } from './types';
export const createAreaChartOption = (options: ChartOption) => {
let blueName = options.blueName ?? '蓝方';
let redName = options.redName ?? '红方';
return {
title: {
text: options.title,
textStyle: {
color: '#eee',
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999',
},
},
grid: {
left: '1%',
right: '5%',
bottom: '15%',
containLabel: true,
},
legend: {
data: [blueName, redName],
textStyle: {
color: '#ddd',
fontSize: 14,
},
},
xAxis: {
type: 'category',
data: options.xAxisData,
boundaryGap: [0.1, 0.1],
...xAxisConfig,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.1],
...xAxisConfig,
},
series: [
{
name: blueName,
data: options.blueData,
type: 'line',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#0f86d7',
},
{
offset: 1,
color: '#0f1e48cc',
},
]),
},
itemStyle: {
color: '#409EFF', // 轮数1整体颜色
},
label: {
show: false, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12, // 数值文字大小
},
},
},
{
name: redName,
data: options.redData,
type: 'line',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#dc5959',
},
{
offset: 1,
color: '#bc1f1f',
},
]),
},
itemStyle: {
color: '#bc1f1f', // 轮数2整体颜色
},
label: {
show: false, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12, // 数值文字大小
},
},
},
],
};
};

96
modeler/src/views/ai/applications/charts/bar-options.ts
View File

@@ -1,96 +0,0 @@
/*
* 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 { getVerticalGradient, xAxisConfig } from './config';
import type { ChartOption } from './types';
export const createBarChartOption = (options: ChartOption) => {
let blueName = options.blueName ?? '蓝方';
let redName = options.redName ?? '红方';
return {
title: {
text: options.title,
textStyle: {
color: '#eee',
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
}
},
grid: {
left: '1%',
right: '5%',
bottom: '15%',
containLabel: true
},
legend: {
data: [blueName, redName],
textStyle: {
color: '#ddd',
fontSize: 14
}
},
xAxis: {
type: 'category',
data: options.xAxisData,
boundaryGap: [0.1, 0.1],
...xAxisConfig
},
yAxis: {
type: 'value',
boundaryGap: [0.1, 0.5],
...xAxisConfig
},
series: [
{
name: blueName,
data: options.blueData,
type: 'bar',
barWidth: '20%',
barGap: '10%',
barCategoryGap: '30%',
itemStyle: {
color: getVerticalGradient('#409EFF', '#87CEFA')
},
label: {
show: false, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12 // 数值文字大小
}
}
},
{
name: redName,
data: options.redData,
type: 'bar',
barWidth: '20%',
barGap: '10%',
barCategoryGap: '30%',
itemStyle: {
color: getVerticalGradient('#bc1f1f', '#e67e7e')
},
label: {
show: false, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12 // 数值文字大小
}
}
}
]
};
};

77
modeler/src/views/ai/applications/charts/charts-001.vue
View File

@@ -1,77 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createLineChartOption } from './line-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
}
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.episodeReturnsBlue);
redData.push(item.episodeReturnsRed);
});
}
const options = createLineChartOption({
title: '环境总奖励对比',
blueName: props.blueName as string,
redName: props.redName as string,
xAxisData: xAxisData,
blueData: blueData,
redData: redData,
xAxisDataVisible: true,
labelVisible: false,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

97
modeler/src/views/ai/applications/charts/charts-002-1.vue
View File

@@ -1,97 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const defaultValues = {
hide_missile: 0,
angle: 0,
height: 0,
speed: 0,
}
const parseJson = (v: any)=> {
let values = {...defaultValues}
try{
values = JSON.parse(v as string);
} catch (e: any) {
console.error('error',e);
}
return {
...defaultValues,
...values
}
}
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
let blueValues = parseJson(item.returnComponentsBlue);
let redValues = parseJson(item.returnComponentsRed);
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(blueValues.hide_missile);
redData.push(redValues.hide_missile);
});
}
const options = createScatterChartOption({
title: '躲避奖励',
xAxisData,
blueData,
redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

94
modeler/src/views/ai/applications/charts/charts-002-2.vue
View File

@@ -1,94 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const defaultValues = {
hide_missile: 0,
angle: 0,
height: 0,
speed: 0,
}
const parseJson = (v: any)=> {
let values = {...defaultValues}
try{
values = JSON.parse(v as string);
} catch (e: any) {
console.error('error',e);
}
return {
...defaultValues,
...values
}
}
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
let blueValues = parseJson(item.returnComponentsBlue);
let redValues = parseJson(item.returnComponentsRed);
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(blueValues.angle);
redData.push(redValues.angle);
});
}
const options = createScatterChartOption({
title: '角度奖励', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

94
modeler/src/views/ai/applications/charts/charts-002-3.vue
View File

@@ -1,94 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const defaultValues = {
hide_missile: 0,
angle: 0,
height: 0,
speed: 0,
}
const parseJson = (v: any)=> {
let values = {...defaultValues}
try{
values = JSON.parse(v as string);
} catch (e: any) {
console.error('error',e);
}
return {
...defaultValues,
...values
}
}
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
let blueValues = parseJson(item.returnComponentsBlue);
let redValues = parseJson(item.returnComponentsRed);
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(blueValues.height);
redData.push(redValues.height);
});
}
const options = createScatterChartOption({
title: '高度奖励', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

94
modeler/src/views/ai/applications/charts/charts-002-4.vue
View File

@@ -1,94 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const defaultValues = {
hide_missile: 0,
angle: 0,
height: 0,
speed: 0,
}
const parseJson = (v: any)=> {
let values = {...defaultValues}
try{
values = JSON.parse(v as string);
} catch (e: any) {
console.error('error',e);
}
return {
...defaultValues,
...values
}
}
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
let blueValues = parseJson(item.returnComponentsBlue);
let redValues = parseJson(item.returnComponentsRed);
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(blueValues.speed);
redData.push(redValues.speed);
});
}
const options = createScatterChartOption({
title: '速度奖励', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

72
modeler/src/views/ai/applications/charts/charts-002.vue
View File

@@ -1,72 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.returnComponentsBlue);
redData.push(item.returnComponentsRed);
});
}
const options = createScatterChartOption({
title: '分项奖励对比', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

72
modeler/src/views/ai/applications/charts/charts-003.vue
View File

@@ -1,72 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createBarChartOption } from './bar-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.returnDelnatyBlue);
redData.push(item.returnDelnatyRed);
});
}
const options = createBarChartOption({
title: '决策错误对比', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

73
modeler/src/views/ai/applications/charts/charts-004.vue
View File

@@ -1,73 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.episodeLengthsBlue ?? 0);
redData.push(item.episodeLengthsRed ?? 0);
});
}
console.error('chart4',d, blueData, redData)
const options = createScatterChartOption({
title: '最长生存步数', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

72
modeler/src/views/ai/applications/charts/charts-005.vue
View File

@@ -1,72 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createScatterChartOption } from './scatter-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.fireConsumeBlue);
redData.push(item.fireConsumeRed);
});
}
const options = createScatterChartOption({
title: '击杀单位耗弹量', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

74
modeler/src/views/ai/applications/charts/charts-006-impl.vue
View File

@@ -1,74 +0,0 @@
<template>
<div class="ks-model-chart-item-chart" ref="chartContainer" style="height: 480px;"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { createLineChartOption } from './line-options';
import type {ChartLineData} from './types'
export default defineComponent({
props: {
datas: {
type: Object as PropType<ChartLineData>,
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
}
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ChartLineData) => {
if(d){
const options = createLineChartOption({
title: '飞行状态稳定性',
blueName: props.blueName as string,
redName: props.redName as string,
xAxisData: d.xAxisData,
blueData: d.blueData,
redData: d.redData,
xAxisDataVisible: true,
labelVisible: false,
});
nextTick(() => initChart(options));
} else {
if (chartInstance) {
chartInstance.dispose();
}
}
};
watch(() => props.datas, (n: ChartLineData | undefined) => n && load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

84
modeler/src/views/ai/applications/charts/charts-006.vue
View File

@@ -1,84 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer">
<a-carousel
arrows
:dots="false"
:slides-to-show="1"
:slides-to-scroll="1"
arrow="always"
:autoplay="false"
class="chart-carousel"
>
<template #prevArrow>
<div class="custom-slick-arrow prev-arrow" style="z-index: 1">
<left-circle-outlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow next-arrow">
<right-circle-outlined />
</div>
</template>
<div class="slick-slide-item" v-for="d in realDatas">
<div style="height: 500px">
<Charts006Impl :datas="d" :blueName="blueName" :redName="redName" />
</div>
</div>
</a-carousel>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref, watch } from 'vue';
import type { ModelDeductionData } from '../types';
import type {ChartLineData} from './types';
import {downSampleData} from './utils'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import Charts006Impl from './charts-006-impl.vue'
export default defineComponent({
components: { RightCircleOutlined, LeftCircleOutlined ,Charts006Impl},
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const realDatas = ref<ChartLineData[]>([])
const load = (d: ModelDeductionData[]) => {
realDatas.value = [];
let dv:ChartLineData[] = [];
if (d) {
d.forEach(item => {
dv.push({
name: `轮数${item.currentEpisode}`,
xAxisData: [`轮数${item.currentEpisode}`],
blueData: downSampleData(item.normalizedBlueTrajectory || []),
redData: downSampleData(item.normalizedRedTrajectory || []),
options: {},
deduction: item,
})
});
}
realDatas.value = dv;
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
realDatas
};
}
});
</script>

77
modeler/src/views/ai/applications/charts/charts-007.vue
View File

@@ -1,77 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createLineChartOption } from './line-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.firstFireTimeBlue);
redData.push(item.firstFireTimeRed);
});
}
const options = createLineChartOption({
title: '最早锁定发射时间',
blueName: props.blueName as string,
redName: props.redName as string,
xAxisData: xAxisData,
blueData: blueData,
redData: redData,
xAxisDataVisible: true,
labelVisible: false,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

72
modeler/src/views/ai/applications/charts/charts-008.vue
View File

@@ -1,72 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData } from '../types';
import { createAreaChartOption } from './area-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const xAxisData: string[] = [];
const blueData: any[] = [];
const redData: any[] = [];
if (d) {
d.forEach(item => {
xAxisData.push(`轮数${item.currentEpisode}`);
blueData.push(item.attackTimeBlue);
redData.push(item.attackTimeRed);
});
}
const options = createAreaChartOption({
title: '总攻击持续时间', xAxisData, blueData, redData,
blueName: props.blueName as string,
redName: props.redName as string,
});
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

74
modeler/src/views/ai/applications/charts/charts-009-impl.vue
View File

@@ -1,74 +0,0 @@
<template>
<div class="ks-model-chart-item-chart" ref="chartContainer" style="height: 480px;"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { createLineChartOption } from './line-options';
import type {ChartLineData} from './types'
export default defineComponent({
props: {
datas: {
type: Object as PropType<ChartLineData>,
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ChartLineData) => {
if(d){
const options = createLineChartOption({
title: `能量优势保持时间窗口 - ${d.name}`,
blueName: props.blueName as string,
redName: props.redName as string,
xAxisData: d.xAxisData,
blueData: d.blueData,
redData: d.redData,
xAxisDataVisible: true,
labelVisible: false,
});
nextTick(() => initChart(options));
} else {
if (chartInstance) {
chartInstance.dispose();
}
}
};
watch(() => props.datas, (n: ChartLineData | undefined) => n && load(n), { deep: true, immediate: true });
return {
chartContainer
};
}
});
</script>

97
modeler/src/views/ai/applications/charts/charts-009.vue
View File

@@ -1,97 +0,0 @@
<template>
<div class="ks-model-chart-item" ref="chartContainer">
<a-carousel
arrows
:dots="false"
:slides-to-show="1"
:slides-to-scroll="1"
arrow="always"
:autoplay="false"
class="chart-carousel"
>
<template #prevArrow>
<div class="custom-slick-arrow prev-arrow" style="z-index: 1">
<left-circle-outlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow next-arrow">
<right-circle-outlined />
</div>
</template>
<div class="slick-slide-item" v-for="d in realDatas">
<div style="height: 500px">
<Charts006Impl :datas="d" :blueName="blueName" :redName="redName"/>
</div>
</div>
</a-carousel>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref, watch } from 'vue';
import type { ModelDeductionData } from '../types';
import type {ChartLineData} from './types';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import Charts006Impl from './charts-006-impl.vue'
export default defineComponent({
components: { RightCircleOutlined, LeftCircleOutlined ,Charts006Impl},
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const realDatas = ref<ChartLineData[]>([])
const defaultValues: number[] = []
const parseJson = (v: any)=> {
let values: number[] = []
try{
values = JSON.parse(v as string) as number[];
} catch (e: any) {
console.error('error',e);
}
return values ?? []
}
const load = (d: ModelDeductionData[]) => {
realDatas.value = [];
let dv:ChartLineData[] = [];
if (d) {
d.forEach(item => {
dv.push({
name: `轮数${item.currentEpisode}`,
xAxisData: [`轮数${item.currentEpisode}`],
blueData: parseJson(item.energyAdvantage),
redData: parseJson(item.energyAdvantage),
options: {},
deduction: item,
})
});
}
realDatas.value = dv;
console.error(realDatas.value)
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
return {
realDatas
};
}
});
</script>

87
modeler/src/views/ai/applications/charts/charts-blue.vue
View File

@@ -1,87 +0,0 @@
<template>
<div class="ks-model-chart-item-child" style="width:50%;display: block;float:left;position: relative">
<div class="ks-model-chart-item-wrapper" ref="chartContainer" style="height:350px;"></div>
<div class="ks-model-chart-item-description">
<span class="pre">{{ lastItem?.blueWinRounds ?? 0}}胜 {{ lastItem?.redWinRounds ?? 0}}败</span>
<span class="total">共{{ deductionPod.totalRound??0 }}场</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData, DeductionPod } from '../types';
import { createPieChartOption } from './pie-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
deductionPod: {
type: [Object] as PropType<DeductionPod|null | undefined>,
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const deductionPod = ref<Partial<DeductionPod>>({})
const lastItem = ref<ModelDeductionData|null | undefined>(null)
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const blueName = props.blueName ?? '蓝方';
const redName = props.redName ?? '红方';
let pre = 0;
lastItem.value = null;
if (d && d.length >= 1) {
lastItem.value = d[d.length - 1] as ModelDeductionData;
const mineRounds = lastItem.value?.blueWinRounds ?? 0;
const totalRound = props.deductionPod?.totalRound ?? 0;
if (totalRound > 0) {
pre = Number((mineRounds / totalRound * 100).toFixed(2));
}
console.error('blue',mineRounds,totalRound)
}
const options = createPieChartOption(`${blueName}胜率`, 'blue', pre, `${blueName}胜率`, blueName as string, redName as string);
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
watch(() => props.deductionPod, (n: DeductionPod | null| undefined ) => deductionPod.value = n ?? {}, { deep: true, immediate: true });
return {
lastItem,
deductionPod,
chartContainer
};
}
});
</script>

246
modeler/src/views/ai/applications/charts/charts-modal.vue
View File

@@ -1,246 +0,0 @@
<template>
<a-modal :open="visible" style="width: 98%" class="ks-charts-modal" centered :footer="false" @cancel="handleCancel">
<template #title>
<a-space>
<span class="ks-charts-modal-icon"></span>
<span class="ks-charts-modal-title">指标效果对比</span>
</a-space>
</template>
<div class="ks-model-charts">
<a-card class="ks-model-chart-card">
<template #title>
<a-space>
<span class="ks-model-chart-card-icon model-icon"></span>
<span>多维度算法指标对比</span>
</a-space>
</template>
<a-row :gutter="15">
<a-col :span="8">
<Chart001 :datas="datas"/>
</a-col>
<a-col :span="8">
<Chart002 :datas="datas"/>
</a-col>
<a-col :span="8">
<Chart003 :datas="datas"/>
</a-col>
</a-row>
</a-card>
<a-card class="ks-model-chart-card">
<template #title>
<a-space>
<span class="ks-model-chart-card-icon grid-icon"></span>
<span>多维度仿真推演效果对比</span>
</a-space>
</template>
<a-row :gutter="15">
<a-col :span="24">
<div class="ks-model-chart-item" style="height:380px;">
<ChartRed :datas="datas"/>
<ChartBlue :datas="datas"/>
</div>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="12">
<Chart004 :datas="datas"/>
</a-col>
<a-col :span="12">
<Chart005 :datas="datas"/>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="12">
<Chart006 :datas="datas"/>
</a-col>
<a-col :span="12">
<Chart007 :datas="datas"/>
</a-col>
<a-col :span="12">
<Chart008 :datas="datas"/>
</a-col>
<a-col :span="12">
<Chart009 :datas="datas"/>
</a-col>
</a-row>
</a-card>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref, watch } from 'vue';
import Chart001 from './charts-001.vue';
import Chart002 from './charts-002.vue';
import Chart003 from './charts-003.vue';
import Chart004 from './charts-004.vue';
import Chart005 from './charts-005.vue';
import Chart006 from './charts-006.vue';
import Chart007 from './charts-007.vue';
import Chart008 from './charts-008.vue';
import Chart009 from './charts-009.vue';
import ChartBlue from './charts-blue.vue';
import ChartRed from './charts-red.vue';
import type { DeductionPod, ModelDeductionData } from '../types';
import { findChartsDataById } from '../api';
export default defineComponent(({
components: {
Chart001,
Chart002,
Chart003,
Chart004,
Chart005,
Chart006,
Chart007,
Chart008,
Chart009,
ChartBlue,
ChartRed,
},
props: {
visible: {
type: Boolean,
},
deduction: {
type: [Object, null, undefined] as PropType<DeductionPod | null | undefined>,
},
},
emits: ['cancel'],
setup(props, { emit }) {
const deduction = ref<DeductionPod | null | undefined>(props.deduction as DeductionPod);
const datas = ref<ModelDeductionData[]>([]);
const handleCancel = () => {
emit('cancel');
};
const load = (n: DeductionPod | null | undefined) => {
deduction.value = n;
if (n?.deductionId) {
findChartsDataById(n.deductionId).then(r => {
datas.value = r.data ?? [];
console.error(n, datas.value);
});
}
};
watch(() => props.deduction, (n: DeductionPod | null | undefined) => {
load(n);
}, { deep: true, immediate: true });
return {
handleCancel,
datas,
};
},
}));
</script>
<!--<style lang="less">-->
<!--.ks-charts-modal{-->
<!-- background: url('@/assets/icons/bg-model-builder-canvas.png') center / 100% 100%;-->
<!-- .ant-modal-content{-->
<!-- padding:0;-->
<!-- border: 1px solid #041a3c;-->
<!-- }-->
<!-- .ant-modal-header{-->
<!-- height: 55px;-->
<!-- line-height: 50px;-->
<!-- background: #041125;-->
<!-- background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);-->
<!-- border-radius: 0;-->
<!-- }-->
<!-- .ant-modal-close {-->
<!-- position: absolute;-->
<!-- top: 13px;-->
<!-- }-->
<!-- .ks-charts-modal-title,-->
<!-- .ant-modal-title {-->
<!-- line-height: 55px;-->
<!-- font-size:16px;-->
<!-- }-->
<!-- .ant-modal-body{-->
<!-- height: 90vh;-->
<!-- overflow: auto;-->
<!-- border-top: 1px solid #181d26;-->
<!-- background: #041125;-->
<!-- }-->
<!-- .ks-charts-modal-icon{-->
<!-- background: url('@/assets/icons/m-03.png') center / 100% 100%;-->
<!-- width: 30px;-->
<!-- height:30px;-->
<!-- display:block;-->
<!-- }-->
<!--}-->
<!--.ks-model-chart-card {-->
<!-- border-color: #161c26;-->
<!-- border-radius: 0;-->
<!-- margin-bottom: 15px;-->
<!-- background: transparent;-->
<!-- .ks-model-chart-card-icon{-->
<!-- width: 30px;-->
<!-- height:30px;-->
<!-- display:block;-->
<!-- &.grid-icon{-->
<!-- background: url('@/assets/icons/icon-grid.png') center / 100% 100%;-->
<!-- }-->
<!-- &.model-icon{-->
<!-- background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;-->
<!-- }-->
<!-- }-->
<!-- .ant-card-head {-->
<!-- border-color: #161c26;-->
<!-- color: #eee;-->
<!-- border-radius: 0;-->
<!-- background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);-->
<!-- }-->
<!-- .ks-model-chart-item {-->
<!-- height: 500px;-->
<!-- padding: 15px;-->
<!-- border: 1px solid #0a2651;-->
<!-- margin-bottom: 15px;-->
<!-- color: #eee;-->
<!-- border-radius: 2px;-->
<!-- background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);-->
<!-- &.size-small{-->
<!-- height: 300px;-->
<!-- }-->
<!-- &:hover{-->
<!-- border-color: #2f3b4e;-->
<!-- cursor: pointer;-->
<!-- }-->
<!-- .ant-statistic-title {-->
<!-- color: #eee;-->
<!-- }-->
<!-- }-->
<!-- .ks-model-chart-item-description{-->
<!-- display:inline-block;-->
<!-- width: 100%;-->
<!-- text-align: center;-->
<!-- position: absolute;-->
<!-- bottom: 0px;-->
<!-- left: 0%;-->
<!-- span{-->
<!-- display:inline-block;-->
<!-- width: 100%;-->
<!-- font-weight: bold;-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</style>-->

87
modeler/src/views/ai/applications/charts/charts-red.vue
View File

@@ -1,87 +0,0 @@
<template>
<div class="ks-model-chart-item-child" style="width:50%;display: block;float:left;position: relative">
<div class="ks-model-chart-item-wrapper" ref="chartContainer" style="height:350px;"></div>
<div class="ks-model-chart-item-description">
<span class="pre">{{ lastItem?.redWinRounds ?? 0}}胜 {{ lastItem?.blueWinRounds ?? 0}}败</span>
<span class="total">共{{ deductionPod.totalRound??0 }}场</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { ModelDeductionData, DeductionPod } from '../types';
import { createPieChartOption } from './pie-options';
export default defineComponent({
props: {
datas: {
type: Array as PropType<ModelDeductionData[]>,
default: [],
},
deductionPod: {
type: [Object] as PropType<DeductionPod|null | undefined>,
},
redName: {
type: String as PropType<String>,
default: '红方',
},
blueName: {
type: String as PropType<String>,
default: '蓝方',
},
},
setup(props) {
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const deductionPod = ref<Partial<DeductionPod>>({})
const lastItem = ref<ModelDeductionData|null | undefined>(null)
const initChart = (option: any) => {
if (!chartContainer.value) return;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(chartContainer.value);
chartInstance.setOption(option);
// 自适应窗口大小（可选，提升体验）
window.addEventListener('resize', () => {
chartInstance?.resize();
});
};
const load = (d: ModelDeductionData[]) => {
const blueName = props.blueName ?? '蓝方';
const redName = props.redName ?? '红方';
let pre = 0;
lastItem.value = null;
if (d && d.length >= 1) {
lastItem.value = d[d.length - 1] as ModelDeductionData;
const mineRounds = lastItem.value?.redWinRounds ?? 0;
const totalRound = props.deductionPod?.totalRound ?? 0;
if (totalRound > 0) {
pre = Number((mineRounds / totalRound * 100).toFixed(2));
}
console.error('red',mineRounds,totalRound)
}
const options = createPieChartOption(`${redName}胜率`, 'red', pre, `${redName}胜率`, blueName as string, redName as string);
nextTick(() => initChart(options));
};
watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
watch(() => props.deductionPod, (n: DeductionPod | null| undefined ) => deductionPod.value = n ?? {}, { deep: true, immediate: true });
return {
lastItem,
deductionPod,
chartContainer
};
}
});
</script>

376
modeler/src/views/ai/applications/charts/charts.vue
View File

@@ -1,376 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card ks-charts-wrapper">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">指标效果对比</span>
<a-tooltip placement="top">
<template #title>
返回
</template>
<a-button class="ks-page-card-goback" size="small" @click="goback">
<RollbackOutlined />
<span>返回</span>
</a-button>
</a-tooltip>
</a-space>
</template>
<div class="ks-scrollable">
<div class="ks-model-charts" style="height: 80vh;position: relative;overflow: auto">
<a-card class="ks-model-chart-card ks-model-chart-card-carousel">
<template #title>
<a-space>
<span class="ks-model-chart-card-icon model-icon"></span>
<span>多维度算法指标对比</span>
</a-space>
</template>
<a-carousel
arrows
:dots="false"
:slides-to-show="3"
:slides-to-scroll="1"
arrow="always"
:autoplay="false"
class="chart-carousel"
>
<template #prevArrow>
<div class="custom-slick-arrow prev-arrow" style="z-index: 1">
<left-circle-outlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow next-arrow">
<right-circle-outlined />
</div>
</template>
<div class="slick-slide-item">
<Chart001 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
<div class="slick-slide-item">
<Chart0021 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
<div class="slick-slide-item">
<Chart0022 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
<div class="slick-slide-item">
<Chart0023 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
<div class="slick-slide-item">
<Chart0024 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
<div class="slick-slide-item">
<Chart003 :datas="datas" :redName="redName" :blueName="blueName"/>
</div>
</a-carousel>
</a-card>
<a-card class="ks-model-chart-card">
<template #title>
<a-space>
<span class="ks-model-chart-card-icon grid-icon"></span>
<span>多维度仿真推演效果对比</span>
</a-space>
</template>
<a-row :gutter="15">
<a-col :span="24">
<div class="ks-model-chart-item" style="height:380px;">
<ChartRed :datas="datas" :deduction-pod="deductionPodDetails" :redName="redName" :blueName="blueName"/>
<ChartBlue :datas="datas" :deduction-pod="deductionPodDetails" :redName="redName" :blueName="blueName"/>
</div>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="12">
<Chart004 :datas="datas" :redName="redName" :blueName="blueName"/>
</a-col>
<a-col :span="12">
<Chart005 :datas="datas" :redName="redName" :blueName="blueName"/>
</a-col>
</a-row>
<a-row :gutter="15">
<!-- <a-col :span="12">-->
<!-- <Chart006 :datas="datas" :redName="redName" :blueName="blueName"/>-->
<!-- </a-col>-->
<a-col :span="12">
<Chart007 :datas="datas" :redName="redName" :blueName="blueName"/>
</a-col>
<a-col :span="12">
<Chart008 :datas="datas" :redName="redName" :blueName="blueName"/>
</a-col>
<!-- <a-col :span="12">-->
<!-- <Chart009 :datas="datas" :redName="redName" :blueName="blueName"/>-->
<!-- </a-col>-->
</a-row>
</a-card>
</div>
</div>
</a-card>
</Layout>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref, watch } from 'vue';
import { LeftCircleOutlined, RightCircleOutlined, RollbackOutlined } from '@ant-design/icons-vue';
import {useRouter} from 'vue-router'
import Chart001 from './charts-001.vue';
import Chart002 from './charts-002.vue';
import Chart0021 from './charts-002-1.vue';
import Chart0022 from './charts-002-2.vue';
import Chart0023 from './charts-002-3.vue';
import Chart0024 from './charts-002-4.vue';
import Chart003 from './charts-003.vue';
import Chart004 from './charts-004.vue';
import Chart005 from './charts-005.vue';
import Chart006 from './charts-006.vue';
import Chart007 from './charts-007.vue';
import Chart008 from './charts-008.vue';
import Chart009 from './charts-009.vue';
import ChartBlue from './charts-blue.vue';
import ChartRed from './charts-red.vue';
import Layout from '../../layout.vue'
import type { DeductionPod, ModelDeductionData } from '../types';
import { findChartsDataById, findOneModelDeductionDetails } from '../api';
export default defineComponent({
components: {
RollbackOutlined,
Layout,
LeftCircleOutlined,
RightCircleOutlined,
Chart001,
Chart002,
Chart0021,
Chart0022,
Chart0023,
Chart0024,
Chart003,
Chart004,
Chart005,
Chart006,
Chart007,
Chart008,
Chart009,
ChartBlue,
ChartRed,
},
props: {
visible: {
type: Boolean,
},
deduction: {
type: [Object, null, undefined] as PropType<DeductionPod | null | undefined>,
},
},
emits: ['cancel'],
setup(_props, { emit }) {
const router = useRouter();
const datas = ref<ModelDeductionData[]>([]);
const deductionPodDetails = ref<DeductionPod | null | undefined>(null);
const blueName = ref<string>('蓝方')
const redName = ref<string>('红方')
const handleCancel = () => {
emit('cancel');
};
const goback = () => {
router.push({
path: '/app/ai/applications/gambling',
})
}
const load = (n: any) => {
deductionPodDetails.value = null
if (n?.params?.id) {
findOneModelDeductionDetails(n?.params?.id).then(rv=> {
deductionPodDetails.value = rv.data;
blueName.value = rv.data?.blueName ?? '蓝方';
redName.value = rv.data?.redName ?? '红方';
if(rv.data.deductionId) {
findChartsDataById(rv.data.deductionId).then(r => {
datas.value = (r.data ?? []).reverse();
console.error(n, datas.value);
});
}
})
}
};
watch(() => router.currentRoute.value, (n:any) => {
load(n);
}, { deep: true, immediate: true });
return {
goback,
deductionPodDetails,
handleCancel,
datas,
blueName,
redName,
};
},
});
</script>
<style lang="less">
.ks-charts-modal{
background: url('@/assets/icons/bg-model-builder-canvas.png') center / 100% 100%;
.ant-modal-content{
padding:0;
border: 1px solid #041a3c;
}
.ant-modal-header{
height: 55px;
line-height: 50px;
background: #041125;
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
border-radius: 0;
}
.ant-modal-close {
position: absolute;
top: 13px;
}
.ks-charts-modal-title,
.ant-modal-title {
line-height: 55px;
font-size:16px;
}
.ant-modal-body{
height: 90vh;
overflow: auto;
border-top: 1px solid #181d26;
background: #041125;
}
.ks-charts-modal-icon{
background: url('@/assets/icons/m-03.png') center / 100% 100%;
width: 30px;
height:30px;
display:block;
}
}
.ks-model-chart-card {
border-color: #161c26;
border-radius: 0;
margin-bottom: 15px;
background: transparent;
position: relative;
.ks-model-chart-card-icon{
width: 30px;
height:30px;
display:block;
&.grid-icon{
background: url('@/assets/icons/icon-grid.png') center / 100% 100%;
}
&.model-icon{
background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
}
}
.ant-card-head {
border-color: #161c26;
color: #eee;
border-radius: 0;
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
}
.ks-model-chart-item {
height: 500px;
display: block;
width: 100%;
padding: 15px;
border: 1px solid #0a2651;
margin-bottom: 15px;
color: #eee;
border-radius: 2px;
position: relative;
background: linear-gradient(359deg, #010c1d 1%, #041a3c 55%);
&.size-small{
height: 300px;
}
&:hover{
border-color: #2f3b4e;
cursor: pointer;
}
.ant-statistic-title {
color: #eee;
}
}
&.ks-model-chart-card-carousel{
.ks-model-chart-item{
margin-bottom: 0;
}
}
.ks-model-chart-item-description{
display:inline-block;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0%;
span{
display:inline-block;
width: 100%;
font-weight: bold;
}
}
}
.chart-carousel {
position: relative;
.slick-slide-item {
width: calc(100% / 3 - 5px);
margin: 0 5px;
box-sizing: border-box;
padding: 0 10px;
position: relative;
}
// 自定义箭头样式优化（适配深色主题）
.custom-slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 35px;
font-size: 30px;
color: #eee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.3;
z-index: 20;
&:before {
display: none;
}
&:hover {
color: #fff;
opacity: 0.9;
}
&.prev-arrow {
left: 0px;
z-index: 20;
}
&.next-arrow {
right: 0px;
z-index: 20;
}
}
}
</style>

110
modeler/src/views/ai/applications/charts/config.ts
View File

@@ -1,110 +0,0 @@
/*
* 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 commonAxisConfig = {
axisLabel: {
color: '#eee',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#1e3150'
}
},
axisTick: {
lineStyle: {
color: '#1e3150'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
};
export const getRadialGradient = (colorStart: string, colorEnd: string) => {
return {
type: 'radial', // 径向渐变（饼图首选）
x: 0.5, // 渐变中心x坐标（0-1，0.5为饼图中心）
y: 0.5, // 渐变中心y坐标
r: 0.5, // 渐变半径（0-1，0.5适配饼图内半径到外半径）
colorStops: [
{ offset: 0, color: colorStart }, // 中心颜色（深）
{ offset: 1, color: colorEnd } // 边缘颜色（浅）
],
global: false // 局部渐变（仅作用于当前扇区）
};
};
export const getVerticalGradient = (colorStart: string, colorEnd: string) => {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: colorStart }, // 顶部颜色（深）
{ offset: 1, color: colorEnd } // 底部颜色（浅）
]
};
};
export const xAxisConfig = {
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)' // 网格线颜色（半透明白色）
}
},
axisLabel: {
color: '#eee',
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
axisLine: {
show: true,
lineStyle: {
color: '#1e3150' // X轴线颜色（可选）
},
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
}
export const yAxisConfig = {
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)' // 网格线颜色（半透明白色）
}
},
axisLabel: {
color: '#eee',
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
axisLine: {
show: true,
lineStyle: {
color: '#1e3150' // X轴线颜色（可选）
},
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
}

265
modeler/src/views/ai/applications/charts/line-options.ts
View File

@@ -1,265 +0,0 @@
/*
* 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 { xAxisConfig } from './config';
import type { ChartOption } from './types';
export interface LineChartOption extends ChartOption{
}
export const createLineChartOption = (options: LineChartOption = {}) => {
let blueName = options.blueName ?? '蓝方';
let redName = options.redName ?? '红方';
return {
title: {
text: options.title,
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999', // 提示框字体颜色
},
},
grid: {
left: '1%',
right: '5%',
bottom: options.xAxisDataVisible ? '15%' : '10%',
containLabel: true,
},
legend: {
data: [blueName, redName],
textStyle: {
color: '#ddd',
fontSize: 14,
},
},
xAxis: {
show: options.xAxisDataVisible,
type: 'category',
data: options.xAxisData,
boundaryGap: [0.1, 0.1],
...xAxisConfig,
},
yAxis: {
type: 'value',
boundaryGap: [0.1, 0.1],
...xAxisConfig,
},
series: [
{
name: blueName,
type: 'line',
// stack: 'Total',
data: options.blueData,
lineStyle: {
color: '#409EFF',
width: 2,
},
itemStyle: {
color: '#409EFF',
},
emphasis: {
itemStyle: {
color: 'blue', // 高亮时填充色（白色）
borderColor: '#409EFF', // 高亮时边框色
borderWidth: 4,
},
symbolSize: 12, // 高亮时圆点放大
},
label: {
show: options.labelVisible, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12, // 数值文字大小
},
},
},
{
name: redName,
type: 'line',
// stack: 'Total',
data: options.redData,
lineStyle: {
color: '#bc1f1f',
width: 2,
},
itemStyle: {
color: '#bc1f1f',
},
emphasis: {
itemStyle: {
color: 'blue', // 高亮时填充色（白色）
borderColor: 'red', // 高亮时边框色
borderWidth: 4,
},
symbolSize: 12, // 高亮时圆点放大
},
label: {
show: options.labelVisible, // 开启数值显示
position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
textStyle: {
color: '#eee', // 数值文字颜色
fontSize: 12, // 数值文字大小
},
},
},
],
};
};
// line-options.ts
export interface ChartOptimizationOptions {
showAllSymbol?: boolean;
animation?: boolean;
large?: boolean;
progressive?: number;
progressiveThreshold?: number;
}
export const createOptimizedLineChartOption = (
title: string,
xAxisData: string[],
blueData: number[],
redData: number[],
optimization: ChartOptimizationOptions = {}
): echarts.EChartsOption => {
const {
showAllSymbol = false,
animation = false,
large = true,
progressive = 500,
progressiveThreshold = 1000,
} = optimization;
return {
title: {
text: title,
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
// 大数据时优化tooltip性能
confine: true,
appendToBody: true,
},
legend: {
data: ['蓝方轨迹', '红方轨迹'],
bottom: 10
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
rotate: 45,
// 减少标签显示密度
interval: (index: number) => index % 50 === 0,
},
// 大数据优化
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: '归一化值',
// 大数据优化
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
minValueSpan: 10
},
{
show: true,
type: 'slider',
top: '90%',
start: 0,
end: 100
}
],
series: [
{
name: '蓝方轨迹',
type: 'line',
data: blueData,
smooth: false, // 大数据时关闭平滑，提高性能
lineStyle: {
width: 1 // 减小线宽
},
itemStyle: {
color: '#1890ff'
},
// 性能优化配置
showSymbol: showAllSymbol,
symbol: 'circle',
symbolSize: 2, // 减小符号大小
animation: animation,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: 'cubicOut',
// 大数据模式优化
progressive: progressive,
progressiveThreshold: progressiveThreshold,
progressiveChunkMode: 'mod',
// 采样策略
sampling: 'lttb', // 使用LTTB采样算法，保留趋势特征
},
{
name: '红方轨迹',
type: 'line',
data: redData,
smooth: false,
lineStyle: {
width: 1
},
itemStyle: {
color: '#ff4d4f'
},
showSymbol: showAllSymbol,
symbol: 'circle',
symbolSize: 2,
animation: animation,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: 'cubicOut',
progressive: progressive,
progressiveThreshold: progressiveThreshold,
progressiveChunkMode: 'mod',
sampling: 'lttb',
}
]
};
};

173
modeler/src/views/ai/applications/charts/pie-options.ts
View File

@@ -1,173 +0,0 @@
/*
* 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 type PieChartSide = 'blue' | 'red' | string
export const createPieChartOption = (
title: string,
side: PieChartSide,
progressPercent: number | null,
centerText: string,
blueName: string,
redName: string,
) => {
// 定义基础颜色常量，提升可读性
const RED = '#bc1f1f';
const BLUE = '#205aae';
let color: string[];
// side=blue → 已占用(第一个元素)=红色，未占用(第二个)=蓝色
// side=red → 已占用(第一个元素)=蓝色，未占用(第二个)=红色
if (side === 'blue') {
color = [RED, BLUE];
} else if (side === 'red') {
color = [BLUE, RED];
} else {
// 兼容其他字符串值，使用默认逻辑
color = [RED, BLUE];
}
let blueNameText = blueName ?? '蓝方';
let redNameText = redName ?? '红方';
// 处理 null 值，避免显示 null%
const safeProgressPercent = Number(Number(progressPercent ?? 0).toFixed(2));
const realData = [
{ value: safeProgressPercent, name: side === 'blue' ? redNameText : blueNameText },
{ value: Number(Number(100 - safeProgressPercent).toFixed(2)), name: side === 'blue' ? blueNameText : redNameText }
]
// 核心修改1：文本截取逻辑 - 只显示前4个字符
const displayText = centerText.length > 4 ? `${centerText.substring(0, 4)}...` : centerText;
// 保存完整文本用于tooltip显示
const fullCenterText = centerText;
console.error('realData',realData)
return {
title: {
text: title,
textStyle: {
color: '#eee',
fontSize: 16
}
},
tooltip: {
trigger: 'item',
textStyle: {
color: '#999'
},
// 核心修改2：自定义tooltip格式化内容，显示完整文本
formatter: (params: any) => {
return `
<div style="text-align: center;">
<div>${params.name}: ${params.value}%</div>
<div style="margin-top: 4px;">${fullCenterText}</div>
</div>
`;
}
},
grid: {
left: '1%',
right: '5%',
bottom: '1%',
top: '30%',
containLabel: true
},
xAxis: {
show: false,
axisLabel: {
color: '#eee',
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#eee' // X轴线颜色（可选）
},
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
},
yAxis: {
show: false,
axisLabel: {
color: '#eee',
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#eee' // X轴线颜色（可选）
},
textStyle: {
color: '#EEE', // 标题字体颜色
fontSize: 14
}
},
},
series: [
{
type: 'pie',
radius: ['40%', '60%'],
center: ['50%', '50%'],
data: realData,
color: color,
itemStyle: {
borderWidth: 0
},
// 启用饼图中心标签
label: {
show: true,
position: 'center',
// 核心修改3：使用截取后的文本显示
formatter: `{a|${safeProgressPercent}%}\n{b|${displayText}}`,
rich: {
a: {
fontSize: 28,
fontWeight: 'bold',
color: '#eee',
lineHeight: 36
},
b: {
fontSize: 16,
color: '#ccc',
lineHeight: 24
}
}
},
// 禁用外部标签
labelLine: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
// 悬停时也显示中心标签
label: {
show: true,
fontSize: 28,
fontWeight: 'bold'
}
}
}
]
};
};

126
modeler/src/views/ai/applications/charts/scatter-options.ts
View File

@@ -1,126 +0,0 @@
/*
* 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 { xAxisConfig } from './config';
import type { ChartOption } from './types';
export interface ScatterChartOption extends ChartOption{
}
// 自定义三角形路径（调整尺寸适配显示）
export const triangleSymbol = 'path://M0,-6 L6,6 L-6,6 Z';
export const createScatterChartOption = (options: ScatterChartOption) => {
let blueName = options.blueName ?? '蓝方';
let redName = options.redName ?? '红方';
return {
title: {
text: options.title,
textStyle: {
color: '#eee',
fontSize: 16
}
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
}
},
grid: {
left: '1%',
right: '5%',
bottom: '15%',
containLabel: true
},
legend: {
data: [blueName, redName],
textStyle: {
color: '#ddd',
fontSize: 14
}
},
xAxis: {
type: 'category',
data: options.xAxisData,
boundaryGap: [0.1, 0.1],
...xAxisConfig
},
yAxis: {
type: 'value',
boundaryGap: [0.1, 0.5],
...xAxisConfig
},
series: [
{
name: blueName,
type: 'scatter',
data: options.blueData,
symbol: 'circle', // 显式指定蓝方使用圆点（ECharts默认也是circle，显式设置更清晰）
symbolSize: 8, // 圆点大小
itemStyle: {
color: '#409EFF' // 圆点颜色
},
emphasis: {
itemStyle: {
color: 'white',
borderColor: '#409EFF',
borderWidth: 2
},
symbolSize: 12
},
// 数值标签配置 - 显示在圆点上方
label: {
show: false,
position: 'top',
formatter: '{c}', // 直接显示数据值
textStyle: {
color: '#eee',
fontSize: 12,
fontWeight: 'bold'
},
offset: [0, -10] // 调整偏移量，让标签在圆点上方显示更美观
}
// 移除了markPoint配置（去掉额外的三角形）
},
{
name: redName,
type: 'scatter',
data: options.redData,
symbol: triangleSymbol, // 红方使用自定义三角形
symbolSize: 12, // 三角形尺寸（比原圆点稍大，保证视觉清晰）
itemStyle: {
color: '#bc1f1f' // 三角形颜色
},
emphasis: {
itemStyle: {
color: 'white',
borderColor: '#bc1f1f',
borderWidth: 2
},
symbolSize: 16 // 高亮时三角形放大
},
// 红方的数值标签配置
label: {
show: false,
position: 'top',
formatter: '{c}', // 直接显示数据值
textStyle: {
color: '#eee',
fontSize: 12,
fontWeight: 'bold'
},
offset: [0, -15] // 三角形高度更高，标签偏移量稍大
}
},
]
}
};

30
modeler/src/views/ai/applications/charts/types.ts
View File

@@ -1,30 +0,0 @@
/*
* 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 { ModelDeductionData } from '../types';
export interface ChartOption {
title?: string,
blueName?: string|undefined,
redName?: string|undefined,
xAxisData?: string[],
blueData?: any[],
redData?: any[],
xAxisDataVisible?: boolean,
labelVisible?: boolean,
}
export interface ChartLineData {
name: string,
xAxisData: string[],
blueData: number[],
redData: number [],
options: any,
deduction: ModelDeductionData,
}

25
modeler/src/views/ai/applications/charts/utils.ts
View File

@@ -1,25 +0,0 @@
/*
* 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 downSampleData = (data: number[], targetCount = 200): number[] => {
if (!data.length || data.length <= targetCount) return data;
const step = Math.ceil(data.length / targetCount);
const sampledData: number[] = [];
for (let i = 0; i < data.length; i += step) {
sampledData.push(data[i] as any);
}
if (sampledData[sampledData.length - 1] !== data[data.length - 1]) {
sampledData[Number(sampledData?.length - 1)] = data[data.length - 1] as number;
}
return sampledData;
};

35
modeler/src/views/ai/applications/config.ts
View File

@@ -1,35 +0,0 @@
/*
* 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 { ModelDeduction } from './types';
export const defaultModelDeduction = {
// 推演记录ID
id: null,
deductionId: null,
// 部署模型路径
deploymentModelPath: null,
// 对抗轮数配置
competitionRound: null,
// 对抗场次配置
competitionSession: 1,
// 推演倍数设置
deductionMultiple: 1,
// 并发调度配置
balanceStrategy: 1,
// 对抗模式选择
competitionMode: 1,
// 蓝方名称
blueNames: null,
// 红方名称
redNames: null,
// 数据状态（1-正常，0-已删除）
status: null,
stopped: false,
} as ModelDeduction;

673
modeler/src/views/ai/applications/gambling.vue
View File

@@ -1,673 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card ks-cards-wrapper">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">博弈竞赛单元运行环境</span>
</a-space>
</template>
<div class="ks-scrollable">
<a-row :gutter="15">
<a-col :span="8">
<!-- 基础配置卡片 -->
<a-card data-step="0" title="基础配置" class="ks-apps-card ks-top-apps-card">
<a-form
:model="modelDeduction"
autocomplete="off"
layout="horizontal"
:label-col="{span: 6}"
name="basic"
>
<a-form-item
label="部署模型选择"
name="deploymentModelPath"
>
<Finder :path="modelDeduction.deploymentModelPath"
@select="(p: string|null) => modelDeduction.deploymentModelPath = p" />
</a-form-item>
<a-form-item
label="对抗轮数配置"
name="competitionRound"
>
<a-input v-model:value="modelDeduction.competitionRound" placeholder="对抗轮数配置" style="width: 100%" />
</a-form-item>
<a-form-item
label="对抗场次配置"
name="competitionSession"
>
<a-input-number min="1" v-model:value="modelDeduction.competitionSession" placeholder="对抗场次配置" style="width: 100%" />
</a-form-item>
<a-form-item
label="推演倍数设置"
name="deductionMultiple"
>
<a-form-item-rest>
<a-flex>
<a-slider v-model:value="modelDeduction.deductionMultiple" :max="1000" :min="0" style="width:100%;" />
<a-input-number v-model:value="modelDeduction.deductionMultiple" :min="0" :max="1000" style="margin-left: 10px; width: 120px;" />
<span style="width: 80px; margin-left: 5px;color:#eee; line-height: 34px;"> / 1000</span>
</a-flex>
</a-form-item-rest>
</a-form-item>
<a-form-item
label="对抗模式选择"
name="competitionMode"
>
<a-select placeholder="请选择对抗模式" v-model:value="modelDeduction.competitionMode"
@change="(v: number | undefined | null)=> modelDeduction.competitionMode = v">
<a-select-option :value="1">循环赛</a-select-option>
<a-select-option :value="2">瑞士轮</a-select-option>
<a-select-option :value="3">单败淘汰赛</a-select-option>
<a-select-option :value="4">双败淘汰赛</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="并发调度配置"
name="balanceStrategy"
>
<a-select placeholder="并发调度配置" v-model:value="modelDeduction.balanceStrategy"
@change="(v: number | undefined | null)=> modelDeduction.balanceStrategy = v">
<a-select-option :value="1">均衡调度策略</a-select-option>
<a-select-option :value="2">集约调度策略</a-select-option>
<a-select-option :value="3">优先调度策略</a-select-option>
<a-select-option :value="4">触发调度策略</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-card>
<!-- 对抗配置卡片 -->
<a-card data-step="0" title="对抗配置" class="ks-apps-card ks-bottom-apps-card">
<a-form
autocomplete="off"
layout="horizontal"
:label-col="{span: 6}"
name="basic"
>
<a-form-item
label="蓝方"
name="taskName"
>
<div class="counter-wrapper">
<div class="counter-wrapper-item" v-for="i in blueCounter" :key="`blue-${i}`">
<a-row :gutter="15">
<a-col :span="19">
<Finder :only-directory="false" @select="(_p: any, f: any)=> blueNames[i] = f.name"/>
</a-col>
<a-col :span="5" v-if="i == 1">
<a-space>
<plus-circle-outlined @click="()=> add('blue')"/>
<minus-circle-outlined @click="()=> minus('blue')"/>
</a-space>
</a-col>
</a-row>
</div>
</div>
</a-form-item>
<a-form-item
label="红方"
name="t"
>
<div class="counter-wrapper">
<div class="counter-wrapper-item" v-for="i in redCounter" :key="`red-${i}`">
<a-row :gutter="15">
<a-col :span="19">
<Finder :only-directory="false" @select="(_p: any, f: any)=> redNames[i] = f.name"/>
</a-col>
<a-col :span="5" v-if="i == 1">
<a-space>
<plus-circle-outlined @click="()=> add('red')"/>
<minus-circle-outlined @click="()=> minus('red')"/>
</a-space>
</a-col>
</a-row>
</div>
</div>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col :span="16">
<!-- 智能博弈空战卡片 -->
<a-card data-step="0" class="ks-pks-card ks-pk-apps-card">
<template #title>
<a-flex :gap="8">
<span style="margin-top: 5px;color:#eee;font-size:16px">智能博弈空战</span>
<span style="color:#999;font-size: 15px;line-height: 32px;margin-left: 40px;">
当前场次 {{ deductionPods.length }} 队伍数: {{ deductionPods.length * 2 }}
</span>
<a-button style="margin-left: auto; color:#fff;" @click="()=> startLoop()">
<a-flex>
<PlayCircleOutlined/>
<span style="margin-left: 10px;">对抗开始</span>
</a-flex>
</a-button>
<a-button style="margin-left: 15px;color:#fff;" @click="()=> rankingModelVisible = true">
<a-flex>
<OrderedListOutlined/>
<span style="margin-left: 10px;">排名统计</span>
</a-flex>
</a-button>
</a-flex>
</template>
<div class="w-full mt-2" style="margin-top: 15px;">
<a-row :gutter="15">
<a-col :span="8" v-for="(item,i) in deductionPods" :key="`pod-${item.id}`">
<a-card class="ks-pk-card" hoverable>
<template #title>
<a-flex>
<span class="ks-card-title">第 {{i + 1}} 组</span>
</a-flex>
</template>
<div class="pk-wrapper">
<div class="pk-overlay" @click="()=> handleClickPkCard(item)"></div>
<div class="pk-teams" @click="()=> handleClickPkCard(item)">
<span class="left-team">
<a-tooltip placement="bottom">
<template #title>
{{item.blueName ?? `蓝方${i+1}`}}
</template>
{{getTeamName(item.blueName,'blue', i + 1)}}
</a-tooltip>
</span>
<span class="right-team">
<a-tooltip placement="bottom">
<template #title>
{{item.redName ?? `红方${i+1}`}}
</template>
{{getTeamName(item.redName,'red', i + 1)}}
</a-tooltip>
</span>
</div>
<div class="pk-footer">
<a-flex>
<a-progress
:percent="item.targetPercent"
:stroke-width="6"
style="margin-right: 30px;"
></a-progress>
<a-button :disabled="item.targetPercent < 100" class="pk-details-btn" size="small" @click="()=> handleDetails(item)">
对抗详情
</a-button>
</a-flex>
</div>
</div>
<template #extra class="pk-actions">
<a-space>
<span class="icon-action eye" @click="()=> handleTermStatusPopoverVisible(item)" style="margin-right: -5px;"></span>
<a-popover title="" trigger="click" v-model:open="item.termStatusPopoverVisible">
<template #content>
<a-flex>
<span style="width: 100px;text-align: right;">仿真运行状态: </span>
<span style="margin-left: 10px;">{{item.statusName ?? '-'}}</span>
</a-flex>
</template>
</a-popover>
<!-- <a-popover title="" trigger="click" v-if="item?.metricsParsed">-->
<!-- <span class="icon-action eye"></span>-->
<!-- <template #content v-if="item?.metricsParsed">-->
<!-- <a-flex>-->
<!-- <span style="width: 100px;text-align: right;">本轮总奖励: </span>-->
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.reward ?? '-' }}</span>-->
<!-- </a-flex>-->
<!-- <a-flex>-->
<!-- <span style="width: 100px;text-align: right;">本轮生存步数: </span>-->
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.steps ?? '-' }}</span>-->
<!-- </a-flex>-->
<!-- <template v-if="item?.metricsParsed?.details">-->
<!-- <a-flex>-->
<!-- <span style="width: 100px;text-align: right;">开火奖励累计值: </span>-->
<!-- <span style="margin-left: 10px;">{{ item.metricsParsed?.details.fire_reward ?? '-' }}</span>-->
<!-- </a-flex>-->
<!-- <a-flex>-->
<!-- <span style="width: 100px;text-align: right;">越界惩罚累计值: </span>-->
<!-- <span style="margin-left: 10px;">{{ item?.metricsParsed?.details.boundary_penalty ?? '-' }}</span>-->
<!-- </a-flex>-->
<!-- </template>-->
<!-- </template>-->
<!-- </a-popover>-->
<a-popconfirm
ok-text="确定"
cancel-text="取消"
@confirm="()=> confirmPause(item)"
>
<template #title>
确定{{ item.simulationStatus === 1 ? '暂停' : '开始' }}
</template>
<span :class="['icon-action', item.simulationStatus === 1 ? 'pause' : 'start']">
</span>
</a-popconfirm>
<a-popconfirm
title="确定删除?"
ok-text="确定"
cancel-text="取消"
@confirm="()=> confirmDelete(item)"
>
<span class="icon-action delete"></span>
</a-popconfirm>
</a-space>
</template>
</a-card>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</div>
</a-card>
<ChartsModal :deduction="selectedDeduction" :visible="chartsModalVisible" @cancel="()=> chartsModalVisible = false" />
<RankingModel :visible="rankingModelVisible" @cancel="()=> rankingModelVisible = false"/>
</Layout>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import {useRouter} from 'vue-router'
import { message } from 'ant-design-vue';
import Layout from '../layout.vue';
import { MinusCircleOutlined, OrderedListOutlined, PlayCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import RankingModel from './ranking-modal.vue';
import { createModelDeduction, deleteModelDeduction, findDeductionPodResult, runDeductionPodAfsimControl } from './api';
import type { DeductionPod, DeductionPodMetrics, ModelDeduction } from './types';
import Finder from '../finder.vue';
import { defaultModelDeduction } from './config';
import ChartsModal from './charts/charts-modal.vue';
import type { NullableString } from '@/types';
const chartsModalVisible = ref<boolean>(false);
const router = useRouter();
// 排名弹窗显隐
const rankingModelVisible = ref<boolean>(false)
// 红蓝方计数器
const redCounter = ref<number>(1);
const blueCounter = ref<number>(1);
const blueNames = ref<string[]>([])
const redNames = ref<string[]>([])
// 模型推演配置
const modelDeduction = ref<ModelDeduction>({ ...defaultModelDeduction });
// 推演Pods数据（扩展类型，增加进度更新定时器）
const deductionPods = ref<(DeductionPod & {
animatePercent: number; // 动画进度值
targetPercent: number; // 目标进度值
stopped: boolean; // 是否暂停
progressTimer: any; // 动画定时器
updateTimer: any; // 进度更新定时器
})[]>([]);
// 心跳方法定时器标识
const heartbeatTimer = ref<any | null>(null);
const selectedDeduction = ref<DeductionPod | null | undefined>(null);
const getTeamName = (name: NullableString | undefined, side: string, level: number = 1): string => {
if(name){
if(name.length>3){
return name.substring(0,2) + '...';
}
return name;
}
return `${side === 'red' ? '红方' : '蓝方'}${level}`
}
const parseNumberPercent = (source: number|null , target: number|null) : number => {
if(source && target){
try{
return Number(Number((source/ target) * 100).toFixed(2));
} catch (e: any){
console.error(e);
}
}
return 0;
}
const handleDetails = (item: Partial<DeductionPod>) => {
// chartsModalVisible.value = true;
// selectedDeduction.value = JSON.parse(JSON.stringify(item));
router.push({
path: `/app/ai/applications/gambling/${item.id}/charts`
})
};
/**
* 随机更新进度值（核心修改：优化初始启动逻辑）
* @param pod 单个pod实例
*/
const randomUpdateProgress = (pod: any) => {
// 如果暂停或进度已到100%，直接返回
if (pod.stopped || pod.animatePercent >= 100) {
return;
}
// 随机生成下次更新时间（1-3秒）
const randomInterval = 1000 + Math.random() * 2000;
// 随机生成进度增长量（1-5%）
const randomIncrement = 1 + Math.random() * 4;
pod.updateTimer = setTimeout(() => {
// 计算新的目标进度（不超过100%）
pod.targetPercent = Math.min(pod.animatePercent + randomIncrement, 100);
// 启动进度动画
animateProgress(pod, pod.targetPercent);
// 递归调用，实现持续更新
randomUpdateProgress(pod);
}, randomInterval);
};
/**
* 暂停/开始进度更新
* @param item 单个pod实例
*/
const confirmPause = (item: any) => {
item.simulationStatus = item.simulationStatus === 1 ? 2 : 1;
runDeductionPodAfsimControl({
jobId: item.jobId,
afsimHostIp: item.afsimHostIp,
afsimNodePort81: item.afsimNodePort81,
type: item.simulationStatus, // （1-恢复仿真，2-暂停仿真，3-查询状态）
}).then(r=> {
message.info(r.msg);
if(r.code === 200) {
item.stopped = !item.stopped;
}
if(r.data?.stateDescription){
item.statusName = r.data.stateDescription;
}
})
// if (item.stopped) {
// // 暂停：清除进度更新定时器
// if (item.updateTimer) {
// clearTimeout(item.updateTimer);
// item.updateTimer = null;
// }
// message.info('已暂停');
// } else {
// // 开始：重新启动进度更新
// randomUpdateProgress(item);
// message.info('已恢复');
// }
};
const handleTermStatusPopoverVisible = (item: Partial<DeductionPod>)=> {
item.termStatusPopoverVisible = ! item.termStatusPopoverVisible;
runDeductionPodAfsimControl({
jobId: item.jobId,
afsimHostIp: item.afsimHostIp,
afsimNodePort81: item.afsimNodePort81,
type: 3, // （1-恢复仿真，2-暂停仿真，3-查询状态）
}).then(r=> {
message.info(r.msg);
if(r.data.stateDescription){
item.statusName = r.data.stateDescription;
}
})
}
/**
* 删除pod，同时清除相关定时器
* @param item 单个pod实例
*/
const confirmDelete = (item: any) => {
console.error('confirmDelete', item);
// 清除该pod的所有定时器
if (item.updateTimer) clearTimeout(item.updateTimer);
if (item.progressTimer) clearInterval(item.progressTimer);
deleteModelDeduction(item.id as number).then(res => {
if (res.code === 200) {
message.info('删除成功.');
loadData();
}
});
};
// 进度条平滑动画函数（保留原有逻辑）
const animateProgress = (pod: any, targetPercent: number) => {
targetPercent = Math.max(0, Math.min(100, Number(targetPercent) || 0));
if (typeof pod.animatePercent !== 'number') {
pod.animatePercent = 0;
}
const step = 0.5;
if (pod.progressTimer) {
clearInterval(pod.progressTimer);
}
if (Math.abs(pod.animatePercent - targetPercent) < step) {
pod.animatePercent = targetPercent;
return;
}
pod.progressTimer = setInterval(() => {
if (pod.animatePercent < targetPercent) {
pod.animatePercent = Math.min(pod.animatePercent + step, targetPercent);
} else {
pod.animatePercent = Math.max(pod.animatePercent - step, targetPercent);
}
if (Math.abs(pod.animatePercent - targetPercent) < step) {
pod.animatePercent = targetPercent;
clearInterval(pod.progressTimer);
pod.progressTimer = null;
}
}, 30);
};
// 点击PK卡片打开链接（保留原有逻辑）
const handleClickPkCard = (item: DeductionPod) => {
if (item?.afsimHostIp && item?.afsimNodePort6901) {
let url = `${item.afsimHostIp}:${item.afsimNodePort6901}`;
if(!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
const newWindow = window.open(url);
if (!newWindow) {
message.warning('窗口打开失败，请检查浏览器弹窗设置');
}
} else {
message.warning('缺少IP或端口信息，无法打开链接');
}
};
const refresh = () => {
if (deductionPods.value) {
deductionPods.value.forEach(podItem => {
console.info('refresh', podItem);
randomUpdateProgress(podItem);
});
}
};
// 加载数据方法（核心修改：确保每个pod初始化后立即启动进度更新）
const loadData = () => {
findDeductionPodResult().then(r => {
let rows: DeductionPod[] = Object.values(r.data ?? []) as DeductionPod[];
const newPods: any[] = [];
rows.forEach(row=> {
let metricsParsed: DeductionPodMetrics | null = null;
try {
const metricsStr = row?.metrics?.toString() ?? '';
metricsParsed = metricsStr ? JSON.parse(metricsStr) as DeductionPodMetrics : null;
} catch (e: any) {
console.warn('解析 metrics 失败:', e);
}
// 初始化进度相关参数：默认不暂停，进度从0开始
const podItem = {
...row,
metricsParsed,
fake: false,
stopped: false, // 默认不暂停，页面加载后直接运行
targetPercent: parseNumberPercent(row.currentRound, row.totalRound), // 初始目标进度
animatePercent: 0, // 初始动画进度
progressTimer: null, // 动画定时器
updateTimer: null, // 进度更新定时器
statusName: null,
termStatusPopoverVisible: false,
};
newPods.push(podItem);
})
// setTimeout(() => refresh(), 1000);
deductionPods.value = newPods;
console.log('最终 deductionPods 数据:', deductionPods.value);
});
};
// 心跳方法（加载数据）
const heartbeat = () => {
loadData();
};
// 增加红蓝方计数器
const add = (side: string)=> {
if('blue' === side){
blueCounter.value ++;
} else {
redCounter.value ++;
}
};
// 减少红蓝方计数器
const minus = (side: string)=> {
if('blue' === side){
blueCounter.value = Math.max(1, blueCounter.value - 1);
blueNames.value = blueNames.value.splice(blueNames.value.length-1,1);
} else {
redCounter.value = Math.max(1, redCounter.value - 1);
redNames.value = redNames.value.splice(redNames.value.length-1,1);
}
};
// 开始对抗
const startLoop = () => {
modelDeduction.value.redNames = redNames.value.filter(v=> v).join(',')
modelDeduction.value.blueNames = blueNames.value.filter(v=> v).join(',')
createModelDeduction(modelDeduction.value).then(res => {
if (res.code === 200) {
message.success('对抗已开始');
if (heartbeatTimer.value) {
clearInterval(heartbeatTimer.value);
}
heartbeat();
heartbeatTimer.value = setInterval(() => {
heartbeat();
}, 10000);
} else if (res.msg) {
message.error(res.msg);
}
}).catch(err => {
console.error('提交配置失败:', err);
message.error('提交配置失败，请重试');
});
};
// 组件挂载时加载初始数据（页面加载完成后自动执行，触发进度模拟）
onMounted(() => {
// 页面挂载后立即加载数据，数据加载完成后自动启动所有Pods的进度更新
loadData();
});
heartbeatTimer.value = setInterval(() => {
loadData();
}, 3000);
// 组件卸载时清除所有定时器（防止内存泄漏，增强版）
onUnmounted(() => {
// 清除心跳定时器
if (heartbeatTimer.value) {
clearInterval(heartbeatTimer.value);
}
// 清除所有pod的定时器
// deductionPods.value.forEach(pod => {
// if (pod.progressTimer) clearInterval(pod.progressTimer);
// if (pod.updateTimer) clearTimeout(pod.updateTimer);
// });
// 清空pods数据，避免残留
deductionPods.value = [];
});
</script>
<style lang="less">
.bg-wrapper .ant-card {
&.ks-apps-card{
&.ks-top-apps-card {
margin-bottom:15px!important;
&> .ant-card-body{
height: 35vh;
overflow: hidden;
.ant-form-item{
margin-bottom:15px;
}
}
}
&.ks-bottom-apps-card{
margin-bottom:0px!important;
&> .ant-card-body{
height: 32vh;
overflow: auto;
.ant-form-item{
margin-bottom:15px;
}
}
}
}
&.ks-pk-apps-card{
&> .ant-card-body{
height: 74vh;
}
}
.counter-wrapper{
border: 1px solid #475f71;
padding: 15px;
border-radius: 2px;
.counter-wrapper-item{
margin-bottom:15px;
text-align: left;
.anticon{
color:#a2b1ba;
cursor: pointer;
font-size: 18px;
line-height: 30px;
display: block;
}
&:last-child{
margin-bottom:0;
}
}
}
}
// 进度条动画样式优化（增强平滑度）
.ant-progress-inner {
transition: width 0.05s ease-in-out;
}
.ant-progress-bg {
transition: width 0.05s ease-in-out;
}
</style>

692
modeler/src/views/ai/applications/ranking-modal.vue
View File

@@ -1,692 +0,0 @@
<template>
<a-modal :open="visible" class="ks-ranking-modal" centered width="98%" :footer="null" @cancel="handleCancel">
<div class="modal-overlay"></div>
<div class="ranking-container">
<!-- 表头 -->
<div class="table-header">
<div class="header-row">
<div class="header-cell rank">排名</div>
<div class="header-cell team">团队</div>
<div class="header-cell red-win-rate">红方胜率</div>
<div class="header-cell blue-win-rate">蓝方胜率</div>
<div class="header-cell red-matches">红方场次</div>
<div class="header-cell blue-matches">蓝方场次</div>
<div class="header-cell invalid-matches">博弈关键节点</div>
<div class="header-cell total-score">总分</div>
<div class="header-cell total-win-rate">总胜率</div>
</div>
</div>
<!-- 排行榜主体 -->
<div class="ranking-body">
<template v-for="(team, index) in sortedTeams">
<div
class="team-row"
:class="[team.isFlipping ? 'flipping' : '', indexClasses[index] ? indexClasses[index] : '']"
:style="getRowStyle(index)"
>
<div class="row-front">
<div class="cell rank" :class="getRankClass(team.rank)">
<span class="rank-number">{{ team.rank }}</span>
<!-- <span v-if="team.rankChange !== 0" class="rank-change" :class="getChangeClass(team.rankChange)">-->
<!-- {{ getChangeSymbol(team.rankChange) }}-->
<!-- </span>-->
</div>
<div class="cell team">
<div class="team-info">
<div class="team-name">{{ team.name }}</div>
</div>
</div>
<div class="cell red-win-rate">
{{ String(team.redWinRate).substring(0, 5) }}%
</div>
<div class="cell blue-win-rate">
{{ String(team.blueWinRate).substring(0, 5) }}%
</div>
<div class="cell red-matches">{{ team.redMatches }}</div>
<div class="cell blue-matches">{{ team.blueMatches }}</div>
<div class="cell invalid-matches">{{ team.invalidMatches }}</div>
<div class="cell total-score">{{ team.totalScore }}</div>
<div class="cell total-win-rate">
{{ String(team.totalWinRate).substring(0, 5) }}%
</div>
</div>
<!-- 行背面（翻转时显示） -->
<div class="row-back">
<div class="back-content">
<div class="back-title">团队详情</div>
<div class="back-stats">
<div>总场次: {{ team.totalMatches }}</div>
<div>红方胜场: {{ team.redWins }}</div>
<div>蓝方胜场: {{ team.blueWins }}</div>
<div>连续胜场: {{ team.winStreak }}</div>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- 控制面板 -->
<!-- <div class="control-panel">-->
<!-- <button @click="toggleAutoRefresh" :class="{ active: autoRefresh }">-->
<!-- {{ autoRefresh ? '暂停更新' : '开始更新' }}-->
<!-- </button>-->
<!-- <button @click="manualUpdate">手动更新排名</button>-->
<!-- <button @click="triggerFlip">手动翻转</button>-->
<!-- <div class="timer-display">-->
<!-- 下次更新: {{ nextUpdateTime }}秒-->
<!-- </div>-->
<!-- </div>-->
</div>
<template #title>
<div class="header-export-button">
<a-tooltip title="排名结果导出" placement="bottom">
<CloudDownloadOutlined class="download-icon" @click="handleExport"/>
<!-- <span style="margin-left:10px;">排名结果导出</span>-->
</a-tooltip>
</div>
</template>
</a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, ref, type CSSProperties, type SetupContext } from 'vue';
import {CloudDownloadOutlined} from '@ant-design/icons-vue';
// 定义团队数据接口
interface Team {
id: number;
name: string;
rank: number;
redWinRate: number;
blueWinRate: number;
redMatches: number;
blueMatches: number;
invalidMatches: string;
totalScore: number;
totalWinRate: number;
rankChange: number;
isFlipping?: boolean;
// 计算属性（实例getter）
totalMatches: number;
redWins: number;
blueWins: number;
winStreak: number;
}
// 定义Props类型
interface RankProps {
visible: boolean;
}
// 定义Emits类型
type RankEmits = {
cancel: []; // 无参数的cancel事件
};
// 团队数据（添加类型注解）
const teams = ref<Team[]>([
{ id: 1, name: '团队3', rank: 1, redWinRate: 85, blueWinRate: 72, redMatches: 20, blueMatches: 18, invalidMatches: "2:30'50''", totalScore: 95, totalWinRate: 78, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 2, name: '红方', rank: 2, redWinRate: 78, blueWinRate: 81, redMatches: 22, blueMatches: 20, invalidMatches: "1:31'30''", totalScore: 92, totalWinRate: 79, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 3, name: '团队3', rank: 3, redWinRate: 80, blueWinRate: 75, redMatches: 18, blueMatches: 16, invalidMatches: "2:10'22''", totalScore: 90, totalWinRate: 77, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 4, name: '团队4', rank: 4, redWinRate: 72, blueWinRate: 85, redMatches: 19, blueMatches: 21, invalidMatches: "3:01'12''", totalScore: 88, totalWinRate: 76, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 5, name: '团队8', rank: 5, redWinRate: 68, blueWinRate: 79, redMatches: 17, blueMatches: 19, invalidMatches: "2:45'21''", totalScore: 85, totalWinRate: 73, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 6, name: '团队5', rank: 6, redWinRate: 75, blueWinRate: 70, redMatches: 16, blueMatches: 15, invalidMatches: "1:02'33''", totalScore: 82, totalWinRate: 72, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 7, name: '团队7', rank: 7, redWinRate: 70, blueWinRate: 65, redMatches: 14, blueMatches: 13, invalidMatches: "3:20'10''", totalScore: 78, totalWinRate: 68, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 8, name: '团队6', rank: 8, redWinRate: 65, blueWinRate: 72, redMatches: 12, blueMatches: 14, invalidMatches: "2:33'16''", totalScore: 75, totalWinRate: 67, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 9, name: '蓝方0', rank: 9, redWinRate: 60, blueWinRate: 68, redMatches: 10, blueMatches: 12, invalidMatches: "2:12'54''", totalScore: 70, totalWinRate: 63, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
{ id: 10, name: '团队9', rank: 10, redWinRate: 55, blueWinRate: 60, redMatches: 8, blueMatches: 10, invalidMatches: "3:01'02''", totalScore: 65, totalWinRate: 58, rankChange: 0,
totalMatches: 0, redWins: 0, blueWins: 0, winStreak: 0 },
]);
export default defineComponent({
components: {
CloudDownloadOutlined,
},
props: {
visible: {
type: Boolean,
required: true
},
},
emits: {
cancel: () => true
},
setup(_props: RankProps, { emit }: SetupContext<RankEmits>) {
const autoRefresh = ref<boolean>(true);
const nextUpdateTime = ref<number>(30);
let rankTimer: any | null = null;
let flipTimer: any | null = null;
let countdownTimer: any | null = null;
const indexClasses: Record<number, string> = {
0: 'first-row',
1: 'second-row',
2: 'third-row',
};
const sortedTeams = computed<Team[]>(() => {
return [...teams.value].sort((a, b) => a.rank - b.rank);
});
const getRowStyle = (index: number): CSSProperties => {
const delay = index * 0.1;
return {
'--flip-delay': `${delay}s`,
};
};
// 获取排名样式类
const getRankClass = (rank: number): string => {
if (rank === 1) return 'rank-first';
if (rank === 2) return 'rank-second';
if (rank === 3) return 'rank-third';
return '';
};
// 获取变化样式类
const getChangeClass = (change: number): string => {
if (change > 0) return 'change-up';
if (change < 0) return 'change-down';
return '';
};
// 获取变化符号
const getChangeSymbol = (change: number): string => {
if (change > 0) return `↑${change}`;
if (change < 0) return `↓${Math.abs(change)}`;
return '-';
};
// 手动更新排名
const manualUpdate = (): void => {
updateRankings();
};
// 手动触发翻转
const triggerFlip = (): void => {
teams.value.forEach(team => {
team.isFlipping = true;
setTimeout(() => {
team.isFlipping = false;
}, 600);
});
};
// 切换自动更新
const toggleAutoRefresh = (): void => {
autoRefresh.value = !autoRefresh.value;
if (autoRefresh.value) {
startTimers();
} else {
clearTimers();
}
};
// 更新排名逻辑
const updateRankings = (): void => {
// 保存旧排名（Record类型：key为team.id，value为rank）
const oldRanks: Record<number, number> = teams.value.reduce((acc, team) => {
acc[team.id] = team.rank;
return acc;
}, {} as Record<number, number>);
// 随机打乱并重新分配排名
const shuffled: Team[] = [...teams.value]
.sort(() => Math.random() - 0.5)
.map((team, index) => ({
...team,
rank: index + 1,
// 随机更新一些数据（保持数值范围合理性）
redWinRate: Math.min(100, Math.max(50, team.redWinRate + (Math.random() * 10 - 5))),
blueWinRate: Math.min(100, Math.max(50, team.blueWinRate + (Math.random() * 10 - 5))),
redMatches: team.redMatches + Math.floor(Math.random() * 3),
blueMatches: team.blueMatches + Math.floor(Math.random() * 2),
totalScore: team.totalScore + Math.floor(Math.random() * 5),
totalWinRate: Math.min(100, Math.max(50, team.totalWinRate + (Math.random() * 8 - 4))),
}))
.map(team => {
// 计算排名变化
const oldRank = oldRanks[team.id] as number;
team.rankChange = oldRank - team.rank;
return team;
});
teams.value = shuffled;
};
// 翻转动画
const flipRows = (): void => {
teams.value.forEach(team => {
team.isFlipping = true;
setTimeout(() => {
team.isFlipping = false;
}, 600);
});
};
// 开始定时器
const startTimers = (): void => {
// 排名更新定时器（30秒）
rankTimer = setInterval(() => {
updateRankings();
}, 30000);
// 翻转定时器（15秒）
flipTimer = setInterval(() => {
flipRows();
}, 15000);
// 倒计时显示
nextUpdateTime.value = 30;
countdownTimer = setInterval(() => {
nextUpdateTime.value--;
if (nextUpdateTime.value <= 0) {
nextUpdateTime.value = 30;
}
}, 1000);
};
// 清除定时器
const clearTimers = (): void => {
if (rankTimer) clearInterval(rankTimer);
if (flipTimer) clearInterval(flipTimer);
if (countdownTimer) clearInterval(countdownTimer);
// 重置定时器变量
rankTimer = null;
flipTimer = null;
countdownTimer = null;
};
// 生命周期：挂载时初始化
onMounted(() => {
// 为每个团队添加计算属性（实例getter）
teams.value = teams.value.map(team => ({
...team,
isFlipping: false,
get totalMatches() {
// 注意：invalidMatches是时间字符串，这里原逻辑有问题，暂时保持原有写法
return this.redMatches + this.blueMatches + this.invalidMatches.length;
},
get redWins() {
return Math.round(this.redMatches * this.redWinRate / 100);
},
get blueWins() {
return Math.round(this.blueMatches * this.blueWinRate / 100);
},
get winStreak() {
return Math.floor(Math.random() * 10) + 1;
},
}));
if (autoRefresh.value) {
startTimers();
}
});
// 生命周期：卸载时清理
onUnmounted(() => {
clearTimers();
});
// 取消事件处理
const handleCancel = (): void => emit('cancel');
const handleExport = () => {
try {
// 创建临时a标签用于触发下载
const link = document.createElement('a');
// 设置导出接口地址（如果有URL参数可直接拼接，如：/api/xxx?startTime=2026-01-01）
link.href = '/api/modelDeduction/downloadRankData';
// 自定义下载文件名（后端也可通过响应头覆盖此值）
link.download = '排名数据.xlsx';
// 部分浏览器需要将a标签加入DOM才能触发下载
document.body.appendChild(link);
// 触发点击下载
link.click();
// 下载完成后移除临时标签，清理DOM
document.body.removeChild(link);
} catch (error) {
// 异常捕获，给用户友好提示
console.error('导出失败：', error);
alert('数据导出失败，请稍后重试！');
}
};
return {
handleCancel,
indexClasses,
sortedTeams,
getRowStyle,
getRankClass,
getChangeClass,
toggleAutoRefresh,
autoRefresh,
manualUpdate,
triggerFlip,
nextUpdateTime,
getChangeSymbol,
handleExport,
};
},
});
</script>
<style lang="less">
.ks-ranking-modal {
position: relative;
background: #0d1f34;
background: url('@/assets/rank/titled-container.png') center / 100% 100%;
.ant-modal-close {
right: 65px;
top: 65px;
}
.ant-modal-content{
position: relative;
}
.export-button{
position: absolute;
right: 60px;
bottom: 40px;
}
.header-export-button{
position: absolute;
right: 100px;
top: 68px;
.download-icon{
cursor: pointer;
width: 23px;
height: 23px;
font-size: 14px;
border-radius: 50%;
border: 1px solid #10e5ff;
text-align: center;
display: block;
line-height: 20px;
color: #10e5ff;
}
}
//.modal-overlay {
// background: #000000b0;
// position: absolute;
// width: 100%;
// height: 100%;
// z-index: -1;
//}
.ranking-container {
padding: 10px 30px;
}
.table-header {
background: rgba(255, 255, 255, 0.05);
margin-top: 100px;
margin-bottom: 10px;
}
.header-row {
display: grid;
grid-template-columns: 0.8fr 1.5fr 1.2fr 1.2fr 1fr 1fr 1fr 0.8fr 1.2fr;
padding: 15px 20px;
gap: 10px;
}
.header-cell {
color: #8da2c0;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
&.rank{
margin-left: 15px;
}
}
.ranking-body {
min-height: 600px;
}
.team-row {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
margin-bottom: 8px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
transform-origin: center center;
height: 50px;
overflow: hidden;
background: url('@/assets/rank/bg-3.png') center / 100% 100%;
.rank-number {
width: 60px;
height: 40px;
text-align: center;
font-size: 18px;
color: #fff;
line-height: 40px;
}
&.first-row {
background: url('@/assets/rank/bg-1.png') center / 100% 100%;
.rank-number {
background: url('@/assets/rank/icon-1.png') center / 100% 100%;
}
}
&.second-row {
background: url('@/assets/rank/bg-2.png') center / 100% 100%;
.rank-number {
background: url('@/assets/rank/icon-2.png') center / 100% 100%;
}
}
&.third-row {
.rank-number {
background: url('@/assets/rank/icon-3.png') center / 100% 100%;
}
}
}
.team-row.flipping {
transform: rotateX(180deg);
transition-delay: var(--flip-delay);
}
.row-front,
.row-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: grid;
grid-template-columns: 0.8fr 1.5fr 1.2fr 1.2fr 1fr 1fr 1fr 0.8fr 1.2fr;
padding: 0 20px;
gap: 10px;
align-items: center;
}
.row-back {
background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
transform: rotateX(180deg);
color: white;
border-radius: 8px;
}
.back-content {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.back-title {
font-size: 18px;
font-weight: bold;
}
.back-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 30px;
font-size: 14px;
}
.rank,
.cell {
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
}
//.rank {
// font-weight: bold;
// font-size: 18px;
// justify-content: center;
// position: relative;
//}
.rank-first {
color: #ffd700;
}
.rank-second {
color: #c0c0c0;
}
.rank-third {
color: #cd7f32;
}
.rank-number {
margin-right: 5px;
}
.rank-change {
font-size: 12px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
}
.change-up {
color: #4CAF50;
}
.change-down {
color: #f44336;
}
.team-info {
display: flex;
flex-direction: column;
}
.team-name {
font-weight: bold;
margin-bottom: 4px;
}
.team-id {
font-size: 11px;
color: #8da2c0;
}
.progress-bar {
background: rgba(255, 255, 255, 0.1);
height: 20px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-bar.blue .progress-fill {
background: linear-gradient(90deg, #2196F3, #03A9F4);
}
.progress-bar.total .progress-fill {
background: linear-gradient(90deg, #FF9800, #FFC107);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #f44336, #ff9800);
border-radius: 10px;
transition: width 0.3s ease;
}
.progress-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.control-panel {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.control-panel button {
padding: 10px 20px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.control-panel button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.control-panel button.active {
background: linear-gradient(135deg, #4a00e0, #8e2de2);
}
.timer-display {
display: flex;
align-items: center;
padding: 0 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
color: #8da2c0;
font-size: 14px;
}
}
</style>

222
modeler/src/views/ai/applications/types.ts
View File

@@ -1,222 +0,0 @@
/*
* 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 { ApiDataResponse, NullableString } from '@/types';
export interface DeductionPodMetricsDetails {
// 开火奖励累计值
fire_reward: NullableString;
// 接近敌机奖励累计值
approach_reward: NullableString;
// 越界惩罚累计值
boundary_penalty: NullableString;
lock_reward: NullableString;
damage_reward: NullableString;
// 胜利奖励值
win_bonus: NullableString;
[key: string]: unknown;
}
export interface DeductionPodMetrics {
// 本轮总奖励。该 Episode 获得的总分。
reward: NullableString;
// 本轮生存步数。该 Episode 持续的步数，
steps: number;
// 胜负判定。1 表示胜利，0表示失败/平局。
is_win: number;
// 环境分项奖励明细。包含环境返回的所有细分奖励项(动态字段)。
details: null | DeductionPodMetricsDetails;
[key: string]: unknown;
}
export interface DeductionPod {
id: number;
// 关联推演ID
deductionId: number;
// RayJob名称
jobName: NullableString;
// RayJob主机IP
jobHostIp: NullableString;
// 8000端口映射
jobNodePort8000: NullableString;
// 8265端口映射
jobNodePort8265: NullableString;
// Afsim主机IP
afsimHostIp: NullableString;
// 6901端口映射
afsimNodePort6901: NullableString;
// 50051端口映射
afsimNodePort50051: NullableString;
// 状态（1-正常，0-已删除）
status: number;
// 推演任务Job_ID
jobId: NullableString;
// 总轮数
totalRound: number;
// 当前轮数
currentRound: number;
// 内部详细指标,JSON格式
metrics: NullableString;
// 红方名称
redName: NullableString,
// 蓝方名称
blueName: NullableString;
// 仿真状态（1-运行，2-暂停）
simulationStatus: Number;
metricsParsed: null | DeductionPodMetrics;
[key: string]: unknown;
}
export interface DeductionPodResult extends ApiDataResponse<DeductionPod[]> {
}
export interface ModelDeduction {
// 推演记录ID
id: number | null,
deductionId: number | null,
// 部署模型路径
deploymentModelPath: NullableString,
// 对抗轮数配置
competitionRound: NullableString,
// 对抗场次配置
competitionSession: number,
// 并发调度配置
balanceStrategy: NullableString | number | undefined,
// 推演倍数设置
deductionMultiple: number,
// 对抗模式选择
competitionMode: NullableString | number | undefined | null,
// 数据状态（1-正常，0-已删除）
status: number | null,
// 蓝方名称
blueNames: NullableString,
// 红方名称
redNames: NullableString,
stopped: boolean;
[key: string]: unknown;
}
export interface ModelDeductionData {
id: number | null,
// 关联Pod信息ID
deductionPodId: number,
// 当前轮数
currentEpisode: number,
// 累计总步数
totalSteps: number,
// 蓝方总开火次数
fireTimesBlue: number,
// 红方总开火次数
fireTimesRed: number,
// 蓝方本轮回报
episodeReturnsBlue: number,
// 红方本轮回报
episodeReturnsRed: number,
// 当前轮次生存步数
episodeLengths: number,
// 胜负历史
winHistory: NullableString,
// 蓝方最近10轮平均回报
avgReturn1Last10: number,
// 蓝方最近100轮平均回报
avgReturn1Last100: number,
// 红方最近10轮平均回报
avgReturn2Last10: number,
// 红方最近100轮平均回报
avgReturn2Last100: number,
// 平均每轮步数
avgEpisodeLength: number,
// 蓝方胜率
winRate: number,
// 蓝方败率
lossRate: number,
// 平局率
drawRate: number,
// 当前轮步数
stepInEpisode: number,
// 蓝方回报分量详情
returnComponentsBlue: NullableString,
// 红方回报分量详情
returnComponentsRed: NullableString,
// 蓝方本轮惩罚值
returnDelnatyBlue: number,
// 红方本轮惩罚值
returnDelnatyRed: number,
// 蓝方每轮弹药消耗量
fireConsumeBlue: number,
// 红方每轮弹药消耗量
fireConsumeRed: number,
// 蓝方本轮首次开火时间步
firstFireTimeBlue: number,
// 红方本轮首次开火时间步
firstFireTimeRed: number,
// 蓝方攻击持续时间
attackTimeBlue: number,
// 蓝方生存步数
episodeLengthsBlue: number | null,
// 红方生存步数
episodeLengthsRed: number | null,
// 蓝方胜次数
blueWinRounds: number,
// 红方胜次数
redWinRounds: number,
// 红方攻击持续时间
attackTimeRed: number,
// 能量优势序列（JSON数组，1=优势，0=劣势）
energyAdvantage: NullableString,
// 蓝方轨迹纬度序列（JSON数组）
trajectoryBlueLat: NullableString,
// 蓝方轨迹经度序列（JSON数组
trajectoryBlueLon: NullableString,
// 蓝方轨迹高度序列（JSON数组）
trajectoryBlueAlt: NullableString,
// 红方轨迹纬度序列（JSON数组）
trajectoryRedLat: NullableString,
// 红方轨迹经度序列（JSON数组）
trajectoryRedLon: NullableString,
// 红方轨迹高度序列（JSON数组
trajectoryRedAlt: NullableString,
// 状态（1-正常，0-已删除）
status: number,
// 创建者
createBy: NullableString,
// 创建时间
createTime: NullableString,
// 备注
remark: NullableString,
normalizedBlueTrajectory: number[];
normalizedRedTrajectory: number[];
[key: string]: unknown;
}
export interface ModelDeductionDataResponse extends ApiDataResponse<ModelDeductionData[]> {
}
export interface ModelDeductionDetailsResponse extends ApiDataResponse<DeductionPod> {
}
export interface ModelDeductionPodStatus {
status: NullableString,
state: NullableString,
stateDescription: NullableString,
}
export interface ModelDeductionPodStatusResponse extends ApiDataResponse<ModelDeductionPodStatus> {
}

61
modeler/src/views/ai/builder/element.ts
View File

@@ -1,61 +0,0 @@
/*
* 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 } from '@/types';
import type { ModelParameters } from '@/views/ai/model/types';
export interface DraggableElement {
id: number | null,
key?: NullableString,
name: NullableString,
description: NullableString,
category: NullableString,
draggable: boolean,
parent?: DraggableElement,
children: DraggableElement[]
[key: string]: unknown;
}
export interface ModelElementPosition {
x: number;
y: number;
}
export interface ModelElementEdge {
key: NullableString;
sourceKey: NullableString;
sourceName: NullableString;
targetKey: NullableString;
targetName: NullableString;
}
export interface ModelBaseElement {
key: string;
name: string;
type: string;
width: number;
height: number;
position: ModelElementPosition;
category: NullableString;
element?: DraggableElement;
[key: string]: unknown;
}
export interface ModelElement extends ModelBaseElement {
// 连线
edges: ModelElementEdge[];
// 模型参数设置
parameters: ModelParameters;
}
export interface SavedGraphData {
nodes: ModelElement[];
edges: any[];
}

177
modeler/src/views/ai/builder/graph.ts
View File

@@ -1,177 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import { Edge, Graph, Path, Selection } from '@antv/x6';
import type { ModelElement } from './element';
import type { Connecting } from '@antv/x6/lib/graph/options';
import { createLineOptions } from './line';
Graph.registerConnector(
'sequenceFlowConnector',
(s, e) => {
const offset = 4;
const deltaY = Math.abs(e.y - s.y);
const control = Math.floor((deltaY / 3) * 2);
const v1 = { x: s.x, y: s.y + offset + control };
const v2 = { x: e.x, y: e.y - offset - control };
return Path.parse(
`
M ${s.x} ${s.y}
L ${s.x} ${s.y + offset}
C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
L ${e.x} ${e.y}
`,
).serialize();
},
true,
);
export const createGraphConnectingAttributes = (): Partial<Connecting> => {
const lineOptions = createLineOptions();
return {
snap: true, // 当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
allowBlank: false, // 是否允许连接到画布空白位置的点，默认为 true
allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
highlight: true, // 当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
connector: 'smooth',
connectionPoint: 'anchor', // 指定连接点，默认值为 boundary。
anchor: 'center',
// validateMagnet({ magnet }) {
// return magnet.getAttribute('port-group') !== 'top'
// },
// 验证连接
createEdge(this: Graph) {
const edge: Edge = this.createEdge({
shape: 'edge',
...lineOptions, // 应用动画配置
attrs: lineOptions.attrs,
animation: lineOptions.animation,
markup: lineOptions.markup,
})
return edge;
},
validateConnection(this: Graph, { sourceCell, targetCell }) {
console.error('validateConnection');
if (!sourceCell || !targetCell) return false;
// 核心逻辑：禁止节点连接自己（自环）
if (sourceCell === targetCell) {
return false;
}
// const sourceData = sourceCell.getData() as GraphElement;
const targetData = targetCell.getData() as ModelElement;
// 根节点不能作为子节点
if (targetData.type === 'startEvent') {
return false;
}
// 4. 新增核心逻辑：检查源节点是否已有出边（已连接其他节点）
// const hasOutgoingEdge = this.getOutgoingEdges(sourceCell);
// if (hasOutgoingEdge && hasOutgoingEdge.length > 1) {
// return false;
// }
// 检查是否已存在相同连接
// const edges: Edge[] = this.getEdges();
// const existingConnection = edges.find(edge =>
// edge.getSourceCell() === sourceCell &&
// edge.getTargetCell() === targetCell,
// );
//
// return !existingConnection;
return true;
},
};
};
export const createGraphCanvas = (container: HTMLDivElement, readonly: boolean = false): Graph => {
const graph = new Graph({
container: container,
grid: {
size: 20,
visible: true,
type: 'dot',
// color: '#e5e7eb'
},
// 确保启用了异步渲染
async: true,
panning: {
enabled: true,
eventTypes: ['leftMouseDown', 'mouseWheel'],
},
mousewheel: {
enabled: true,
modifiers: 'ctrl',
factor: 1.1,
maxScale: 1.5,
minScale: 0.5,
},
highlighting: {
magnetAdsorbed: {
name: 'stroke',
args: {
attrs: {
fill: '#fff',
stroke: '#31d0c6',
strokeWidth: 4,
},
},
},
},
connecting: createGraphConnectingAttributes(),
scaling: {
min: 0.5,
max: 2,
},
// 背景配置
background: {},
// 交互配置
interacting: (cellView) => {
if (readonly) {
return false; // 只读模式下禁用所有交互
}
// 确保边（edge）的顶点交互权限开启
if (cellView.cell.isEdge()) {
return {
vertexAddable: true, // 允许添加顶点
vertexMovable: true, // 允许移动顶点
vertexDeletable: true, // 允许删除顶点
edgeMovable: true, // 允许整体拖动连线
arrowheadMovable: true, // 允许拖动箭头调整端点
};
}
// 节点的交互配置（保持不变）
return {
nodeMovable: true,
};
},
});
graph.use(
new Selection({
multiple: true,
rubberEdge: true,
rubberNode: true,
modifiers: 'shift',
rubberband: true,
}),
);
return graph;
};

47
modeler/src/views/ai/builder/line.ts
View File

@@ -1,47 +0,0 @@
/*
* 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 { Shape } from '@antv/x6';
export const createLineOptions = (): any => {
return {
markup: [
{
tagName: 'circle',
selector: 'marker',
attrs: {
stroke: 'none',
r: 3,
},
},
...Shape.Edge.getMarkup() as any,
],
attrs: {
line: {
stroke: '#5da0df',
strokeWidth: 2,
strokeDasharray: ' ',
strokeDashoffset: 0,
},
marker: {
fill: '#5da0df',
atConnectionRatio: 0,
},
},
animation: [
[
{ 'attrs/marker/atConnectionRatio': 1 },
{
duration: 2000,
iterations: Infinity,
},
],
],
}
}

322
modeler/src/views/ai/builder/node.vue
View File

@@ -1,322 +0,0 @@
<template>
<a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
<a-card
:class="[
'ks-designer-node',
`ks-designer-${element?.category ?? 'model'}-node`
]"
hoverable
>
<template #title>
<a-space>
<span class="ks-designer-node-icon"></span>
<span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
</a-space>
</template>
<!-- 节点内容区域 -->
<div class="w-full" v-if="element?.category !== 'component'">
<div class="ks-designer-node-content">
<div
v-for="(item, index) in element?.element?.children || []"
:key="item.id || index"
class="ks-designer-node-row"
>
<div
:data-port="`in-${item.id || index}`"
:title="`入桩: ${item.name}`"
class="port port-in"
magnet="passive"
></div>
<!-- child名称 -->
<div class="ks-designer-node-name">
{{ item.name }}
</div>
<!-- 右侧出桩：只能作为连线源 -->
<div
:data-port="`out-${item.id || index}`"
:title="`出桩: ${item.name}`"
class="port port-out"
magnet="active"
></div>
</div>
<div v-if="!(element?.element?.children && element?.element?.children?.length > 0)" class="ks-designer-node-row">
<div class="port port-in" data-port="in-0" magnet="passive"></div>
<div class="ks-designer-node-name">
{{ element?.name ?? '-' }}
</div>
<div class="port port-out" data-port="out-0" magnet="active"></div>
</div>
</div>
</div>
<div class="w-full" v-else>
<p>隐藏纬度: {{ element?.parameters?.hiddenLatitude ?? '-' }}</p>
<p>激活函数: {{ element?.parameters?.activationFunction ?? '-' }}</p>
</div>
</a-card>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="delete">
<template #icon>
<DeleteOutlined />
</template>
删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { elementProps } from './props';
import type { ModelElement } from './element';
import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { Graph } from '@antv/x6';
export default defineComponent({
name: 'ModelElement',
components: {
SettingOutlined,
DeleteOutlined,
},
props: elementProps,
setup(_props) {
const element = ref<ModelElement | null>(
_props.node ? (_props.node.getData() as ModelElement) : null,
);
const updateKey = ref(0);
const isMenuVisible = ref(false);
// 获取画布实例
const getGraph = (): Graph | null => {
return _props.graph as Graph || null;
};
// 监听节点数据变化
const handleDataChange = () => {
if (_props.node) {
element.value = _props.node.getData() as ModelElement;
} else {
element.value = null;
}
updateKey.value++;
};
const handleVisibleChange = (visible: boolean) => {
isMenuVisible.value = visible;
};
const handleMenuClick = ({ key }: { key: string }) => {
if (key === 'delete') {
handleDelete();
}
};
const handleDelete = () => {
if (!_props.node) return;
const graph = getGraph();
if (graph) {
try {
// 先删除关联边
const connectedEdges = graph.getConnectedEdges(_props.node);
connectedEdges.forEach(edge => graph.removeEdge(edge));
// 再删除节点
graph.removeNode(_props.node);
console.info(`节点 ${_props.node.id} 已删除`);
} catch (error) {
console.error('删除节点失败:', error);
}
}
isMenuVisible.value = false;
};
onMounted(() => {
_props.node?.on('change:data', handleDataChange);
});
onUnmounted(() => {
_props.node?.off('change:data', handleDataChange);
});
return {
element,
handleMenuClick,
handleVisibleChange,
};
},
});
</script>
<style lang="less">
.ks-designer-node {
background: linear-gradient(150deg, #093866 1%, #1f69b3 55%);
border: 0;
border-radius: 8px;
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
.ant-card-head {
border: 0;
height: 38px;
min-height: 38px;
border-radius: 0;
color: #ddd;
font-size: 12px;
font-weight: normal;
padding: 0 20px;
}
.ks-designer-node-icon {
width: 15px;
height: 15px;
display: block;
position: absolute;
left: 8px;
top: 13px;
background: url('@/assets/icons/model-4.svg') center / 100% 100%;
}
.ks-designer-node-title {
font-size: 13px;
}
.ant-card-body {
color: #fff;
height: calc(100% - 38px);
border-radius: 0;
font-size: 12px;
padding: 8px 15px;
overflow-y: auto;
border-top: 1px solid #195693;
}
&.ks-designer-task-node {
background: linear-gradient(150deg, #20421b 1%, #4a6646 55%);
.ant-card-body {
border-top: 1px solid #466741;
}
.ks-designer-node-icon {
background: url('@/assets/icons/m-02.png') center / 100% 100%;
}
}
&.ks-designer-input-node {
background: linear-gradient(150deg, #083058 1%, #1e5d9b 55%);
.ant-card-body {
border-top: 1px solid #105ca7;
}
.ks-designer-node-icon {
background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
}
}
&.ks-designer-action-node {
background: linear-gradient(150deg, #343207 1%, #485010 55%);
.ant-card-body {
border-top: 1px solid #59550e;
}
.ks-designer-node-icon {
background: url('@/assets/icons/bg-fk-point.png') center / 100% 100%;
}
}
&.ks-designer-component-node {
background: linear-gradient(150deg, #06226b 1%, #1a43a7 55%);
.ant-card-body {
border-top: 1px solid #26448c;
}
}
&.ks-designer-control-node {
background: linear-gradient(150deg, #1d4f32 1%, #326a5d 55%);
.ant-card-body {
border-top: 1px solid #326a5d;
}
.ks-designer-node-icon {
background: url('@/assets/icons/bg-model-builder-card-title.png') center / 100% 100%;
}
}
// 连接桩容器样式
.ks-designer-node-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px; // 每个child行之间的间距
}
// 每个child行（包含左右桩+文本）
.ks-designer-node-row {
width: 100%;
display: flex;
align-items: center;
position: relative;
height: 24px; // 固定行高，保证桩对齐
}
// 连接桩基础样式
.port {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: crosshair;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgb(74 114 214 / 80%);
z-index: 10; // 确保桩在最上层
// X6 标记为可连线的磁体
magnet: true;
}
// 左侧入桩样式
.port-in {
background-color: #093866; // 青色：入桩
margin-right: 8px; // 与文本的间距
//border: 1px solid #093866;
// X6 只能作为连线目标（入）
magnet: passive;
box-shadow: none;
width: 20px;
height: 20px;
display: block;
background: url('@/assets/icons/point.svg') center / 100% 100%;
}
// 右侧出桩样式
.port-out {
margin-left: 8px; // 与文本的间距
margin-right: 5px;
// X6 只能作为连线源（出）
magnet: active;
box-shadow: none;
width: 20px;
height: 20px;
display: block;
background: url('@/assets/icons/arrow-right.svg') center / 100% 100%;
}
// 节点文本样式
.ks-designer-node-name {
flex: 1; // 占满中间空间
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>

51
modeler/src/views/ai/builder/ports.ts
View File

@@ -1,51 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 createPort = (name: string = 'top', args: Record<any, any> = { dx: 0 }) => {
return {
position: { name: name, args: args },
attrs: {
circle: {
r: 4, // 大小
magnet: true,
stroke: '#1b5e9f', // 边框颜色
strokeWidth: 1, // 边框大小
fill: '#3578bf', // 填充颜色
style: {
visibility: 'visible', // 是否可见
},
},
},
};
};
export const createPorts = (top: boolean = true, right: boolean = true, bottom: boolean = true, left: boolean = true) => {
const groups: any = {};
const items: any = [];
if (top) {
groups['top'] = createPort('top');
items.push({ group: 'top', id: 'top' });
}
if (right) {
groups['right'] = createPort('right');
items.push({ group: 'right', id: 'right' });
}
if (bottom) {
groups['bottom'] = createPort('bottom');
items.push({ group: 'bottom', id: 'bottom' });
}
if (left) {
groups['left'] = createPort('left');
items.push({ group: 'left', id: 'left' });
}
return {
groups: groups,
items: items,
};
};

29
modeler/src/views/ai/builder/props.ts
View File

@@ -1,29 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import { Graph, Node } from '@antv/x6';
import { type ExtractPropTypes, type PropType } from 'vue';
import type { ModelElement } from './element';
export const elementProps = {
node: {
type: Object as PropType<Node>,
required: true,
},
graph: {
type: Object as PropType<Graph>,
required: true,
},
element: {
type: Object as PropType<ModelElement>,
required: false,
},
};
export type ElementPropsType = ExtractPropTypes<typeof elementProps>

70
modeler/src/views/ai/config.ts
View File

@@ -1,70 +0,0 @@
/*
* 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 menuMap = [
{
key: '0',
title: '指挥决策规则库管理',
path: '/app/ai/project/management',
},
{
key: '1',
title: '智能体构建工具',
children: [
{
key: '1-1',
title: '智能体管理',
path: '/app/ai/model/management',
},
],
},
{
key: '2',
title: 'AI模型训练',
children: [
{
key: '2-0',
title: '训练任务管理',
path: '/app/ai/training/task/management',
},
{
key: '2-1',
title: '训练任务配置',
path: '/app/ai/training/task/configurer',
},
// {
// key: '2-4',
// title: '训练任务监控',
// path: '/app/ai/training/task/monitor',
// },
],
},
{
key: '3',
title: '博弈竞赛应用',
children: [
{
key: '3-1',
title: '博弈竞赛单元运行环境',
path: '/app/ai/applications/gambling',
},
{
key: '3-2',
title: '仿真测试推演脚本',
type: 'open-script-window'
},
],
},
{
key: '2-3',
title: '训练资源监控',
path: '/app/ai/training/resources/monitor',
children: []
},
];

47
modeler/src/views/ai/dashboard.vue
View File

@@ -1,47 +0,0 @@
<template>
<Wrapper>
<div class="w-screen min-h-screen flex justify-center items-center p-5 box-border">
<div class="text-center flex flex-col gap-6 items-center">
<h1 class="m-0 text-4xl font-normal text-gray-900">智能体研发训练一体化工具</h1>
<div class="flex justify-center">
<a-space class="mt-6 mb-6">
<a-button class="w-[100px]" type="primary">控制台</a-button>
<a-button class="w-[100px]">帮助文档</a-button>
</a-space>
</div>
<div class="text-left flex flex-col gap-6 items-center">
<a-row :gutter="40">
<a-col :span="8">
<a-card :bordered="false" class="dashboard-card h-[150px]" title="开发" @click="gotoPage('/app/ai/model/design')">
模型构建、学习算法和训练方法配置
</a-card>
</a-col>
<a-col :span="8">
<a-card :bordered="false" class="dashboard-card h-[150px]" title="训练" @click="gotoPage('/app/ai/training')">
模型部署、训练配置与评估可视化
</a-card>
</a-col>
<a-col :span="8">
<a-card :bordered="false" class="dashboard-card h-[150px]" title="应用" @click="gotoPage('/app/ai/applications')">
模型发布应用、推理优化
</a-card>
</a-col>
</a-row>
</div>
</div>
</div>
</Wrapper>
</template>
<script setup>
import { Wrapper } from '@/wrapper';
import { useRouter } from 'vue-router';
const router = useRouter();
const gotoPage = (path) => {
router.push({
path: path,
});
};
</script>

274
modeler/src/views/ai/finder.vue
View File

@@ -1,274 +0,0 @@
<template>
<div class="ks-finder">
<a-input-search
v-model:value="currentPath"
:placeholder="placeholder"
:readonly="true"
:size="size"
@search="openFinder"
>
<!-- <template #enterButton>-->
<!-- <a-button>Custom</a-button>-->
<!-- </template>-->
</a-input-search>
<a-modal @cancel="()=> modalVisible = false" class="ks-finder-modal" :open="modalVisible" :title="title" centered width="50%">
<div class="ks-finder-list">
<a-row :gutter="15">
<a-col :span="4" v-for="file in files">
<div :class="['ks-finder-item',currentPath === file.path ? 'selected' : '']"
@click="()=> handleClick(file)"
@dblclick="()=> handleDbclick(file)">
<a-tooltip>
<template #title>
{{ file.name }}
</template>
<div class="ks-finder-item-icon">
<FolderFilled v-if="file.directory" />
<FileOutlined v-else />
</div>
</a-tooltip>
<div class="ks-finder-item-name">
{{ getFilename(file.name) }}
</div>
</div>
</a-col>
</a-row>
</div>
<template #footer>
<a-space>
<a-button style="width:120px;" @click="()=> handleCancel()">取消</a-button>
<a-button style="width:120px;" @click="()=> handleSelect()">确定</a-button>
</a-space>
</template>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import { FileOutlined, FolderFilled } from '@ant-design/icons-vue';
import { findFinderBrowser } from './api';
import type { FinderBrowser } from './types';
import type { NullableString } from '@/types';
export default defineComponent({
components: {
FileOutlined,
FolderFilled,
},
props: {
visible: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: true,
},
onlyDirectory: {
type: Boolean,
default: true,
},
required: {
type: Boolean,
default: true,
},
path: {
type: [String, null],
default: null,
},
size: {
type: String,
default: null,
},
title: {
type: String,
default: '请选择保存路径',
},
placeholder: {
type: String,
default: '请选择保存路径',
},
},
emits: ['cancel', 'select'],
setup(props, { emit }) {
const modalVisible = ref<boolean>(props.visible);
const currentPath = ref<string>(props.path ?? '');
const files = ref<FinderBrowser[]>([]);
const currentFile = ref<FinderBrowser|null>(null)
const openFinder = () => {
modalVisible.value = true;
};
const loadPaths = (_p: string = '') => {
files.value = [
{
name: 'home',
path: '/home',
directory: true,
children: []
},
];
if(!props.onlyDirectory){
files.value.push(...[
{
name: '空战博弈智能体模型1-100轮.pth',
path: '/空战博弈智能体模型1-100轮.pth',
directory: false,
children: []
},
{
name: '空战博弈智能体模型1-1000轮.pth',
path: '/空战博弈智能体模型1-1000轮.pth',
directory: false,
children: []
},
])
}
// findFinderBrowser(p).then(r => {
// files.value = r.data ?? [];
// });
};
watch(() => props.path, (n: any) => {
currentPath.value = n;
loadPaths(n);
});
watch(() => props.visible, (n: boolean) => {
modalVisible.value = true;
});
const getFilename = (n: NullableString) => {
if (n) {
return n.length > 20 ? (n.substring(0, 24) + '...') : n;
}
return n;
};
const handleClick = (file: FinderBrowser) => {
currentPath.value = file.path;
currentFile.value = file;
};
const handleDbclick = (file: FinderBrowser) => {
// loadPaths(file.path);
};
const handleCancel = () => {
emit('cancel');
modalVisible.value = false;
};
const handleSelect = () => {
if (props.required && !currentPath.value) {
message.error('请选择文件.');
return;
}
modalVisible.value = false;
emit('select', currentPath.value, currentFile.value);
};
loadPaths();
return {
modalVisible,
currentPath,
openFinder,
files,
loadPaths,
getFilename,
handleClick,
handleDbclick,
handleCancel,
handleSelect,
};
},
});
</script>
<style lang="less">
.ks-finder-modal {
.ant-modal-content {
height: 68vh;
}
.ant-modal-close {
position: absolute;
top: 30px;
}
.ant-modal-header {
height: 48px;
.ant-modal-title {
line-height: 50px;
}
}
.ant-modal-body {
}
.ks-finder-list {
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #1c2136;
padding: 15px;
height: 50vh;
}
.ks-finder-item {
text-align: center;
cursor: pointer;
height: 120px;
border: 1px solid transparent;
padding: 10px;
margin-bottom: 15px;
&:hover {
border-color: #4e4f70;
.anticon {
color: #99d8fb;
}
}
&.selected {
border-color: #4e4f70;
.anticon {
color: #fff;
}
}
}
.ks-finder-item-icon {
height: 70px;
width: 100%;
.anticon {
margin-bottom: 5px;
color: #6abfef;
font-size: 70px;
}
.anticon-file {
font-size: 50px;
}
}
.ks-finder-item-name {
color: #a2b1ba;
font-size: 12px;
}
}
</style>

77
modeler/src/views/ai/header.vue
View File

@@ -1,77 +0,0 @@
<template>
<a-layout-header class="ks-layout-header">
<a-flex>
<div class="ks-layout-header-logo">
<router-link :to="{path: '/app/ai/project/management'}">决策管理</router-link>
</div>
<!-- <div class="ks-layout-header-actions">-->
<!-- <span class="dev top active">开发</span>-->
<!-- <span class="training bottom">训练</span>-->
<!-- <span class="apps top">博弈对抗</span>-->
<!-- </div>-->
<div class="ks-layout-header-right">
<a-space size="large">
<span><QuestionCircleOutlined /> 帮助文档</span>
<span>{{ currentDateTime }}</span>
</a-space>
<a-space style="margin-left: 20px;cursor: pointer">
<a-dropdown trigger="click">
<a-avatar style="background: #132f6c">
{{ displayName?.charAt(0) }}
</a-avatar>
<template #overlay>
<a-menu @click="handleLogout">
<a-menu-item key="logout">
退出登录
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</div>
</a-flex>
</a-layout-header>
</template>
<script lang="ts" setup>
import { computed, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { formatDatetime } from '@/utils/datetime';
import { useUserSession } from '@/hooks';
const router = useRouter();
const session = useUserSession();
const avatar = ref<string | null>(null);
avatar.value = session?.details.value?.user?.avatar ?? null;
const displayName = computed((): string => {
let value = session?.details.value?.user?.nickName ?? session?.details.value?.user?.userName;
if (value) {
return value as string;
}
return '';
});
const currentDateTime = ref('');
const updateCurrentDateTime = () => {
currentDateTime.value = formatDatetime(new Date());
};
updateCurrentDateTime();
const timer = setInterval(updateCurrentDateTime, 1000);
const handleLogout = () => {
session.logout().then(() => {
router.push({
path: '/signin',
});
});
};
onUnmounted(() => {
clearInterval(timer);
});
</script>

47
modeler/src/views/ai/layout.vue
View File

@@ -1,47 +0,0 @@
<template>
<Wrapper>
<a-layout :class="['bg-transparent', collapsed ? 'sidebar-collapsed' : '']" style="background: transparent;transition: all 0.2s, background 0s;">
<Header />
<a-layout class="ks-layout-body">
<slot name="body">
<Sidebar v-if="!collapsed"/>
<a-layout-content class="ks-layout-main">
<div class="ks-layout-container">
<slot></slot>
</div>
</a-layout-content>
</slot>
</a-layout>
</a-layout>
<a-float-button
shape="circle"
type="primary"
:style="{
left: '30px',
}"
@click="()=> collapsed = !collapsed"
>
<template #icon>
<a-tooltip>
<template #title>
{{collapsed ? '展开' : '收起'}}菜单
</template>
<MenuUnfoldOutlined v-if="collapsed"/>
<MenuFoldOutlined v-else/>
</a-tooltip>
</template>
</a-float-button>
</Wrapper>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons-vue';
import Sidebar from './sidebar.vue';
import Header from './header.vue';
import { Wrapper } from '@/components/wrapper';
const collapsed = ref<boolean>(false);
</script>

58
modeler/src/views/ai/menu.vue
View File

@@ -1,58 +0,0 @@
<template>
<template v-if="menu.children && menu.children.length > 0">
<a-sub-menu :key="menu.key">
<template #title>
<span>{{ menu.title }}</span>
</template>
<Menu
v-for="child in menu.children"
:key="child.key"
:menu="child"
@click="handleChildClick"
/>
</a-sub-menu>
</template>
<a-menu-item
v-else
:key="menu.key"
@click="handleLeafClick"
>
<span class="ks-menu-item-label">{{ menu.title }}</span>
</a-menu-item>
</template>
<script lang="ts" setup>
// 定义菜单项的类型（与父组件保持一致）
export interface MenuItem {
key: string;
title: string;
path?: string;
type?: string;
children?: MenuItem[];
hidden?: boolean;
}
// 定义组件的 props
const props = defineProps<{
menu: MenuItem; // 单个菜单项数据
}>();
// 定义组件的事件
const emit = defineEmits<{
(e: 'click', menuItem: MenuItem): void; // 点击事件，传递菜单项
}>();
/**
* 处理叶子菜单点击
*/
const handleLeafClick = () => {
emit('click', props.menu);
};
/**
* 处理子菜单点击（递归传递）
*/
const handleChildClick = (menuItem: MenuItem) => {
emit('click', menuItem);
};
</script>

47
modeler/src/views/ai/model/algorithm-card.vue
View File

@@ -1,47 +0,0 @@
<template>
<a-card class="ks-model-builder-card algorithm-card">
<template #title>
<span class="ks-model-builder-title-icon icon-grid"></span>智能体算法组件
</template>
<div class="w-full">
<a-form layout="vertical">
<a-form-item label="模糊规则类">
<a-tooltip placement="right">
<template #title>模糊规则类核心围绕隶属度函数、模糊规则类型、推理方法、去模糊化、应用场景展开，涵盖经典与拓展类型</template>
<a-select show-search v-model:value="fuzzyValue">
<a-select-option :value="item.id" v-for="item in fuzzy">{{item.name}}</a-select-option>
</a-select>
</a-tooltip>
</a-form-item>
<a-form-item label="启发式算法类">
<a-tooltip placement="right">
<template #title>启发式算法类分为传统启发式、元启发式、拓展启发式，覆盖搜索、优化、迭代全场景</template>
<a-select show-search v-model:value="heuristicValue">
<a-select-option :value="item.id" v-for="item in heuristic">{{item.name}}</a-select-option>
</a-select>
</a-tooltip>
</a-form-item>
<a-form-item label="神经网络类">
<a-tooltip placement="right">
<template #title>神经网络类围绕网络结构、激活函数、训练策略、应用场景展开，涵盖经典与深度学习模型</template>
<a-select show-search v-model:value="neuralValue">
<a-select-option :value="item.id" v-for="item in neural">{{item.name}}</a-select-option>
</a-select>
</a-tooltip>
</a-form-item>
</a-form>
</div>
</a-card>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import fuzzy from './rules/fuzzy.json';
import heuristic from './rules/heuristic.json';
import neural from './rules/neural.json';
const fuzzyValue = ref<number>(1);
const heuristicValue = ref<number>(1);
const neuralValue = ref<number>(1);
</script>

48
modeler/src/views/ai/model/api.ts
View File

@@ -1,48 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import request from '@/utils/request';
import type { Model, ModelQueryResult, ModelResult, NetworkModelResult, ObservationType, ObservationTypeResult, RewardDesign, RewardDesignResult } from './types';
import type { ApiDataResponse, BasicResponse } from '@/types';
export const findAllNetworkModel = (): Promise<NetworkModelResult> => {
return request.get<NetworkModelResult>('/networkModel/all');
};
export const findRewardDesignByQuery = (query: Partial<RewardDesign> = {}): Promise<RewardDesignResult> => {
return request.get<RewardDesignResult>('/rewardDesign/list', query);
};
export const findObservationTypeByQuery = (query: Partial<ObservationType> = {}): Promise<ObservationTypeResult> => {
return request.get<ObservationTypeResult>('/observationType/list', query);
};
export const findModelByQuery = (query: Partial<Model> = {}): Promise<ModelQueryResult> => {
return request.get<ModelQueryResult>('/model/list', query);
};
export const findAllModels = (): Promise<ApiDataResponse<Model[]>> => {
return request.get<ApiDataResponse<Model[]>>('/model/all');
};
export const findOneModelById = (id: number | string): Promise<ModelResult> => {
return request.get<ModelResult>(`/model/get/${id}`);
};
export const createModel = (rt: Partial<Model>): Promise<BasicResponse> => {
return request.postJson<BasicResponse>('/model/add', rt);
};
export const updateModel = (rt: Partial<Model>): Promise<BasicResponse> => {
return request.putJson<BasicResponse>('/model/edit', rt);
};
export const deleteModel = (id: number | string): Promise<BasicResponse> => {
return request.delete<BasicResponse>(`/model/logic/${id}`);
};

148
modeler/src/views/ai/model/builder-inputs.vue
View File

@@ -1,148 +0,0 @@
<template>
<div class="ks-draggable-builder-right-inputs">
<div class="ks-draggable-items w-full">
<ul class="ks-draggable-item-list">
<!-- 父级列表项 -->
<li v-for="item in inputs" class="ks-draggable-item">
<div class="ks-draggable-item-holder"></div>
<div
class="ks-draggable-item-label"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, item)"
>
{{ item.name }}
</div>
<ul class="ks-draggable-item-list">
<li class="ks-draggable-item" v-for="children in item.children">
<div class="ks-draggable-item-holder"></div>
<div
class="ks-draggable-item-label"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, children, item)"
>
{{ children.name }}
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import { type ElementInput } from './inputs';
export default defineComponent({
components: { CheckOutlined },
props: {
inputs: { type: [Array] as PropType<ElementInput[]>, required: false, default: () => [] },
},
emits: ['element-drag-end', 'element-drag-start'],
setup(_props, { emit }) {
const handleDragEnd = (e: DragEvent) => {
emit('element-drag-end', e);
};
const handleDragStart = (e: DragEvent, nm: ElementInput, parent?: ElementInput) => {
nm.parent = parent ? {
id: parent?.id,
key: parent?.key,
name: parent?.name,
description: parent?.description,
category: parent?.category,
children: [],
draggable: true,
} : undefined;
emit('element-drag-start', e, nm);
};
return {
handleDragEnd,
handleDragStart,
};
},
});
</script>
<style lang="less">
.ks-draggable-item-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
.ks-draggable-item {
margin: 0;
padding: 0;
display: block;
width: 100%;
/* 移除float: left，避免布局异常影响拖拽事件 */
position: relative;
margin-top: 10px;
z-index: 2;
&:last-child {
margin-bottom: 0;
}
}
.ks-draggable-item-list {
padding-left: 80px;
width: 100%;
display: block;
/* 移除float: left */
position: relative;
z-index: 2;
&:before {
display: block;
content: " ";
position: absolute;
height: 100%;
width: 1px;
background: #0d385f;
bottom: 0;
top: -16px;
left: 40px;
z-index: 1;
}
.ks-draggable-item-holder {
position: absolute;
left: -40px;
width: 35px;
height: 1px;
background: #0d385f;
top: 50%;
}
}
.ks-draggable-item-label {
text-align: center;
padding: 5px 15px;
background: #0c385f;
border: 1px solid #0c385f;
cursor: grab; /* 改为grab，提示可拖拽 */
transition: all 0.3s;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 60%;
z-index: 2;
border-radius: 2px;
&:hover {
background: linear-gradient(359deg, #082f56 1%, #144f88 55%);
}
&:active {
cursor: grabbing; /* 拖拽中光标变化 */
}
}
}
</style>

90
modeler/src/views/ai/model/builder-left-components.vue
View File

@@ -1,90 +0,0 @@
<template>
<a-card class="ks-model-builder-card">
<template #title>
<span class="ks-model-builder-title-icon icon-grid"></span>智能体模型组件
</template>
<div class="w-full">
<div
v-for="nm in networkModels"
:key="nm.id"
class="ks-model-drag-item"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, nm)"
>
<img :alt="nm.name ?? '-'" class="icon" src="@/assets/icons/model-4.svg" />
<span class="desc">{{ nm.name }}</span>
</div>
</div>
</a-card>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { CheckCircleOutlined, CheckOutlined, CodeOutlined, RollbackOutlined, SaveOutlined } from '@ant-design/icons-vue';
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
import BuilderRight from './builder-right.vue';
import type { NetworkModel } from './types';
import { findAllNetworkModel } from './api';
import type { DraggableElement } from '../builder/element';
export default defineComponent({
components: {
CodeOutlined,
BuilderRight,
SaveOutlined,
CheckCircleOutlined,
CheckOutlined,
RollbackOutlined,
},
emits: ['element-drag-end', 'element-drag-start'],
setup(_props, { emit }) {
const networkModels = ref<NetworkModel[]>([]);
const loadNetworkModels = () => {
findAllNetworkModel().then(r => {
console.info('loadNetworkModels', r);
if (r.code === 200) {
networkModels.value = r.data ?? [];
}
});
};
const handleDragEnd = (e: DragEvent) => {
safePreventDefault(e);
safeStopPropagation(e);
console.log('拖动结束');
emit('element-drag-end', e);
};
const handleDragStart = (e: DragEvent, nm: NetworkModel) => {
const element: DraggableElement = {
id: nm.id,
key: null,
name: nm.name,
description: nm.name,
draggable: true,
category: 'component',
original: nm,
children: []
};
emit('element-drag-start', e, element);
};
const init = () => {
console.info('init');
loadNetworkModels();
};
// 初始化
onMounted(() => {
init();
});
return {
networkModels,
handleDragEnd,
handleDragStart,
};
},
});
</script>

88
modeler/src/views/ai/model/builder-right-control.vue
View File

@@ -1,88 +0,0 @@
<template>
<div class="control-container flex text-center w-full">
<div class="control-wrapper">
<h3 class="control-title">任务类</h3>
<div class="control-items">
<div v-for="item in taskInputs"
class="ks-model-item control-item"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, item)">
{{ item.name }}
</div>
</div>
</div>
<div class="control-wrapper">
<h3 class="control-title">机动控制类</h3>
<div class="control-items">
<div v-for="item in controlInputs"
class="ks-model-item control-item"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, item)">
{{ item.name }}
</div>
</div>
</div>
<div class="control-wrapper">
<h3 class="control-title">飞行参数类</h3>
<div class="control-items">
<div v-for="item in flyInputs"
class="ks-model-item control-item"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, item)">
{{ item.name }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, SavedGraphData } from './types';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import BuilderInputs from './builder-inputs.vue';
import { controlInputs, flyInputs, taskInputs } from './control-options';
import type { ElementInput } from './inputs';
export default defineComponent({
components: { CheckOutlined, BuilderInputs },
props: {
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
saved: { type: Object as PropType<SavedGraphData>, required: false },
},
emits: ['element-drag-end', 'element-drag-start'],
setup(_props, { emit }) {
const handleDragEnd = (e: DragEvent) => {
emit('element-drag-end', e);
};
const handleDragStart = (e: DragEvent, nm: ElementInput, parent?: ElementInput) => {
nm.parent = parent ? {
id: parent?.id,
key: parent?.key,
name: parent?.name,
description: parent?.description,
category: parent?.category,
children: [],
draggable: true,
} : undefined;
emit('element-drag-start', e, nm);
};
return {
handleDragEnd,
handleDragStart,
taskInputs,
controlInputs,
flyInputs,
};
},
});
</script>

60
modeler/src/views/ai/model/builder-right-manager.vue
View File

@@ -1,60 +0,0 @@
<template>
<div class="control-container text-center w-full">
<a-row :gutter="6">
<a-col :span="12" v-for="item in managerInputs">
<div class="ks-model-item" style="width:100%;"
draggable="true"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, item)">
{{ item.name }}
</div>
</a-col>
</a-row>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, SavedGraphData } from './types';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import BuilderInputs from './builder-inputs.vue';
import { managerInputs } from './control-options';
import type { ElementInput } from './inputs';
export default defineComponent({
components: { CheckOutlined, BuilderInputs },
props: {
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
saved: { type: Object as PropType<SavedGraphData>, required: false },
},
emits: ['element-drag-end', 'element-drag-start'],
setup(_props, { emit }) {
const handleDragEnd = (e: DragEvent) => {
emit('element-drag-end', e);
};
const handleDragStart = (e: DragEvent, nm: ElementInput, parent?: ElementInput) => {
nm.parent = parent ? {
id: parent?.id,
key: parent?.key,
name: parent?.name,
description: parent?.description,
category: parent?.category,
children: [],
draggable: true,
} : undefined;
emit('element-drag-start', e, nm);
};
return {
handleDragEnd,
handleDragStart,
managerInputs,
};
},
});
</script>

49
modeler/src/views/ai/model/builder-right-situation.vue
View File

@@ -1,49 +0,0 @@
<template>
<BuilderInputs
:inputs="elementInputs"
@element-drag-start="(e:any,v:any,d:any)=> $emit('element-drag-start',e,v,d)"
@element-drag-end="(e:any,v:any)=> $emit('element-drag-end',e,v)"
/>
</template>
<script lang="ts">
import { defineComponent, onMounted, type PropType, ref } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, SavedGraphData } from './types';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import { type ElementInput, resolveElementInputs } from './inputs';
import BuilderInputs from './builder-inputs.vue';
export default defineComponent({
components: { CheckOutlined, BuilderInputs },
props: {
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
saved: { type: Object as PropType<SavedGraphData>, required: false },
},
emits: ['element-drag-end', 'element-drag-start'],
setup(_props, { emit }) {
const elementInputs = ref<ElementInput[]>([]);
const loadInputs = () => {
elementInputs.value = [];
resolveElementInputs().then(r => {
elementInputs.value = r;
console.log('elementInputs.value', elementInputs.value);
});
};
const load = () => {
loadInputs();
};
onMounted(() => load());
return {
elementInputs,
};
},
});
</script>

376
modeler/src/views/ai/model/builder-right-v1.vue
View File

@@ -1,376 +0,0 @@
<template>
<div class="ks-model-builder-right">
<!-- 顶部标签页 -->
<a-tabs v-model:activeKey="activeTopTabsKey" :class="['ks-model-builder-tabs parameters-tabs', currentElement ? 'multiply' : '']">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="输出态势接口">
<!-- <a-flex class="w-full mb-1">-->
<!-- <a-select style="width: 77%"></a-select>-->
<!-- <a-button style="margin-left: auto">导入</a-button>-->
<!-- </a-flex>-->
<div class="observation-items w-full">
<a-row :gutter="6">
<a-col v-for="ot in observationTypes" :key="ot.id" :span="12">
<a-tooltip placement="left" trigger="click">
<template #title>
<p>名称: {{ ot.typeName }}</p>
<p>说明: {{ ot.description }}</p>
</template>
<div
:class="['ks-model-item', savedGraphData.observations.some(sot => sot.id === ot.id) ? 'selected' : '']"
style="width:100%; cursor: pointer"
@click="toggleObservationType(ot)"
>
{{ ot.typeName }}
</div>
</a-tooltip>
</a-col>
</a-row>
</div>
<div class="w-full">
<div class="ks-model-item selected-total-item" style="margin-top:2px;">
已选择 {{ savedGraphData.observations.length }} 组组件
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="参数设置" v-if="currentElement">
<a-form
:label-col="{span:6}"
:model="currentElementParameters"
autocomplete="off"
layout="horizontal"
name="basic"
>
<a-form-item label="隐藏纬度" name="hiddenLatitude">
<a-input v-model:value="currentElementParameters.hiddenLatitude" placeholder="请输入隐藏纬度" />
</a-form-item>
<a-form-item label="激活函数" name="activationFunction">
<a-select v-model:value="currentElementParameters.activationFunction" placeholder="请选择激活函数">
<a-select-option value="relu">relu</a-select-option>
<a-select-option value="tahn">tahn</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
<!-- 底部标签页：动作空间设计 -->
<a-tabs v-model:activeKey="activeBottomTabs2Key" class="ks-model-builder-tabs design-tabs">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="接收控制指令接口">
<div class="w-full">
<a-space>
<a-button size="small" type="primary" @click="addActionSpace">添加</a-button>
</a-space>
<a-table
:columns="actionSpaceColumns"
:dataSource="savedGraphData.actionSpaces"
:pagination="false"
:scroll="{ x: 600 }"
class="mt-1"
row-key="id"
size="small"
style="overflow-y:auto;height:20vh;"
>
<template #bodyCell="{column, record, index}">
<template v-if="column.dataIndex === 'index'">
{{ index + 1 }}
</template>
<template v-if="column.dataIndex === 'entry'">
<a-select v-model:value="record.entry" size="small" style="width:80px;" @change="()=> updateModel()">
<a-select-option value="f16">F16</a-select-option>
</a-select>
</template>
<template v-if="column.dataIndex === 'type'">
<a-select v-model:value="record.type" size="small" style="width:80px;" @change="()=> updateModel()">
<a-select-option value="1">机动</a-select-option>
</a-select>
</template>
<template v-if="column.dataIndex === 'args'">
<div class="w-full mb-2">
<a-space>
<span>俯仰角</span>
<a-input-number v-model:value="record.args.pitch.min" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
-
<a-input-number v-model:value="record.args.pitch.max" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
</a-space>
</div>
<div class="w-full mb-2">
<a-space>
<span>偏航角</span>
<a-input-number v-model:value="record.args.yaw.min" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
-
<a-input-number v-model:value="record.args.yaw.max" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
</a-space>
</div>
<div class="w-full mb-2">
<a-space>
<span>滚转角</span>
<a-input-number v-model:value="record.args.roll.min" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
-
<a-input-number v-model:value="record.args.roll.max" max="180" min="-180" size="small" style="width:60px;" @change="()=> updateModel()"/>
</a-space>
</div>
</template>
<template v-if="column.dataIndex === '_actions'">
<a-button
class="btn-link-delete"
danger
size="small"
type="text"
@click="deleteActionSpace(record.id)"
>
删除
</a-button>
</template>
</template>
</a-table>
</div>
</a-tab-pane>
</a-tabs>
<!-- 底部标签页：奖励函数 -->
<a-tabs v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs design-tabs">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="奖励函数设计">
<div class="reward-items w-full">
<a-row :gutter="6">
<a-col v-for="rd in rewardDesigns" :key="rd.id" :span="12">
<a-tooltip placement="left" trigger="click">
<template #title>
<p>名称: {{ rd.name }}</p>
<p>说明: {{ rd.description }}</p>
</template>
<div
:class="['ks-model-item', savedGraphData.rewards.some(sot => sot.id === rd.id) ? 'selected' : '']"
style="width:100%; cursor: pointer"
@click="toggleRewardDesign(rd)"
>
{{ rd.name }}
</div>
</a-tooltip>
</a-col>
</a-row>
<div class="w-full">
<div class="ks-model-item selected-total-item" style="margin-top:2px;">
已选择 {{ savedGraphData.rewards.length }} 组组件
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, type PropType, ref, watch } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, ModelParameters, ObservationType, RewardDesign, SavedGraphData } from './types';
import { findObservationTypeByQuery, findRewardDesignByQuery } from './api';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import { generateKey } from '@/utils/strings';
import {defaultSavedGraphData} from './config'
const actionSpaceColumns = [
{ title: '序号', dataIndex: 'index', key: 'index', width: 40 },
{ title: '动作实体', dataIndex: 'entry', key: 'entry', width: 80 },
{ title: '动作类型', dataIndex: 'type', key: 'type', width: 80 },
{ title: '动作参数', dataIndex: 'args', key: 'args', width: 200 },
{ title: '操作', dataIndex: '_actions', key: '_actions', width: 60 },
];
export default defineComponent({
components: { CheckOutlined },
props: {
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
saved: { type: Object as PropType<SavedGraphData>, required: false },
},
emits: ['update-element','update-model'],
setup(props, { emit }) {
const activeTopTabsKey = ref<string>('1');
const activeBottomTabsKey = ref<string>('1');
const activeBottomTabs2Key = ref<string>('1');
const savedGraphData = ref<SavedGraphData>(props.saved ? props.saved : {...defaultSavedGraphData});
const resolveModelParameters = (ele?: ModelElement | null): ModelParameters => {
if (!ele || !ele.parameters) {
return {
hiddenLatitude: null,
activationFunction: 'relu',
};
}
return {
hiddenLatitude: ele.parameters.hiddenLatitude ?? '33',
activationFunction: ele.parameters.activationFunction ?? 'relu',
};
};
const currentNode = ref<Node | null>(props.node ?? null);
const currentElement = ref<ModelElement | null>(null);
const currentElementParameters = ref<ModelParameters>(resolveModelParameters());
const observationTypes = ref<ObservationType[]>([]);
const rewardDesigns = ref<RewardDesign[]>([]);
const loadObservationTypes = () => {
findObservationTypeByQuery().then(r => {
observationTypes.value = r.rows ?? [];
});
};
const loadRewardDesigns = () => {
findRewardDesignByQuery().then(r => {
rewardDesigns.value = r.rows ?? [];
});
};
const load = () => {
loadObservationTypes();
loadRewardDesigns();
};
const resolveNode = (n?: Node | null | undefined) => {
currentNode.value = n ?? null;
if (n) {
const data = n.getData();
if (data) {
currentElement.value = data as ModelElement;
currentElementParameters.value = resolveModelParameters(currentElement.value);
}
} else {
currentElement.value = null;
currentElementParameters.value = resolveModelParameters();
}
};
const resolveGraph = (d?: SavedGraphData | null | undefined)=> {
savedGraphData.value = JSON.parse(JSON.stringify({...defaultSavedGraphData, ...d ?? {}}))
}
const updateNode = () => {
if (currentNode.value && currentElement.value) {
const newElement = JSON.parse(JSON.stringify({
...currentElement.value,
parameters: currentElementParameters.value,
})) as ModelElement;
emit('update-element', newElement);
currentNode.value.replaceData(newElement);
}
};
const updateModel = ()=> {
console.info('update model', savedGraphData.value)
emit('update-model',JSON.parse(JSON.stringify(savedGraphData.value || {})))
}
const toggleObservationType = (ot: ObservationType) => {
const index = savedGraphData.value.observations.findIndex(sot => sot.id === ot.id);
if (index > -1) {
savedGraphData.value.observations.splice(index, 1);
} else {
savedGraphData.value.observations.push(ot);
}
updateModel();
};
const toggleRewardDesign = (rd: RewardDesign) => {
const index = savedGraphData.value.rewards.findIndex(srd => srd.id === rd.id);
if (index > -1) {
savedGraphData.value.rewards.splice(index, 1);
} else {
savedGraphData.value.rewards.push(rd);
}
updateModel();
};
const addActionSpace = () => {
savedGraphData.value.actionSpaces.push({
id: generateKey('action_space'), // 添加唯一ID
entry: 'f16',
type: '1',
args: {
// 俯仰角
pitch: {
min: 0,
max: 0,
},
// 偏航角
yaw: {
min: 0,
max: 0,
},
// 滚转角
roll: {
min: 0,
max: 0,
},
},
});
updateModel();
};
const deleteActionSpace = (id: string) => {
const idx = savedGraphData.value.actionSpaces.findIndex(item => item.id === id);
if (idx > -1) {
// 使用 splice 确保响应式更新
savedGraphData.value.actionSpaces.splice(idx, 1);
// 确保数组引用改变，触发 watch
savedGraphData.value.actionSpaces = [...savedGraphData.value.actionSpaces];
updateModel();
// 立即更新节点
console.info(`已删除动作空间项 id=${id}`);
}
};
watch(
() => props.node,
(n?: Node | null | undefined) => resolveNode(n),
{ deep: true, immediate: true },
);
watch(
() => props.saved,
(n?: SavedGraphData | null | undefined) => resolveGraph(n),
{ deep: true, immediate: true },
);
watch(() => currentElementParameters.value, () => updateNode(), { deep: true });
// watch(() => savedGraphData.value, () => updateModel(), { deep: true });
onMounted(() => load());
return {
actionSpaceColumns,
activeTopTabsKey,
activeBottomTabsKey,
activeBottomTabs2Key,
currentElement,
observationTypes,
rewardDesigns,
currentElementParameters,
toggleObservationType,
toggleRewardDesign,
addActionSpace,
deleteActionSpace,
savedGraphData,
updateModel,
};
},
});
</script>

281
modeler/src/views/ai/model/builder-right.vue
View File

@@ -1,281 +0,0 @@
<template>
<div class="ks-model-builder-right">
<!-- 顶部标签页 -->
<a-tabs v-model:activeKey="activeTopTabsKey" :class="['ks-model-builder-tabs parameters-tabs', currentElement ? 'multiply' : '']">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="输出态势接口">
<BuilderRightSituation
:element="element"
:graph="graph"
:node="node"
:saved="savedGraphData"
@element-drag-start="(e: any, v:any, p: any)=> $emit('element-drag-start', e, v, p)"
@element-drag-end="(e:any)=> $emit('element-drag-end', e)"
/>
</a-tab-pane>
<a-tab-pane key="2" tab="参数设置" v-if="currentElement">
<a-form
:label-col="{span:6}"
:model="currentElementParameters"
autocomplete="off"
layout="horizontal"
name="basic"
>
<a-form-item label="隐藏纬度" name="hiddenLatitude">
<a-input v-model:value="currentElementParameters.hiddenLatitude" placeholder="请输入隐藏纬度" />
</a-form-item>
<a-form-item label="激活函数" name="activationFunction">
<a-select v-model:value="currentElementParameters.activationFunction" placeholder="请选择激活函数">
<a-select-option value="relu">relu</a-select-option>
<a-select-option value="tahn">tahn</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
<!-- 底部标签页：动作空间设计 -->
<a-tabs v-model:activeKey="activeBottomTabs2Key" class="ks-model-builder-tabs design-tabs">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="接收控制指令接口">
<BuilderRightControl
:element="element"
:graph="graph"
:node="node"
:saved="savedGraphData"
@element-drag-start="(e: any, v:any, p: any)=> $emit('element-drag-start', e, v, p)"
@element-drag-end="(e:any)=> $emit('element-drag-end', e)"
/>
</a-tab-pane>
</a-tabs>
<!-- 底部标签页：奖励函数 -->
<a-tabs v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs design-tabs">
<template #leftExtra>
<span class="ks-model-builder-title-icon icon-input"></span>
</template>
<a-tab-pane key="1" tab="容器控制管理接口">
<BuilderRightManager
:element="element"
:graph="graph"
:node="node"
:saved="savedGraphData"
@element-drag-start="(e: any, v:any, p: any)=> $emit('element-drag-start', e, v, p)"
@element-drag-end="(e:any)=> $emit('element-drag-end', e)"
/>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, type PropType, ref, watch } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import type { ModelElement, ModelParameters, ObservationType, RewardDesign, SavedGraphData } from './types';
import { findObservationTypeByQuery, findRewardDesignByQuery } from './api';
import type { Graph, Node, NodeProperties } from '@antv/x6';
import { generateKey } from '@/utils/strings';
import { defaultSavedGraphData } from './config';
import BuilderRightSituation from './builder-right-situation.vue';
import BuilderRightControl from './builder-right-control.vue';
import BuilderRightManager from './builder-right-manager.vue'
const actionSpaceColumns = [
{ title: '序号', dataIndex: 'index', key: 'index', width: 40 },
{ title: '动作实体', dataIndex: 'entry', key: 'entry', width: 80 },
{ title: '动作类型', dataIndex: 'type', key: 'type', width: 80 },
{ title: '动作参数', dataIndex: 'args', key: 'args', width: 200 },
{ title: '操作', dataIndex: '_actions', key: '_actions', width: 60 },
];
export default defineComponent({
components: { CheckOutlined, BuilderRightSituation, BuilderRightControl,BuilderRightManager },
props: {
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
saved: { type: Object as PropType<SavedGraphData>, required: false },
},
emits: ['update-element', 'update-model', 'element-drag-end', 'element-drag-start'],
setup(props, { emit }) {
const activeTopTabsKey = ref<string>('1');
const activeBottomTabsKey = ref<string>('1');
const activeBottomTabs2Key = ref<string>('1');
const savedGraphData = ref<SavedGraphData>(props.saved ? props.saved : {...defaultSavedGraphData});
const resolveModelParameters = (ele?: ModelElement | null): ModelParameters => {
if (!ele || !ele.parameters) {
return {
hiddenLatitude: null,
activationFunction: 'relu',
};
}
return {
hiddenLatitude: ele.parameters.hiddenLatitude ?? '33',
activationFunction: ele.parameters.activationFunction ?? 'relu',
};
};
const currentNode = ref<Node | null>(props.node ?? null);
const currentElement = ref<ModelElement | null>(null);
const currentElementParameters = ref<ModelParameters>(resolveModelParameters());
const observationTypes = ref<ObservationType[]>([]);
const rewardDesigns = ref<RewardDesign[]>([]);
const loadObservationTypes = () => {
findObservationTypeByQuery().then(r => {
observationTypes.value = r.rows ?? [];
});
};
const loadRewardDesigns = () => {
findRewardDesignByQuery().then(r => {
rewardDesigns.value = r.rows ?? [];
});
};
const load = () => {
loadObservationTypes();
loadRewardDesigns();
};
const resolveNode = (n?: Node | null | undefined) => {
currentNode.value = n ?? null;
if (n) {
const data = n.getData();
if (data) {
currentElement.value = data as ModelElement;
currentElementParameters.value = resolveModelParameters(currentElement.value);
}
} else {
currentElement.value = null;
currentElementParameters.value = resolveModelParameters();
}
};
const resolveGraph = (d?: SavedGraphData | null | undefined)=> {
savedGraphData.value = JSON.parse(JSON.stringify({...defaultSavedGraphData, ...d ?? {}}))
}
const updateNode = () => {
if (currentNode.value && currentElement.value) {
const newElement = JSON.parse(JSON.stringify({
...currentElement.value,
parameters: currentElementParameters.value,
})) as ModelElement;
emit('update-element', newElement);
currentNode.value.replaceData(newElement);
}
};
const updateModel = ()=> {
console.info('update model', savedGraphData.value)
emit('update-model',JSON.parse(JSON.stringify(savedGraphData.value || {})))
}
const toggleObservationType = (ot: ObservationType) => {
const index = savedGraphData.value.observations.findIndex(sot => sot.id === ot.id);
if (index > -1) {
savedGraphData.value.observations.splice(index, 1);
} else {
savedGraphData.value.observations.push(ot);
}
updateModel();
};
const toggleRewardDesign = (rd: RewardDesign) => {
const index = savedGraphData.value.rewards.findIndex(srd => srd.id === rd.id);
if (index > -1) {
savedGraphData.value.rewards.splice(index, 1);
} else {
savedGraphData.value.rewards.push(rd);
}
updateModel();
};
const addActionSpace = () => {
savedGraphData.value.actionSpaces.push({
id: generateKey('action_space'), // 添加唯一ID
entry: 'f16',
type: '1',
args: {
// 俯仰角
pitch: {
min: 0,
max: 0,
},
// 偏航角
yaw: {
min: 0,
max: 0,
},
// 滚转角
roll: {
min: 0,
max: 0,
},
},
});
updateModel();
};
const deleteActionSpace = (id: string) => {
const idx = savedGraphData.value.actionSpaces.findIndex(item => item.id === id);
if (idx > -1) {
// 使用 splice 确保响应式更新
savedGraphData.value.actionSpaces.splice(idx, 1);
// 确保数组引用改变，触发 watch
savedGraphData.value.actionSpaces = [...savedGraphData.value.actionSpaces];
updateModel();
// 立即更新节点
console.info(`已删除动作空间项 id=${id}`);
}
};
watch(
() => props.node,
(n?: Node | null | undefined) => resolveNode(n),
{ deep: true, immediate: true },
);
watch(
() => props.saved,
(n?: SavedGraphData | null | undefined) => resolveGraph(n),
{ deep: true, immediate: true },
);
watch(() => currentElementParameters.value, () => updateNode(), { deep: true });
// watch(() => savedGraphData.value, () => updateModel(), { deep: true });
onMounted(() => load());
return {
actionSpaceColumns,
activeTopTabsKey,
activeBottomTabsKey,
activeBottomTabs2Key,
currentElement,
observationTypes,
rewardDesigns,
currentElementParameters,
toggleObservationType,
toggleRewardDesign,
addActionSpace,
deleteActionSpace,
savedGraphData,
updateModel,
};
},
});
</script>

511
modeler/src/views/ai/model/builder.vue
View File

@@ -1,511 +0,0 @@
<template>
<Wrapper>
<a-layout class="bg-transparent" style="background: transparent">
<Header />
<a-layout class="ks-layout-body">
<slot name="body">
<div class="ks-model-builder-body">
<div class="ks-model-builder-left">
<a-card v-if="currentModel" class="ks-model-builder-card" style="height: 18vh;min-height: 18vh;">
<template #title>
<span class="ks-model-builder-title-icon icon-model"></span>智能体模型信息
</template>
<div class="w-full">
<a-flex class="mb-2">
<span style="width:80px; text-align: left; padding-right: 1px;">智能体名称: </span>
<span>{{ currentModel.name }}</span>
</a-flex>
<a-flex class="mb-2">
<span style="width:80px; text-align: left; padding-right: 1px;">所属工程: </span>
<span>{{ currentModel.projectSpaceName ?? '-' }}</span>
</a-flex>
<a-flex class="mb-2">
<span style="width:80px; text-align: left; padding-right: 1px;">创建时间: </span>
<span>{{ currentModel.createTime ?? '-' }}</span>
</a-flex>
<a-flex class="mb-2">
<span style="width:80px; text-align: left; padding-right: 1px;">模型描述: </span>
<span>{{ currentModel.description ?? '-' }}</span>
</a-flex>
</div>
</a-card>
<BuilderLeftComponents
@element-drag-end="handleDragEnd"
@element-drag-start="handleDragStart"
/>
<AlgorithmCard />
</div>
<div class="ks-model-builder-content">
<div class="ks-model-builder-actions">
<a-space>
<a-tooltip placement="top">
<template #title>
返回
</template>
<a-button class="ks-model-builder-goback" size="small" @click="goback">
<RollbackOutlined />
<span>返回</span>
</a-button>
</a-tooltip>
<a-tooltip v-if="graph && currentModel" placement="top">
<template #title>
保存
</template>
<a-popconfirm
title="确定保存?"
@confirm="handleSave"
>
<a-button class="ks-model-builder-save" size="small">
<CheckOutlined />
<span>保存</span>
</a-button>
</a-popconfirm>
</a-tooltip>
</a-space>
</div>
<div
ref="canvas"
class="ks-model-builder-canvas"
@dragenter="handleDragEnter"
@dragleave="handleDragLeave"
@drop="handleDrop"
@dragover.prevent
></div>
<TeleportContainer />
</div>
<BuilderRight
v-if="graph"
:element="selectedModelElement"
:saved="savedGraphData"
:graph="graph as any"
:node="selectedModelNode as any"
@element-drag-end="handleDragEnd"
@element-drag-start="handleDragStart"
@update-model="handleUpdateModel"
/>
</div>
</slot>
</a-layout>
</a-layout>
</Wrapper>
</template>
<script lang="ts">
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { getTeleport } from '@antv/x6-vue-shape';
import { Edge, Graph, Node, type NodeProperties } from '@antv/x6';
import { useRouter } from 'vue-router';
import { CheckCircleOutlined, CheckOutlined, CodeOutlined, RollbackOutlined, SaveOutlined } from '@ant-design/icons-vue';
import { Wrapper } from '@/components/wrapper';
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
import Header from '../header.vue';
import BuilderRight from './builder-right.vue';
import { useGraphCanvas } from '../builder/hooks';
import { registerNodeElement } from '../builder/register';
import type { Model, ModelElement, SavedGraphData } from './types';
import { findOneModelById, updateModel } from './api';
import { defaultSavedGraphData } from './config';
import AlgorithmCard from './algorithm-card.vue';
import BuilderLeftComponents from './builder-left-components.vue';
import type { DraggableElement } from '../builder/element';
import { createLineOptions } from '../builder/line';
import { createDraggableElement, createModelNode } from './utils';
const TeleportContainer = defineComponent(getTeleport());
registerNodeElement();
export default defineComponent({
components: {
AlgorithmCard,
CodeOutlined,
Wrapper,
Header,
BuilderRight,
SaveOutlined,
CheckCircleOutlined,
CheckOutlined,
RollbackOutlined,
TeleportContainer,
BuilderLeftComponents,
},
setup() {
const router = useRouter();
const canvas = ref<HTMLDivElement | null>(null);
const graph = ref<Graph | null>(null);
const currentZoom = ref<number>(1);
const draggedNodeData = ref<DraggableElement | null>(null);
const isDraggingOver = ref(false);
const currentModel = ref<Model | null>(null);
const selectedModelNode = ref<Node<NodeProperties> | null>(null);
const selectedModelElement = ref<ModelElement | null>(null);
const savedGraphData = ref<SavedGraphData>({...defaultSavedGraphData});
const goback = () => {
router.push({
path: '/app/ai/model/management',
});
};
const gobackWithError = (msg: string = '模型不存在') => {
message.error(msg);
goback();
};
const {
handleGraphEvent,
createCanvas,
zoomIn,
zoomOut,
fitToScreen,
centerContent,
resizeCanvas,
} = useGraphCanvas();
// 处理拖动开始
const handleDragStart = (e: DragEvent, nm: DraggableElement) => {
draggedNodeData.value = nm;
console.error('handleDragStart', nm);
if (e.dataTransfer) {
e.dataTransfer.setData('text/plain', JSON.stringify(draggedNodeData.value));
e.dataTransfer.effectAllowed = 'copyMove';
const dragPreview = document.createElement('div');
dragPreview.textContent = draggedNodeData.value.name || '';
dragPreview.style.cssText = `
position: absolute;
top: -1000px;
padding: 6px 12px;
background: #3b82f6;
color: white;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
`;
document.body.appendChild(dragPreview);
e.dataTransfer.setDragImage(dragPreview, dragPreview.offsetWidth / 2, dragPreview.offsetHeight / 2);
setTimeout(() => document.body.removeChild(dragPreview), 0);
}
console.log('开始拖动:', nm);
};
// 处理拖动结束
const handleDragEnd = (e: DragEvent) => {
safePreventDefault(e);
safeStopPropagation(e);
isDraggingOver.value = false;
console.log('拖动结束');
};
// 处理拖动进入
const handleDragEnter = (e: DragEvent) => {
safePreventDefault(e);
safeStopPropagation(e);
isDraggingOver.value = true;
};
const executeAnimate = () => {
// setTimeout(() => {
// if(graph.value){
// graph.value?.getEdges().forEach((edge: Edge) => {
// edge.attr('line/strokeDasharray', '40,4')
// edge.attr('line/style/animation', 'running-line 30s infinite linear')
// })
// }
// }, 500)
}
handleGraphEvent('edge:added', () => {
executeAnimate();
});
// 处理拖动离开
const handleDragLeave = (e: DragEvent) => {
safePreventDefault(e);
safeStopPropagation(e);
console.error('handleDragLeave', e);
if (canvas.value && e.relatedTarget &&
typeof e.relatedTarget === 'object' &&
'nodeType' in e.relatedTarget) {
// 使用 Element 类型而不是 x6 的 Node 类型
if (!canvas.value.contains(e.relatedTarget as Element)) {
isDraggingOver.value = false;
}
}
};
// 处理放置
const handleDrop = (e: DragEvent) => {
console.info('handleDrop', e);
safePreventDefault(e);
safeStopPropagation(e);
isDraggingOver.value = false;
if (!graph.value || !canvas.value || !draggedNodeData.value) {
console.error('无法放置节点: 缺少必要数据');
return;
}
try {
// 获取拖动的数据
const data = draggedNodeData.value as DraggableElement;
// 计算相对于画布的位置（考虑缩放）
const rect = canvas.value.getBoundingClientRect();
const scale = currentZoom.value || 1;
const x = (e.clientX - rect.left) / scale;
const y = (e.clientY - rect.top) / scale;
console.log('放置节点:', { ...data, x, y });
// 创建节点数据
const nodeData: ModelElement = createDraggableElement(data, x, y);
// 创建节点
const node = createModelNode(nodeData);
console.info('create node: ', nodeData, node);
// 将节点添加到画布
graph.value?.addNode(node as any);
console.log('节点已添加到画布:', node.id);
// 重置拖动数据
draggedNodeData.value = null;
} catch (error) {
console.error('放置节点时出错:', error);
}
};
const createElements = () => {
console.info('createElements', savedGraphData.value);
if (savedGraphData.value && graph.value) {
if (savedGraphData.value.nodes) {
savedGraphData.value.nodes.forEach(ele => {
const node = createModelNode(ele);
console.info('create node: ', ele);
// 将节点添加到画布
graph.value?.addNode(node as Node);
});
}
if (savedGraphData.value.edges) {
// 然后添加所有边，确保包含桩点信息
setTimeout(()=> {
savedGraphData.value.edges.forEach(edgeData => {
graph.value?.addEdge({
...edgeData,
...createLineOptions(),
});
});
}, 100) // 延迟一会儿,免得连线错位
}
}
};
// 初始化X6画布
const initGraph = () => {
if (!canvas.value) {
console.error('画布容器不存在');
return;
}
try {
graph.value = createCanvas(canvas.value);
console.log('画布初始化成功');
createElements();
// 监听缩放变化
handleGraphEvent('scale', ({ sx }: { sx: number }) => {
currentZoom.value = sx;
});
handleGraphEvent('blank:click', (args: any) => {
selectedModelNode.value = null;
selectedModelElement.value = null;
});
handleGraphEvent('node:click', (args: any) => {
const node = args.node as Node<NodeProperties>;
const newElement = node.getData() as ModelElement;
selectedModelNode.value = node;
selectedModelElement.value = null;
nextTick(() => {
selectedModelElement.value = newElement;
});
});
// 监听节点鼠标事件，显示/隐藏连接点
handleGraphEvent('node:mouseenter', (_ctx: any) => {
});
handleGraphEvent('node:mouseleave', (_ctx: any) => {
});
} catch (error) {
console.error('初始化画布失败:', error);
}
};
// 监听窗口大小变化
const handleResize = () => {
nextTick(() => {
resizeCanvas();
});
};
const init = () => {
console.info('init');
// 确保DOM渲染完成后再初始化画布
nextTick(() => {
initGraph();
window.addEventListener('resize', handleResize);
console.log('组件挂载完成');
});
};
const loadModel = () => {
const routeParams = router.currentRoute.value.params;
const id = routeParams.id;
if (id) {
findOneModelById(id as string).then(r => {
if (r.code === 200 && r.data) {
currentModel.value = r.data;
try {
const configInfo = r.data.configInfo;
if (configInfo && typeof configInfo === 'string') {
const parsedData = JSON.parse(configInfo);
savedGraphData.value = parsedData as SavedGraphData;
} else {
savedGraphData.value = r.data.configInfo ? r.data.configInfo as unknown as SavedGraphData : {...defaultSavedGraphData};
}
} catch (e: any) {
console.error('parse elements error, cause: ', e);
savedGraphData.value = {...defaultSavedGraphData};
}
init();
} else {
gobackWithError();
}
});
} else {
gobackWithError();
}
};
const handleUpdateModel = (saved: Partial<SavedGraphData>) => {
if (saved) {
savedGraphData.value = {
...savedGraphData.value,
...saved,
};
console.error(savedGraphData.value)
}
};
const handleSave = () => {
const nodesData: ModelElement[] = [];
const nodes = graph.value?.getNodes() as Node[];
if (nodes) {
nodes.forEach(node => {
const nodeData = node.getData() as ModelElement;
const newElement = {
...nodeData,
position: node.getPosition(),
width: node.getSize().width,
height: node.getSize().height,
};
nodesData.push(newElement);
});
}
const edges: any[] = [];
const graphEdges = graph.value?.getEdges() ?? [] as Edge[];
graphEdges.forEach(edge => {
edges.push({
id: edge.id,
source: edge.getSource() ?? null,
target: edge.getTarget() ?? null,
// 保存边的属性
attrs: edge.getAttrs() ?? {},
// 保存边的其他选项
router: edge.getRouter() ?? {},
connector: edge.getConnector() ?? null,
vertices: edge.getVertices() ?? [],
});
});
const graphData: SavedGraphData = {
...savedGraphData.value ?? {},
nodes: nodesData,
edges,
};
console.info('save graphData', graphData);
if (!currentModel.value) {
message.error('当前模型不存在');
return;
}
const newModel: Model = {
...currentModel.value,
configInfo: JSON.stringify(graphData),
};
updateModel(newModel).then(r => {
if (r.code === 200) {
message.success('修改成功.');
} else {
message.error(r.msg ?? '修改失败.');
}
});
};
// 初始化
onMounted(() => {
loadModel();
});
// 清理
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize);
if (graph.value) {
console.log('画布已销毁');
}
});
return {
currentModel,
selectedModelElement,
selectedModelNode,
savedGraphData,
graph,
canvas,
goback,
zoomIn,
zoomOut,
fitToScreen,
centerContent,
handleDragStart,
handleDragEnd,
handleDragEnter,
handleDragLeave,
handleDrop,
isDraggingOver,
handleSave,
handleUpdateModel,
};
},
});
</script>

208
modeler/src/views/ai/model/components.vue
View File

@@ -1,208 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card" title="模型组件设置">
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<a-tabs v-model:activeKey="activeKey" class="ks-page-tabs">
<a-tab-pane key="1" tab="模型输入设置">
<a-form
autocomplete="off"
layout="vertical"
name="basic"
>
<a-row>
<a-col :span="16">
<a-form-item name="taskName">
<a-input-group compact>
<a-input style="width: 300px" />
<a-button type="primary">导入</a-button>
</a-input-group>
</a-form-item>
<a-form-item label="已选择1个字段" name="taskName">
<a-space size="middle">
<div class="btn-field selected">速度
<CloseCircleOutlined />
</div>
<div class="btn-field">导弹量
<CloseCircleOutlined />
</div>
<div class="btn-field">速度1
<CloseCircleOutlined />
</div>
<div class="btn-field">导弹量1
<CloseCircleOutlined />
</div>
</a-space>
</a-form-item>
<a-form-item label="可选字段" name="taskName">
<a-row>
<a-col :span="5">
<a-space>
<div class="btn-field gold">速度</div>
<PlusCircleOutlined class="icon-gold" />
</a-space>
</a-col>
<a-col :span="5">
<a-space>
<div class="btn-field gold">速度</div>
<PlusCircleOutlined class="icon-gold" />
</a-space>
</a-col>
<a-col :span="5">
<a-space>
<div class="btn-field gold">速度</div>
<PlusCircleOutlined class="icon-gold" />
</a-space>
</a-col>
</a-row>
</a-form-item>
<a-form-item label="自定义字段" name="taskName">
<a-row>
<a-col :span="16">
<a-space>
<a-input style="width: 300px"></a-input>
<PlusCircleOutlined class="icon-gold" />
</a-space>
</a-col>
</a-row>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="参数设置">
<a-form
autocomplete="off"
layout="vertical"
name="basic"
>
<a-row>
<a-col :span="16">
<a-form-item label="模型参数" name="taskName">
<a-input style="width: 300px"></a-input>
</a-form-item>
<a-form-item label="模型参数" name="taskName">
<a-input style="width: 300px"></a-input>
</a-form-item>
<a-form-item label="模型参数" name="taskName">
<a-input style="width: 300px"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-tab-pane>
<a-tab-pane key="3" tab="动作空间设置">
<a-space class="mb-6">
<a-button style="width: 120px" type="primary">增加</a-button>
<a-button style="width: 120px">删除</a-button>
</a-space>
<a-table
:columns="columns"
:dataSource="dataSource"
size="small"
>
<template #bodyCell='{ column }'>
<a-space v-if="column.dataIndex === '_actions'">
<a-button class="btn-link-edit" size="small" type="link">编辑</a-button>
<a-button class="btn-link-delete" danger size="small" type="link">删除</a-button>
<a-button class="btn-link-detail" size="small" type="link">详情</a-button>
</a-space>
</template>
</a-table>
</a-tab-pane>
<!-- <a-tab-pane key="4" tab="奖励函数设置">-->
<!-- </a-tab-pane>-->
</a-tabs>
</div>
</a-card>
</Layout>
</template>
<script lang="ts" setup>
import Layout from '../layout.vue';
import { ref } from 'vue';
import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
const activeKey = ref('1');
const dataSource = [
{
index: '1',
key: '1',
name: '工程001',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
{
index: '2',
key: '2',
name: '工程002',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
];
const columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '动作类型',
dataIndex: 'age',
key: 'age',
},
{
title: '参数1',
dataIndex: 'address',
key: 'address',
},
{
title: '参数2',
dataIndex: 'status',
key: 'status',
},
{
title: '操作',
dataIndex: '_actions',
key: '_actions',
},
];
</script>

65
modeler/src/views/ai/model/config.ts
View File

@@ -1,65 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 { TableColumnType } from 'ant-design-vue';
import type { Model, SavedGraphData } from './types';
export const defaultSavedGraphData = {
nodes: [],
edges: [],
observations: [],
rewards: [],
actionSpaces: [],
} as SavedGraphData
export const modelColumns: TableColumnType<Model>[] = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
},
{
title: '智能体名称',
dataIndex: 'name',
key: 'name',
},
{
title: '所属工程',
dataIndex: 'projectSpaceName',
key: 'projectSpaceName',
},
{
title: '智能体描述',
dataIndex: 'description',
key: 'description',
},
{
title: '存储位置',
dataIndex: 'storageLocation',
key: 'storageLocation',
},
{
title: '操作',
dataIndex: '_actions',
key: '_actions',
width: 100,
},
];
export const defaultModel: Model = {
id: 0,
projectId: undefined,
projectSpaceName: null,
name: null,
description: null,
storageLocation: null,
configInfo: null,
status: 1,
createTime: null,
};

264
modeler/src/views/ai/model/control-options.ts
View File

@@ -1,264 +0,0 @@
/*
* 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 { ElementInput } from './inputs';
export const taskInputs: ElementInput[] = [
{
id: null,
name: '空中扫荡',
description: '',
category: 'task',
draggable: true,
children: [],
},
{
id: null,
name: '战斗巡逻',
description: '',
category: 'task',
draggable: true,
children: [],
},
{
id: null,
name: '空中护航',
description: '',
category: 'task',
draggable: true,
children: [],
},
{
id: null,
name: '空中加油',
description: '',
category: 'task',
draggable: true,
children: [],
},
{
id: null,
name: '侦察监视',
description: '',
category: 'task',
draggable: true,
children: [],
},
{
id: null,
name: '压制防空',
description: '',
category: 'task',
draggable: true,
children: [],
},
];
export const controlInputs: ElementInput[] = [
{
id: null,
name: '追击',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '开火',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '偏置',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '脱离',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '目视追击',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '夹击追击',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '交替脱离',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '交替追击',
description: '',
category: 'control',
draggable: true,
children: [],
},
{
id: null,
name: '航线巡逻',
description: '',
category: 'control',
draggable: true,
children: [],
},
];
export const flyInputs: ElementInput[] = [
{
id: null,
name: '滚转角',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '俯仰角',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '偏航角',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '油门',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '开火',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '飞行到点/位',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '飞行到位置',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '飞行到高度',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '转头',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '相对斜距转向',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
{
id: null,
name: '指定速度',
description: '',
category: 'parameter',
draggable: true,
children: [],
},
];
export const managerInputs: ElementInput[] = [
{
id: null,
name: '启动',
description: '',
category: 'action',
draggable: true,
children: [],
},
{
id: null,
name: '恢复',
description: '',
category: 'action',
draggable: true,
children: [],
},
{
id: null,
name: '暂停',
description: '',
category: 'action',
draggable: true,
children: [],
},
{
id: null,
name: '删除',
description: '',
category: 'action',
draggable: true,
children: [],
}
];

8
modeler/src/views/ai/model/hooks.ts
View File

@@ -1,8 +0,0 @@
/*
* 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.
*/

186
modeler/src/views/ai/model/inputs.ts
View File

@@ -1,186 +0,0 @@
/*
* 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 { findObservationTypeByQuery } from './api';
import type { DraggableElement } from '../builder/element';
export interface ElementInput extends DraggableElement {
[key: string]: unknown;
}
export const defaultBasicInputs: ElementInput[] = [
{
id: null,
name: '基础状态',
description: null,
draggable: true,
category: 'input',
children:[
{
id: null,
name: '时间数据',
description: null,
draggable: true,
category: 'input',
children:[]
},
{
id: null,
name: '阵营数据',
description: null,
draggable: true,
category: 'input',
children:[]
}
]
}
]
export const defaultManeuverInputs: ElementInput[] = [
{
id: null,
name: '机动状态',
description: null,
draggable: true,
category: 'input',
children:[]
}
]
export const defaultWeaponInputs: ElementInput[] = [
{
id: null,
name: '武器状态',
description: null,
draggable: true,
category: 'input',
children:[
{
id: null,
name: '挂载武器',
description: null,
draggable: true,
category: 'input',
children:[]
},
{
id: null,
name: '导弹状态',
description: null,
draggable: true,
category: 'input',
children:[]
}
]
}
]
export const defaultSensorInputs: ElementInput[] = [
{
id: null,
name: '传感器状态',
description: null,
draggable: true,
category: 'input',
children:[
{
id: null,
name: '传感器名称',
description: null,
draggable: true,
category: 'input',
children:[]
},
{
id: null,
name: '类型信息',
description: null,
draggable: true,
category: 'input',
children:[]
},
{
id: null,
name: '激活状态',
description: null,
draggable: true,
category: 'input',
children:[]
}
]
}
]
export const defaultFuelInputs: ElementInput[] = [
{
id: null,
name: '燃油状态',
description: null,
draggable: true,
category: 'input',
children:[
{
id: null,
name: '当前燃油',
description: null,
draggable: true,
category: 'input',
children:[]
},
{
id: null,
name: '当前油耗',
description: null,
draggable: true,
category: 'input',
children:[]
},
]
}
]
export const resolveElementInputs = () : Promise<ElementInput[]>=> {
return new Promise((resolve,reject)=> {
findObservationTypeByQuery().then(r => {
let items = [];
let item: ElementInput = {
id: null,
name: '机动状态',
description: null,
draggable: true,
category: 'input',
children:[]
};
if(r.rows){
r.rows.forEach(i=> {
item.children.push({
name: i.typeName,
id: i.id,
description: i.description,
draggable: true,
category: 'input',
children: [],
})
})
}
items.push(item);
resolve([
...defaultBasicInputs,
...items,
...defaultWeaponInputs,
...defaultSensorInputs,
...defaultFuelInputs,
])
}).catch((e:any)=> {
reject(e);
});
})
}

228
modeler/src/views/ai/model/management.vue
View File

@@ -1,228 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">智能体管理</span>
</a-space>
</template>
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<div class="w-full mb-8">
<a-space class="ks-page-tabs-right">
<a-input v-model:value="modelsQuery.name" placeholder="智能体名称" style="width: 200px;" />
<a-button class="ks-tabs-btn btn-search" style="width:120px;" type="primary" @click="loadModels()">查询</a-button>
<a-button class="ks-tabs-btn btn-create" style="width:120px;" type="primary" @click="showCreateModal()">新建</a-button>
<a-button class="ks-tabs-btn btn-create" style="width:120px;" type="primary" @click="builderJump">智能体构建</a-button>
</a-space>
</div>
<a-table
:columns="modelColumns"
:dataSource="models"
:pagination="false"
:row-key="'id'"
:row-selection="rowSelection"
size="small"
>
<template #bodyCell='{ column,record,index }'>
<template v-if="column.dataIndex === 'index'">
{{ index + 1 }}
</template>
<a-space v-if="column.dataIndex === '_actions'">
<a-button class="btn-link-edit" size="small" type="link" @click="()=> handleEdit(record)">编辑</a-button>
<a-popconfirm
title="确定删除?"
@confirm="()=> handleDelete(record)"
>
<a-button class="btn-link-delete" danger size="small" type="link">删除</a-button>
</a-popconfirm>
</a-space>
</template>
</a-table>
</div>
</a-card>
<a-modal v-model:open="createModalVisible" :title="modelSelected ? '编辑' : '新建'"
centered
@ok="()=> createModalVisible = false ">
<a-form
ref="modelFormRef"
:label-col="{span: 5}"
:model="modelForm"
autocomplete="off"
layout="horizontal"
name="basic"
style="padding: 15px"
>
<a-form-item
:rules="[{ required: true, message: '请输入智能体名称!' }]"
label="智能体名称"
name="name"
>
<a-input v-model:value="modelForm.name" placeholder="请输入智能体名称" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: '请输入所属工程!' }]"
label="所属工程"
name="projectId"
>
<a-select v-model:value="modelForm.projectId" placeholder="请选择所属工程">
<a-select-option v-for="p in projects" :key="p.id" :value="p.id">{{ p.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="存储位置"
:rules="[{ required: true, message: '请选择存储位置!' }]"
name="storageLocation"
>
<Finder :path="modelForm.storageLocation" @select="(v: string)=> modelForm.storageLocation = v"/>
</a-form-item>
<a-form-item
label="智能体描述"
name="description"
>
<a-textarea v-model:value="modelForm.description" placeholder="智能体描述" />
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button style="width: 120px;" @click="()=> createModalVisible = false">取消</a-button>
<a-button html-type="submit" style="width: 120px;" type="primary" @click="handleSaveOrUpdate">确认并保存</a-button>
</a-space>
</template>
</a-modal>
</Layout>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInstance } from 'ant-design-vue';
import { message, type TableProps } from 'ant-design-vue';
import Layout from '../layout.vue';
import type { Model } from './types';
import { createModel, deleteModel, findModelByQuery, updateModel } from './api';
import { defaultModel, modelColumns } from './config';
import { findAllProjects } from '../project/api';
import type { Project } from '../project/types';
import Finder from '../finder.vue';
const router = useRouter();
const createModalVisible = ref<boolean>(false);
const selectedItem = ref<Model | null>(null);
const modelFormRef = ref<FormInstance>();
const modelForm = ref<Model>(Object.assign({}, defaultModel));
const models = ref<Model[]>([]);
const modelsQuery = ref<Partial<Model>>({});
const modelSelected = ref<Model | null>(null);
const projects = ref<Project[]>([]);
watch(() => createModalVisible.value, (n: boolean) => {
if (n && projects.value.length === 0) {
findAllProjects().then(r => {
projects.value = Array.isArray(r.data) ? r.data : [];
});
}
});
const loadModels = () => {
createModalVisible.value = false;
modelSelected.value = null;
findModelByQuery(modelsQuery.value).then(res => {
models.value = res.rows ?? [] as Model[];
});
};
const showCreateModal = () => {
modelForm.value = Object.assign({}, defaultModel);
createModalVisible.value = true;
};
const handleEdit = (rt: Model) => {
modelSelected.value = rt;
modelForm.value = Object.assign({}, rt);
createModalVisible.value = true;
};
const handleDelete = (rt: Model) => {
deleteModel(rt.id).then(r => {
if (r.code === 200) {
message.success(r.msg ?? '删除成功.')
loadModels();
} else {
message.error(r.msg ?? '删除失败.')
}
});
};
const builderJump = () => {
if (null == selectedItem.value) {
message.error('请选择一个智能体');
return;
}
let id = selectedItem.value.id;
selectedItem.value = null;
router.push({
name: 'ai-model-builder-designer',
params: {
id: id,
},
});
};
const rowSelection: TableProps['rowSelection'] = {
// 2. 设置 rowSelection 的 type 为 'radio'，启用单选模式（默认是 'checkbox' 多选）
type: 'radio',
onChange: (selectedRowKeys: any[], selectedRows: Model[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// 3. 单选模式下，selectedRows 数组仅有一个元素（选中行），赋值给 selectedItem
selectedItem.value = selectedRows.length > 0 ? selectedRows[0] as Model : null;
console.log('当前选中的单行数据：', selectedItem.value);
},
getCheckboxProps: (record: any) => ({
name: record?.name,
}),
};
const handleSaveOrUpdate = () => {
if (modelFormRef.value) {
modelFormRef.value.validate()
.then((values: any) => {
let res = null;
let newValues = Object.assign({}, modelSelected.value || {}, values ?? {});
let p = projects.value.find(j => j.id === modelForm.value.projectId);
newValues.projectSpaceName = p ? p.name : null;
if (modelSelected.value && modelSelected.value?.id > 0) {
res = updateModel(newValues);
} else {
res = createModel(newValues);
}
res.then(r => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
loadModels();
} else {
message.error(r.msg ?? '保存失败.')
}
});
});
}
};
onMounted(() => {
loadModels();
});
</script>

402
modeler/src/views/ai/model/rules/fuzzy.json
View File

@@ -1,402 +0,0 @@
[
{
"id": 1,
"name": "三角隶属度模糊规则（Mamdani 型）"
},
{
"id": 2,
"name": "高斯隶属度模糊规则（Mamdani 型）"
},
{
"id": 3,
"name": "梯形隶属度模糊规则（Mamdani 型）"
},
{
"id": 4,
"name": "钟形隶属度模糊规则（Mamdani 型）"
},
{
"id": 5,
"name": "S 型隶属度模糊规则（Mamdani 型）"
},
{
"id": 6,
"name": "Z 型隶属度模糊规则（Mamdani 型）"
},
{
"id": 7,
"name": "单点隶属度模糊规则（Sugeno 型）"
},
{
"id": 8,
"name": "线性隶属度模糊规则（Sugeno 型）"
},
{
"id": 9,
"name": "二次函数隶属度模糊规则（Sugeno 型）"
},
{
"id": 10,
"name": "最大 - 最小推理模糊规则（三角隶属度）"
},
{
"id": 11,
"name": "最大 - 乘积推理模糊规则（三角隶属度）"
},
{
"id": 12,
"name": "最小 - 最大推理模糊规则（高斯隶属度）"
},
{
"id": 13,
"name": "最小 - 乘积推理模糊规则（高斯隶属度）"
},
{
"id": 14,
"name": "重心法去模糊化模糊规则（Mamdani）"
},
{
"id": 15,
"name": "最大隶属度法去模糊化模糊规则（Mamdani）"
},
{
"id": 16,
"name": "加权平均法去模糊化模糊规则（Sugeno）"
},
{
"id": 17,
"name": "中位数法去模糊化模糊规则（Mamdani）"
},
{
"id": 18,
"name": "左最大隶属度法去模糊化模糊规则（Mamdani）"
},
{
"id": 19,
"name": "右最大隶属度法去模糊化模糊规则（Mamdani）"
},
{
"id": 20,
"name": "多输入单输出（MISO）模糊规则（三角隶属度）"
},
{
"id": 21,
"name": "多输入多输出（MIMO）模糊规则（三角隶属度）"
},
{
"id": 22,
"name": "单输入单输出（SISO）模糊规则（高斯隶属度）"
},
{
"id": 23,
"name": "单输入多输出（SIMO）模糊规则（高斯隶属度）"
},
{
"id": 24,
"name": "基于专家经验的静态模糊规则"
},
{
"id": 25,
"name": "基于数据驱动的动态模糊规则"
},
{
"id": 26,
"name": "自学习更新模糊规则（梯度下降）"
},
{
"id": 27,
"name": "增量式更新模糊规则（新增数据适配）"
},
{
"id": 28,
"name": "模糊聚类生成模糊规则（FCM）"
},
{
"id": 29,
"name": "粗糙集约简模糊规则（去冗余）"
},
{
"id": 30,
"name": "遗传算法优化模糊规则（规则库精简）"
},
{
"id": 31,
"name": "粒子群优化模糊规则（隶属度参数优化）"
},
{
"id": 32,
"name": "禁忌搜索优化模糊规则（规则排序优化）"
},
{
"id": 33,
"name": "模糊关联规则（挖掘数据隐含关联）"
},
{
"id": 34,
"name": "模糊产生式规则（if-then-else 拓展）"
},
{
"id": 35,
"name": "模糊时序规则（处理时间序列数据）"
},
{
"id": 36,
"name": "模糊空间规则（处理地理空间数据）"
},
{
"id": 37,
"name": "模糊概率规则（融合概率分布）"
},
{
"id": 38,
"name": "模糊可能性规则（基于可能性理论）"
},
{
"id": 39,
"name": "模糊证据规则（融合 D-S 证据理论）"
},
{
"id": 40,
"name": "直觉模糊规则（考虑隶属度与非隶属度）"
},
{
"id": 41,
"name": "区间值模糊规则（隶属度为区间值）"
},
{
"id": 42,
"name": "二型模糊规则（解决隶属度不确定性）"
},
{
"id": 43,
"name": "区间二型模糊规则（二型模糊简化版）"
},
{
"id": 44,
"name": "广义模糊规则（拓展隶属度函数空间）"
},
{
"id": 45,
"name": "模糊逻辑控制规则（温控场景）"
},
{
"id": 46,
"name": "模糊逻辑决策规则（金融风控场景）"
},
{
"id": 47,
"name": "模糊逻辑分类规则（图像识别场景）"
},
{
"id": 48,
"name": "模糊逻辑回归规则（预测场景）"
},
{
"id": 49,
"name": "模糊规则插值（弥补规则库空缺）"
},
{
"id": 50,
"name": "模糊规则约简（降低计算复杂度）"
},
{
"id": 51,
"name": "三角隶属度 + 重心法模糊规则（经典组合）"
},
{
"id": 52,
"name": "高斯隶属度 + 加权平均法模糊规则（高精度组合）"
},
{
"id": 53,
"name": "梯形隶属度 + 最大隶属度法模糊规则（工业场景）"
},
{
"id": 54,
"name": "钟形隶属度 + 中位数法模糊规则（平滑输出）"
},
{
"id": 55,
"name": "多隶属度融合模糊规则（三角 + 高斯）"
},
{
"id": 56,
"name": "分层模糊规则（多层级决策）"
},
{
"id": 57,
"name": "并行模糊规则（多规则同步推理）"
},
{
"id": 58,
"name": "串行模糊规则（规则链式推理）"
},
{
"id": 59,
"name": "模糊规则库分级（核心规则 + 辅助规则）"
},
{
"id": 60,
"name": "自适应隶属度模糊规则（动态调整参数）"
},
{
"id": 61,
"name": "鲁棒模糊规则（抗数据噪声干扰）"
},
{
"id": 62,
"name": "稀疏模糊规则（适用于高维数据）"
},
{
"id": 63,
"name": "稠密模糊规则（适用于低维高精度场景）"
},
{
"id": 64,
"name": "模糊规则可视化（规则库图形化）"
},
{
"id": 65,
"name": "自然语言模糊规则（贴近人类表述）"
},
{
"id": 66,
"name": "模糊数学规则（基于模糊集合运算）"
},
{
"id": 67,
"name": "模糊矩阵规则（矩阵形式表示规则）"
},
{
"id": 68,
"name": "模糊向量规则（向量空间映射规则）"
},
{
"id": 69,
"name": "模糊变换规则（基于模糊线性变换）"
},
{
"id": 70,
"name": "模糊阈值规则（设定模糊决策阈值）"
},
{
"id": 71,
"name": "模糊滞后规则（处理系统滞后特性）"
},
{
"id": 72,
"name": "模糊超前规则（预测系统未来状态）"
},
{
"id": 73,
"name": "模糊自适应控制规则（机器人场景）"
},
{
"id": 74,
"name": "模糊 PID 控制规则（工业过程控制）"
},
{
"id": 75,
"name": "模糊滑模控制规则（非线性系统控制）"
},
{
"id": 76,
"name": "模糊模型预测控制规则（多变量系统）"
},
{
"id": 77,
"name": "模糊故障诊断规则（设备运维场景）"
},
{
"id": 78,
"name": "模糊质量评估规则（产品检测场景）"
},
{
"id": 79,
"name": "模糊信用评级规则（金融场景）"
},
{
"id": 80,
"name": "模糊风险评估规则（项目管理场景）"
},
{
"id": 81,
"name": "模糊图像分割规则（医学影像场景）"
},
{
"id": 82,
"name": "模糊语音识别规则（语音处理场景）"
},
{
"id": 83,
"name": "模糊文本分类规则（自然语言处理）"
},
{
"id": 84,
"name": "模糊推荐规则（电商推荐场景）"
},
{
"id": 85,
"name": "模糊聚类规则（客户分群场景）"
},
{
"id": 86,
"name": "模糊特征选择规则（数据预处理场景）"
},
{
"id": 87,
"name": "模糊异常检测规则（安防监控场景）"
},
{
"id": 88,
"name": "模糊趋势预测规则（股市预测场景）"
},
{
"id": 89,
"name": "模糊负荷预测规则（电力系统场景）"
},
{
"id": 90,
"name": "模糊水文预报规则（水利工程场景）"
},
{
"id": 91,
"name": "模糊气象预测规则（气象服务场景）"
},
{
"id": 92,
"name": "模糊农业灌溉规则（智慧农业场景）"
},
{
"id": 93,
"name": "模糊交通调度规则（智能交通场景）"
},
{
"id": 94,
"name": "模糊物流优化规则（物流配送场景）"
},
{
"id": 95,
"name": "模糊资源分配规则（企业管理场景）"
},
{
"id": 96,
"name": "模糊人员调度规则（人力资源场景）"
},
{
"id": 97,
"name": "模糊能耗优化规则（节能降耗场景）"
},
{
"id": 98,
"name": "模糊环境监测规则（环保场景）"
},
{
"id": 99,
"name": "模糊医疗诊断规则（临床医疗场景）"
},
{
"id": 100,
"name": "模糊教育评估规则（教育教学场景）"
}
]

402
modeler/src/views/ai/model/rules/heuristic.json
View File

@@ -1,402 +0,0 @@
[
{
"id": 1,
"name": "基本爬山法（最速上升 / 下降）"
},
{
"id": 2,
"name": "随机爬山法（随机选择邻域解）"
},
{
"id": 3,
"name": "随机重启爬山法（避免局部最优）"
},
{
"id": 4,
"name": "模拟退火算法（经典 Metropolis 准则）"
},
{
"id": 5,
"name": "快速模拟退火算法（加速收敛）"
},
{
"id": 6,
"name": "自适应模拟退火算法（动态调整温度）"
},
{
"id": 7,
"name": "禁忌搜索算法（基本禁忌表）"
},
{
"id": 8,
"name": "自适应禁忌搜索算法（动态调整禁忌长度）"
},
{
"id": 9,
"name": "带藐视准则的禁忌搜索算法（优质解豁免）"
},
{
"id": 10,
"name": "并行禁忌搜索算法（多线程搜索）"
},
{
"id": 11,
"name": "遗传算法（基本选择 / 交叉 / 变异）"
},
{
"id": 12,
"name": "二进制遗传算法（编码为二进制串）"
},
{
"id": 13,
"name": "实数编码遗传算法（适用于连续优化）"
},
{
"id": 14,
"name": "整数编码遗传算法（适用于离散优化）"
},
{
"id": 15,
"name": "自适应遗传算法（动态调整交叉 / 变异概率）"
},
{
"id": 16,
"name": "精英保留遗传算法（保留最优个体）"
},
{
"id": 17,
"name": "并行遗传算法（多种群同步进化）"
},
{
"id": 18,
"name": "混合遗传算法（融合局部搜索）"
},
{
"id": 19,
"name": "多目标遗传算法（NSGA-II）"
},
{
"id": 20,
"name": "多目标遗传算法（MOEA/D）"
},
{
"id": 21,
"name": "粒子群优化算法（基本 PSO）"
},
{
"id": 22,
"name": "标准粒子群优化算法（SPSO）"
},
{
"id": 23,
"name": "惯性权重自适应粒子群优化（WPSO）"
},
{
"id": 24,
"name": "压缩因子粒子群优化（CPSO）"
},
{
"id": 25,
"name": "离散粒子群优化（适用于离散问题）"
},
{
"id": 26,
"name": "二进制粒子群优化（BPSO）"
},
{
"id": 27,
"name": "多目标粒子群优化（MOPSO）"
},
{
"id": 28,
"name": "并行粒子群优化（PPSO）"
},
{
"id": 29,
"name": "带变异操作的粒子群优化（避免早熟）"
},
{
"id": 30,
"name": "蚁群优化算法（基本 ACO）"
},
{
"id": 31,
"name": "蚁群系统（ACS）"
},
{
"id": 32,
"name": "最大最小蚁群系统（MMAS）"
},
{
"id": 33,
"name": "精英蚁群系统（EACS）"
},
{
"id": 34,
"name": "离散蚁群优化（适用于 TSP 问题）"
},
{
"id": 35,
"name": "连续蚁群优化（适用于连续优化）"
},
{
"id": 36,
"name": "多目标蚁群优化（MOACO）"
},
{
"id": 37,
"name": "蚁群 - 遗传混合优化算法"
},
{
"id": 38,
"name": "灰狼优化算法（基本 GWO）"
},
{
"id": 39,
"name": "自适应灰狼优化算法（AGWO）"
},
{
"id": 40,
"name": "改进灰狼优化算法（融入局部搜索）"
},
{
"id": 41,
"name": "多目标灰狼优化算法（MOGWO）"
},
{
"id": 42,
"name": "离散灰狼优化算法（DGWO）"
},
{
"id": 43,
"name": "麻雀搜索算法（基本 SSA）"
},
{
"id": 44,
"name": "自适应麻雀搜索算法（ASSA）"
},
{
"id": 45,
"name": "改进麻雀搜索算法（融入变异操作）"
},
{
"id": 46,
"name": "多目标麻雀搜索算法（MOSSA）"
},
{
"id": 47,
"name": "鲸鱼优化算法（基本 WOA）"
},
{
"id": 48,
"name": "自适应鲸鱼优化算法（AWOA）"
},
{
"id": 49,
"name": "改进鲸鱼优化算法（避免局部最优）"
},
{
"id": 50,
"name": "多目标鲸鱼优化算法（MOWOA）"
},
{
"id": 51,
"name": "蝴蝶优化算法（基本 BOA）"
},
{
"id": 52,
"name": "自适应蝴蝶优化算法（ABOA）"
},
{
"id": 53,
"name": "混合蝴蝶优化算法（融合 GA）"
},
{
"id": 54,
"name": "萤火虫算法（基本 FA）"
},
{
"id": 55,
"name": "自适应萤火虫算法（AFA）"
},
{
"id": 56,
"name": "多目标萤火虫算法（MOFA）"
},
{
"id": 57,
"name": "果蝇优化算法（基本 FOA）"
},
{
"id": 58,
"name": "改进果蝇优化算法（修正距离计算）"
},
{
"id": 59,
"name": "自适应果蝇优化算法（AFOA）"
},
{
"id": 60,
"name": "蝙蝠算法（基本 BA）"
},
{
"id": 61,
"name": "自适应蝙蝠算法（ABA）"
},
{
"id": 62,
"name": "改进蝙蝠算法（融入惯性权重）"
},
{
"id": 63,
"name": "多目标蝙蝠算法（MOBA）"
},
{
"id": 64,
"name": "花授粉算法（基本 FPA）"
},
{
"id": 65,
"name": "改进花授粉算法（自适应步长）"
},
{
"id": 66,
"name": "多目标花授粉算法（MOFPA）"
},
{
"id": 67,
"name": "差分进化算法（基本 DE）"
},
{
"id": 68,
"name": "自适应差分进化算法（ADE）"
},
{
"id": 69,
"name": "精英保留差分进化算法（EDE）"
},
{
"id": 70,
"name": "多目标差分进化算法（MODE）"
},
{
"id": 71,
"name": "人工蜂群算法（基本 ABC）"
},
{
"id": 72,
"name": "改进人工蜂群算法（IABC）"
},
{
"id": 73,
"name": "自适应人工蜂群算法（AABC）"
},
{
"id": 74,
"name": "多目标人工蜂群算法（MOABC）"
},
{
"id": 75,
"name": "人工鱼群算法（基本 AFSA）"
},
{
"id": 76,
"name": "自适应人工鱼群算法（AAFSA）"
},
{
"id": 77,
"name": "改进人工鱼群算法（避免局部最优）"
},
{
"id": 78,
"name": "布谷鸟搜索算法（基本 CS）"
},
{
"id": 79,
"name": "改进布谷鸟搜索算法（自适应发现概率）"
},
{
"id": 80,
"name": "多目标布谷鸟搜索算法（MOCS）"
},
{
"id": 81,
"name": "鸡群优化算法（基本 CSO）"
},
{
"id": 82,
"name": "自适应鸡群优化算法（ACSO）"
},
{
"id": 83,
"name": "改进鸡群优化算法（融入局部搜索）"
},
{
"id": 84,
"name": "鸽群优化算法（基本 PIO）"
},
{
"id": 85,
"name": "改进鸽群优化算法（修正地图与罗盘算子）"
},
{
"id": 86,
"name": "多目标鸽群优化算法（MOPIO）"
},
{
"id": 87,
"name": "蝗虫优化算法（基本 LOA）"
},
{
"id": 88,
"name": "自适应蝗虫优化算法（ALOA）"
},
{
"id": 89,
"name": "改进蝗虫优化算法（融合 PSO）"
},
{
"id": 90,
"name": "蜻蜓算法（基本 DA）"
},
{
"id": 91,
"name": "自适应蜻蜓算法（ADA）"
},
{
"id": 92,
"name": "多目标蜻蜓算法（MODA）"
},
{
"id": 93,
"name": "沙蚕群优化算法（基本 CSE）"
},
{
"id": 94,
"name": "自适应沙蚕群优化算法（ACSE）"
},
{
"id": 95,
"name": "改进沙蚕群优化算法（融入禁忌搜索）"
},
{
"id": 96,
"name": "人工免疫系统（基本 AIS）"
},
{
"id": 97,
"name": "克隆选择算法（CSA）"
},
{
"id": 98,
"name": "免疫遗传算法（IGA）"
},
{
"id": 99,
"name": "梯度启发式算法（融合梯度信息）"
},
{
"id": 100,
"name": "混合启发式算法（GA+PSO+SA，多算法融合）"
}
]

402
modeler/src/views/ai/model/rules/neural.json
View File

@@ -1,402 +0,0 @@
[
{
"id": 1,
"name": "基本 BP 神经网络（反向传播）"
},
{
"id": 2,
"name": "多层 BP 神经网络（多隐藏层）"
},
{
"id": 3,
"name": "自适应 BP 神经网络（动态调整学习率）"
},
{
"id": 4,
"name": "弹性 BP 神经网络（RPROP）"
},
{
"id": 5,
"name": "共轭梯度 BP 神经网络"
},
{
"id": 6,
"name": "Levenberg-Marquardt BP 神经网络"
},
{
"id": 7,
"name": "正则化 BP 神经网络（L1 正则）"
},
{
"id": 8,
"name": "正则化 BP 神经网络（L2 正则）"
},
{
"id": 9,
"name": "带 Dropout 的 BP 神经网络（防止过拟合）"
},
{
"id": 10,
"name": "带 Batch Normalization 的 BP 神经网络（加速收敛）"
},
{
"id": 11,
"name": "感知机（单层）"
},
{
"id": 12,
"name": "多层感知机（MLP，基本型）"
},
{
"id": 13,
"name": "深度多层感知机（DMLP，多隐藏层）"
},
{
"id": 14,
"name": "稀疏多层感知机（稀疏权重）"
},
{
"id": 15,
"name": "正则化多层感知机（L1+L2 正则）"
},
{
"id": 16,
"name": "卷积神经网络（LeNet-5，经典入门）"
},
{
"id": 17,
"name": "卷积神经网络（AlexNet，深度学习里程碑）"
},
{
"id": 18,
"name": "卷积神经网络（VGG16，深度卷积）"
},
{
"id": 19,
"name": "卷积神经网络（VGG19，更深卷积）"
},
{
"id": 20,
"name": "卷积神经网络（GoogLeNet/Inception v1，多分支结构）"
},
{
"id": 21,
"name": "卷积神经网络（Inception v2，批量归一化）"
},
{
"id": 22,
"name": "卷积神经网络（Inception v3，优化结构）"
},
{
"id": 23,
"name": "卷积神经网络（Inception v4，融合 ResNet）"
},
{
"id": 24,
"name": "残差网络（ResNet18，残差连接）"
},
{
"id": 25,
"name": "残差网络（ResNet34，更深残差）"
},
{
"id": 26,
"name": "残差网络（ResNet50，瓶颈结构）"
},
{
"id": 27,
"name": "残差网络（ResNet101，深层模型）"
},
{
"id": 28,
"name": "残差网络（ResNet152，超深层模型）"
},
{
"id": 29,
"name": "改进残差网络（ResNeXt，分组卷积）"
},
{
"id": 30,
"name": "密集连接网络（DenseNet，密集连接）"
},
{
"id": 31,
"name": "轻量级卷积网络（MobileNet v1，深度可分离卷积）"
},
{
"id": 32,
"name": "轻量级卷积网络（MobileNet v2，倒残差结构）"
},
{
"id": 33,
"name": "轻量级卷积网络（MobileNet v3，神经架构搜索）"
},
{
"id": 34,
"name": "轻量级卷积网络（ShuffleNet v1，通道混洗）"
},
{
"id": 35,
"name": "轻量级卷积网络（ShuffleNet v2，高效结构）"
},
{
"id": 36,
"name": "循环神经网络（RNN，基本型）"
},
{
"id": 37,
"name": "循环神经网络（Elman RNN，局部反馈）"
},
{
"id": 38,
"name": "循环神经网络（Jordan RNN，全局反馈）"
},
{
"id": 39,
"name": "长短期记忆网络（LSTM，基本型，解决梯度消失）"
},
{
"id": 40,
"name": "门控循环单元（GRU，简化 LSTM）"
},
{
"id": 41,
"name": "双向 LSTM（Bi-LSTM，双向时序学习）"
},
{
"id": 42,
"name": "双向 GRU（Bi-GRU，双向简化时序学习）"
},
{
"id": 43,
"name": "堆叠 LSTM（Stacked LSTM，多层 LSTM）"
},
{
"id": 44,
"name": "堆叠 GRU（Stacked GRU，多层 GRU）"
},
{
"id": 45,
"name": "带 Dropout 的 LSTM（防止过拟合）"
},
{
"id": 46,
"name": "带 Batch Normalization 的 LSTM（加速收敛）"
},
{
"id": 47,
"name": "长短期记忆网络（LSTM-LN，层归一化）"
},
{
"id": 48,
"name": "门控循环单元（GRU-LN，层归一化）"
},
{
"id": 49,
"name": "时序卷积网络（TCN，替代 RNN 处理时序）"
},
{
"id": 50,
"name": "双向时序卷积网络（Bi-TCN）"
},
{
"id": 51,
"name": "变压器网络（Transformer，注意力机制）"
},
{
"id": 52,
"name": "迷你 Transformer（轻量级，适用于小数据）"
},
{
"id": 53,
"name": "双向 Transformer（Bi-Transformer）"
},
{
"id": 54,
"name": "预训练 Transformer（BERT，自然语言处理）"
},
{
"id": 55,
"name": "预训练 Transformer（GPT，生成式模型）"
},
{
"id": 56,
"name": "自编码器（AE，基本型，无监督学习）"
},
{
"id": 57,
"name": "稀疏自编码器（Sparse AE，稀疏隐藏层）"
},
{
"id": 58,
"name": "降噪自编码器（Denoising AE，抗噪声）"
},
{
"id": 59,
"name": "卷积自编码器（Convolutional AE，处理图像）"
},
{
"id": 60,
"name": "循环自编码器（Recurrent AE，处理时序）"
},
{
"id": 61,
"name": "变分自编码器（VAE，生成式模型）"
},
{
"id": 62,
"name": "深度变分自编码器（Deep VAE）"
},
{
"id": 63,
"name": "生成对抗网络（GAN，基本型，生成式模型）"
},
{
"id": 64,
"name": "深度卷积 GAN（DCGAN，处理图像）"
},
{
"id": 65,
"name": "条件 GAN（CGAN，带条件约束）"
},
{
"id": 66,
"name": "循环 GAN（CycleGAN，风格迁移）"
},
{
"id": 67,
"name": "生成式对抗网络（WGAN，改进损失函数）"
},
{
"id": 68,
"name": "生成式对抗网络（WGAN-GP，梯度惩罚）"
},
{
"id": 69,
"name": "径向基函数神经网络（RBF，局部逼近）"
},
{
"id": 70,
"name": "正交径向基函数神经网络（Orthogonal RBF）"
},
{
"id": 71,
"name": "自适应径向基函数神经网络（Adaptive RBF）"
},
{
"id": 72,
"name": "小波神经网络（WNN，融合小波变换）"
},
{
"id": 73,
"name": "自适应小波神经网络（Adaptive WNN）"
},
{
"id": 74,
"name": "模糊神经网络（FNN，融合模糊逻辑）"
},
{
"id": 75,
"name": "神经模糊网络（NFN，模糊与神经深度融合）"
},
{
"id": 76,
"name": "支持向量机神经网络（SVM-NN，融合 SVM）"
},
{
"id": 77,
"name": "极限学习机（ELM，单隐藏层，快速训练）"
},
{
"id": 78,
"name": "深度极限学习机（DELM，多隐藏层）"
},
{
"id": 79,
"name": "正则化极限学习机（Regularized ELM）"
},
{
"id": 80,
"name": "带 Dropout 的极限学习机（Dropout ELM）"
},
{
"id": 81,
"name": "图神经网络（GNN，处理图结构数据）"
},
{
"id": 82,
"name": "图卷积网络（GCN，卷积操作拓展到图）"
},
{
"id": 83,
"name": "图注意力网络（GAT，注意力机制拓展到图）"
},
{
"id": 84,
"name": "图循环网络（GRN，循环操作拓展到图）"
},
{
"id": 85,
"name": "深度图卷积网络（Deep GCN）"
},
{
"id": 86,
"name": "胶囊网络（CapsNet，替代卷积处理空间关系）"
},
{
"id": 87,
"name": "深度胶囊网络（Deep CapsNet）"
},
{
"id": 88,
"name": "注意力机制神经网络（Attention-NN，通用注意力）"
},
{
"id": 89,
"name": "自注意力神经网络（Self-Attention-NN）"
},
{
"id": 90,
"name": "多头注意力神经网络（Multi-Head Attention-NN）"
},
{
"id": 91,
"name": "强化学习神经网络（DQN，深度 Q 网络）"
},
{
"id": 92,
"name": "强化学习神经网络（DDQN，双重 DQN）"
},
{
"id": 93,
"name": "强化学习神经网络（Dueling DQN，竞争网络）"
},
{
"id": 94,
"name": "强化学习神经网络（PPO，近端策略优化）"
},
{
"id": 95,
"name": "迁移学习神经网络（Transfer-NN，迁移预训练权重）"
},
{
"id": 96,
"name": "联邦学习神经网络（Federated-NN，隐私保护）"
},
{
"id": 97,
"name": "增量学习神经网络（Incremental-NN，持续学习）"
},
{
"id": 98,
"name": "在线学习神经网络（Online-NN，实时更新）"
},
{
"id": 99,
"name": "鲁棒神经网络（Robust-NN，抗噪声与攻击）"
},
{
"id": 100,
"name": "轻量化神经网络（Lightweight-NN，适用于嵌入式设备）"
}
]

205
modeler/src/views/ai/model/types/types.ts
View File

@@ -1,205 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 { ApiDataResponse, NullableString, PageableResponse } from '@/types';
import type { DraggableElement } from '../../builder/element';
// 模型
export interface Model {
id: number;
// 所属工程ID
projectId: number | undefined;
// 项目名称
projectSpaceName: NullableString;
// 模型名称
name: NullableString;
// 模型描述
description: NullableString;
// 存储位置
storageLocation: NullableString;
// 配置信息（JSON格式）
configInfo: NullableString;
// 状态
status: number;
// 创建时间
createTime: NullableString;
[key: string]: unknown;
}
export interface ModelResult extends ApiDataResponse<Model> {
[key: string]: unknown;
}
export interface ModelQueryResult extends PageableResponse<Model> {
[key: string]: unknown;
}
// 网络模型组件
export interface NetworkModel {
id: number;
// 网络模型名称
name: NullableString;
// 网络类型（如：mlp）
type: NullableString;
// 输入维度
inputDim: number;
// 隐藏层大小（JSON数组格式，如：[256, 256, 128, 64]）
hiddenSizes: NullableString;
// 输出维度
outputDim: number;
// 激活函数（如：relu）
activation: NullableString;
// 状态（1=正常，0=已删除）
status: number;
[key: string]: unknown;
}
export interface NetworkModelResult extends ApiDataResponse<NetworkModel[]> {
[key: string]: unknown;
}
// 观测类型
export interface ObservationType {
id: number;
// 观测类型代码
typeCode: NullableString;
// 观测类型名称
typeName: NullableString;
// 字段类型
fieldType: NullableString;
// 描述
description: NullableString;
// 排序号
sortOrder: number;
// 状态（1=正常，0=已删除
status: number;
[key: string]: unknown;
}
export interface ObservationTypeResult extends PageableResponse<ObservationType> {
[key: string]: unknown;
}
// 奖励设计
export interface RewardDesign {
id: number;
// 奖励名称
name: NullableString;
// 奖励代码
rewardCode: NullableString;
// 奖励值
reward: NullableString;
// 排序
orderIndex: number;
// 说明
description: NullableString;
// 组件ID
componentId: number;
// 状态（1=正常，0=已删除
status: number;
}
export interface RewardDesignResult extends PageableResponse<RewardDesign> {
data: RewardDesign[];
[key: string]: unknown;
}
export interface ModelActionEntryAngleRange {
min: number;
max: number;
}
export interface ModelActionEntryAngle {
// 俯仰角
pitch?: ModelActionEntryAngleRange;
// 偏航角
yaw?: ModelActionEntryAngleRange;
// 滚转角
roll: ModelActionEntryAngleRange;
[key: string]: unknown;
}
export type ModelActionEntryArgs = ModelActionEntryAngle & Record<any, any>;
export interface ModelActionSpace {
// 动作实体
entry: NullableString;
// 动作类型
type: NullableString;
// 动作参数
args: ModelActionEntryArgs;
[key: string]: unknown;
}
// 模型参数设置
export interface ModelParameters {
// 隐藏纬度
hiddenLatitude: NullableString;
// 激活函数
activationFunction: NullableString;
[key: string]: unknown;
}
export interface ModelElementPosition {
x: number;
y: number;
}
export type ModelElementStatus = 'default' | 'success' | 'failed' | 'running' | string | null
export interface ModelBaseElement {
key: string;
name: string;
type: string;
width: number;
height: number;
position: ModelElementPosition;
category: NullableString;
element?: DraggableElement;
[key: string]: unknown;
}
export interface ModelElementEdge {
key: NullableString;
sourceKey: NullableString;
sourceName: NullableString;
targetKey: NullableString;
targetName: NullableString;
}
export interface ModelElement extends ModelBaseElement {
// 连线
edges: ModelElementEdge[];
// 模型参数设置
parameters: ModelParameters;
}
export interface SavedGraphData {
nodes: ModelElement[];
edges: any[];
// 观测类型
observations: ObservationType[];
// 奖励设计
rewards: RewardDesign[];
// 动作空间
actionSpaces: ModelActionSpace[];
}

127
modeler/src/views/ai/model/utils.ts
View File

@@ -1,127 +0,0 @@
/*
* 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 { ModelElement } from './types';
import { generateKey } from '@/utils/strings';
import type { DraggableElement } from '../builder/element';
import { createPorts } from '../builder/ports';
export const createNodePorts = (element: ModelElement): any => {
// 获取子元素数量，做更严谨的空值处理
const childrenLength = element.element?.children?.length ?? 0;
// 如果是组件类型、无分类或者无子元素，返回默认空连接桩
if (element.category === 'component' || !element.category || childrenLength === 0) {
return createPorts();
}
return createPorts();
// // 存储分组配置和连接桩项
// const groups: Record<string, any> = {};
// const items: Array<{ id: string; group: string }> = [];
//
// // 循环生成对应数量的左右侧连接桩
// for (let i = 0; i < childrenLength; i++) {
// // 1. 左侧连接桩：使用X6支持的'left'作为位置名称，args配置偏移量（可选）
// const leftGroupKey = `left_port_group_${i}`;
// groups[leftGroupKey] = createPort('left', { dx: 0, dy: (i - (childrenLength - 1) / 2) * 20 + i + 10 });
// // dy偏移量：让多个左侧连接桩垂直均匀分布，20是间距，可根据需求调整
//
// // 2. 右侧连接桩：使用X6支持的'right'作为位置名称
// const rightGroupKey = `right_port_group_${i}`;
// groups[rightGroupKey] = createPort('right', { dx: 0, dy: (i - (childrenLength - 1) / 2) * 20 + i + 10 });
//
// // 生成左侧连接桩项（唯一ID）
// items.push({
// id: `left_port_${i}`,
// group: leftGroupKey
// });
//
// // 生成右侧连接桩项（唯一ID）
// items.push({
// id: `right_port_${i}`,
// group: rightGroupKey
// });
// }
//
// // 返回最终的连接桩配置
// return {
// groups,
// items
// };
};
export const defaultHeight: Record<string, number> = {
component: 110,
// action: 80,
// task: 80,
// control: 110,
}
export const createModelNode = (element: ModelElement, width: number = 250, height: number = 120): any => {
let realHeight = defaultHeight[element.category as string];
if(!realHeight){
realHeight = 110;
}
if(element?.element?.children){
if(element.element?.children?.length > 4){
realHeight = element.element?.children?.length * 35
} else if(element.element?.children?.length <=1){
realHeight = 100
}
}
// if ('action' === element.category) {
// realHeight = 40;
// width = 140;
// }
return {
shape: element.type ?? 'model',
id: element.key,
position: {
x: element.position?.x || 0,
y: element.position?.y || 0,
},
size: {
width: width,
height: realHeight,
},
attrs: {
label: {
text: element.name,
},
},
data: element,
// ports: createNodePorts(element),
};
};
export const createDraggableElement = (data: DraggableElement, x: number, y: number): ModelElement => {
return {
key: generateKey('model'),
type: 'model',
name: data.name || '',
element: data,
width: 250,
height: 120,
position: {
x,
y,
},
category: data.category ?? 'component',
edges: [],
actionSpaces: [],
observations: [],
rewards: [],
parameters: {
hiddenLatitude: null,
activationFunction: 'relu',
},
} as ModelElement;
};

52
modeler/src/views/ai/project/api.ts
View File

@@ -1,52 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import request from '@/utils/request';
import type { Project, ProjectConfig, ProjectConfigResult, ProjectQueryResult, ResourceTemplate, ResourceTemplateResult } from './types';
import type { ApiDataResponse, BasicResponse } from '@/types';
export const findProjectByQuery = (query: Partial<Project> = {}): Promise<ProjectQueryResult> => {
return request.get<ProjectQueryResult>('/projectSpace/list', query);
};
export const findAllProjects = (): Promise<ApiDataResponse<Project>> => {
return request.get<ApiDataResponse<Project>>('/projectSpace/all');
};
export const createProjectConfig = (project: ProjectConfig): Promise<ProjectConfigResult> => {
return request.postJson<ProjectConfigResult>('/projectSpace/config', project);
};
export const updateProject = (project: Project): Promise<BasicResponse> => {
return request.putJson<ProjectQueryResult>('/projectSpace/edit', project);
};
export const deleteProjectById = (id: number | string): Promise<BasicResponse> => {
return request.delete<ProjectQueryResult>(`/projectSpace/logic/${id}`);
};
export const findAllResourceTemplates = (): Promise<ResourceTemplateResult> => {
return request.get<ResourceTemplateResult>('/resourceTemplate/all');
};
export const findResourceTemplateByQuery = (query: Partial<ResourceTemplate>): Promise<ResourceTemplateResult> => {
return request.get<ResourceTemplateResult>('/resourceTemplate/list', query);
};
export const createResourceTemplate = (rt: Partial<ResourceTemplate>): Promise<BasicResponse> => {
return request.postJson<BasicResponse>('/resourceTemplate/add', rt);
};
export const updateResourceTemplate = (rt: Partial<ResourceTemplate>): Promise<BasicResponse> => {
return request.putJson<BasicResponse>('/resourceTemplate/edit', rt);
};
export const deleteResourceTemplate = (id: number): Promise<BasicResponse> => {
return request.delete(`/resourceTemplate/logic/${id}`);
};

119
modeler/src/views/ai/project/config.ts
View File

@@ -1,119 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 { Project, ProjectConfig, ResourceTemplate } from './types';
export const projectColumns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '训练实例数',
dataIndex: 'trainingInstanceCount',
key: 'trainingInstanceCount',
},
{
title: '场景类型',
dataIndex: 'scene',
key: 'scene',
},
// {
// title: '状态',
// dataIndex: 'status',
// key: 'status',
// },
{
title: '描述',
dataIndex: 'description',
key: 'description',
},
{
title: '操作',
dataIndex: '_actions',
key: '_actions',
width: 100,
},
];
export const resourceTemplateColumns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'CPU数量配置',
dataIndex: 'cpuConfig',
key: 'cpuConfig',
},
{
title: 'GPU数量配置',
dataIndex: 'gpuConfig',
key: 'gpuConfig',
},
{
title: '存储资源配置',
dataIndex: 'storageConfig',
key: 'storageConfig',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
},
{
title: '操作',
dataIndex: '_actions',
key: '_actions',
},
];
export const defaultProject: Project = {
id: 0,
name: null,
scene: 1,
trainingInstanceCount: 0,
description: null,
status: 1,
};
export const defaultResourceTemplate: ResourceTemplate = {
id: 0,
name: null,
projectSpaceId: null,
cpuConfig: null,
gpuConfig: null,
storageConfig: null,
status: 1, // 1=正常,0=已删除
};
export const defaultProjectConfig: ProjectConfig = {
id: 0,
projectSpaceId: null,
genConfigId: null,
projectName: null,
taskName: null,
scenarioName: null,
storageLocation: null,
description: null,
trainingInstanceCount: null,
resourceTemplateId: undefined,
};

256
modeler/src/views/ai/project/config.vue
View File

@@ -1,256 +0,0 @@
<template>
<Layout>
<div class="ks-layout-page">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="计算资源配置">
<a-table
:columns="columns"
:dataSource="dataSource"
bordered
size="small"
/>
<a-collapse v-model:activeKey="resourceActiveKey" class="mt-5">
<a-collapse-panel key="1" header="MaxCompute资源-待关联资源(3)">
<a-row :gutter="15">
<a-col :span="6">
<a-card class="min-h-36" hoverable>
<template #title>
<span class="text-blue-500">resource_001</span>
<span class="absolute right-2"><a-checkbox /></span>
</template>
<span class="text-gray-800">预付费</span>
<span>MaxCompute</span>
<span class="absolute bottom-2 right-2">Designer</span>
</a-card>
</a-col>
<a-col :span="6">
<a-card class="min-h-36" hoverable>
<template #title>
<span class="text-blue-500">resource_002</span>
<span class="absolute right-2"><a-checkbox /></span>
</template>
<span class="text-gray-800">预付费</span>
<span>MaxCompute</span>
<span class="absolute bottom-2 right-2">Designer</span>
</a-card>
</a-col>
<a-col :span="6">
<a-card class="min-h-36" hoverable>
<template #title>
<span class="text-blue-500">resource_003</span>
<span class="absolute right-2"><a-checkbox /></span>
</template>
<span class="text-gray-800">预付费</span>
<span>MaxCompute</span>
<span class="absolute bottom-2 right-2">Designer</span>
</a-card>
</a-col>
</a-row>
<a-button class="mt-5" type="primary">确认关联</a-button>
</a-collapse-panel>
</a-collapse>
</a-tab-pane>
<a-tab-pane key="2" force-render tab="成员及角色配置">
<a-space class="mb-5">
<a-button type="primary">新增授权</a-button>
<a-input placeholder="筛选授权主体,权限策略,资源组." style="width: 250px" />
<a-select
v-model:value="value1"
style="width: 150px"
>
<a-select-option value="0">所有主体</a-select-option>
<a-select-option value="1">所有主体2</a-select-option>
</a-select>
<a-select
v-model:value="value1"
style="width: 150px"
>
<a-select-option value="0">策略类型1</a-select-option>
<a-select-option value="1">策略类型2</a-select-option>
</a-select>
</a-space>
<a-table
:columns="columns2"
:dataSource="dataSource2"
bordered
size="small"
/>
</a-tab-pane>
<a-tab-pane key="3" tab="通用配置">
<a-form
:model="formState"
autocomplete="off"
class="w-1/2 bg-white"
layout="vertical"
name="basic"
style="padding: 15px"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
:rules="[{ required: true, message: 'Please input your taskName!' }]"
label="任务名称"
name="taskName"
>
<a-input v-model:value="formState.taskName" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: 'Please input your location!' }]"
label="任务存储位置"
name="location"
>
<a-input v-model:value="formState.location" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: 'Please input your name!' }]"
label="场景名称"
name="name"
>
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: 'Please input your description!' }]"
label="任务描述"
name="description"
>
<a-textarea v-model:value="formState.description" />
</a-form-item>
<a-form-item>
<a-space>
<a-button html-type="submit" type="primary">确定</a-button>
<a-button>取消</a-button>
</a-space>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
</div>
</Layout>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import Layout from '../layout.vue';
const activeKey = ref('1');
const dataSource = [
{
key: '1',
name: 'test001',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
{
key: '2',
name: 'test002',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
];
const columns = [
{
title: 'MaxCompute项目名称',
dataIndex: 'name',
key: 'name',
},
{
title: 'Quota名称',
dataIndex: 'age',
key: 'age',
},
{
title: '付费类型',
dataIndex: 'address',
key: 'address',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
},
{
title: '创建时间',
dataIndex: 'createdAt',
key: 'createdAt',
},
];
const resourceActiveKey = ref('1');
interface FormState {
taskName: string;
name: string;
location: string;
description: string;
}
const formState = reactive<FormState>({
taskName: '',
name: '',
location: '',
description: '',
});
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const value1 = ref('0');
const dataSource2 = [
{
key: '1',
name: 'test001',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
{
key: '2',
name: 'test002',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
];
const columns2 = [
{
title: '授权主体',
dataIndex: 'name',
key: 'name',
},
{
title: '权限策略',
dataIndex: 'age',
key: 'age',
},
{
title: '备注',
dataIndex: 'address',
key: 'address',
},
];
</script>

208
modeler/src/views/ai/project/create-v1.vue
View File

@@ -1,208 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card" title="新建">
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<div class="p-3" style="width: 80%;margin: 0 auto;">
<a-steps
v-model:current="current"
:items="steps"
:style="stepStyle"
class="ks-create-step"
size="small"
type="navigation"
></a-steps>
</div>
<div class="steps-content">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<template v-if="current === 0">
<a-form-item label="工程名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入工程名称" />
</a-form-item>
<a-form-item label="训练实例数" v-bind="validateInfos['sub.name']">
<a-input v-model:value="modelRef.sub.name" placeholder="请输入训练实例数" />
</a-form-item>
<a-form-item label="存储资源配置" v-bind="validateInfos['sub.names']">
<a-input v-model:value="modelRef.sub.name" placeholder="请输入存储资源配置" />
</a-form-item>
<a-form-item label="所属场景" v-bind="validateInfos['sub.names']">
<a-textarea v-model:value="modelRef.sub.name" placeholder="请输入所属场景" />
</a-form-item>
<a-form-item label="描述" v-bind="validateInfos['sub.names']">
<a-textarea v-model:value="modelRef.sub.name" placeholder="请输入描述" />
</a-form-item>
</template>
<template v-if="current === 1">
<a-form-item label="任务名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入任务名称" />
</a-form-item>
<a-form-item label="任务存储名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入任务存储名称" />
</a-form-item>
<a-form-item label="场景名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入场景名称" />
</a-form-item>
<a-form-item label="任务描述" v-bind="validateInfos.name">
<a-textarea v-model:value="modelRef.name" placeholder="请输入任务描述" />
</a-form-item>
</template>
<template v-if="current === 2">
<a-form-item label="模型名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入模型名称" />
</a-form-item>
<a-form-item label="CPU数量配置" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入CPU数量配置" />
</a-form-item>
<a-form-item label="模型付费类型" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" placeholder="请输入模型付费类型" />
</a-form-item>
<a-form-item label="CPU数量配置" v-bind="validateInfos.name">
<a-textarea v-model:value="modelRef.name" placeholder="请输入CPU数量配置" />
</a-form-item>
<a-form-item label="选择模型" v-bind="validateInfos.name">
<a-button style="width: 120px;">新建模型</a-button>
<div class="w-full mt-2" style="margin-top: 15px;">
<a-row :gutter="15">
<a-col :span="6">
<a-card class="ks-sm-card selected">
<template #title>
<a-flex>
<span class="ks-card-title">模版123</span>
<span class="ks-card-select-icon" style="margin-left: auto">
<CheckCircleOutlined />
</span>
</a-flex>
</template>
MaxCompute
</a-card>
</a-col>
<a-col :span="6">
<a-card class="ks-sm-card">
<template #title>
<span class="ks-card-title">模版123</span>
</template>
MaxCompute
</a-card>
</a-col>
</a-row>
</div>
</a-form-item>
</template>
</a-form>
</div>
<div class="steps-action w-full mt-4">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-space>
<a-button v-if="current>0" style="width: 120px;" type="primary">取消</a-button>
<a-button v-if="current < steps.length - 1" style="width: 120px;" type="primary" @click="next">保存并下一步</a-button>
<a-button v-if="current === 2" style="width: 120px;" type="primary" @click="nextJump">保存并跳转</a-button>
</a-space>
</a-form-item>
</a-form>
</div>
</div>
</a-card>
</Layout>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Form } from 'ant-design-vue';
import { CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import Layout from '../layout.vue';
const router = useRouter();
const useForm = Form.useForm;
const labelCol = { span: 4 };
const wrapperCol = { span: 14 };
const current = ref<number>(0);
const next = () => {
current.value++;
};
const nextJump = () => {
// current.value--;
router.push(({
path: '/app/ai/project/management',
}));
};
const steps = [
{
title: 'Step 1',
status: 'finish',
description: '基本信息',
},
{
title: 'Step 2',
status: 'process',
description: '配置',
},
{
title: 'Step 3',
status: 'wait',
description: '选择模型',
},
];
const stepStyle = {
marginBottom: '60px',
};
const modelRef = reactive({
name: '',
sub: {
name: '',
},
});
const { validateInfos } = useForm(
modelRef,
reactive({
name: [
{
required: true,
message: 'Please input name',
},
],
'sub.name': [
{
required: true,
message: 'Please input sub name',
},
],
}),
);
// const onSubmit = () => {
// validate()
// .then(res => {
// console.log(res, toRaw(modelRef));
// })
// .catch(err => {
// console.log('error', err);
// });
// };
// const reset = () => {
// resetFields();
// };
</script>

190
modeler/src/views/ai/project/create.vue
View File

@@ -1,190 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">新建</span>
</a-space>
</template>
<a-form ref="projectConfigFormRef" :label-col="labelCol" :model="projectConfigForm" :wrapper-col="wrapperCol">
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<div class="p-3" style="width: 60%;margin-left: 15%;">
<a-steps
v-model:current="current"
:items="steps"
:style="stepStyle"
class="ks-create-step"
size="small"
type="navigation"
></a-steps>
</div>
<div class="steps-content">
<template v-if="current === 0">
<a-form-item :rules="[{ required: true, message: '请输入工程名称!' }]" label="工程名称" name="projectName">
<a-input v-model:value="projectConfigForm.projectName" placeholder="请输入工程名称" />
</a-form-item>
<a-form-item :rules="[{ required: true, message: '请输入任务名称!' }]" label="任务名称" name="taskName">
<a-input v-model:value="projectConfigForm.taskName" placeholder="请输入任务名称" />
</a-form-item>
<a-form-item :rules="[{ required: true, message: '请输入场景名称!' }]" label="场景名称" name="scenarioName">
<a-input v-model:value="projectConfigForm.scenarioName" placeholder="请输入场景名称" />
</a-form-item>
<a-form-item label="存储位置" name="storageLocation">
<!-- <a-input v-model:value="projectConfigForm.storageLocation" placeholder="请输入存储位置" />-->
<Finder :path="projectConfigForm.storageLocation" placeholder="请选择存储位置" @select="(v: string)=> projectConfigForm.storageLocation = v"/>
</a-form-item>
<a-form-item label="任务描述" name="description">
<a-textarea v-model:value="projectConfigForm.description" placeholder="请输入任务描述" />
</a-form-item>
</template>
<template v-if="current === 1">
<a-form-item :rules="[{ required: true, message: '请输入训练实例数!' }]" label="训练实例数" name="trainingInstanceCount">
<a-input v-model:value="projectConfigForm.trainingInstanceCount" placeholder="请输入训练实例数" style="width:100%;" />
</a-form-item>
<a-form-item label="资源模版" name="resourceTemplateId">
<a-select v-model:value="projectConfigForm.resourceTemplateId"
:rules="[{ required: true, message: '请选择资源模版!' }]"
@change="handleSelectTemplate">
<a-select-option v-for="tpl in templates" :key="tpl.id" :value="tpl.id">{{ tpl.name }}</a-select-option>
</a-select>
<div v-if="selectedTemplate" class="w-full mt-6">
<a-row :gutter="15">
<a-col :span="10">
<a-card class="ks-sm-card card-size-lg selected ks-container-type-card">
<template #title>
<span class="ks-card-title">{{ selectedTemplate.name }}</span>
<span class="ks-card-select-icon absolute right-10" style="margin-left: auto">
<CheckCircleOutlined />
</span>
</template>
<div class="w-full">
<a-flex class="mb-2">
<span style="width:90px; text-align: left; padding-right: 1px;">CPU数量配置: </span>
<span>{{ selectedTemplate.cpuConfig }}</span>
</a-flex>
<a-flex class="mb-2">
<span style="width:90px; text-align: left; padding-right: 1px;">GPU数量配置: </span>
<span>{{ selectedTemplate.gpuConfig }}</span>
</a-flex>
<a-flex class="mb-2">
<span style="width:90px; text-align: left; padding-right: 1px;">存储资源配置: </span>
<span>{{ selectedTemplate.storageConfig }}</span>
</a-flex>
</div>
</a-card>
</a-col>
</a-row>
</div>
</a-form-item>
</template>
</div>
<div class="steps-action w-full mt-4">
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-space>
<a-button v-if="current>0" style="width: 120px;" type="primary">取消</a-button>
<a-button v-if="current === 0" style="width: 120px;" type="primary" @click="next">保存并下一步</a-button>
<a-button v-if="current === 1" style="width: 120px;" type="primary" @click="()=> current = 0">上一步</a-button>
<a-button v-if="current === 1" style="width: 120px;" type="primary" @click="handleSave">保存并跳转</a-button>
</a-space>
</a-form-item>
</div>
</div>
</a-form>
</a-card>
</Layout>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { type FormInstance, message } from 'ant-design-vue';
import Layout from '../layout.vue';
import { CheckCircleOutlined } from '@ant-design/icons-vue';
import type { ProjectConfig, ProjectConfigResult, ResourceTemplate } from './types';
import { defaultProjectConfig } from './config';
import { createProjectConfig, findAllResourceTemplates } from './api';
import Finder from '../finder.vue'
const router = useRouter();
const labelCol = { span: 4 };
const wrapperCol = { span: 14 };
const current = ref<number>(0);
const nextJump = () => {
// current.value--;
router.push(({
path: '/app/ai/project/management',
}));
};
const steps = [
{
title: 'Step 1',
status: 'finish',
description: '基本信息',
},
{
title: 'Step 2',
status: 'process',
description: '配置',
},
];
const stepStyle = {
marginBottom: '60px',
};
const projectConfigFormRef = ref<FormInstance>();
const projectConfigForm = ref<ProjectConfig>({ ...defaultProjectConfig });
const templates = ref<ResourceTemplate[]>([]);
const selectedTemplate = ref<ResourceTemplate | null>(null);
const handleSelectTemplate = (id: number) => {
if (templates.value && templates.value.length > 0) {
selectedTemplate.value = templates.value.find(t => t.id === id) as ResourceTemplate;
}
};
const loadTemplates = () => {
templates.value = [];
findAllResourceTemplates().then(r => {
templates.value = Array.isArray(r?.data) ? r?.data : [];
});
};
const next = () => {
if (projectConfigFormRef.value) {
projectConfigFormRef.value.validate().then(() => {
current.value++;
});
}
};
const handleSave = () => {
if (projectConfigFormRef.value) {
projectConfigFormRef.value?.validate().then(() => {
createProjectConfig(projectConfigForm.value)
.then((r: ProjectConfigResult) => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
nextJump();
} else {
message.error(r.msg ?? '保存失败.')
}
});
});
}
};
onMounted(() => {
loadTemplates();
});
</script>

34
modeler/src/views/ai/project/management.vue
View File

@@ -1,34 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">工程管理</span>
</a-space>
</template>
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<a-tabs v-model:activeKey="activeKey" class="ks-page-tabs">
<template #rightExtra>
</template>
<a-tab-pane key="1" tab="工程列表">
<ProjectLists />
</a-tab-pane>
<a-tab-pane key="2" tab="自定义资源模版">
<ResourceTemplates />
</a-tab-pane>
</a-tabs>
</div>
</a-card>
</Layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Layout from '../layout.vue';
import ResourceTemplates from './resource-templates.vue';
import ProjectLists from './project-lists.vue';
const activeKey = ref('1');
</script>

154
modeler/src/views/ai/project/project-lists.vue
View File

@@ -1,154 +0,0 @@
<template>
<div class="ks-content-wrapper">
<div class="w-full mb-8">
<a-space class="ks-page-tabs-right">
<a-input v-model:value="projectQuery.name" placeholder="工程名称" style="width: 200px;" />
<a-button class="ks-tabs-btn btn-search" style="width:120px;" type="primary" @click="()=> loadProjects()">查询</a-button>
<a-button class="ks-tabs-btn btn-create" style="width:120px;" type="primary" @click="createJump">新建</a-button>
</a-space>
</div>
<a-table
:columns="projectColumns"
:dataSource="projectDatasource"
size="small"
>
<template #bodyCell='{ column, index, text, record}'>
<template v-if="column.dataIndex === 'index'">
{{ index + 1 }}
</template>
<template v-if="column.dataIndex === 'scene'">
<span v-if="text === 1">运行</span>
<span v-else>停止</span>
</template>
<a-space v-if="column.dataIndex === '_actions'">
<a-button class="btn-link-edit" size="small" type="link" @click="()=> handleEdit(record)">编辑</a-button>
<a-popconfirm
title="确定删除?"
@confirm="()=> handleDelete(record)"
>
<a-button class="btn-link-delete" danger size="small" type="link">删除</a-button>
</a-popconfirm>
<a-button class="btn-link-detail" size="small" type="link" @click="()=> handleDetail(record)">详情</a-button>
</a-space>
</template>
</a-table>
<a-modal v-model:open="editModalVisible" :title="modalAction ? '编辑' : '详情'"
centered
@ok="()=> editModalVisible = false ">
<a-form
ref="projectFormRef"
:disabled="modalAction === 'detail'"
:label-col="{span: 6}"
:model="projectForm"
autocomplete="off"
layout="horizontal"
name="basic"
style="padding: 15px"
>
<a-form-item :rules="[{ required: modalAction === 'edit', message: '请输入工程名称!' }]" label="工程名称" name="name">
<a-input v-model:value="projectForm.name" placeholder="请输入工程名称" />
</a-form-item>
<a-form-item :rules="[{ required: modalAction === 'edit', message: '请选择场景类型!' }]" label="场景类型" name="scene">
<a-select v-model:value="projectForm.scene">
<a-select-option :key="1" :value="1">运行</a-select-option>
<a-select-option :key="2" :value="2">停止</a-select-option>
</a-select>
</a-form-item>
<a-form-item :rules="[{ required: modalAction === 'edit', message: '请输入训练实例数!' }]" label="训练实例数" name="trainingInstanceCount">
<a-input v-model:value="projectForm.trainingInstanceCount" placeholder="请输入训练实例数" />
</a-form-item>
<a-form-item label="工程描述" name="description">
<a-textarea v-model:value="projectForm.description" placeholder="请输入任务描述" />
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button style="width: 120px;" @click="()=> editModalVisible = false">取消</a-button>
<a-button v-if="modalAction === 'edit'" html-type="submit" style="width: 120px;" type="primary" @click="handleSaveOrUpdate">确认并保存</a-button>
</a-space>
</template>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { type FormInstance, message } from 'ant-design-vue';
import { deleteProjectById, findProjectByQuery, updateProject } from './api';
import type { Project } from './types';
import { defaultProject, projectColumns } from './config';
const router = useRouter();
const createJump = () => {
router.push(({
path: '/app/ai/project/create',
}));
};
const modalAction = ref<string>('edit');
const editModalVisible = ref<boolean>(false);
const projectFormRef = ref<FormInstance>();
const projectForm = ref<Project>({ ...defaultProject });
// 工程
const projectQuery = ref<Partial<Project>>({
name: null,
});
const projectDatasource = ref<Project[]>([]);
const loadProjects = () => {
editModalVisible.value = false;
projectForm.value = { ...defaultProject };
findProjectByQuery(projectQuery.value).then(r => {
projectDatasource.value = r.rows || [];
});
};
const handleEdit = (r: Project) => {
modalAction.value = 'edit';
editModalVisible.value = true;
projectForm.value = { ...r };
};
const handleDetail = (r: Project) => {
modalAction.value = 'detail';
editModalVisible.value = true;
projectForm.value = { ...r };
console.error(projectForm.value);
};
const handleDelete = (rt: Project) => {
deleteProjectById(rt.id).then(res => {
if (res.code === 200) {
message.success('删除成功');
loadProjects();
}
});
};
const handleSaveOrUpdate = () => {
if (projectFormRef.value) {
projectFormRef.value.validate().then(() => {
updateProject(projectForm.value).then(r => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
loadProjects();
} else {
message.error(r.msg ?? '保存失败.')
}
});
});
}
};
onMounted(() => {
loadProjects();
});
</script>

178
modeler/src/views/ai/project/resource-templates.vue
View File

@@ -1,178 +0,0 @@
<template>
<div class="ks-content-wrapper">
<div class="w-full mb-8">
<a-space>
<a-input v-model:value="resourceTemplateQuery.name" placeholder="模版名称" style="width: 200px;" />
<a-button class="ks-tabs-btn btn-search" style="width: 120px;" type="primary" @click="()=> loadResourceTemplates()">查询</a-button>
<a-button class="ks-tabs-btn btn-create" style="width:120px;" type="primary" @click="showCreateResourceTemplateModal">新建</a-button>
</a-space>
</div>
<a-table
:columns="resourceTemplateColumns"
:dataSource="resourceTemplateDatasource"
:pagination="false"
:row-key="'id'"
childrenColumnName="__children"
size="small"
>
<template #bodyCell='{ column,text,index,record }'>
<template v-if="column.dataIndex === 'index'">
{{ index + 1 }}
</template>
<template v-if="column.dataIndex === 'status'">
<span v-if="1 === text" class="btn-link-edit">正常</span>
<span v-if="0 === text" class="btn-link-delete">已删除</span>
</template>
<a-space v-if="column.dataIndex === '_actions'">
<a-button class="btn-link-edit" size="small" type="link" @click="()=> handleEditResourceTemplate(record)">编辑</a-button>
<a-popconfirm
title="确定删除?"
@confirm="()=> handleDeleteResourceTemplate(record)"
>
<a-button class="btn-link-delete" danger size="small" type="link">删除</a-button>
</a-popconfirm>
</a-space>
</template>
</a-table>
<a-modal v-model:open="createResourceTemplateModalVisible" :title="resourceTemplateSelected ? '编辑' : '新建'"
centered
@ok="()=> createResourceTemplateModalVisible = false ">
<a-form
ref="resourceTemplateFormRef"
:label-col="{span: 6}"
:model="resourceTemplateForm"
autocomplete="off"
layout="horizontal"
name="basic"
style="padding: 15px"
>
<a-form-item
:rules="[{ required: true, message: '请输入资源模板名称!' }]"
label="资源模板名称"
name="name"
>
<a-input v-model:value="resourceTemplateForm.name" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: '请输入CPU数量配置!' }]"
label="CPU数量配置"
name="cpuConfig"
>
<a-input v-model:value="resourceTemplateForm.cpuConfig" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: '请输入GPU数量配置!' }]"
label="GPU数量配置"
name="gpuConfig"
>
<a-input v-model:value="resourceTemplateForm.gpuConfig" />
</a-form-item>
<a-form-item
label="存储资源配置"
name="storageConfig"
>
<a-textarea v-model:value="resourceTemplateForm.storageConfig" />
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button style="width: 120px;" @click="()=> createResourceTemplateModalVisible = false">取消</a-button>
<a-button html-type="submit" style="width: 120px;" type="primary" @click="handleSaveOrUpdate">确认并保存</a-button>
</a-space>
</template>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { type FormInstance, message } from 'ant-design-vue';
import { createResourceTemplate, deleteResourceTemplate, findResourceTemplateByQuery, updateResourceTemplate } from './api';
import type { ResourceTemplate } from './types';
import { defaultResourceTemplate, resourceTemplateColumns } from './config';
const createResourceTemplateModalVisible = ref<boolean>(false);
// 资源模版
const resourceTemplateQuery = ref<Partial<ResourceTemplate>>({
name: null,
});
const resourceTemplateDatasource = ref<ResourceTemplate[]>([]);
const resourceTemplateFormRef = ref<FormInstance>();
const resourceTemplateForm = ref<ResourceTemplate>({ ...defaultResourceTemplate });
const resourceTemplateSelected = ref<ResourceTemplate | null>(null);
const loadResourceTemplates = () => {
createResourceTemplateModalVisible.value = false;
resourceTemplateSelected.value = null;
findResourceTemplateByQuery(resourceTemplateQuery.value).then(r => {
resourceTemplateDatasource.value = Array.isArray(r.rows) ? r.rows : [];
});
};
const showCreateResourceTemplateModal = () => {
resourceTemplateForm.value = { ...defaultResourceTemplate };
createResourceTemplateModalVisible.value = true;
};
const handleEditResourceTemplate = (rt: ResourceTemplate) => {
resourceTemplateSelected.value = rt;
resourceTemplateForm.value = { ...rt };
createResourceTemplateModalVisible.value = true;
};
const handleDeleteResourceTemplate = (rt: ResourceTemplate) => {
deleteResourceTemplate(rt.id).then(res => {
if (res.code === 200) {
message.success(res.msg ?? '删除成功.')
loadResourceTemplates();
} else {
message.error(res.msg ?? '删除失败.')
}
});
};
const handleSaveOrUpdate = () => {
if (resourceTemplateFormRef.value) {
resourceTemplateFormRef.value.validate()
.then(() => {
let res = null;
let values = { ...resourceTemplateForm.value };
// 如果是编辑模式，合并选中的记录
if (resourceTemplateSelected.value) {
values = { ...resourceTemplateSelected.value, ...values };
}
if (resourceTemplateSelected.value?.id) {
res = updateResourceTemplate(values);
} else {
res = createResourceTemplate(values);
}
res.then(r => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
loadResourceTemplates();
} else {
message.error(r.msg ?? '保存失败.')
}
});
});
}
};
onMounted(() => {
loadResourceTemplates();
});
</script>

65
modeler/src/views/ai/project/types.ts
View File

@@ -1,65 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 { ApiDataResponse, BasicResponse, NullableString, PageableResponse } from '@/types';
// 工程
export interface Project {
id: number;
name: NullableString;
scene: number; // 1=运行,2=停止
trainingInstanceCount: number; // 训练实例数
description: NullableString; // 描述
status: number; // 1=正常,0=停用
[key: string]: unknown;
}
export interface ProjectQueryResult extends PageableResponse<Project> {
[key: string]: unknown;
}
export interface ProjectConfig {
id: number;
projectSpaceId: number | null;
genConfigId: number | null;
projectName: NullableString;
taskName: NullableString;
scenarioName: NullableString;
storageLocation: NullableString;
description: NullableString;
trainingInstanceCount: number | null;
resourceTemplateId: number | undefined | null;
[key: string]: unknown;
}
export interface ProjectConfigResult extends BasicResponse {
[key: string]: unknown;
}
// 资源模版
export interface ResourceTemplate {
id: number;
projectSpaceId: number | null;
name: NullableString;
cpuConfig: NullableString;
gpuConfig: NullableString;
storageConfig: NullableString;
status: number; // 1=正常,0=已删除
[key: string]: unknown;
}
export interface ResourceTemplateResult extends ApiDataResponse<ResourceTemplate> {
[key: string]: unknown;
}

278
modeler/src/views/ai/project/workspace.vue
View File

@@ -1,278 +0,0 @@
<template>
<Layout>
<div class="w-full h-full">
<a-card class="ks-page-card ks-workspace-card" title="工程空间详情">
<div class="ks-scrollable" style="height: 79vh;overflow-y: auto;padding-right: 10px">
<a-row :gutter="15">
<a-col :span="9">
<a-card class="ks-workspace-full-card" style="margin-bottom: 15px">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">基本信息</span>
</template>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>工作空间ID:</span>
</a-col>
<a-col :span="16">
<span>project_workspace_001</span>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>工作空间名称:</span>
</a-col>
<a-col :span="16">
<span>名称1</span>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>工作空间显示名称:</span>
</a-col>
<a-col :span="16">
<span>名称1</span>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>工作空间描述:</span>
</a-col>
<a-col :span="16">
<span>名称1</span>
</a-col>
</a-row>
</p>
</a-card>
</a-col>
<a-col :span="9">
<a-card class="ks-workspace-split-card" style="margin-bottom: 15px">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">运行总览</span>
</template>
<div class="w-full text-center p-3">
<h3 class="text-4xl mb-2 text-[#70d3f0]">8</h3>
<h2 class="text-1xl text-[#70d3f0]">训练实例</h2>
</div>
</a-card>
<a-card class="ks-workspace-split-card">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">AI资产</span>
</template>
<a-row :gutter="15">
<a-col :span="12">
<div class="w-full text-center p-3">
<h3 class="text-4xl mb-2 text-[#70d3f0]">8</h3>
<h2 class="text-1xl text-[#70d3f0]">模型</h2>
</div>
</a-col>
<a-col :span="12">
<div class="w-full text-center p-3 h-[190px]">
<h3 class="text-4xl mb-2 text-[#70d3f0]">8</h3>
<h2 class="text-1xl text-[#70d3f0]">镜像</h2>
</div>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :span="6">
<a-card class="ks-workspace-full-card">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">成员与角色</span>
</template>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>当前账号:</span>
</a-col>
<a-col :span="16">
<span>11111</span>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>所属角色:</span>
</a-col>
<a-col :span="16">
<a-space>
<div class="ks-role-tag">管理员</div>
<div class="ks-role-tag">用户</div>
</a-space>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>管理员:</span>
</a-col>
<a-col :span="16">
<span>名称1</span>
</a-col>
</a-row>
</p>
<p class="mb-2">
<a-row :gutter="15">
<a-col :span="8">
<span>用户:</span>
</a-col>
<a-col :span="16">
<span>显示名称1</span>
</a-col>
</a-row>
</p>
</a-card>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="9">
<a-card class="ks-process-card">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">资源总额</span>
</template>
<p>
<a-row :gutter="15">
<a-col :span="8">
<span>资源模版:</span>
</a-col>
<a-col :span="16">
<a-select placeholder="资源模版" style="width: 80%" />
</a-col>
</a-row>
</p>
<p>
<a-row :gutter="15">
<a-col :span="8">
<span>GPU调度量(卡数):</span>
</a-col>
<a-col :span="16">
<a-flex class="ks-card-process">
<span class="score">本级:0</span>
<a-progress :showInfo="false" />
<span class="level">0/0</span>
</a-flex>
</a-col>
</a-row>
</p>
<p>
<a-row :gutter="15">
<a-col :span="8">
<span>GPU调度量(核数):</span>
</a-col>
<a-col :span="16">
<a-flex class="ks-card-process">
<span class="score">本级:0</span>
<a-progress :showInfo="false" />
<span class="level">0/0</span>
</a-flex>
</a-col>
</a-row>
</p>
<p>
<a-row :gutter="15">
<a-col :span="8">
<span>内存调度量(GiB):</span>
</a-col>
<a-col :span="16">
<a-flex class="ks-card-process">
<span class="score">本级:0</span>
<a-progress :showInfo="false" />
<span class="level">0/0</span>
</a-flex>
</a-col>
</a-row>
</p>
</a-card>
</a-col>
<a-col :span="15">
<a-card style="min-height: 365px;">
<template #title>
<span class="ks-card-title-split-icon"></span>
<span class="ks-card-title-split-prefix"></span>
<span class="ks-card-title-split-title">资源总额</span>
</template>
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="false"
size="small"
/>
</a-card>
</a-col>
</a-row>
</div>
</a-card>
</div>
</Layout>
</template>
<script lang="ts" setup>
import Layout from '../layout.vue';
const dataSource = [
{
key: '1',
name: 'test001',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
{
key: '2',
name: 'test002',
age: '-',
address: '-',
status: '✅ 运行中',
createdAt: '2025-12-12 12:12:12',
},
];
const columns = [
{
title: '训练实例名称',
dataIndex: 'name',
key: 'name',
},
{
title: '资源占用情况',
dataIndex: 'age',
key: 'age',
},
{
title: '资源模板',
dataIndex: 'address',
key: 'address',
},
];
</script>

178
modeler/src/views/ai/router.ts
View File

@@ -1,178 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 RouteRecordRaw, type RouteRecordRedirect} from 'vue-router';
export const routers: RouteRecordRaw[] = [
{
name: 'index',
path: '/',
redirect: '/app/ai/project/management',
meta: {
hidden: true,
},
} as RouteRecordRedirect,
{
name: 'signin',
path: '/signin',
meta: {
title: '登录',
},
component: () => import('@/views/signin.vue')
},
{
path: '/',
meta: {
title: '工程空间',
},
children: [
{
name: 'ai-project-management',
path: '/app/ai/project/management',
meta: {
title: '工程管理',
},
component: () => import('@/views/ai/project/management.vue')
},
{
name: 'ai-project-create',
path: '/app/ai/project/create',
meta: {
title: '新建/自定义',
hidden: true,
},
component: () => import('@/views/ai/project/create.vue')
},
{
name: 'ai-project-workspace',
path: '/app/ai/project/workspace',
meta: {
title: '工程空间详情',
hidden: true,
},
component: () => import('@/views/ai/project/workspace.vue')
},
{
name: 'ai-training-task-monitor',
path: '/app/ai/training/task/monitor',
meta: {
title: '训练任务监控',
hidden: true,
},
component: () => import('@/views/ai/training/task-monitor.vue')
},
{
name: 'ai-training-resources-monitor',
path: '/app/ai/training/resources/monitor',
meta: {
title: '训练资源监控',
hidden: true,
},
component: () => import('@/views/ai/training/resource-monitor.vue')
},
{
name: 'ai-project-config',
path: '/app/ai/project/config',
meta: {
hidden: true,
},
component: () => import('@/views/ai/project/config.vue')
},
]
},
{
path: '/',
meta: {
title: '模型构建',
},
children: [
{
name: 'ai-model-management',
path: '/app/ai/model/management',
meta: {
title: '模型管理',
},
component: () => import('@/views/ai/model/management.vue')
},
{
name: 'ai-model-builder-designer',
path: '/app/ai/model/builder/:id/designer',
meta: {
title: '模型构建',
},
component: () => import('@/views/ai/model/builder.vue')
},
{
name: 'ai-model-components',
path: '/app/ai/model/components',
meta: {
title: '模型组件设置',
},
component: () => import('@/views/ai/model/components.vue')
},
]
},
{
path: '/',
meta: {
title: '模型训练',
},
children: [
{
name: 'ai-model-task-management',
path: '/app/ai/training/task/management',
meta: {
title: '任务管理',
},
component: () => import('@/views/ai/training/task-management.vue')
},
{
name: 'ai-training-task-configurer',
path: '/app/ai/training/task/configurer',
meta: {
title: '训练任务配置',
},
component: () => import('@/views/ai/training/task-configurer.vue')
},
]
},
{
path: '/',
meta: {
title: '模型应用',
},
children: [
{
name: 'ai-applications-gambling',
path: '/app/ai/applications/gambling',
meta: {
title: '模型部署与推理',
},
component: () => import('@/views/ai/applications/gambling.vue')
},
{
name: 'ai-applications-gambling-charts',
path: '/app/ai/applications/gambling/:id/charts',
meta: {
title: '模型部署与推理',
},
component: () => import('@/views/ai/applications/charts/charts.vue')
}
]
},
]

207
modeler/src/views/ai/sidebar.vue
View File

@@ -1,207 +0,0 @@
<template>
<a-layout-sider class="ks-layout-sidebar" width="250">
<a-card class="ks-layout-sidebar-card">
<template #title>
<a-flex>
<span class="icon"></span>
<!-- <span class="text">工程空间</span>-->
</a-flex>
</template>
<!-- <div class="w-full p-3">-->
<!-- <a-flex class="w-full">-->
<!-- <a-input style="width: 70%" placeholder="导入"></a-input>-->
<!-- <a-button style="margin-left: auto">导入</a-button>-->
<!-- </a-flex>-->
<!-- </div>-->
<a-menu
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
class="ks-sidebar-menu"
mode="inline"
>
<!-- 遍历所有根菜单，区分父菜单和一级可点击菜单 -->
<template v-for="menuItem in menuList" :key="menuItem.key">
<!-- 有子菜单的根菜单 -->
<a-sub-menu v-if="menuItem.children && menuItem.children.length > 0" :key="menuItem.key">
<template #title>
<span>{{ menuItem.title }}</span>
</template>
<!-- 导入独立的递归组件 -->
<MenuItemRecursive
v-for="child in menuItem.children"
:key="child.key"
:menu="child"
@click="handleClick"
/>
</a-sub-menu>
<!-- 无子菜单的一级可点击菜单 -->
<a-menu-item
v-else
@click="() => handleClick(menuItem)"
>
<span class="ks-menu-item-label">{{ menuItem.title }}</span>
</a-menu-item>
</template>
</a-menu>
</a-card>
</a-layout-sider>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import MenuItemRecursive, { type MenuItem } from './menu.vue';
import { menuMap } from './config';
import { startDeduction } from './api';
// 获取当前路由实例
const route = useRoute();
const router = useRouter();
// 选中的叶子节点key集合（仅保留叶子节点key）
const selectedKeys = ref<string[]>([]);
// 展开的父菜单key集合
const openKeys = ref<string[]>([]);
/**
* 构建菜单数据：过滤隐藏项，补全路由标题
*/
const menuList = computed<MenuItem[]>(() => {
// 递归处理菜单（支持多级）
const processMenu = (menu: MenuItem): MenuItem => {
// 过滤子菜单的隐藏项
const children = menu.children?.map(child => processMenu(child)).filter(child => !child.hidden) || [];
// 从路由匹配标题（如需启用，取消注释并调整逻辑）
// const matchedRoute = routes.find(item => item.path === menu.path);
// const title = matchedRoute?.meta?.title || menu.title;
return {
...menu,
title: menu.title, // 暂时用原标题，如需路由标题可替换上面注释的行
hidden: menu.hidden || false,
children: children.length > 0 ? children : undefined, // 空数组转为undefined，简化渲染逻辑
};
};
// 处理根菜单并过滤隐藏项
return menuMap
.map(menu => processMenu(menu))
.filter(menu => !menu.hidden);
});
/**
* 根据当前路由路径匹配对应的菜单key
* @param path 当前路由路径
* @returns 选中的key和需要展开的key
*/
const getMenuKeyByPath = (path: string): { selectedKey: string[], openKey: string[] } => {
const selectedKey: string[] = [];
const openKey: string[] = [];
// 递归查找匹配的菜单
const findMenu = (menuItems: MenuItem[], parentKeys: string[] = []): boolean => {
for (const menu of menuItems) {
// 如果当前菜单是父菜单，先记录展开key
if (menu.children && menu.children.length > 0) {
const newParentKeys = [...parentKeys, menu.key];
// 递归查找子菜单
const isMatched = findMenu(menu.children, newParentKeys);
if (isMatched) {
openKey.push(...newParentKeys);
return true;
}
} else {
// 叶子节点，匹配路径
if (menu.path === path) {
selectedKey.push(menu.key);
openKey.push(...parentKeys);
return true;
}
}
}
return false;
};
// 开始查找根菜单
const isFound = findMenu(menuList.value);
// 未匹配到则默认选中第一个可点击菜单
if (!isFound && menuList.value.length > 0) {
const firstLeaf = (() => {
const findFirstLeaf = (items: MenuItem[]): MenuItem | null => {
for (const item of items) {
if (!item.children || item.children.length === 0) return item;
const leaf = findFirstLeaf(item.children);
if (leaf) return leaf;
}
return null;
};
return findFirstLeaf(menuList.value);
})();
if (firstLeaf) selectedKey.push(firstLeaf.key);
}
return { selectedKey, openKey };
};
/**
* 初始化菜单选中/展开状态
*/
const initMenuState = (path: string) => {
const { selectedKey, openKey } = getMenuKeyByPath(path);
selectedKeys.value = selectedKey;
openKeys.value = [...new Set(openKey)]; // 去重，避免重复展开
};
/**
* 菜单点击事件处理（兼容一级/多级子菜单）
*/
const handleClick = (menuItem: MenuItem) => {
if (menuItem.type === 'open-script-window') {
// 调用接口获取URL并打开窗口
startDeduction()
.then((response) => {
if (response.code === 200 && response.data) {
const { afsimUrl, rayUrl } = response.data;
// 一次性打开两个窗口
const win1 = window.open(afsimUrl, '_blank');
const win2 = window.open(rayUrl, '_blank');
// 检查窗口是否成功打开
if (!win1) {
message.warning('AFSIM窗口打开失败，请检查浏览器弹窗设置');
}
if (!win2) {
message.warning('Ray窗口打开失败，请检查浏览器弹窗设置');
}
} else {
message.error(response.msg || '操作失败');
}
})
.catch((error) => {
console.error('启动仿真测试推演失败:', error);
message.error('启动仿真测试推演失败，请重试');
});
return;
} else if (menuItem.path) {
// 有路径则跳转路由
router.push({ path: menuItem.path });
}
};
// 页面初始化时执行
initMenuState(route.path);
/**
* 监听路由变化，自动更新菜单选中/展开状态
*/
watch(
() => route.path,
(newPath) => initMenuState(newPath),
{ immediate: true, deep: false } // 无需deep，path是字符串
);
</script>

41
modeler/src/views/ai/training/api.ts
View File

@@ -1,41 +0,0 @@
/*
* 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 { TrainingAlgorithmResult, TrainingMethodResult, TrainingTask, TrainingTaskConfig, TrainingTaskResult } from './types';
import request from '@/utils/request';
import type { BasicResponse } from '@/types';
export const deleteTask = (id: number | string): Promise<BasicResponse> => {
return request.delete<BasicResponse>(`/trainTask/logic/${id}`);
};
export const findTrainingTaskByQuery = (query: Partial<TrainingTask> = {}): Promise<TrainingTaskResult> => {
return request.get<TrainingTaskResult>('/trainTask/list', query);
};
export const createTrainingTask = (rt: Partial<TrainingTask>): Promise<BasicResponse> => {
return request.postJson<BasicResponse>('/trainTask/add', rt);
};
export const updateTrainingTask = (rt: Partial<TrainingTask>): Promise<BasicResponse> => {
return request.putJson<BasicResponse>('/trainTask/edit', rt);
};
export const configTrainingTask = (rt: Partial<TrainingTaskConfig>): Promise<BasicResponse> => {
return request.postJson<BasicResponse>('/trainTask/config', rt);
};
export const findTrainingMethods = (): Promise<TrainingMethodResult> => {
return request.get<TrainingMethodResult>('/trainingMethod/list');
};
export const findTrainingAlgorithms = (): Promise<TrainingAlgorithmResult> => {
return request.get<TrainingAlgorithmResult>('/algorithm/list');
};

86
modeler/src/views/ai/training/config.ts
View File

@@ -1,86 +0,0 @@
/*
* 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 { TableColumnType } from 'ant-design-vue';
import type { Hyperparameter, TrainingResource, TrainingTask, TrainingTaskConfig } from './types';
export const trainingTaskColumns: TableColumnType<TrainingTask>[] = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
},
{
title: '任务名称',
dataIndex: 'taskName',
key: 'name',
},
{
title: '运行状态',
dataIndex: 'runStatus',
key: 'runStatus',
},
{
title: '版本信息',
dataIndex: 'versionInfo',
key: 'versionInfo',
},
{
title: '任务描述',
dataIndex: 'description',
key: 'description',
},
{
title: '操作',
dataIndex: '_actions',
key: '_actions',
width: 100,
},
];
export const defaultTrainingTask: TrainingTask = {
id: null,
taskName: null,
versionInfo: null,
description: null,
modelId: undefined,
modelName: null,
modelPath: null,
algorithmId: null,
algorithmCode: null,
trainingMethodId: null,
trainingMethodCode: null,
relatedTaskId: null,
evaluationMetricSystem: null,
runStatus: 0,
status: 1,
};
export const defaultHyperparameter: Hyperparameter = {
id: null,
dataCount: 0,
epoch: 0,
iterations: 0,
learningRate: null,
};
export const defaultTrainingResource: TrainingResource = {
id: null,
resourcePoolType: null,
specification: null,
computeNodeCount: 0,
simulationType: 'afsim',
deduceMultiple: 0,
};
export const defaultTrainingTaskConfig: TrainingTaskConfig = {
trainTask: Object.assign({}, defaultTrainingTask),
hyperparameter: Object.assign({}, defaultHyperparameter),
trainResource: Object.assign({}, defaultTrainingResource),
};

30
modeler/src/views/ai/training/resource-monitor.vue
View File

@@ -1,30 +0,0 @@
<template>
<Layout>
<div class="w-full h-full">
<a-card class="ks-page-card ks-workspace-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">
<iframe :src="appConfig.monitorUrl" style="width:100%;height:100%;"></iframe>
</div>
</a-card>
</div>
</Layout>
</template>
<script lang="ts" setup>
import Layout from '../layout.vue';
import appConfig from '@/config/app';
</script>

512
modeler/src/views/ai/training/task-configurer.vue
View File

@@ -1,512 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card" style="min-height: auto;height: 90vh;">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">训练任务配置</span>
</a-space>
</template>
<a-form
ref="taskFormRef"
:label-col="{span: 6}"
:model="taskForm"
autocomplete="off"
layout="horizontal"
name="basic"
>
<a-row :gutter="15">
<a-col :span="4">
<a-card class="ks-page-steps-card" style="height: 78vh">
<a-steps
:current="currentStep"
:items="steps"
class="ks-page-steps"
direction="vertical"
size="small"
style="height: 70vh"
@change="handleStepChange"
></a-steps>
</a-card>
</a-col>
<a-col :span="20">
<div
ref="scrollWrapper"
class="ks-cards-wrapper ks-page-steps-container"
style="height: 73vh;overflow-y: auto;padding-right: 10px"
>
<a-card class="ks-page-steps-item-card" data-step="0" title="任务配置">
<a-col :span="20">
<a-form-item
label="任务名称"
:rules="[{ required: true, message: '请输入任务名称!', trigger: ['input', 'change'] }]"
:name="['trainTask', 'taskName']"
>
<a-input v-model:value="taskForm.trainTask.taskName" placeholder="请输入任务名称" />
</a-form-item>
<a-form-item
label="版本信息"
:rules="[{ required: true, message: '请输入版本信息!', trigger: ['input', 'change'] }]"
:name="['trainTask', 'versionInfo']"
>
<a-input v-model:value="taskForm.trainTask.versionInfo" placeholder="请输入版本信息" />
</a-form-item>
<a-form-item
label="描述(可选)"
name="description"
>
<a-textarea v-model:value="taskForm.trainTask.description" placeholder="请输入描述" />
</a-form-item>
</a-col>
</a-card>
<a-card class="ks-page-steps-item-card" data-step="1" title="模型配置">
<a-col :span="20">
<a-form-item
label="来源模型"
:rules="[{ required: true, message: '请选择来源模型!', trigger: ['select', 'change'] }]"
:name="['trainTask', 'modelId']"
>
<a-select v-model:value="taskForm.trainTask.modelId" placeholder="请选择来源模型">
<a-select-option v-for="mo in models" :key="mo.id" :value="mo.id">{{ mo.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="调优后模型权重存储路径"
name="modelPath"
>
<Finder placeholder="请选择调优后模型权重文件的OBS存储路径" :path="taskForm.trainTask.modelPath" @select="(v: string)=> taskForm.trainTask.modelPath = v"/>
<p class="mt-2 text-gray-400">训练后将在指定路径下自动创建以作业ID命名的新文件夹进行权重存储</p>
</a-form-item>
</a-col>
</a-card>
<a-card class="ks-page-steps-item-card" data-step="2" title="强化学习算法配置">
<a-row :gutter="15">
<a-col v-for="me in trainingAlgorithms" :span="12">
<div class="ks-method-card" @click="handleSelectAlgorithm(me)">
<span v-if="taskForm.trainTask.algorithmId === me.id" class="card-select-icon absolute right-10" style="margin-left: auto">
<CheckCircleOutlined />
</span>
<div class="card-header">
<a-flex>
<span class="title-left"></span>
<span class="title-text">{{ me.algorithmName ?? '-' }}</span>
<span class="title-right"></span>
</a-flex>
</div>
<div class="card-body">
<a-flex>
<img :alt="me.algorithmName ?? ''" class="card-icon" src="@/assets/icons/m-01.png">
<span class="card-description">
{{ me.description }}
</span>
</a-flex>
</div>
</div>
</a-col>
</a-row>
</a-card>
<a-card class="ks-page-steps-item-card" data-step="3" title="训练方法配置">
<a-row :gutter="15">
<a-col v-for="me in trainingMethods" :span="8">
<div class="ks-method-card" @click="handleSelectTrainingMethod(me)">
<span v-if="taskForm.trainTask.trainingMethodId === me.id" class="card-select-icon absolute right-10" style="margin-left: auto">
<CheckCircleOutlined />
</span>
<div class="card-header">
<a-flex>
<span class="title-left"></span>
<span class="title-text">{{ me.methodName ?? '-' }}</span>
<span class="title-right"></span>
</a-flex>
</div>
<div class="card-body">
<a-flex>
<img :alt="me.methodName ?? '-'" class="card-icon" src="@/assets/icons/m-03.png">
<span class="card-description">
{{ me.description }}
</span>
</a-flex>
</div>
</div>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="24">
<h2 class="mt-5 mb-5 text-2xl ks-card-subtitle">超参设置</h2>
</a-col>
</a-row>
<a-row :gutter="15">
<a-col :span="20">
<!-- <a-form-item-->
<!-- label="数据条数"-->
<!-- name="dataCount"-->
<!-- >-->
<!-- <a-input-number style="width:100%;" v-model:value="taskForm.hyperparameter.dataCount" placeholder="请输入数据条数" />-->
<!-- <p class="mt-2 text-gray-400">请输入您的数据集中总共又多少条数据</p>-->
<!-- </a-form-item>-->
<a-form-item
label="迭代轮次/Epoch"
name="epoch"
>
<a-input-number v-model:value="taskForm.hyperparameter.epoch" placeholder="请输入迭代轮次/Epoch" style="width:100%;" />
<p class="mt-2 text-gray-400">训练过程中模型便利整个数据集的次数,不同量级数据集的建议值: 百量级4-8; 千量级2-4; 更大量级数量级1-2</p>
</a-form-item>
<a-form-item
label="迭代步数/Iterations"
name="iterations"
>
<a-input-number v-model:value="taskForm.hyperparameter.iterations" placeholder="请输入迭代步数" style="width:100%;">
</a-input-number>
<p class="mt-2 text-gray-400">计算得出的模型参数/权重更新的次数,迭代步数=数据条数 ➗ GBS * 迭代轮次</p>
</a-form-item>
<a-form-item
label="学习率/learning_rate"
name="learningRate"
>
<a-input v-model:value="taskForm.hyperparameter.learningRate" placeholder="请输入学习率">
</a-input>
<p class="mt-2 text-gray-400">每个迭代步数(iteration)模型参数/权重更新的速率,请输入一个介于0-0.1之间的浮点数.</p>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card class="ks-page-steps-item-card" data-step="4" title="训练资源配置">
<a-col :span="20">
<a-form-item
label="资源池类型"
name="taskName"
>
<a-space size="large">
<a-button :class="taskForm.trainResource.resourcePoolType == '0' ? 'selected' : ''"
:type="taskForm.trainResource.resourcePoolType == '0' ? 'primary' : 'default'"
@click="()=> taskForm.trainResource.resourcePoolType = '0'">公共资源池
</a-button>
<a-button :class="taskForm.trainResource.resourcePoolType == '1' ? 'selected' : ''"
:type="taskForm.trainResource.resourcePoolType == '1' ? 'primary' : 'default'"
@click="()=> taskForm.trainResource.resourcePoolType = '1'">专属资源池
</a-button>
</a-space>
<p class="mt-2 text-gray-400">
{{ taskForm.trainResource.resourcePoolType == '0' ? '公共' : '私有' }}资源池提供{{ taskForm.trainResource.resourcePoolType == '0' ? '公共' : '私有' }}的大规模计算集群
</p>
</a-form-item>
<a-form-item
label="规格"
name="specification"
>
<a-input v-model:value="taskForm.trainResource.specification" placeholder="请输入规格" />
</a-form-item>
<a-form-item
label="计算节点个数"
name="computeNodeCount"
>
<a-input-number v-model:value="taskForm.trainResource.computeNodeCount" placeholder="请输入计算节点个数" style="width:100%;" />
<p class="mt-2 text-gray-400">当实例数大于1, 将启动多节点分布式训练.</p>
</a-form-item>
<a-form-item
label="仿真容器类型选择"
name="simulationType"
>
<a-row :gutter="15">
<a-col v-for="me in simulationTypes" :span="6">
<div class="ks-method-card simulation-card" @click="()=> taskForm.trainResource.simulationType = me.type">
<span v-if="taskForm.trainResource.simulationType === me.type" class="card-select-icon absolute right-10" style="margin-left: auto">
<CheckCircleOutlined />
</span>
<div class="card-header">
<a-flex>
<span class="title-text">{{ me.name ?? '-' }}</span>
</a-flex>
</div>
<div class="card-body">
<a-flex>
<img :alt="me.name ?? '-'" class="card-icon" src="@/assets/icons/m-03.png">
<span class="card-description">
{{ me.name }}
</span>
</a-flex>
</div>
</div>
</a-col>
</a-row>
</a-form-item>
<a-form-item
label="推演倍数设置"
name="o"
>
<a-form-item-rest>
<a-flex>
<a-slider v-model:value="taskForm.trainResource.deduceMultiple" :max="1000" :min="0" style="width:100%;"/>
<a-input-number v-model:value="taskForm.trainResource.deduceMultiple" :min="0" :max="1000" style="margin-left: 10px; width: 100px;" />
<span style="width: 60px; margin-left: 5px;color:#eee; line-height: 34px;"> / 1000</span>
</a-flex>
</a-form-item-rest>
</a-form-item>
</a-col>
</a-card>
<a-card class="ks-page-steps-item-card" data-step="5" title="模型评估分析">
<a-col :span="20">
<a-form-item
label="评估指标体系选择"
name="evaluationMetricSystem"
>
<a-input v-model:value="taskForm.trainTask.evaluationMetricSystem" placeholder="选择评估指标体系">
</a-input>
</a-form-item>
</a-col>
</a-card>
</div>
<div class="w-full pt-3 pb-3">
<a-space>
<a-button style="width: 120px" @click="handleCancel">取消</a-button>
<a-button style="width: 120px" @click="handleSave">保存并运行</a-button>
</a-space>
</div>
</a-col>
</a-row>
</a-form>
</a-card>
</Layout>
</template>
<script lang="ts" setup>
import { onActivated, onMounted, onUnmounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { type FormInstance, message } from 'ant-design-vue';
import { CheckCircleOutlined } from '@ant-design/icons-vue';
import Layout from '../layout.vue';
import type { TrainingAlgorithm, TrainingMethod, TrainingTaskConfig } from './types';
import type { Model } from '../model/types';
import { defaultTrainingTaskConfig } from './config';
import { configTrainingTask, findTrainingAlgorithms, findTrainingMethods } from './api';
import { findAllModels } from '../model/api';
import Finder from '../finder.vue';
const router = useRouter();
const route = useRoute();
const steps = [
{ title: '任务配置' },
{ title: '模型配置' },
{ title: '强化学习算法配置' },
{ title: '训练方法配置' },
{ title: '训练资源配置' },
{ title: '模型评估分析' },
];
const simulationTypes = ref([
{
type: 'afsim',
name: 'AFsim仿真平台'
},
{
type: 'mozi',
name: '墨子仿真平台'
},
{
type: 'union',
name: '联合作战博弈平台'
},
{
type: 'drone',
name: '无人机对抗仿真平台'
}
])
const currentStep = ref<number>(0);
const scrollWrapper = ref<HTMLElement | null>(null);
let scrollTimer: number | null = null;
// 新增：步骤切换处理函数
const handleStepChange = (step: number) => {
currentStep.value = step; // 更新当前步骤
scrollToStep(step); // 滚动到对应卡片位置
};
// 新增：滚动到指定步骤卡片的核心函数
const scrollToStep = (step: number) => {
if (!scrollWrapper.value) return;
// 找到对应步骤的卡片元素
const targetCard = scrollWrapper.value.querySelector(`[data-step="${step}"]`) as HTMLElement;
if (!targetCard) return;
// 计算滚动目标位置（偏移80px和滚动监听的阈值保持一致）
const targetTop = targetCard.offsetTop - 10;
// 平滑滚动到目标位置
scrollWrapper.value.scrollTo({
top: targetTop,
behavior: 'smooth' // 平滑滚动效果
});
};
const handleScroll = () => {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(() => {
if (!scrollWrapper.value) return;
const scrollTop = scrollWrapper.value.scrollTop;
const stepCards = Array.from(scrollWrapper.value.querySelectorAll('[data-step]'));
if (stepCards.length === 0) return;
let targetStep = 0;
for (let i = 0; i < stepCards.length; i++) {
const card = stepCards[i] as HTMLElement;
const cardTop = card.offsetTop;
const threshold = 80;
if (scrollTop >= cardTop - threshold) {
targetStep = parseInt(card.dataset.step || '0', 10);
} else {
break;
}
}
if (targetStep !== currentStep.value) {
currentStep.value = targetStep;
}
}, 30);
};
const taskFormRef = ref<FormInstance>();
const taskForm = ref<TrainingTaskConfig>(Object.assign({}, JSON.parse(JSON.stringify(defaultTrainingTaskConfig))));
const trainingMethods = ref<TrainingMethod[]>([]);
const trainingAlgorithms = ref<TrainingAlgorithm[]>([]);
const models = ref<Model[]>([]);
// 重置表单数据的函数
const resetFormData = () => {
// 重置表单验证状态
if (taskFormRef.value) {
taskFormRef.value.resetFields();
}
// 重置表单数据
taskForm.value = Object.assign({}, JSON.parse(JSON.stringify(defaultTrainingTaskConfig)));
// 重置步骤
currentStep.value = 0;
// 重置滚动位置
if (scrollWrapper.value) {
scrollWrapper.value.scrollTop = 0;
}
};
const loadTrainingMethods = () => {
findTrainingMethods().then(r => {
trainingMethods.value = r.rows ?? [];
});
};
const loadTrainingAlgorithms = () => {
findTrainingAlgorithms().then(r => {
trainingAlgorithms.value = r.rows ?? [];
});
};
const loadModels = () => {
findAllModels().then(r => {
models.value = Array.isArray(r.data) ? r.data : [];
});
};
const loadDatasource = () => {
loadTrainingMethods();
loadTrainingAlgorithms();
loadModels();
};
const handleSelectAlgorithm = (me: TrainingAlgorithm)=> {
taskForm.value.trainTask.algorithmId = me.id
taskForm.value.trainTask.algorithmCode = me.algorithmCode;
}
const handleSelectTrainingMethod= (me: TrainingMethod)=> {
taskForm.value.trainTask.trainingMethodId = me.id
taskForm.value.trainTask.trainingMethodCode = me.methodCode;
}
const handleCancel = () => {
resetFormData();
// 返回上一页
// router.back();
};
const handleSave = () => {
if(taskFormRef.value){
taskFormRef.value.validate().then(()=> {
const selectedModelItem = models.value.find(t => t.id === taskForm.value.trainTask?.modelId);
taskForm.value.trainTask.modelName = selectedModelItem ? selectedModelItem.name : null;
configTrainingTask(taskForm.value).then(r => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
resetFormData();
setTimeout(()=> {
router.push({
path: '/app/ai/training/task/management',
});
}, 1000)
} else {
message.error(r.msg ?? '保存失败.')
}
});
})
}
};
// 监听路由变化，当离开当前页面时重置数据
watch(
() => route.path,
(newPath, oldPath) => {
if (oldPath === route.path && newPath !== route.path) {
resetFormData();
}
}
);
onActivated(() => {
resetFormData();
});
onMounted(() => {
// 每次进入页面都重新加载数据并重置表单
resetFormData();
loadDatasource();
if (scrollWrapper.value) {
scrollWrapper.value.addEventListener('scroll', handleScroll);
handleScroll();
}
});
onUnmounted(() => {
if (scrollWrapper.value) {
scrollWrapper.value.removeEventListener('scroll', handleScroll);
}
if (scrollTimer) {
clearTimeout(scrollTimer);
}
});
</script>
<style lang="less">
.bg-wrapper .ks-page-card > .ant-card-body {
height: 85.5vh;
border-radius: 2px;
}
</style>

181
modeler/src/views/ai/training/task-management.vue
View File

@@ -1,181 +0,0 @@
<template>
<Layout>
<a-card class="ks-page-card">
<template #title>
<a-space>
<span class="point"></span>
<span class="text">任务管理</span>
</a-space>
</template>
<div class="ks-scrollable" style="height: 80.2vh;overflow-y: auto;padding-right: 10px">
<div class="w-full mb-8">
<a-space class="ks-page-tabs-right">
<a-input v-model:value="taskQuery.taskName" placeholder="任务名称" style="width: 200px;" />
<a-button class="ks-tabs-btn btn-search" style="width:120px;" type="primary" @click="loadTasks()">查询</a-button>
<a-button class="ks-tabs-btn btn-create" style="width:120px;" type="primary" @click="showCreateModal()">新建</a-button>
</a-space>
</div>
<a-table
:columns="trainingTaskColumns"
:dataSource="trainingTasks"
:pagination="false"
:row-key="'id'"
size="small"
>
<template #bodyCell='{ column,record,index,text }'>
<template v-if="column.dataIndex === 'index'">
{{ index + 1 }}
</template>
<template v-if="column.dataIndex === 'runStatus'">
<span v-if="text === 1" class="btn-link-edit">运行中</span>
<span v-else class="btn-link-delete">停止</span>
</template>
<a-space v-if="column.dataIndex === '_actions'">
<a-button class="btn-link-detail" size="small" type="link" @click="()=> handleDetail(record)">监控</a-button>
<a-button class="btn-link-edit" size="small" type="link" @click="()=> handleEdit(record)">编辑</a-button>
<a-popconfirm
title="确定删除?"
@confirm="()=> handleDelete(record)"
>
<a-button class="btn-link-delete" danger size="small" type="link">删除</a-button>
</a-popconfirm>
</a-space>
</template>
</a-table>
</div>
</a-card>
<a-modal v-model:open="createModalVisible" :title="trainingTaskSelected ? '编辑' : '新建'"
centered
@ok="()=> createModalVisible = false ">
<a-form
ref="trainingTaskFormRef"
:label-col="{span: 5}"
:model="trainingTaskForm"
autocomplete="off"
layout="horizontal"
name="basic"
style="margin-top:30px;padding: 25px"
>
<a-form-item
:rules="[{ required: true, message: '请输入任务名称!' }]"
label="任务名称"
name="taskName"
>
<a-input v-model:value="trainingTaskForm.taskName" placeholder="请输入任务名称" />
</a-form-item>
<a-form-item
:rules="[{ required: true, message: '请输入版本信息!' }]"
label="版本信息"
name="versionInfo"
>
<a-input v-model:value="trainingTaskForm.versionInfo" placeholder="请输入版本信息" />
</a-form-item>
<a-form-item
label="任务描述"
name="description"
>
<a-textarea v-model:value="trainingTaskForm.description" placeholder="任务描述" />
</a-form-item>
</a-form>
<template #footer>
<a-space>
<a-button style="width: 120px;" @click="()=> createModalVisible = false">取消</a-button>
<a-button html-type="submit" style="width: 120px;" type="primary" @click="handleSaveOrUpdate">确认并保存</a-button>
</a-space>
</template>
</a-modal>
</Layout>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { type FormInstance, message } from 'ant-design-vue';
import Layout from '../layout.vue';
import type { TrainingTask } from './types';
import { createTrainingTask, deleteTask, findTrainingTaskByQuery, updateTrainingTask } from './api';
import { defaultTrainingTask, trainingTaskColumns } from './config';
const createModalVisible = ref<boolean>(false);
const trainingTaskFormRef = ref<FormInstance>();
const trainingTaskForm = ref<TrainingTask>(Object.assign({}, defaultTrainingTask));
const trainingTasks = ref<TrainingTask[]>([]);
const taskQuery = ref<Partial<TrainingTask>>({});
const trainingTaskSelected = ref<TrainingTask | null>(null);
const loadTasks = () => {
createModalVisible.value = false;
trainingTaskSelected.value = null;
findTrainingTaskByQuery(taskQuery.value).then(res => {
trainingTasks.value = res.rows ?? [];
});
};
const showCreateModal = () => {
trainingTaskForm.value = Object.assign({}, defaultTrainingTask);
createModalVisible.value = true;
};
const handleEdit = (rt: TrainingTask) => {
trainingTaskSelected.value = rt;
trainingTaskForm.value = Object.assign({}, rt);
createModalVisible.value = true;
};
const handleDetail = (rt: TrainingTask) => {
if(rt.ip && rt.port){
window.open(`http://${rt.ip}:${rt.port}`, '_blank');
}
};
const handleDelete = (rt: TrainingTask) => {
if(rt.id){
deleteTask(rt.id).then(r => {
if (r.code === 200) {
message.success(r.msg ?? '删除成功.')
loadTasks();
} else {
message.error(r.msg ?? '删除失败.')
}
});
}
};
const handleSaveOrUpdate = () => {
if (trainingTaskFormRef.value) {
trainingTaskFormRef.value.validate()
.then((values: any) => {
let res = null;
let newValues = Object.assign({}, trainingTaskSelected.value || {}, values ?? {});
if (trainingTaskSelected.value && trainingTaskSelected.value?.id && trainingTaskSelected.value?.id > 0) {
res = updateTrainingTask(newValues);
} else {
res = createTrainingTask(newValues);
}
res.then(r => {
if (r.code === 200) {
message.success(r.msg ?? '保存成功.')
loadTasks();
} else {
message.error(r.msg ?? '保存失败.')
}
});
});
}
};
onMounted(() => {
loadTasks();
});
</script>

30
modeler/src/views/ai/training/task-monitor.vue
View File

@@ -1,30 +0,0 @@
<template>
<Layout>
<div class="w-full h-full">
<a-card class="ks-page-card ks-workspace-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">
<iframe :src="appConfig.taskMonitorUrl" style="width:100%;height:100%;"></iframe>
</div>
</a-card>
</div>
</Layout>
</template>
<script lang="ts" setup>
import Layout from '../layout.vue';
import appConfig from '@/config/app';
</script>

139
modeler/src/views/ai/training/types.ts
View File

@@ -1,139 +0,0 @@
/*
* 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 { BasicResponse, NullableString, PageableResponse } from '@/types';
// 超参设置
export interface Hyperparameter {
id: number | null;
// 数据条数
dataCount: number;
// 迭代轮次/Epoch
epoch: number;
// 迭代步数/Iterations
iterations: number;
// 学习率/learning_rate
learningRate: NullableString;
[key: string]: unknown;
}
// 训练资源配置
export interface TrainingResource {
id: number | null;
// 资源池类型
resourcePoolType: NullableString;
// 规格
specification: NullableString;
// 计算节点个数
computeNodeCount: number;
// 仿真容器类型选择
simulationType: NullableString;
// 推演倍数
deduceMultiple: number;
[key: string]: unknown;
}
// 训练任务配置
export interface TrainingTaskConfig {
// 训练任务信息
trainTask: TrainingTask;
// 超参设置
hyperparameter: Hyperparameter;
// 训练资源配置
trainResource: TrainingResource;
[key: string]: unknown;
}
export interface TrainingTaskConfigResult extends BasicResponse {
[key: string]: unknown;
}
// 训练方法
export interface TrainingMethod {
id: number;
methodName: NullableString;
methodCode: NullableString;
description: NullableString;
status: number;
[key: string]: unknown;
}
export interface TrainingMethodResult extends PageableResponse<TrainingMethod> {
[key: string]: unknown;
}
// 算法
export interface TrainingAlgorithm {
id: number;
// 算法名称
algorithmName: NullableString;
// 算法代码（英文名称，如PPO、FULL_FINETUNE、LORA等）
algorithmCode: NullableString;
// 算法类型（如：微调、预训练、强化学习等
algorithmType: NullableString;
// 算法描述
description: NullableString;
[key: string]: unknown;
}
export interface TrainingAlgorithmResult extends PageableResponse<TrainingAlgorithm> {
[key: string]: unknown;
}
export interface TrainingTask {
// 主键ID
id: number | null;
// 任务名称
taskName: NullableString;
// 版本信息
versionInfo: NullableString;
// 描述
description: NullableString;
// 模型ID
modelId: number | undefined;
// 模型名称
modelName: NullableString;
// 模型路径
modelPath: NullableString;
// 算法表ID
algorithmId: number | null;
// 算法表code
algorithmCode: NullableString;
// 训练方法ID
trainingMethodId: number | null;
// 训练方法code
trainingMethodCode: NullableString;
// 关联任务ID
relatedTaskId: NullableString;
// 评估指标体系
evaluationMetricSystem: NullableString;
// 运行状态（0=停止，1=运行中）
runStatus: number;
// 状态（1=正常，0=已删除）
status: number;
ip?: NullableString;
port?:NullableString;
[key: string]: unknown;
}
export interface TrainingTaskResult extends PageableResponse<TrainingTask> {
[key: string]: unknown;
}

25
modeler/src/views/ai/types.ts
View File

@@ -1,25 +0,0 @@
/*
* 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 { ApiDataResponse, NullableString } from '@/types';
export interface FinderBrowser {
name: NullableString,
path: string,
directory: boolean,
children: FinderBrowser[]
}
export interface FinderBrowserResult extends ApiDataResponse<FinderBrowser[]> {
}
export interface DeductionTestResponse extends ApiDataResponse {
}

16
modeler/src/views/behaviour/config.ts
View File

@@ -1,16 +0,0 @@
/*
* 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 menuMap = [
{
key: '0',
title: '指挥决策规则库管理',
path: '/app/behaviour/rules',
},
];

61
modeler/src/views/behaviour/graph/element.ts
View File

@@ -1,61 +0,0 @@
/*
* 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 } from '@/types';
import type { ModelParameters } from '@/views/ai/model/types';
export interface DraggableElement {
id: number | null,
key?: NullableString,
name: NullableString,
description: NullableString,
category: NullableString,
draggable: boolean,
parent?: DraggableElement,
children: DraggableElement[]
[key: string]: unknown;
}
export interface ModelElementPosition {
x: number;
y: number;
}
export interface ModelElementEdge {
key: NullableString;
sourceKey: NullableString;
sourceName: NullableString;
targetKey: NullableString;
targetName: NullableString;
}
export interface ModelBaseElement {
key: string;
name: string;
type: string;
width: number;
height: number;
position: ModelElementPosition;
category: NullableString;
element?: DraggableElement;
[key: string]: unknown;
}
export interface ModelElement extends ModelBaseElement {
// 连线
edges: ModelElementEdge[];
// 模型参数设置
parameters: ModelParameters;
}
export interface SavedGraphData {
nodes: ModelElement[];
edges: any[];
}

250
modeler/src/views/behaviour/graph/hooks.ts
View File

@@ -1,250 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import { computed, type ComputedRef, ref, type Ref } from 'vue';
import { type Dom, Graph, Node } from '@antv/x6';
import type { NodeViewPositionEventArgs } from '@antv/x6/es/view/node/type';
import { createGraphCanvas } from './graph';
import { EventListener } from '@/utils/event';
import type { ModelElement } from './element';
// import {createLineOptions} from './line'
export interface UseGraphCanvas {
container: Ref<HTMLDivElement | null>;
readonly: boolean;
eventListener: EventListener;
currentZoom: Ref<number>;
graph: ComputedRef<Graph>;
zoomIn: () => void;
zoomOut: () => void;
fitToScreen: () => void;
centerContent: () => void;
resizeCanvas: () => void;
handleGraphEvent: (name: string, fn: Function) => void;
emitGraphEvent: (name: string, options?: any) => void;
createCanvas: (c: HTMLDivElement) => Graph;
}
export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
const graph = ref<Graph | null>(null);
const container = ref<HTMLDivElement | null>(null);
const eventListener = new EventListener();
const currentZoom = ref<number>(0);
const handleGraphEvent = (name: string, fn: Function) => {
eventListener.on(name, fn);
};
const emitGraphEvent = (name: string, options?: any): void => {
eventListener.emit(name, options);
};
const zoomIn = (): void => {
if (graph.value) {
const zoom = graph.value.zoom();
graph.value.zoom(zoom + 0.1);
}
};
const zoomOut = (): void => {
if (graph.value) {
const zoom = graph.value.zoom();
graph.value.zoom(Math.max(0.1, zoom - 0.1));
}
};
const fitToScreen = () => {
if (graph.value) {
graph.value.zoomToFit({ padding: 20 });
}
};
const centerContent = () => {
if (graph.value) {
graph.value.centerContent();
}
};
const resizeCanvas = () => {
if (graph.value) {
graph.value?.resize();
}
};
const initEvents = () => {
if (!graph.value) {
return;
}
graph.value.on('keydown', ({ e }: any) => {
if (e.key === 'Delete' || e.key === 'Backspace') {
const cells = graph.value?.getSelectedCells();
if (cells && cells.length) {
graph.value?.removeCells(cells);
// 通知父组件更新状态
emitGraphEvent('cells:removed', cells);
}
}
});
graph.value.on('scale', (ctx) => {
currentZoom.value = ctx.sx;
emitGraphEvent('scale', ctx);
});
// 监听画布空白点击
graph.value.on('blank:click', () => {
graph.value?.cleanSelection();
emitGraphEvent('blank:click');
});
// 监听连线删除
graph.value.on('edge:removed', ({ edge }) => {
emitGraphEvent('edge:removed', edge); // 添加此行
});
graph.value.on('edge:added', ({ edge }) => {
// const lineOptions = createLineOptions();
// edge.setAttrs(lineOptions.attrs);
// edge.set(lineOptions.animation);
// edge.setMarkup(lineOptions.markup);
emitGraphEvent('edge:added', edge); // 添加此行
});
graph.value.on('edge:contextmenu', (ctx) => {
emitGraphEvent('edge:contextmenu', ctx);
});
graph.value.on('edge:connect:abort', () => {
// 当连线被拖拽到空白区域后释放，自动移除这条无效连线
const edges = graph.value?.getEdges();
const invalidEdges = (edges ?? []).filter(edge =>
!edge.getSourceCell() || !edge.getTargetCell(),
);
if (invalidEdges.length) {
graph.value?.removeCells(invalidEdges);
}
});
// 监听连接失败
graph.value.on('edge:connect:invalid', () => {
emitGraphEvent('edge:connect:invalid');
});
graph.value.on('edge:click', (edge) => {
emitGraphEvent('edge:connect:invalid', edge);
});
graph.value.on('edge:connected', ({ edge }) => {
const sourceNode = edge.getSourceCell() as Node;
const targetNode = edge.getTargetCell() as Node;
if (sourceNode && targetNode) {
const sourceData = sourceNode.getData() as ModelElement;
const targetData = targetNode.getData() as ModelElement;
// 将连线存储到节点数据中
const sourceEdges = sourceData.edges || [];
const existingEdge = sourceEdges.find(e => e.targetKey === targetNode.id);
if (!existingEdge) {
sourceEdges.push({
key: edge.id,
sourceKey: sourceNode.id,
sourceName: sourceData.name,
targetKey: targetNode.id,
targetName: targetData.name,
});
sourceNode.replaceData({ ...sourceData, edges: sourceEdges });
}
}
edge.attr('line/stroke', '#3b82f6'); // 显式设置颜色
edge.attr('line/strokeWidth', 2); // 显式设置宽度
// edge.refresh() // 刷新连线
// graph.paint() // 重绘画布
emitGraphEvent('edge:connected', edge);
});
graph.value.on('node:click', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
console.info('node click', ctx);
emitGraphEvent('node:click', ctx);
});
// 监听节点选中事件
graph.value.on('node:selected', ({ node }) => {
console.info('node select', node);
emitGraphEvent('node:selected', node);
});
// 监听节点取消选中
graph.value.on('node:unselected', () => {
emitGraphEvent('node:unselected');
});
// 监听节点鼠标移入，显示连接点
graph.value.on('node:mouseenter', (ctx) => {
emitGraphEvent('node:mouseenter', ctx);
});
// 监听节点鼠标移出，隐藏连接点
graph.value.on('node:mouseleave', (ctx) => {
emitGraphEvent('node:mouseleave', ctx);
});
// 监听节点状态变化
graph.value.on('node:change:data', (ctx) => {
const edges = graph.value?.getIncomingEdges(ctx.node);
const { status } = ctx.node.getData();
edges?.forEach((edge) => {
if (status === 'running') {
edge.attr('line/strokeDasharray', 5);
edge.attr('line/style/animation', 'running-line 30s infinite linear');
} else {
edge.attr('line/strokeDasharray', '');
edge.attr('line/style/animation', '');
}
});
emitGraphEvent('node:change:data', ctx);
});
};
const createCanvas = (c: HTMLDivElement): Graph => {
container.value = c;
graph.value = createGraphCanvas(c, readonly);
initEvents();
emitGraphEvent('created', graph.value);
return graph.value as Graph;
};
const graphInstance = computed(() => graph.value);
return {
container,
readonly,
graph: graphInstance,
eventListener,
currentZoom,
emitGraphEvent,
handleGraphEvent,
zoomIn,
zoomOut,
fitToScreen,
centerContent,
resizeCanvas,
createCanvas,
} as UseGraphCanvas;
};

11
modeler/src/views/behaviour/graph/index.ts
View File

@@ -1,11 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
export { createGraphCanvas } from './graph';
export * from './hooks';

47
modeler/src/views/behaviour/graph/line.ts
View File

@@ -1,47 +0,0 @@
/*
* 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 { Shape } from '@antv/x6';
export const createLineOptions = (): any => {
return {
markup: [
{
tagName: 'circle',
selector: 'marker',
attrs: {
stroke: 'none',
r: 3,
},
},
...Shape.Edge.getMarkup() as any,
],
attrs: {
line: {
stroke: '#5da0df',
strokeWidth: 2,
strokeDasharray: ' ',
strokeDashoffset: 0,
},
marker: {
fill: '#5da0df',
atConnectionRatio: 0,
},
},
animation: [
[
{ 'attrs/marker/atConnectionRatio': 1 },
{
duration: 2000,
iterations: Infinity,
},
],
],
}
}

322
modeler/src/views/behaviour/graph/node.vue
View File

@@ -1,322 +0,0 @@
<template>
<a-dropdown :trigger="['contextmenu']" @openChange="handleVisibleChange">
<a-card
:class="[
'ks-designer-node',
`ks-designer-${element?.category ?? 'model'}-node`
]"
hoverable
>
<template #title>
<a-space>
<span class="ks-designer-node-icon"></span>
<span class="ks-designer-node-title">{{ element?.name ?? '-' }}</span>
</a-space>
</template>
<!-- 节点内容区域 -->
<div class="w-full" v-if="element?.category !== 'component'">
<div class="ks-designer-node-content">
<div
v-for="(item, index) in element?.element?.children || []"
:key="item.id || index"
class="ks-designer-node-row"
>
<div
:data-port="`in-${item.id || index}`"
:title="`入桩: ${item.name}`"
class="port port-in"
magnet="passive"
></div>
<!-- child名称 -->
<div class="ks-designer-node-name">
{{ item.name }}
</div>
<!-- 右侧出桩：只能作为连线源 -->
<div
:data-port="`out-${item.id || index}`"
:title="`出桩: ${item.name}`"
class="port port-out"
magnet="active"
></div>
</div>
<div v-if="!(element?.element?.children && element?.element?.children?.length > 0)" class="ks-designer-node-row">
<div class="port port-in" data-port="in-0" magnet="passive"></div>
<div class="ks-designer-node-name">
{{ element?.name ?? '-' }}
</div>
<div class="port port-out" data-port="out-0" magnet="active"></div>
</div>
</div>
</div>
<div class="w-full" v-else>
<p>隐藏纬度: {{ element?.parameters?.hiddenLatitude ?? '-' }}</p>
<p>激活函数: {{ element?.parameters?.activationFunction ?? '-' }}</p>
</div>
</a-card>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="delete">
<template #icon>
<DeleteOutlined />
</template>
删除
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { elementProps } from './props';
import type { ModelElement } from './element';
import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
import type { Graph } from '@antv/x6';
export default defineComponent({
name: 'ModelElement',
components: {
SettingOutlined,
DeleteOutlined,
},
props: elementProps,
setup(_props) {
const element = ref<ModelElement | null>(
_props.node ? (_props.node.getData() as ModelElement) : null,
);
const updateKey = ref(0);
const isMenuVisible = ref(false);
// 获取画布实例
const getGraph = (): Graph | null => {
return _props.graph as Graph || null;
};
// 监听节点数据变化
const handleDataChange = () => {
if (_props.node) {
element.value = _props.node.getData() as ModelElement;
} else {
element.value = null;
}
updateKey.value++;
};
const handleVisibleChange = (visible: boolean) => {
isMenuVisible.value = visible;
};
const handleMenuClick = ({ key }: { key: string }) => {
if (key === 'delete') {
handleDelete();
}
};
const handleDelete = () => {
if (!_props.node) return;
const graph = getGraph();
if (graph) {
try {
// 先删除关联边
const connectedEdges = graph.getConnectedEdges(_props.node);
connectedEdges.forEach(edge => graph.removeEdge(edge));
// 再删除节点
graph.removeNode(_props.node);
console.info(`节点 ${_props.node.id} 已删除`);
} catch (error) {
console.error('删除节点失败:', error);
}
}
isMenuVisible.value = false;
};
onMounted(() => {
_props.node?.on('change:data', handleDataChange);
});
onUnmounted(() => {
_props.node?.off('change:data', handleDataChange);
});
return {
element,
handleMenuClick,
handleVisibleChange,
};
},
});
</script>
<style lang="less">
.ks-designer-node {
background: linear-gradient(150deg, #093866 1%, #1f69b3 55%);
border: 0;
border-radius: 8px;
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
.ant-card-head {
border: 0;
height: 38px;
min-height: 38px;
border-radius: 0;
color: #ddd;
font-size: 12px;
font-weight: normal;
padding: 0 20px;
}
.ks-designer-node-icon {
width: 15px;
height: 15px;
display: block;
position: absolute;
left: 8px;
top: 13px;
background: url('@/assets/icons/model-4.svg') center / 100% 100%;
}
.ks-designer-node-title {
font-size: 13px;
}
.ant-card-body {
color: #fff;
height: calc(100% - 38px);
border-radius: 0;
font-size: 12px;
padding: 8px 15px;
overflow-y: auto;
border-top: 1px solid #195693;
}
&.ks-designer-task-node {
background: linear-gradient(150deg, #20421b 1%, #4a6646 55%);
.ant-card-body {
border-top: 1px solid #466741;
}
.ks-designer-node-icon {
background: url('@/assets/icons/m-02.png') center / 100% 100%;
}
}
&.ks-designer-input-node {
background: linear-gradient(150deg, #083058 1%, #1e5d9b 55%);
.ant-card-body {
border-top: 1px solid #105ca7;
}
.ks-designer-node-icon {
background: url('@/assets/icons/icon-model-input.png') center / 100% 100%;
}
}
&.ks-designer-action-node {
background: linear-gradient(150deg, #343207 1%, #485010 55%);
.ant-card-body {
border-top: 1px solid #59550e;
}
.ks-designer-node-icon {
background: url('@/assets/icons/bg-fk-point.png') center / 100% 100%;
}
}
&.ks-designer-component-node {
background: linear-gradient(150deg, #06226b 1%, #1a43a7 55%);
.ant-card-body {
border-top: 1px solid #26448c;
}
}
&.ks-designer-control-node {
background: linear-gradient(150deg, #1d4f32 1%, #326a5d 55%);
.ant-card-body {
border-top: 1px solid #326a5d;
}
.ks-designer-node-icon {
background: url('@/assets/icons/bg-model-builder-card-title.png') center / 100% 100%;
}
}
// 连接桩容器样式
.ks-designer-node-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 4px; // 每个child行之间的间距
}
// 每个child行（包含左右桩+文本）
.ks-designer-node-row {
width: 100%;
display: flex;
align-items: center;
position: relative;
height: 24px; // 固定行高，保证桩对齐
}
// 连接桩基础样式
.port {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: crosshair;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgb(74 114 214 / 80%);
z-index: 10; // 确保桩在最上层
// X6 标记为可连线的磁体
magnet: true;
}
// 左侧入桩样式
.port-in {
background-color: #093866; // 青色：入桩
margin-right: 8px; // 与文本的间距
//border: 1px solid #093866;
// X6 只能作为连线目标（入）
magnet: passive;
box-shadow: none;
width: 20px;
height: 20px;
display: block;
background: url('@/assets/icons/point.svg') center / 100% 100%;
}
// 右侧出桩样式
.port-out {
margin-left: 8px; // 与文本的间距
margin-right: 5px;
// X6 只能作为连线源（出）
magnet: active;
box-shadow: none;
width: 20px;
height: 20px;
display: block;
background: url('@/assets/icons/arrow-right.svg') center / 100% 100%;
}
// 节点文本样式
.ks-designer-node-name {
flex: 1; // 占满中间空间
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>

51
modeler/src/views/behaviour/graph/ports.ts
View File

@@ -1,51 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 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 createPort = (name: string = 'top', args: Record<any, any> = { dx: 0 }) => {
return {
position: { name: name, args: args },
attrs: {
circle: {
r: 4, // 大小
magnet: true,
stroke: '#1b5e9f', // 边框颜色
strokeWidth: 1, // 边框大小
fill: '#3578bf', // 填充颜色
style: {
visibility: 'visible', // 是否可见
},
},
},
};
};
export const createPorts = (top: boolean = true, right: boolean = true, bottom: boolean = true, left: boolean = true) => {
const groups: any = {};
const items: any = [];
if (top) {
groups['top'] = createPort('top');
items.push({ group: 'top', id: 'top' });
}
if (right) {
groups['right'] = createPort('right');
items.push({ group: 'right', id: 'right' });
}
if (bottom) {
groups['bottom'] = createPort('bottom');
items.push({ group: 'bottom', id: 'bottom' });
}
if (left) {
groups['left'] = createPort('left');
items.push({ group: 'left', id: 'left' });
}
return {
groups: groups,
items: items,
};
};

50
modeler/src/views/behaviour/graph/register.ts
View File

@@ -1,50 +0,0 @@
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
/*
* This file is part of the kernelstudio package.
*
* (c) 2014-2025 zlin <admin@kernelstudio.com>
*
* For the full copyright and license information, please view the LICENSE file
* that was distributed with this source code.
*/
import { register } from '@antv/x6-vue-shape';
import ModelElement from './node.vue';
export const registerNodeElement = () => {
console.info('registerNodeElement');
register({
shape: 'model',
component: ModelElement,
width: 120,
attrs: {
body: {
stroke: 'transparent',
strokeWidth: 0,
fill: 'transparent',
rx: 4,
ry: 4,
},
},
dragging: {
enabled: true,
},
// 配置端口识别规则,
portMarkup: [
{
tagName: 'div',
selector: 'port-body',
},
],
// 告诉 X6 如何识别 Vue 组件内的端口
portAttribute: 'data-port',
// ports: createPorts(),
});
};

77
modeler/src/views/behaviour/header.vue
View File

@@ -1,77 +0,0 @@
<template>
<a-layout-header class="ks-layout-header">
<a-flex>
<div class="ks-layout-header-logo">
<router-link :to="{path: '/app/ai/project/management'}">决策管理</router-link>
</div>
<!-- <div class="ks-layout-header-actions">-->
<!-- <span class="dev top active">开发</span>-->
<!-- <span class="training bottom">训练</span>-->
<!-- <span class="apps top">博弈对抗</span>-->
<!-- </div>-->
<div class="ks-layout-header-right">
<a-space size="large">
<span><QuestionCircleOutlined /> 帮助文档</span>
<span>{{ currentDateTime }}</span>
</a-space>
<a-space style="margin-left: 20px;cursor: pointer">
<a-dropdown trigger="click">
<a-avatar style="background: #132f6c">
{{ displayName?.charAt(0) }}
</a-avatar>
<template #overlay>
<a-menu @click="handleLogout">
<a-menu-item key="logout">
退出登录
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</div>
</a-flex>
</a-layout-header>
</template>
<script lang="ts" setup>
import { computed, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { formatDatetime } from '@/utils/datetime';
import { useUserSession } from '@/hooks';
const router = useRouter();
const session = useUserSession();
const avatar = ref<string | null>(null);
avatar.value = session?.details.value?.user?.avatar ?? null;
const displayName = computed((): string => {
let value = session?.details.value?.user?.nickName ?? session?.details.value?.user?.userName;
if (value) {
return value as string;
}
return '';
});
const currentDateTime = ref('');
const updateCurrentDateTime = () => {
currentDateTime.value = formatDatetime(new Date());
};
updateCurrentDateTime();
const timer = setInterval(updateCurrentDateTime, 1000);
const handleLogout = () => {
session.logout().then(() => {
router.push({
path: '/signin',
});
});
};
onUnmounted(() => {
clearInterval(timer);
});
</script>

47
modeler/src/views/behaviour/layout.vue
View File

@@ -1,47 +0,0 @@
<template>
<Wrapper>
<a-layout :class="['bg-transparent', collapsed ? 'sidebar-collapsed' : '']" style="background: transparent;transition: all 0.2s, background 0s;">
<Header />
<a-layout class="ks-layout-body">
<slot name="body">
<Sidebar v-if="!collapsed"/>
<a-layout-content class="ks-layout-main">
<div class="ks-layout-container">
<slot></slot>
</div>
</a-layout-content>
</slot>
</a-layout>
</a-layout>
<a-float-button
shape="circle"
type="primary"
:style="{
left: '30px',
}"
@click="()=> collapsed = !collapsed"
>
<template #icon>
<a-tooltip>
<template #title>
{{collapsed ? '展开' : '收起'}}菜单
</template>
<MenuUnfoldOutlined v-if="collapsed"/>
<MenuFoldOutlined v-else/>
</a-tooltip>
</template>
</a-float-button>
</Wrapper>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons-vue';
import Sidebar from './sidebar.vue';
import Header from './header.vue';
import { Wrapper } from '@/components/wrapper';
const collapsed = ref<boolean>(false);
</script>

58
modeler/src/views/behaviour/menu.vue
View File

@@ -1,58 +0,0 @@
<template>
<template v-if="menu.children && menu.children.length > 0">
<a-sub-menu :key="menu.key">
<template #title>
<span>{{ menu.title }}</span>
</template>
<Menu
v-for="child in menu.children"
:key="child.key"
:menu="child"
@click="handleChildClick"
/>
</a-sub-menu>
</template>
<a-menu-item
v-else
:key="menu.key"
@click="handleLeafClick"
>
<span class="ks-menu-item-label">{{ menu.title }}</span>
</a-menu-item>
</template>
<script lang="ts" setup>
// 定义菜单项的类型（与父组件保持一致）
export interface MenuItem {
key: string;
title: string;
path?: string;
type?: string;
children?: MenuItem[];
hidden?: boolean;
}
// 定义组件的 props
const props = defineProps<{
menu: MenuItem; // 单个菜单项数据
}>();
// 定义组件的事件
const emit = defineEmits<{
(e: 'click', menuItem: MenuItem): void; // 点击事件，传递菜单项
}>();
/**
* 处理叶子菜单点击
*/
const handleLeafClick = () => {
emit('click', props.menu);
};
/**
* 处理子菜单点击（递归传递）
*/
const handleChildClick = (menuItem: MenuItem) => {
emit('click', menuItem);
};
</script>

Some files were not shown because too many files have changed in this diff Show More