0.0.8.5

2025-11-24 14:02:34 +08:00
parent b7a8c9ee6e
commit 3d075c6076
941 changed files with 25613 additions and 27641 deletions
@@ -0,0 +1,139 @@
+"use client"
+
+import { solar2lunar, formatDate } from "@/lib/lunar-calendar"
+
+interface DualCalendarDisplayProps {
+  date: Date
+  className?: string
+  size?: "sm" | "md" | "lg"
+  showWeekday?: boolean
+  compact?: boolean
+}
+
+export function DualCalendarDisplay({ 
+  date, 
+  className = "",
+  size = "md",
+  showWeekday = true,
+  compact = false
+}: DualCalendarDisplayProps) {
+  // 获取农历信息
+  const lunarInfo = solar2lunar(date)
+  
+  // 格式化显示
+  const solarStr = formatDate(date)
+  const [year, monthNum, day] = solarStr.split('-')
+  const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
+
+  // 尺寸配置
+  const sizeConfig = {
+    sm: {
+      container: "h-[80px]",
+      padding: "p-3",
+      titleGap: "mb-2",
+      contentGap: "space-y-1",
+      solarText: "text-lg",
+      weekText: "text-xs",
+      lunarText: "text-sm",
+      tagText: "text-[10px]",
+      tagPadding: "px-1.5 py-0.5"
+    },
+    md: {
+      container: "h-[110px]",
+      padding: "p-5",
+      titleGap: "mb-3",
+      contentGap: "space-y-2",
+      solarText: "text-2xl",
+      weekText: "text-sm",
+      lunarText: "text-lg",
+      tagText: "text-xs",
+      tagPadding: "px-2 py-0.5"
+    },
+    lg: {
+      container: "h-[140px]",
+      padding: "p-6",
+      titleGap: "mb-4",
+      contentGap: "space-y-3",
+      solarText: "text-3xl",
+      weekText: "text-base",
+      lunarText: "text-xl",
+      tagText: "text-sm",
+      tagPadding: "px-3 py-1"
+    }
+  }
+
+  const config = sizeConfig[size]
+
+  if (compact) {
+    // 紧凑模式：单行显示
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <span className="text-sm font-medium">
+          {year}年{parseInt(monthNum)}月{parseInt(day)}日
+        </span>
+        {lunarInfo && (
+          <>
+            <span className="text-xs text-muted-foreground">|</span>
+            <span className="text-sm text-muted-foreground font-serif">
+              {lunarInfo.monthName}{lunarInfo.dayName}
+            </span>
+          </>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`grid md:grid-cols-2 gap-4 ${className}`}>
+      {/* 公历信息 */}
+      <div className={`rounded-xl border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-sky-50 ${config.padding} ${config.container} flex flex-col`}>
+        <div className={`flex items-center gap-2 ${config.titleGap}`}>
+          <div className="h-1 w-1 rounded-full bg-blue-600"></div>
+          <h3 className="text-xs font-medium text-blue-900">公历</h3>
+        </div>
+        <div className={`${config.contentGap} flex-1 flex flex-col justify-center`}>
+          <div className={`${config.solarText} font-bold text-blue-900 font-serif leading-tight`}>
+            {year}年{parseInt(monthNum)}月{parseInt(day)}日
+          </div>
+          {showWeekday && (
+            <div className={`${config.weekText} text-blue-700 font-medium`}>
+              星期{weekDay}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 农历信息 */}
+      {lunarInfo ? (
+        <div className={`rounded-xl border-2 border-red-200 bg-gradient-to-br from-red-50 to-amber-50 ${config.padding} ${config.container} flex flex-col overflow-hidden`}>
+          <div className={`flex items-center gap-2 ${config.titleGap}`}>
+            <div className="h-1 w-1 rounded-full bg-red-600"></div>
+            <h3 className="text-xs font-medium text-red-900">农历</h3>
+          </div>
+          <div className="flex-1 flex items-center min-h-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className={`${config.lunarText} font-bold text-red-900 font-serif leading-tight whitespace-nowrap`}>
+                {lunarInfo.ganZhiYear}年 {lunarInfo.monthName}{lunarInfo.dayName}
+              </span>
+              <span className={`${config.tagPadding} rounded-full bg-red-100 text-red-700 ${config.tagText} font-medium border border-red-200 whitespace-nowrap`}>
+                {lunarInfo.animal}年
+              </span>
+              {lunarInfo.isLeap && (
+                <span className={`${config.tagPadding} rounded-full bg-amber-100 text-amber-700 ${config.tagText} font-medium border border-amber-200 whitespace-nowrap`}>
+                  闰月
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={`rounded-xl border-2 border-gray-200 bg-gray-50 ${config.padding} ${config.container} flex items-center justify-center`}>
+          <div className="text-center text-gray-500 text-sm">
+            农历信息不可用
+            <div className="text-xs mt-1">日期超出范围 (1900-2100)</div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}