打印

2026-06-23 15:17:29 +08:00
parent 3a50e7e33b
commit 1b04e34ff0
14 changed files with 787 additions and 129 deletions
--- a/src/components/ColorValueField.tsx
+++ b/src/components/ColorValueField.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { colorPickerPreviewValue, colorValueUsesVariable } from '../colorUtils';
+import { CommitInput } from './CommitInput';
+
+interface ColorValueFieldProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  variableOptions?: string[];
+  defaultColor?: string;
+  placeholder?: string;
+  className?: string;
+  hint?: string;
+}
+
+export const ColorValueField: React.FC<ColorValueFieldProps> = ({
+  label,
+  value,
+  onChange,
+  variableOptions = [],
+  defaultColor = '#111827',
+  placeholder = '#111827',
+  className = '',
+  hint,
+}) => {
+  const usesVariable = colorValueUsesVariable(value);
+  const pickerValue = colorPickerPreviewValue(value, defaultColor);
+
+  return (
+    <div className={className}>
+      {label && <label className="ps-field-label">{label}</label>}
+      <div className="flex gap-1 items-center">
+        <input
+          type="color"
+          value={pickerValue}
+          disabled={usesVariable}
+          onChange={(e) => onChange(e.target.value)}
+          className="color-input shrink-0 disabled:opacity-40"
+          title={usesVariable ? '当前为变量颜色，请使用文本框编辑' : undefined}
+        />
+        <CommitInput
+          type="text"
+          value={value}
+          placeholder={placeholder}
+          onCommit={onChange}
+          className="ps-field font-mono text-[11px] flex-1 min-w-0"
+        />
+      </div>
+      {variableOptions.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-1.5">
+          {variableOptions.map((v) => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => {
+                const token = `{${v}}`;
+                onChange(value.includes(token) ? value : value ? `${value} ${token}` : token);
+              }}
+              className="ps-btn text-[9px] font-mono"
+            >
+              {`{${v}}`}
+            </button>
+          ))}
+        </div>
+      )}
+      {hint && <p className="text-[9px] text-[#666] mt-1 leading-relaxed">{hint}</p>}
+      {!hint && variableOptions.length > 0 && (
+        <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
+          支持 hex/rgb/transparent 或 {`{变量名}`}；排版印刷色彩模式下按行数据解析
+        </p>
+      )}
+    </div>
+  );
+};