UPDATE: VERSION-20260314
This commit is contained in:
@@ -11,13 +11,13 @@
|
||||
新增
|
||||
</a-button>
|
||||
</div>
|
||||
<a-list item-layout="horizontal" :data-source="algorithms" class="ks-algorithm-list">
|
||||
<a-list item-layout="horizontal" :data-source="algorithms" class="ks-sidebar-list">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item @click="()=> handleSelect(item)" :class="selectedAlgorithm?.id === item.id ? 'selected' : null">
|
||||
<a-list-item-meta :description="substring(item.description,20)">
|
||||
<template #title>
|
||||
<span class="ks-algorithm-name">{{ substring(item.name, 20) }}</span>
|
||||
<span class="ks-algorithm-type"><a-badge size="small" :count="getAlgorithmTypeName(item.type)"></a-badge></span>
|
||||
<span class="ks-sidebar-list-type"><a-badge size="small" :count="getAlgorithmTypeName(item.type)"></a-badge></span>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
@@ -95,8 +95,8 @@
|
||||
:name="['algorithmParamList']"
|
||||
>
|
||||
<a-form-item-rest>
|
||||
<div class="ks-algorithm-param-list">
|
||||
<div class="ks-algorithm-param-item" v-for="(item,index) in selectedAlgorithm.algorithmParamList">
|
||||
<div class="ks-sidebar-list-param-list">
|
||||
<div class="ks-sidebar-list-param-item" v-for="(item,index) in selectedAlgorithm.algorithmParamList">
|
||||
<a-row :gutter="15">
|
||||
<a-col :span="7">
|
||||
<a-input v-model:value="item.paramName" placeholder="请输入参数名" />
|
||||
@@ -108,7 +108,7 @@
|
||||
<a-input v-model:value="item.description" placeholder="请输入描述" />
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<a-space class="ks-algorithm-param-actions">
|
||||
<a-space class="ks-sidebar-list-param-actions">
|
||||
<MinusCircleOutlined @click="()=> handleMinus(index)" />
|
||||
<PlusCircleOutlined @click="handleAdd" v-if="index === 0" />
|
||||
</a-space>
|
||||
@@ -125,8 +125,8 @@
|
||||
:name="['algoConfig']"
|
||||
>
|
||||
<a-form-item-rest>
|
||||
<div class="ks-algorithm-param-list">
|
||||
<div class="ks-algorithm-param-item" v-for="(t,index) in selectedAlgorithm.algoConfigList">
|
||||
<div class="ks-sidebar-list-param-list">
|
||||
<div class="ks-sidebar-list-param-item" v-for="(t,index) in selectedAlgorithm.algoConfigList">
|
||||
<a-row :gutter="15">
|
||||
<a-col :span="7">
|
||||
<a-select placeholder="请选择参数" v-model:value="t.name" @change="(v: any)=> t.name = v">
|
||||
@@ -139,7 +139,7 @@
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<a-space class="ks-algorithm-param-actions">
|
||||
<a-space class="ks-sidebar-list-param-actions">
|
||||
<MinusCircleOutlined @click="()=> handleMinusConfig(index)" />
|
||||
<PlusCircleOutlined @click="handleAddConfig" v-if="index === 0" />
|
||||
</a-space>
|
||||
@@ -290,6 +290,7 @@ const handleCreate = () => {
|
||||
|
||||
const handleSelect = (item: Algorithm) => {
|
||||
selectedAlgorithm.value = resolveItem(item);
|
||||
formRef.value?.resetFields();
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
@@ -394,120 +395,3 @@ const handleChange = (page: number, pageSize: number) => {
|
||||
onMounted(() => load());
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ks-algorithm-card {
|
||||
.ant-card-head-title {
|
||||
span.text {
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ks-sidebar-header {
|
||||
line-height: 40px;
|
||||
padding: 5px 15px;
|
||||
background: #081d36;
|
||||
min-height: 40px;
|
||||
background: url(@/assets/icons/card-head.png) left / 180% 100%;
|
||||
padding: 0 10px;
|
||||
|
||||
.ks-sidebar-title {
|
||||
color: #7ae8fc;
|
||||
font-size: 16px;
|
||||
.icon {
|
||||
background: url(@/assets/icons/list.png) center / 100% 100%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.text{
|
||||
margin-left: 40px;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.ks-sidebar-add {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 8px;
|
||||
font-size: 12px;
|
||||
|
||||
.anticon {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-list {
|
||||
&.ks-algorithm-list {
|
||||
.ant-list-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
border-left: 2px solid transparent;
|
||||
position: relative;
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
background: #0a1b3c;
|
||||
border-left: 2px solid #11377e;
|
||||
}
|
||||
}
|
||||
|
||||
.ks-algorithm-type {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
.ant-badge {
|
||||
.ant-badge-count {
|
||||
color: #c3c2c2;
|
||||
background: #333f7d;
|
||||
box-shadow: 0 0 0 1px #325478;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-list-item-meta {
|
||||
.ant-list-item-meta-title {
|
||||
color: #7ae8fc;
|
||||
}
|
||||
|
||||
.ant-list-item-meta-description {
|
||||
color: #4d8c98;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ks-algorithm-param-list {
|
||||
padding: 15px;
|
||||
border: 1px solid #475f71;
|
||||
border-radius: 2px;
|
||||
|
||||
.ks-algorithm-param-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ks-algorithm-param-actions {
|
||||
.anticon {
|
||||
color: #7ae8fc;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
line-height: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user