feat: add Perpetual Calendar component and update routing, localization, and...

feat: add Perpetual Calendar component and update routing, localization, and model rankings with new entries and adjustments

feat: add Perpetual Calendar component and update routing, localization, and...
feat: add Perpetual Calendar component and update routing, localization, and model rankings with new entries and adjustments
4fac2841 · fisherdaddy · dee77114 · 4fac2841 · 4fac2841 · 4fac2841
Commit 4fac2841 authored Apr 18, 2025 by fisherdaddy
23 changed files
--- a/docs/LUNAR_CALENDAR.md
+++ b/docs/LUNAR_CALENDAR.md
+# 农历日期计算功能
+
+本文档介绍了日历应用中的农历日期计算功能。
+
+## 功能概述
+
+农历日期计算功能允许应用显示与公历日期对应的农历日期信息，包括：
+
+- 农历年（天干地支，如"甲辰年"）
+- 生肖（如"龙"）
+- 农历月（如"正月"）
+- 农历日（如"初一"）
+
+## 实现方式
+
+农历日期的计算主要通过两种方式实现：
+
+1. **配置数据驱动**：对于已知年份，从配置文件中查找预设的农历日期映射。
+2. **简化计算回退**：对于配置中不存在的年份，使用简化的计算方法估算农历日期。
+
+## 配置文件结构
+
+农历数据存储在 `src/data/calendar-config.json` 文件中，主要包含以下内容：
+
+```json
+{
+  "lunarDateMap": {
+    "2024": {
+      "0101": { "lunarMonth": "腊", "lunarDay": "廿一" },
+      ...更多日期...
+    },
+    "2025": {
+      "0101": { "lunarMonth": "腊", "lunarDay": "初二" },
+      ...更多日期...
+    }
+  }
+}
+```
+
+配置结构说明：
+
+1. `lunarDateMap`：顶层对象，包含各年份的农历数据
+2. 年份（如`"2024"`）：包含该年全年的农历日期映射
+3. 日期格式为`"MMDD"`：月和日都使用两位数表示，如`"0101"`表示1月1日
+4. 每个日期映射包含：
+   - `lunarMonth`：农历月份（如"正"、"二"、"腊"等）
+   - `lunarDay`：农历日期（如"初一"、"十五"、"廿九"等）
+
+## 如何使用
+
+### 基本用法
+
+```javascript
+import { getLunarDate } from './js/lunarCalendar.js';
+import calendarConfig from './data/calendar-config.json';
+
+// 创建一个日期对象
+const date = new Date(2024, 0, 1); // 2024年1月1日
+
+// 获取农历日期
+const lunarDate = getLunarDate(date, calendarConfig);
+
+console.log(lunarDate.year);   // "甲辰年"
+console.log(lunarDate.animal); // "龙"
+console.log(lunarDate.month);  // "腊月"
+console.log(lunarDate.day);    // "廿一"
+```
+
+### 返回值说明
+
+`getLunarDate` 函数返回一个包含以下属性的对象：
+
+- `year`：农历年（天干地支年，如"甲辰年"）
+- `animal`：生肖（如"龙"）
+- `month`：农历月（如"正月"）
+- `day`：农历日（如"初一"）
+
+## 如何扩展数据
+
+若要为新的年份添加农历数据，请按以下步骤操作：
+
+1. 打开 `src/data/calendar-config.json` 文件
+2. 在 `lunarDateMap` 对象中添加新的年份条目：
+
+```json
+"lunarDateMap": {
+  "2024": { ... },
+  "2025": { ... },
+  "2026": {
+    "0101": { "lunarMonth": "冬", "lunarDay": "十三" },
+    "0102": { "lunarMonth": "冬", "lunarDay": "十四" },
+    ...
+  }
+}
+```
+
+添加数据时，请确保：
+- 月日格式为 `MMDD`（两位数月份和两位数日期）
+- 提供准确的农历月份和日期信息
+
+## 测试
+
+可以通过访问 `src/test-lunar.html` 页面来测试农历日期计算功能。该页面会展示几个测试案例，包括配置中存在和不存在的日期。
+
+## 注意事项
+
+1. 简化计算方法仅作为回退机制，不保证准确性
+2. 实际农历计算涉及闰月、大小月以及二十四节气等复杂因素
+3. 为获得最佳结果，建议为所有需要支持的年份提供完整的配置数据
+4. 农历年份的计算（特别是农历年的开始和结束）依赖于农历月份信息 
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
    "@tailwindcss/typography": "^0.5.16",
    "antd": "^5.21.6",
    "browser-image-compression": "^2.0.2",
+    "chinese-lunar": "^0.1.4",
    "diff": "^7.0.0",
    "dompurify": "^3.2.1",
+    "esm": "^3.2.25",
    "highlight.js": "^11.11.1",
    "html2canvas": "^1.4.1",
    "i18next": "^23.16.5",

--- a/public/assets/icon/calendar.jpg
+++ b/public/assets/icon/calendar.jpg
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -33,6 +33,7 @@ const DeepSeekTimeline = lazy(() => import('./components/DeepSeekTimeline'));
 const WechatFormatter = lazy(() => import('./components/WechatFormatter'));
 const ImageAnnotator = lazy(() => import('./components/ImageAnnotator'));
 const AITimelinePage = lazy(() => import('./pages/AITimelinePage'));
+const PerpetualCalendar = lazy(() => import('./components/PerpetualCalendar'));

 function App() {
  return (
@@ -73,6 +74,7 @@ function App() {
                <Route path="/wechat-formatter" element={<WechatFormatter />} />
                <Route path="/image-annotator" element={<ImageAnnotator />} />
                <Route path="/ai-timeline" element={<AITimelinePage />} />
+                <Route path="/perpetual-calendar" element={<PerpetualCalendar />} />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Suspense>

--- a/src/components/PerpetualCalendar.jsx
+++ b/src/components/PerpetualCalendar.jsx
--- a/src/components/PricingCharts.jsx
+++ b/src/components/PricingCharts.jsx
@@ -9,6 +9,7 @@ import ModelRankingMath from '../data/model-ranking-math.json';
 import ModelRankingCode from '../data/model-ranking-code.json';
 import ModelRankingWeb from '../data/model-ranking-web.json';
 import ModelRankingWriting from '../data/model-ranking-writing.json';
+import ModelRankingVision from '../data/model-ranking-vision.json';
 import SEO from '../components/SEO';
 import { usePageLoading } from '../hooks/usePageLoading';
 import LoadingOverlay from './LoadingOverlay';
@@ -22,6 +23,7 @@ const TabRankingCharts = () => {
    { id: 'code', name: '代码能力', data: ModelRankingCode },
    { id: 'web', name: 'Web 开发能力', data: ModelRankingWeb },
    { id: 'writing', name: '写作能力', data: ModelRankingWriting },
+    { id: 'image', name: '视觉能力', data: ModelRankingVision },
  ];

  return (

--- a/src/data/calendar-config.json
+++ b/src/data/calendar-config.json
+{
+  "monthNames": [
+    "一月", "二月", "三月", "四月", "五月", "六月",
+    "七月", "八月", "九月", "十月", "十一月", "十二月"
+  ],
+  "weekdayNames": ["日", "一", "二", "三", "四", "五", "六"],
+  "yearRange": {
+    "start": 1900,
+    "end": 2100
+  },
+  "colors": {
+    "today": "#f0f5ff",
+    "weekend": "#fafafa",
+    "holiday": "#ffeaea",
+    "holidayText": "#ff4d4f",
+    "rest": "#f5222d",
+    "work": "#52c41a"
+  },
+  "solarHolidays": {
+    "0101": { "name": "元旦", "isHoliday": true },
+    "0214": { "name": "情人节", "isHoliday": false },
+    "0308": { "name": "妇女节", "isHoliday": false },
+    "0312": { "name": "植树节", "isHoliday": false },
+    "0401": { "name": "愚人节", "isHoliday": false },
+    "0422": { "name": "地球日", "isHoliday": false },
+    "0501": { "name": "劳动节", "isHoliday": true },
+    "0504": { "name": "青年节", "isHoliday": false },
+    "0601": { "name": "儿童节", "isHoliday": false },
+    "0701": { "name": "建党节", "isHoliday": false },
+    "0801": { "name": "建军节", "isHoliday": false },
+    "0910": { "name": "教师节", "isHoliday": false },
+    "1001": { "name": "国庆节", "isHoliday": true },
+    "1031": { "name": "万圣节", "isHoliday": false },
+    "1111": { "name": "光棍节", "isHoliday": false },
+    "1224": { "name": "平安夜", "isHoliday": false },
+    "1225": { "name": "圣诞节", "isHoliday": false }
+  },
+  "lunarFestivals": {
+    "0101": { "name": "春节", "isHoliday": true },
+    "0115": { "name": "元宵节", "isHoliday": false },
+    "0505": { "name": "端午节", "isHoliday": true },
+    "0707": { "name": "七夕", "isHoliday": false },
+    "0815": { "name": "中秋节", "isHoliday": true },
+    "0909": { "name": "重阳节", "isHoliday": false },
+    "1208": { "name": "腊八节", "isHoliday": false },
+    "1224": { "name": "小年", "isHoliday": false },
+    "1230": { "name": "除夕", "isHoliday": true }
+  },
+  "solarTerms": {
+    "2025": {
+      "20250120": "大寒",
+      "20250203": "立春",
+      "20250218": "雨水",
+      "20250305": "惊蛰",
+      "20250320": "春分",
+      "20250404": "清明",
+      "20250420": "谷雨",
+      "20250505": "立夏",
+      "20250521": "小满",
+      "20250605": "芒种",
+      "20250621": "夏至",
+      "20250707": "小暑",
+      "20250722": "大暑",
+      "20250807": "立秋",
+      "20250823": "处暑",
+      "20250907": "白露",
+      "20250923": "秋分",
+      "20251008": "寒露",
+      "20251023": "霜降",
+      "20251107": "立冬",
+      "20251122": "小雪",
+      "20251207": "大雪",
+      "20251221": "冬至",
+      "20260105": "小寒"
+    }
+  },
+  "legalHolidays": {
+    "2025": {
+      "20250101": { "type": "holiday", "name": "元旦" },
+      "20250128": { "type": "holiday", "name": "春节" },
+      "20250129": { "type": "holiday", "name": "春节" },
+      "20250130": { "type": "holiday", "name": "春节" },
+      "20250131": { "type": "holiday", "name": "春节" },
+      "20250201": { "type": "holiday", "name": "春节" },
+      "20250202": { "type": "holiday", "name": "春节" },
+      "20250203": { "type": "holiday", "name": "春节" },
+      "20250204": { "type": "holiday", "name": "春节" },
+      "20250126": { "type": "workday", "name": "春节调休" },
+      "20250208": { "type": "workday", "name": "春节调休" },
+      "20250404": { "type": "holiday", "name": "清明节" },
+      "20250405": { "type": "holiday", "name": "清明节" },
+      "20250406": { "type": "holiday", "name": "清明节" },
+      "20250501": { "type": "holiday", "name": "劳动节" },
+      "20250502": { "type": "holiday", "name": "劳动节" },
+      "20250503": { "type": "holiday", "name": "劳动节" },
+      "20250504": { "type": "holiday", "name": "劳动节" },
+      "20250505": { "type": "holiday", "name": "劳动节" },
+      "20250427": { "type": "workday", "name": "劳动节调休" },
+      "20250531": { "type": "holiday", "name": "端午节" },
+      "20250601": { "type": "holiday", "name": "端午节" },
+      "20250602": { "type": "holiday", "name": "端午节" },
+      "20251001": { "type": "holiday", "name": "国庆节" },
+      "20251002": { "type": "holiday", "name": "国庆节" },
+      "20251003": { "type": "holiday", "name": "国庆节" },
+      "20251004": { "type": "holiday", "name": "中秋节" },
+      "20251005": { "type": "holiday", "name": "中秋节" },
+      "20251006": { "type": "holiday", "name": "中秋节" },
+      "20251007": { "type": "holiday", "name": "国庆节" },
+      "20251008": { "type": "holiday", "name": "国庆节" },
+      "20250928": { "type": "workday", "name": "中秋调休" },
+      "20251011": { "type": "workday", "name": "国庆调休" }
+    }
+  }
+} 
\ No newline at end of file
--- a/src/data/llm-pricing.json
+++ b/src/data/llm-pricing.json
@@ -92,6 +92,12 @@
        "inputPrice": 4,
        "outputPrice": 12
      },
+      {
+        "name": "Doubao-1.5-thinking-pro",
+        "logo": "/assets/icon/doubao.png",
+        "inputPrice": 4,
+        "outputPrice": 16
+      },
      {
        "name": "deepseek-R1",
        "logo": "/assets/icon/deepseek_small.jpg",

--- a/src/data/model-ranking-code.json
+++ b/src/data/model-ranking-code.json
@@ -3,23 +3,18 @@
  "subtitle": "数据来源：lmarena.ai",
  "providers": [
    {
-      "name": "Llama-4-Maverick-03-26-Experimental",
-      "score": 1428,
-      "logo": "/assets/icon/meta.svg"
+      "name": "Gemini-2.5-Pro-Exp-03-25",
+      "score": 1433,
+      "logo": "/assets/icon/google_small.svg"
    },
    {
      "name": "ChatGPT-4o-latest (2025-03-26)",
-      "score": 1425,
+      "score": 1410,
      "logo": "/assets/icon/openai_small.svg"
    },
-    {
-      "name": "Gemini-2.5-Pro-Exp-03-25",
-      "score": 1423,
-      "logo": "/assets/icon/google_small.svg"
-    },
    {
      "name": "Grok-3-Preview-02-24",
-      "score": 1410,
+      "score": 1408,
      "logo": "/assets/icon/grok.svg"
    },
    {
@@ -27,6 +22,11 @@
      "score": 1405,
      "logo": "/assets/icon/openai_small.svg"
    },
+    {
+      "name": "Gemini-2.5-Flash-Preview-04-17",
+      "score": 1399,
+      "logo": "/assets/icon/google_small.svg"
+    },
    {
      "name": "Gemini-2.0-Pro-Exp-02-05",
      "score": 1379,

--- a/src/data/model-ranking-math.json
+++ b/src/data/model-ranking-math.json
@@ -4,18 +4,18 @@
  "providers": [
    {
      "name": "Gemini-2.5-Pro-Exp-03-25",
-      "score": 1415,
+      "score": 1421,
      "logo": "/assets/icon/google_small.svg"
    },
    {
      "name": "GPT-4.5-Preview",
-      "score": 1377,
+      "score": 1375,
      "logo": "/assets/icon/openai_small.svg"
    },
    {
-      "name": "Llama-4-Maverick-03-26-Experimental",
+      "name": "Gemini-2.5-Flash-Preview-04-17",
      "score": 1364,
-      "logo": "/assets/icon/meta_small.svg"
+      "logo": "/assets/icon/google_small.svg"
    },
    {
      "name": "DeepSeek-R1",

--- a/src/data/model-ranking-vision.json
+++ b/src/data/model-ranking-vision.json
+{
+    "title": "国内外各模型能力对比 - 视觉",
+    "subtitle": "数据来源：lmarena.ai",
+    "providers": [
+      {
+        "name": "Gemini-2.5-Pro-Exp-03-25",
+        "score": 1320,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "ChatGPT-4o-latest (2025-03-26)",
+        "score": 1309,
+        "logo": "/assets/icon/openai_small.svg"
+      },
+      {
+        "name": "Gemini-2.5-Flash-Preview-04-17",
+        "score": 1287,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "Gemini-2.5-Flash-Thinking-Exp-01-21",
+        "score": 1279,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "GPT-4.5-Preview",
+        "score": 1254,
+        "logo": "/assets/icon/openai_small.svg"
+      },
+      {
+        "name": "Gemini-2.0-Pro-Exp-02-05",
+        "score": 1240,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "Gemini-2.0-Flash-001",
+        "score": 1229,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "o1-2024-12-17",
+        "score": 1226,
+        "logo": "/assets/icon/openai_small.svg"
+      },
+      {
+        "name": "Gemini-1.5-Pro-002",
+        "score": 1222,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "Qwen2.5-VL-32B-Instruct",
+        "score": 1216,
+        "logo": "/assets/icon/ali_small.svg"
+      },
+      {
+        "name": "Claude-3.7-Sonnet",
+        "score": 1211,
+        "logo": "/assets/icon/anthropic_small.svg"
+      },
+      {
+        "name": "GPT-4o-2025-0513",
+        "score": 1206,
+        "logo": "/assets/icon/openai_small.svg"
+      },
+      {
+        "name": "Gemini-1.5-Flash-002",
+        "score": 1206,
+        "logo": "/assets/icon/google_small.svg"
+      },
+      {
+        "name": "Claude-3.7-Sonnet-(20240620)",
+        "score": 1189,
+        "logo": "/assets/icon/anthropic_small.svg"
+      }
+    ]
+  } 
\ No newline at end of file
--- a/src/data/model-ranking-web.json
+++ b/src/data/model-ranking-web.json
@@ -4,9 +4,14 @@
  "providers": [
    {
      "name": "Claude-3.7-Sonnet-(20240219)",
-      "score": 1351,
+      "score": 1356,
      "logo": "/assets/icon/anthropic_small.svg"
    },
+    {
+      "name": "GPT-4.1-2025-0414",
+      "score": 1283,
+      "logo": "/assets/icon/openai_small.svg"
+    },
    {
      "name": "Gemini-2.5-Pro-Exp-03-25",
      "score": 1267,

--- a/src/data/model-ranking-writing.json
+++ b/src/data/model-ranking-writing.json
@@ -4,32 +4,32 @@
  "providers": [
    {
      "name": "Gemini-2.5-Pro-Exp-03-25",
-      "score": 1458,
+      "score": 1449,
      "logo": "/assets/icon/google_small.svg"
    },
    {
-      "name": "Llama-4-Maverick-03-26-Experimental",
-      "score": 1442,
-      "logo": "/assets/icon/meta.svg"
-    },
-    {
-      "name": "Grok-3-Preview-02-24t",
-      "score": 1408,
+      "name": "Grok-3-Preview-02-24",
+      "score": 1409,
      "logo": "/assets/icon/grok.svg"
    },
    {
      "name": "ChatGPT-4o-latest (2025-03-26)",
-      "score": 1407,
+      "score": 1405,
      "logo": "/assets/icon/openai_small.svg"
    },
    {
      "name": "Gemini-2.0-Pro-Exp-02-05",
-      "score": 1390,
+      "score": 1391,
+      "logo": "/assets/icon/google_small.svg"
+    },
+    {
+      "name": "Gemini-2.5-Flash-Preview-04-17",
+      "score": 1391,
      "logo": "/assets/icon/google_small.svg"
    },
    {
      "name": "GPT-4.5-Preview",
-      "score": 1390,
+      "score": 1389,
      "logo": "/assets/icon/openai_small.svg"
    },
    {

--- a/src/data/model-ranking.json
+++ b/src/data/model-ranking.json
@@ -7,19 +7,14 @@
      "score": 1439,
      "logo": "/assets/icon/google_small.svg"
    },
-    {
-      "name": "Llama-4-Maverick-03-26-Experimental",
-      "score": 1417,
-      "logo": "/assets/icon/meta.svg"
-    },
    {
      "name": "ChatGPT-4o-latest（2025-03-26）",
-      "score": 1410,
+      "score": 1407,
      "logo": "/assets/icon/openai_small.svg"
    },
    {
      "name": "Grok-3-Preview-02-24",
-      "score": 1403,
+      "score": 1402,
      "logo": "/assets/icon/grok.svg"
    },
    {
@@ -27,6 +22,11 @@
      "score": 1398,
      "logo": "/assets/icon/openai_small.svg"
    },
+    {
+      "name": "Gemini-2.0-Flash-Preview-04-17",
+      "score": 1392,
+      "logo": "/assets/icon/google_small.svg"
+    },
    {
      "name": "Gemini-2.0-Flash-Thinking-Exp-01-21",
      "score": 1380,
@@ -37,6 +37,11 @@
      "score": 1380,
      "logo": "/assets/icon/google_small.svg"
    },
+    {
+      "name": "DeepSeek-V3-0324",
+      "score": 1372,
+      "logo": "/assets/icon/deepseek_small.jpg"
+    },
    {
      "name": "DeepSeek-R1",
      "score": 1358,
@@ -67,11 +72,6 @@
      "score": 1329,
      "logo": "/assets/icon/openai_small.svg"
    },
-    {
-      "name": "DeepSeek-V3",
-      "score": 1318,
-      "logo": "/assets/icon/deepseek_small.jpg"
-    },
    {
      "name": "GLM-4-Plus",
      "score": 1311,

--- a/src/data/vision-model-pricing.json
+++ b/src/data/vision-model-pricing.json
@@ -68,6 +68,12 @@
        "inputPrice": 8,
        "outputPrice": 8
      },
+      {
+        "name": "Doubao-1.5-thinking-pro",
+        "logo": "/assets/icon/doubao.png",
+        "inputPrice": 4,
+        "outputPrice": 16
+      },
      {
        "name": "GLM-4V-Plus",
        "logo": "/assets/icon/glm_small.svg",

--- a/src/js/lunarCalendar.js
+++ b/src/js/lunarCalendar.js
+// 天干
+const celestialStems = ["甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"];
+// 地支
+const earthlyBranches = ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"];
+// 生肖
+const zodiacAnimals = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"];
+// 农历月份
+const lunarMonths = ["正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "冬", "腊"];
+// 农历日期
+const lunarDays = [
+  "初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",
+  "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
+  "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十"
+];
+
+// 导入chinese-lunar库进行农历转换
+import chineseLunar from 'chinese-lunar';
+
+/**
+ * 获取农历日期信息
+ * @param {Date} date - 公历日期
+ * @param {Object} config - 配置信息 (用于兼容原代码，但不再使用)
+ * @returns {Object} 包含农历年、生肖、月、日的对象
+ */
+function getLunarDate(date, config) {
+  // 使用chinese-lunar库进行日期转换
+  const lunarDate = chineseLunar.solarToLunar(date);
+  
+  // 获取年、月、日
+  const lunarYear = lunarDate.year;
+  const lunarMonth = lunarDate.month; // 1-12
+  const lunarDay = lunarDate.day; // 1-30
+  
+  // 计算天干地支年
+  const stemIndex = (lunarYear - 4) % 10;
+  const branchIndex = (lunarYear - 4) % 12;
+  const stem = celestialStems[stemIndex >= 0 ? stemIndex : stemIndex + 10];
+  const branch = earthlyBranches[branchIndex >= 0 ? branchIndex : branchIndex + 12];
+  
+  // 计算生肖
+  const zodiacIndex = (lunarYear - 4) % 12;
+  const zodiac = zodiacAnimals[zodiacIndex >= 0 ? zodiacIndex : zodiacIndex + 12];
+  
+  // 获取农历月份和日期的中文表示
+  const monthName = lunarMonths[lunarMonth - 1]; // 月份从1开始，数组从0开始
+  const dayName = lunarDays[lunarDay - 1]; // 日期从1开始，数组从0开始
+  
+  return {
+    year: `${stem}${branch}年`,
+    animal: zodiac,
+    month: monthName,
+    day: dayName,
+    isLeapMonth: lunarDate.isLeap || false
+  };
+}
+
+export {
+  getLunarDate
+}; 
\ No newline at end of file
--- a/src/locales/en/tools.json
+++ b/src/locales/en/tools.json
@@ -279,5 +279,9 @@
        "CULTURE": "Culture",
        "OPEN_SOURCE": "Open Source"
      }
+    },
+    "perpetualCalendar": {
+      "title": "Perpetual Calendar",
+      "description": "View any month of any year with this perpetual calendar"
    }
 }
--- a/src/locales/zh/tools.json
+++ b/src/locales/zh/tools.json
@@ -281,5 +281,9 @@
        "CULTURE": "文化",
        "OPEN_SOURCE": "开源"
      } 
+    },
+    "perpetualCalendar": {
+      "title": "万年历",
+      "description": "查看任意年份任意月份的日历"
    }
 }
--- a/src/pages/DevTools.jsx
+++ b/src/pages/DevTools.jsx
@@ -9,6 +9,7 @@ const tools = [
  { id: 'imageBase64Converter', icon: '/assets/icon/image-base64.png', path: '/image-base64' },
  { id: 'textDiff', icon: '/assets/icon/diff.png', path: '/text-diff' },
  { id: 'wechatFormatter', icon: '/assets/icon/editor.png', path: '/wechat-formatter' },
+  { id: 'perpetualCalendar', icon: '/assets/icon/calendar.jpg', path: '/perpetual-calendar' },
 ];

 const DevTools = () => {

--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -8,7 +8,8 @@ const tools = [
  { id: 'quoteCard', icon: '/assets/icon/quotecard.png', path: '/quote-card' },
  { id: 'markdown2image', icon: '/assets/icon/markdown2image.png', path: '/markdown-to-image' },
  { id: 'wechatFormatter', icon: '/assets/icon/editor.png', path: '/wechat-formatter' },
-  { id: 'imageAnnotator', icon: '/assets/icon/image-annotator.png', path: '/image-annotator' },
+  { id: 'perpetualCalendar', icon: '/assets/icon/calendar.png', path: '/perpetual-calendar' },
+  { id: 'imageAnnotator', icon: '/assets/icon/image-annotator.jpg', path: '/image-annotator' },
  { id: 'subtitleGenerator', icon: '/assets/icon/subtitle2image.png', path: '/subtitle-to-image' },
  { id: 'imageCompressor', icon: '/assets/icon/image-compressor.png', path: '/image-compressor' },
  { id: 'imageWatermark', icon: '/assets/icon/image-watermark.png', path: '/image-watermark' },
@@ -152,7 +153,7 @@ const Home = () => {
        </div>
      </main>

-      <style jsx global>{`
+      <style>{`
        .bg-grid-pattern {
          background-image: radial-gradient(circle at 1px 1px, rgb(226 232 240 / 30%) 1px, transparent 0);
          background-size: 24px 24px;

--- a/test-april-18.js
+++ b/test-april-18.js
+// 直接测试4月18日的农历日期
+
+// 直接定义配置数据
+const calendarConfig = {
+  lunarDateMap: {
+    "2024": {
+      "0418": { "lunarMonth": "三", "lunarDay": "廿一" }
+    }
+  }
+};
+
+// 模拟getLunarDate函数的核心逻辑
+function testLunarDate() {
+  // 模拟4月18日的日期
+  const year = 2024;
+  const month = 4;
+  const day = 18;
+  
+  // 格式化月日为 MMDD 格式
+  const mmdd = `${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}`;
+  
+  console.log(`测试日期: ${year}年${month}月${day}日, MMDD格式: ${mmdd}`);
+  
+  // 从配置获取农历数据
+  let lunarData = null;
+  if (calendarConfig && calendarConfig.lunarDateMap && 
+      calendarConfig.lunarDateMap[year] && 
+      calendarConfig.lunarDateMap[year][mmdd]) {
+    lunarData = calendarConfig.lunarDateMap[year][mmdd];
+  }
+  
+  console.log("获取到的农历数据:", lunarData);
+  
+  if (lunarData) {
+    // 使用配置中的农历数据
+    const lunarMonth = lunarData.lunarMonth;
+    const lunarDay = lunarData.lunarDay;
+    
+    console.log(`农历月份: ${lunarMonth}月`);
+    console.log(`农历日期: ${lunarDay}`);
+    console.log(`完整农历日期: ${lunarMonth}月${lunarDay}`);
+    
+    // 检查是否为预期的三月廿一
+    const isMatch = lunarMonth === "三" && lunarDay === "廿一";
+    console.log(`是否符合预期的"三月廿一": ${isMatch ? "✓ 是" : "✗ 否"}`);
+  } else {
+    console.log("未找到农历数据");
+  }
+}
+
+// 执行测试
+testLunarDate(); 
\ No newline at end of file
--- a/test-original-config.cjs
+++ b/test-original-config.cjs
+// 测试原始配置文件中4月18日的农历日期
+const fs = require('fs');
+const path = require('path');
+
+// 读取原始配置文件
+try {
+  // 读取配置文件
+  const configPath = path.join(__dirname, 'src', 'data', 'calendar-config.json');
+  const configData = fs.readFileSync(configPath, 'utf8');
+  const calendarConfig = JSON.parse(configData);
+  
+  console.log('成功读取配置文件');
+  
+  // 检查4月18日的配置
+  const year = 2024;
+  const mmdd = '0418';
+  
+  console.log(`检查 ${year}年${mmdd.slice(0, 2)}月${mmdd.slice(2)}日 的农历配置...`);
+  
+  if (calendarConfig && 
+      calendarConfig.lunarDateMap && 
+      calendarConfig.lunarDateMap[year] && 
+      calendarConfig.lunarDateMap[year][mmdd]) {
+    
+    const lunarData = calendarConfig.lunarDateMap[year][mmdd];
+    console.log('找到农历数据:', lunarData);
+    
+    // 检查是否为预期的三月廿一
+    const lunarMonth = lunarData.lunarMonth;
+    const lunarDay = lunarData.lunarDay;
+    
+    console.log(`农历月份: ${lunarMonth}`);
+    console.log(`农历日期: ${lunarDay}`);
+    console.log(`完整农历日期: ${lunarMonth}月${lunarDay}`);
+    
+    const isMatch = lunarMonth === "三" && lunarDay === "廿一";
+    console.log(`是否符合预期的"三月廿一": ${isMatch ? "✓ 是" : "✗ 否"}`);
+    
+    // 如果不匹配，提示修正方法
+    if (!isMatch) {
+      console.log('\n需要修改配置文件:');
+      console.log(`当前值: "lunarMonth": "${lunarMonth}", "lunarDay": "${lunarDay}"`);
+      console.log(`应改为: "lunarMonth": "三", "lunarDay": "廿一"`);
+    } else {
+      console.log('\n配置已正确，无需修改。');
+    }
+  } else {
+    console.log('未找到对应的农历数据配置');
+  }
+} catch (error) {
+  console.error('读取配置文件出错:', error);
+} 
\ No newline at end of file
--- a/test-original-config.js
+++ b/test-original-config.js
+// 测试原始配置文件中4月18日的农历日期
+const fs = require('fs');
+const path = require('path');
+
+// 读取原始配置文件
+try {
+  // 读取配置文件
+  const configPath = path.join(__dirname, 'src', 'data', 'calendar-config.json');
+  const configData = fs.readFileSync(configPath, 'utf8');
+  const calendarConfig = JSON.parse(configData);
+  
+  console.log('成功读取配置文件');
+  
+  // 检查4月18日的配置
+  const year = 2024;
+  const mmdd = '0418';
+  
+  console.log(`检查 ${year}年${mmdd.slice(0, 2)}月${mmdd.slice(2)}日 的农历配置...`);
+  
+  if (calendarConfig && 
+      calendarConfig.lunarDateMap && 
+      calendarConfig.lunarDateMap[year] && 
+      calendarConfig.lunarDateMap[year][mmdd]) {
+    
+    const lunarData = calendarConfig.lunarDateMap[year][mmdd];
+    console.log('找到农历数据:', lunarData);
+    
+    // 检查是否为预期的三月廿一
+    const lunarMonth = lunarData.lunarMonth;
+    const lunarDay = lunarData.lunarDay;
+    
+    console.log(`农历月份: ${lunarMonth}`);
+    console.log(`农历日期: ${lunarDay}`);
+    console.log(`完整农历日期: ${lunarMonth}月${lunarDay}`);
+    
+    const isMatch = lunarMonth === "三" && lunarDay === "廿一";
+    console.log(`是否符合预期的"三月廿一": ${isMatch ? "✓ 是" : "✗ 否"}`);
+    
+    // 如果不匹配，提示修正方法
+    if (!isMatch) {
+      console.log('\n需要修改配置文件:');
+      console.log(`当前值: "lunarMonth": "${lunarMonth}", "lunarDay": "${lunarDay}"`);
+      console.log(`应改为: "lunarMonth": "三", "lunarDay": "廿一"`);
+    } else {
+      console.log('\n配置已正确，无需修改。');
+    }
+  } else {
+    console.log('未找到对应的农历数据配置');
+  }
+} catch (error) {
+  console.error('读取配置文件出错:', error);
+} 
\ No newline at end of file