通用组件开发

2025-08-17 00:00:56 +08:00
parent 86e14cb445
commit 4f6ca73148
25 changed files with 2554 additions and 24 deletions
--- a/src/components/Range/index.tsx
+++ b/src/components/Range/index.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { Range } from "@nutui/nutui-react-taro";
+import "./index.scss";
+
+interface RangeProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: [number, number];
+  onChange?: (value: [number, number]) => void;
+  disabled?: boolean;
+}
+
+const NtrpRange: React.FC<RangeProps> = ({
+  min = 1.0,
+  max = 5.0,
+  step = 0.5,
+  value = [min, max],
+  onChange,
+  disabled = false,
+}) => {
+  const [currentValue, setCurrentValue] = useState<[number, number]>(value);
+
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
+  const handleChange = (val: [number, number]) => {
+    console.log("Range value changed:", val);
+    setCurrentValue(val);
+    onChange?.(val);
+  };
+
+  const marks = useMemo(() => {
+    let marksMap = {};
+    for (let i = min + step; i < max; i += step) {
+      marksMap[i] = "";
+    }
+    return marksMap;
+  }, [min, max, step]);
+
+  const rangContent = useMemo(() => {
+    const [start, end] = currentValue || [];
+    if (start === min && end === max) {
+      return "不限";
+    }
+    return `${start.toFixed(1)} - ${end.toFixed(1)}之间`;
+  }, [currentValue, min, max]);
+
+  return (
+    <div className="ntrp-range">
+      <div className="ntrp-range__header">
+        <div className="ntrp-range__header-left">
+          <div className="ntrp-range__icon">icon</div>
+          <h3 className="ntrp-range__title">NTRP水平区间</h3>
+        </div>
+        <p className="ntrp-range__content">{rangContent}</p>
+      </div>
+
+      <div>
+        <div className="rangeWrapper">
+          <span className="rangeWrapper__min">{min}</span>
+          <Range
+            range
+            min={min}
+            max={max}
+            step={step}
+            value={currentValue}
+            onChange={handleChange}
+            disabled={disabled}
+            defaultValue={[min, max]}
+            className="rangeHandle"
+            maxDescription={null}
+            minDescription={null}
+            currentDescription={null}
+            marks={marks}
+            style={{ color: "gold" }}
+          />
+          <span className="rangeWrapper__max">{max}</span>
+        </div>
+      </div>
+
+      {/* 调试信息 */}
+      <div style={{ marginTop: "10px", fontSize: "12px", color: "#666" }}>
+        当前值: {currentValue[0].toFixed(1)} - {currentValue[1].toFixed(1)}
+      </div>
+    </div>
+  );
+};
+
+export default NtrpRange;