增加数据-人民币汇率

2026-04-25 19:48:19 +08:00
parent d232591a38
commit 306af38fdc
4 changed files with 333 additions and 5 deletions
@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react'
+
+const TimeRangePicker = ({ 
+  value = '1m', 
+  onChange, 
+  className = '' 
+}) => {
+  const [timeRange, setTimeRange] = useState(value)
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  // 计算日期范围
+  const calculateDateRange = (range) => {
+    const end = new Date()
+    const start = new Date()
+    
+    if (range === '1m') {
+      start.setMonth(start.getMonth() - 1)
+    } else if (range === '3m') {
+      start.setMonth(start.getMonth() - 3)
+    } else if (range === '1y') {
+      start.setFullYear(start.getFullYear() - 1)
+    }
+    
+    const formatDate = (date) => {
+      return date.toISOString().split('T')[0]
+    }
+    
+    return {
+      start: formatDate(start),
+      end: formatDate(end)
+    }
+  }
+
+  // 初始化时设置日期范围
+  useEffect(() => {
+    const range = calculateDateRange(value)
+    setStartDate(range.start)
+    setEndDate(range.end)
+  }, [value])
+
+  // 处理时间范围变化
+  const handleTimeRangeChange = (range) => {
+    const dateRange = calculateDateRange(range)
+    setStartDate(dateRange.start)
+    setEndDate(dateRange.end)
+    setTimeRange(range)
+    if (onChange) {
+      onChange(range, dateRange.start, dateRange.end)
+    }
+    setShowDropdown(false)
+  }
+
+  // 处理自定义日期范围
+  const handleCustomRangeApply = () => {
+    if (startDate && endDate) {
+      setTimeRange('custom')
+      if (onChange) {
+        onChange('custom', startDate, endDate)
+      }
+      setShowDropdown(false)
+    }
+  }
+
+  // 处理开始日期变化
+  const handleStartDateChange = (e) => {
+    setStartDate(e.target.value)
+  }
+
+  // 处理结束日期变化
+  const handleEndDateChange = (e) => {
+    setEndDate(e.target.value)
+  }
+
+  return (
+    <div className={`time-range-picker ${className}`}>
+      <button 
+        className="time-range-btn"
+        onClick={() => setShowDropdown(!showDropdown)}
+      >
+        {timeRange === '1m' && '近一个月'}
+        {timeRange === '3m' && '近三个月'}
+        {timeRange === '1y' && '近一年'}
+        {timeRange === 'custom' && startDate && endDate && `${startDate} 至 ${endDate}`}
+        {timeRange === 'custom' && (!startDate || !endDate) && '自定义'}
+        <span className="dropdown-arrow">▼</span>
+      </button>
+      {showDropdown && (
+        <div className="time-range-dropdown">
+          <div className="dropdown-section">
+            <h4 className="dropdown-title">自定义范围</h4>
+            <div className="custom-date-range">
+              <input 
+                type="date" 
+                value={startDate} 
+                onChange={handleStartDateChange}
+                max={endDate || new Date().toISOString().split('T')[0]}
+              />
+              <span>至</span>
+              <input 
+                type="date" 
+                value={endDate} 
+                onChange={handleEndDateChange}
+                min={startDate}
+                max={new Date().toISOString().split('T')[0]}
+              />
+              <button 
+                className="apply-btn"
+                onClick={handleCustomRangeApply}
+              >
+                确定
+              </button>
+            </div>
+          </div>
+          <div className="dropdown-section">
+            <h4 className="dropdown-title">快捷选项</h4>
+            <ul className="dropdown-options">
+              <li 
+                className={`dropdown-option ${timeRange === '1m' ? 'active' : ''}`}
+                onClick={() => handleTimeRangeChange('1m')}
+              >
+                近一个月
+              </li>
+              <li 
+                className={`dropdown-option ${timeRange === '3m' ? 'active' : ''}`}
+                onClick={() => handleTimeRangeChange('3m')}
+              >
+                近三个月
+              </li>
+              <li 
+                className={`dropdown-option ${timeRange === '1y' ? 'active' : ''}`}
+                onClick={() => handleTimeRangeChange('1y')}
+              >
+                近一年
+              </li>
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TimeRangePicker