完美

src/components/TextDisplayAffixFields.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TemplateElement } from '../types';
+import { CommitInput } from './CommitInput';
+
+interface TextDisplayAffixFieldsProps {
+  elem: TemplateElement;
+  onChange: (elem: TemplateElement) => void;
+}
+
+const PropInput = CommitInput;
+
+export const TextDisplayAffixFields: React.FC<TextDisplayAffixFieldsProps> = ({
+  elem,
+  onChange,
+}) => (
+  <div className="grid grid-cols-2 gap-2 pt-2 border-t border-[#3a3a3a]">
+    <div>
+      <label className="ps-field-label">前缀字符</label>
+      <PropInput
+        type="text"
+        value={elem.textDisplayPrefix ?? ''}
+        placeholder="如 ¥"
+        onCommit={(val) =>
+          onChange({
+            ...elem,
+            textDisplayPrefix: val || undefined,
+          })
+        }
+        className="ps-field font-mono"
+      />
+    </div>
+    <div>
+      <label className="ps-field-label">后缀字符</label>
+      <PropInput
+        type="text"
+        value={elem.textDisplaySuffix ?? ''}
+        placeholder="如 元"
+        onCommit={(val) =>
+          onChange({
+            ...elem,
+            textDisplaySuffix: val || undefined,
+          })
+        }
+        className="ps-field font-mono"
+      />
+    </div>
+    <p className="col-span-2 text-[9px] text-[#666] leading-relaxed">
+      在值提取完成后追加，仅影响显示；不参与「内容值」显示条件判断
+    </p>
+  </div>
+);