perf: 优化场景联动条件筛选添加功能,新增页面反馈

@@ -7,4 +7,6 @@ export const validateTCPCustomCommand: ValidatorRule['validator'] = (_rule, valu
   return Promise.reject('请输入ASCII或HEX服务命令(0~9/A~F)');
 };
 
-export const trimBlankSpace = (string: string) => string.replace(/\s/g, '');
+export const trimBlankSpace = (string: string) => string.replace(/(?!^)(?=(\w{2})+$)/g, '');
+
+export const formatCommandString = (string = '') => string.replace(/(?!^)(?=(\w{2})+$)/g, ' ');

@@ -151,6 +151,10 @@
 
 <style lang="less" scoped>
   .things-model-form {
+    > :deep(.ant-row) {
+      width: 100%;
+    }
+
     :deep(.ant-input-number) {
       width: 100%;
     }

@@ -3,9 +3,29 @@ import { buildUUID } from '/@/utils/uuid';
 
 export { default as ConditionFilter } from './index.vue';
 
-export function getNewConditionFilterItem(value?: Recordable): ConditionListItemType {
+export enum CheckStatusEnum {
+  NO_VALIDATE = 'NO_VALIDATE',
+  VALIDATE_SUCCESS = 'VALIDATE_SUCCESS',
+  VALIDATE_FAILED = 'VALIDATE_FAILED',
+}
+
+export enum CheckStatusColorEnum {
+  NO_VALIDATE,
+  VALIDATE_SUCCESS = '!text-green-600',
+  VALIDATE_FAILED = '!text-red-600',
+}
+
+export enum CheckStatusIconEnum {
+  NO_VALIDATE = '',
+  VALIDATE_SUCCESS = 'ant-design:check-outlined',
+  VALIDATE_FAILED = 'ant-design:close-outlined',
+}
+
+export function getNewConditionFilterItem(
+  checkStatus = CheckStatusEnum.NO_VALIDATE
+): ConditionListItemType {
   return {
     key: buildUUID(),
-    value,
+    checkStatus,
   };
 }

 <script setup lang="ts">
   import { ComponentPublicInstance, computed, ref, unref, watch } from 'vue';
-  import { Card, Tag, Button } from 'ant-design-vue';
+  import { Card, Tag, Button, Tooltip } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
   import { getFormSchemas, FormFieldsEnum } from './config';
   import { CollapseContainer } from '/@/components/Container';
@@ -9,7 +9,12 @@
   import { ConditionFilterProps, ConditionListItemType } from './type';
   import { ConditionMessageItemType, useConditionFilterMessage } from './useConditionFilterMessage';
   import { useConditionData } from './useConditionData';
-  import { getNewConditionFilterItem } from '.';
+  import {
+    CheckStatusEnum,
+    CheckStatusIconEnum,
+    CheckStatusColorEnum,
+    getNewConditionFilterItem,
+  } from '.';
   import { useSceneLinkageDrawerContext } from '../SceneLinkageDrawer/sceneLinkageDrawerContext';
 
   const { disabledDrawer } = useSceneLinkageDrawerContext();
@@ -88,14 +93,14 @@
       <template #title>
         <section class="flex !p-2">
           <div class="w-20 flex-grow-0 flex-shrink-0"> 条件筛选 </div>
-          <div class="flex flex-wrap">
+          <div class="flex flex-wrap gap-1 mr-4">
             <template v-for="(item, index) in conditionMessageList" :key="index">
               <Tag class="!rounded-md !m-0 !text-sky-700"> {{ objectModel?.name }} </Tag>
-              <span class="mx-2">{{ item.operation }}</span>
+              <span>{{ item.operation }}</span>
               <Tag class="!rounded-md !m-0 !text-orange-300">
                 {{ item.defaultValue }}
               </Tag>
-              <span class="mx-2" v-if="conditionMessageList.length - 1 !== index">和</span>
+              <span v-if="conditionMessageList.length - 1 !== index">和</span>
             </template>
           </div>
         </section>
@@ -106,9 +111,11 @@
         v-for="(conditionItem, index) in conditionListElRef"
         :key="conditionItem.key"
       >
-        <section class="border-2 border-dashed border-gray-200 rounded-lg px-4 py-2 flex-1">
-          <!--  -->
+        <section
+          class="border-2 border-dashed border-gray-200 rounded-lg px-4 py-2 flex-1 flex items-center"
+        >
           <BasicForm
+            class="flex-auto"
             :ref="(el) => setConditionRef(conditionItem, el)"
             :show-action-button-group="false"
             layout="horizontal"
@@ -118,6 +125,15 @@
             :base-col-props="{ span: 24 / getSchemas.length, xl: 8, lg: 12, sm: 24 }"
             @field-value-change="handleConditionFormValueChange"
           />
+          <Icon
+            :style="{
+              opacity: conditionItem.checkStatus !== CheckStatusEnum.NO_VALIDATE ? 100 : 0,
+            }"
+            :icon="CheckStatusIconEnum[conditionItem.checkStatus!]"
+            :size="20"
+            :class="CheckStatusColorEnum[conditionItem.checkStatus!]"
+            class="transition-opacity duration-500 ease-linear"
+          />
         </section>
         <span
           class="w-5"
@@ -125,13 +141,15 @@
         >
           和
         </span>
-        <Icon
-          v-if="!disabledDrawer"
-          icon="fluent:delete-off-20-regular"
-          size="24"
-          class="cursor-pointer"
-          @click="handleDelete(conditionItem)"
-        />
+        <Tooltip title="删除">
+          <Icon
+            v-if="!disabledDrawer"
+            icon="fluent:delete-off-20-regular"
+            size="24"
+            class="cursor-pointer"
+            @click="handleDelete(conditionItem)"
+          />
+        </Tooltip>
       </main>
       <section class="flex mt-4 items-center justify-between">
         <Button v-if="!disabledDrawer" type="primary" @click="handleAdd">

+import { CheckStatusEnum } from '.';
 import { ScheduleType } from '../EnablingRule/type';
 import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
 import { FormActionType } from '/@/components/Form';
@@ -13,8 +14,8 @@ import {
 
 export interface ConditionListItemType {
   key: string;
-  value?: Recordable;
   ref?: FormActionType;
+  checkStatus?: CheckStatusEnum;
 }
 
 export interface ConditionFilterProps {

@@ -3,7 +3,7 @@ import { ConditionFilterProps, ConditionItemType, ConditionListItemType } from '
 import { DefineComponentsBasicExpose } from '/#/utils';
 import { DeviceTriggerTypeEum, TriggerValueTypeEnum } from '/@/enums/linkedgeEnum';
 import { ConditionFormRecordType, FormFieldsEnum } from './config';
-import { getNewConditionFilterItem } from '.';
+import { CheckStatusEnum, getNewConditionFilterItem } from '.';
 import { dateUtil } from '/@/utils/dateUtil';
 
 function getPredicateType(triggerType: TriggerValueTypeEnum) {
@@ -55,7 +55,7 @@ export function useConditionData(
 
   const setFieldsValue = (condition: ConditionItemType[]) => {
     conditionItemRef.value = Array.from({ length: condition.length }, () =>
-      getNewConditionFilterItem()
+      getNewConditionFilterItem(CheckStatusEnum.VALIDATE_SUCCESS)
     );
 
     nextTick(() => {
@@ -79,7 +79,9 @@ export function useConditionData(
 
   const validate = async () => {
     for (const conditionItem of unref(conditionItemRef)) {
+      conditionItem.checkStatus = CheckStatusEnum.VALIDATE_FAILED;
       await conditionItem.ref?.validate();
+      conditionItem.checkStatus = CheckStatusEnum.VALIDATE_SUCCESS;
     }
   };
   return {