[Style 0000] 优化模型参数设置表单并提供备用方案

src/views/system/algorithm/components/RelationBuilder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relation-builder">
     <div class="w-full flex justify-between mb-10px" v-if="compact">
-      <a-space :style="{ width: `calc(100% - ${isOperator ? '100' : '0'}px)` }" wrap>
+      <a-space :style="{ width: `calc(100% - ${isOperator ? '100' : '0'}px)`, marginBottom: '10px' }" wrap>
         <template v-for="(item, index) in items" :key="index">
           <a-input-number v-if="item.type === 'number'" v-model:value="item.value" style="width: 30px" placeholder="-" @blur="confirm" />
           <a-tag v-if="item.type === 'operand' || item.type === 'logic' || item.type === 'operator'" :color="tagColors[item.type]" class="expr-tag">
@@ -9,6 +9,15 @@
           </a-tag>
         </template>
       </a-space>
+      <!-- <div class="flex flex-wrap" :style="{ width: `calc(100% - ${isOperator ? '100' : '0'}px)` }" wrap>
+        <div v-for="(group, id) in splitedItems" :key="`temp${id}`" class="w-50% flex justify-start items-center mb-10px" compact>
+          <template v-for="(item, index) in group" :key="index">
+            <a-input-number v-if="item.type === 'number'" v-model:value="item.value" style="width: 30px" placeholder="-" @blur="confirm" />
+            <span v-else-if="item.type === 'operand'" class="w-90px text-center">{{ formatDisplay(item) }}</span>
+            <span v-else class="p-5px">{{ formatDisplay(item) }}</span>
+          </template>
+        </div>
+      </div> -->
       <a-button v-if="isOperator" class="w-100px" type="primary" @click="enterAdvancedMode"> 高级编辑 </a-button>
     </div>
     <a-row v-else :gutter="8">
@@ -111,7 +120,7 @@
 
 <script lang="ts" setup>
   import { ref, computed, watch, h } from 'vue';
-  import { cloneDeep } from 'lodash-es';
+  import { cloneDeep, last } from 'lodash-es';
   import { message, Modal } from 'ant-design-vue';
   import { DeleteOutlined } from '@ant-design/icons-vue';
 
@@ -299,6 +308,21 @@
 
   // Computed
   const expressionString = computed(() => items.value.map((i) => i.value).join(' '));
+  // const splitedItems = computed(() => {
+  //   return items.value.reduce(
+  //     (arr: Item[][], ele) => {
+  //       console.log('debug rr', arr, ele);
+  //       if (ele.type === 'logic') {
+  //         arr.push([]);
+  //       }
+  //       if (['operand', 'operator', 'number'].includes(ele.type)) {
+  //         last(arr)!.push(ele);
+  //       }
+  //       return arr;
+  //     },
+  //     [[]]
+  //   );
+  // });
 
   // 工具函数
   const buildOperandSet = (): Set<string> => {
@@ -311,11 +335,7 @@
 
   const formatDisplay = (item: Item): string => {
     if (item.type === 'number') return item.value;
-    if (compact.value) {
-      return item.type === 'operand' || item.type === 'operator' ? displayMap[item.value] || item.value : '|';
-    } else {
-      return displayMap[item.value] || item.value;
-    }
+    return displayMap[item.value] || item.value;
   };
 
   const parseExpression = (str: string): Item[] => {