打印

src/components/PropSidebar.tsx

@@ -13,6 +13,7 @@ import {
 import { VisibilityRuleDialog } from './VisibilityRuleDialog';
 import { ElementMaskDialog } from './ElementMaskDialog';
 import { VisibilityRuleSummary } from './VisibilityRuleSummary';
+import { ColorValueField } from './ColorValueField';
 import { ValueExtractFields } from './ValueExtractFields';
 import { TextDisplayAffixFields } from './TextDisplayAffixFields';
 import {
@@ -1358,22 +1359,19 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
 
               {/* Text color */}
               <div className="border-t border-[#3a3a3a] pt-2.5">
-                <label className="block text-[10px] font-semibold text-[#777] mb-1">文本颜色</label>
-                <div className="flex gap-1 items-center">
-                  <input
-                    type="color"
-                    value={selectedElem.textColor || '#111827'}
-                    onChange={(e) => handleElemChange({ ...selectedElem, textColor: e.target.value })}
-                    className="color-input shrink-0"
-                  />
-                  <input
-                    type="text"
-                    placeholder="#111827"
-                    value={selectedElem.textColor || ''}
-                    onChange={(e) => handleElemChange({ ...selectedElem, textColor: e.target.value })}
-                    className="ps-field font-mono text-[11px] flex-1 min-w-0"
-                  />
-                </div>
+                <ColorValueField
+                  label="文本颜色"
+                  value={selectedElem.textColor || ''}
+                  onChange={(val) =>
+                    handleElemChange({
+                      ...selectedElem,
+                      textColor: val || undefined,
+                    })
+                  }
+                  variableOptions={templateVariables}
+                  defaultColor="#111827"
+                  placeholder="#111827"
+                />
               </div>
 
               <div className="space-y-2">
@@ -1939,6 +1937,35 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                 className="ps-field font-mono text-[11px] flex-1 min-w-0"
               />
             </div>
+            {templateVariables.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1.5">
+                {templateVariables.map((v) => (
+                  <button
+                    key={v}
+                    type="button"
+                    onClick={() => {
+                      const token = `{${v}}`;
+                      const current =
+                        selectedElem.backgroundColor === 'transparent'
+                          ? ''
+                          : selectedElem.backgroundColor || '';
+                      handleElemChange({
+                        ...selectedElem,
+                        backgroundColor: current.includes(token)
+                          ? current
+                          : current
+                            ? `${current} ${token}`
+                            : token,
+                        backgroundOpacity: 100,
+                      });
+                    }}
+                    className="ps-btn text-[9px] font-mono"
+                  >
+                    {`{${v}}`}
+                  </button>
+                ))}
+              </div>
+            )}
             <div>
               <div className="flex justify-between items-center mb-1">
                 <span className="text-[10px] text-[#777]">不透明度</span>
@@ -2077,35 +2104,20 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
               </div>
             </div>
 
-            <div>
-              <label className="ps-field-label">边框颜色</label>
-              <div className="flex gap-1 items-center">
-                <input
-                  type="color"
-                  value={selectedElem.borderColor || '#111827'}
-                  onChange={(e) =>
-                    handleElemChange({
-                      ...selectedElem,
-                      borderColor: e.target.value,
-                      borderWidth: selectedElem.borderWidth || 0.3,
-                    })
-                  }
-                  className="color-input shrink-0"
-                />
-                <input
-                  type="text"
-                  value={selectedElem.borderColor || ''}
-                  placeholder="#111827"
-                  onChange={(e) =>
-                    handleElemChange({
-                      ...selectedElem,
-                      borderColor: e.target.value,
-                    })
-                  }
-                  className="ps-field font-mono text-[11px] flex-1 min-w-0"
-                />
-              </div>
-            </div>
+            <ColorValueField
+              label="边框颜色"
+              value={selectedElem.borderColor || ''}
+              onChange={(val) =>
+                handleElemChange({
+                  ...selectedElem,
+                  borderColor: val || undefined,
+                  borderWidth: selectedElem.borderWidth || 0.3,
+                })
+              }
+              variableOptions={templateVariables}
+              defaultColor="#111827"
+              placeholder="#111827"
+            />
 
             <div>
               <label className="ps-field-label">各边独立边框宽度 (mm，留空用统一值，0 为不显示)</label>