fix

web/frontend/src/components/rule/ConditionRow.vue

@@ -113,14 +113,14 @@ const wildcardHints = computed(() => {
   <div class="bg-muted/40 flex flex-col gap-2 rounded-lg border p-2.5">
     <div class="flex flex-wrap items-center gap-2">
       <Select
-        :model-value="condition.field"
+        :model-value="props.condition.field"
         :options="fieldOptions"
         :aria-label="t('rules.builder.field')"
         class="h-8 min-w-0 flex-1 basis-45 text-xs sm:basis-56"
         @update:model-value="changeField"
       />
       <Select
-        :model-value="condition.op"
+        :model-value="props.condition.op"
         :options="operatorOptions"
         :aria-label="t('rules.builder.operator')"
         class="h-8 min-w-0 flex-1 basis-32 text-xs sm:basis-40 sm:flex-none"
@@ -136,13 +136,13 @@ const wildcardHints = computed(() => {
               : 'text-muted-foreground hover:bg-accent',
           )
         "
-        :aria-pressed="condition.negate"
-        @click="patch({ negate: !condition.negate })"
+        :aria-pressed="props.condition.negate"
+        @click="patch({ negate: !props.condition.negate })"
       >
         {{ t('rules.builder.not') }}
       </button>
       <Button
-        v-if="removable"
+        v-if="props.removable"
         variant="ghost"
         size="icon-sm"
         class="text-muted-foreground hover:text-destructive shrink-0"
@@ -162,7 +162,7 @@ const wildcardHints = computed(() => {
         :class="
           cn(
             'rounded-md border px-2.5 py-1 font-mono text-xs uppercase transition-colors',
-            condition.values.includes(value)
+            props.condition.values.includes(value)
               ? 'border-primary/40 bg-primary/10 text-foreground'
               : 'text-muted-foreground hover:bg-accent',
           )
@@ -176,13 +176,13 @@ const wildcardHints = computed(() => {
     <!-- Protocol detection: analyzer chips -->
     <div v-else-if="field.type === 'analyzer'" class="flex flex-wrap gap-1.5">
       <button
-        v-for="name in analyzers"
+        v-for="name in props.analyzers"
         :key="name"
         type="button"
         :class="
           cn(
             'rounded-md border px-2.5 py-1 font-mono text-xs transition-colors',
-            condition.values.includes(name)
+            props.condition.values.includes(name)
               ? 'border-primary/40 bg-primary/10 text-foreground'
               : 'text-muted-foreground hover:bg-accent',
           )
@@ -196,38 +196,38 @@ const wildcardHints = computed(() => {
     <!-- Port range -->
     <div v-else-if="condition.op === 'range'" class="flex items-center gap-2">
       <Input
-        :model-value="condition.values[0] ?? ''"
+        :model-value="props.condition.values[0] ?? ''"
         inputmode="numeric"
         placeholder="1024"
         class="h-8 w-28 text-xs"
-        @update:model-value="patch({ values: [$event, condition.values[1] ?? ''] })"
+        @update:model-value="patch({ values: [$event, props.condition.values[1] ?? ''] })"
       />
       <span class="text-muted-foreground text-xs">–</span>
       <Input
-        :model-value="condition.values[1] ?? ''"
+        :model-value="props.condition.values[1] ?? ''"
         inputmode="numeric"
         placeholder="65535"
         class="h-8 w-28 text-xs"
-        @update:model-value="patch({ values: [condition.values[0] ?? '', $event] })"
+        @update:model-value="patch({ values: [props.condition.values[0] ?? '', $event] })"
       />
     </div>
 
     <!-- GeoIP / GeoSite pickers -->
-    <GeoPicker
-      v-else-if="condition.op === 'geoip' || condition.op === 'geosite'"
-      :model-value="condition.values"
-      :kind="condition.op"
-      @update:model-value="patch({ values: $event })"
-    />
+      <GeoPicker
+        v-else-if="props.condition.op === 'geoip' || props.condition.op === 'geosite'"
+        :model-value="props.condition.values"
+        :kind="props.condition.op"
+        @update:model-value="patch({ values: $event })"
+      />
 
     <!-- Everything else: a list of values -->
     <template v-else>
-      <TagsInput
-        :model-value="condition.values"
-        :placeholder="placeholder"
-        :validate="validator"
-        @update:model-value="patch({ values: $event })"
-      />
+        <TagsInput
+          :model-value="props.condition.values"
+          :placeholder="placeholder"
+          :validate="validator"
+          @update:model-value="patch({ values: $event })"
+        />
       <p v-for="hint in wildcardHints" :key="hint" class="text-muted-foreground font-mono text-[11px]">
         {{ hint }}
       </p>