init commit

src/components/VisibilityRuleForm.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  VisibilityRule,
+  VisibilityOperator,
+  VISIBILITY_OPERATOR_LABELS,
+} from '../types';
+import { visibilityOperatorNeedsValue } from '../utils';
+
+export interface VisibilityRuleDraft {
+  variable: string;
+  operator: VisibilityOperator;
+  value?: string;
+}
+
+interface VisibilityRuleFormProps {
+  rule: VisibilityRuleDraft;
+  onChange: (patch: Partial<VisibilityRule>) => void;
+  variableOptions: string[];
+}
+
+export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
+  rule,
+  onChange,
+  variableOptions,
+}) => (
+  <div className="space-y-3">
+    <div>
+      <label className="ps-field-label">变量</label>
+      <select
+        value={rule.variable}
+        onChange={(e) => onChange({ variable: e.target.value })}
+        className="ps-field text-[11px] w-full mt-0.5"
+      >
+        {!rule.variable && <option value="">请选择变量</option>}
+        {variableOptions.map((v) => (
+          <option key={v} value={v}>
+            {v}
+          </option>
+        ))}
+      </select>
+    </div>
+    <div>
+      <label className="ps-field-label">条件</label>
+      <select
+        value={rule.operator}
+        onChange={(e) => {
+          const operator = e.target.value as VisibilityOperator;
+          onChange({
+            operator,
+            value: visibilityOperatorNeedsValue(operator) ? rule.value : undefined,
+          });
+        }}
+        className="ps-field text-[11px] w-full mt-0.5"
+      >
+        {(Object.keys(VISIBILITY_OPERATOR_LABELS) as VisibilityOperator[]).map((op) => (
+          <option key={op} value={op}>
+            {VISIBILITY_OPERATOR_LABELS[op]}
+          </option>
+        ))}
+      </select>
+    </div>
+    {visibilityOperatorNeedsValue(rule.operator) && (
+      <div>
+        <label className="ps-field-label">目标值</label>
+        <input
+          type="text"
+          value={rule.value ?? ''}
+          onChange={(e) => onChange({ value: e.target.value })}
+          placeholder="比较目标值"
+          className="ps-field font-mono text-[11px] w-full mt-0.5"
+        />
+      </div>
+    )}
+  </div>
+);