feat(整合): 优化更新日志显示，按日期分组并突出日期标题

- 实现按日期分组显示更新记录
- 将日期标题放在卡片上方，使用更大的字号（text-lg）
- 添加日期图标和分隔线，增强视觉层次
- 移除时间轴竖线，改用日期分组的扁平化布局
- 优化卡片间距和动画效果

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

src/components/ChangelogModal.tsx

@@ -46,7 +46,19 @@ function formatDate(date: string) {
   return `${year}年${month}月${day}日`
 }
 
+// 按日期分组
+function groupByDate(entries: typeof changelogEntries) {
+  const groups = new Map<string, typeof changelogEntries>()
+  entries.forEach((entry) => {
+    const existing = groups.get(entry.date) || []
+    groups.set(entry.date, [...existing, entry])
+  })
+  return Array.from(groups.entries()).sort((a, b) => b[0].localeCompare(a[0]))
+}
+
 export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
+  const groupedEntries = groupByDate(changelogEntries)
+
   return (
     <AnimatePresence>
       {isOpen && (
@@ -97,31 +109,30 @@ export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
                     variants={containerVariants}
                     initial="hidden"
                     animate="visible"
-                    className="relative max-w-4xl mx-auto"
+                    className="max-w-4xl mx-auto space-y-8"
                   >
-                    {/* 时间轴竖线 */}
+                    {/* 按日期分组显示 */}
-                    <div className="absolute left-[15px] top-8 bottom-8 w-[2px] bg-gray-200 dark:bg-gray-700" />
+                    {groupedEntries.map(([date, entries]) => (
+                      <div key={date} className="space-y-4">
+                        {/* 日期标题 */}
+                        <div className="flex items-center gap-3">
+                          <CalendarDays size={20} className="text-indigo-600 dark:text-indigo-400" />
+                          <h3 className="text-lg font-bold text-gray-900 dark:text-white">
+                            {formatDate(date)}
+                          </h3>
+                          <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
+                        </div>
 
-                    {/* 更新记录列表 */}
+                        {/* 该日期下的更新列表 */}
-                    <div className="space-y-6">
+                        <div className="space-y-3">
-                      {changelogEntries.map((entry, index) => {
+                          {entries.map((entry, index) => {
                             const meta = typeMeta[entry.type]
                             return (
                               <motion.div
                                 key={entry.id || `${entry.date}-${index}`}
                                 variants={itemVariants}
-                            className="relative flex gap-6"
+                                className="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors"
                               >
-                            {/* 时间轴节点 */}
-                            <div className="relative flex-shrink-0">
-                              <div className="w-8 h-8 rounded-full bg-white dark:bg-gray-800 border-2 border-indigo-500 dark:border-indigo-400 flex items-center justify-center z-10">
-                                <div className="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-400" />
-                              </div>
-                            </div>
-
-                            {/* 更新卡片 */}
-                            <div className="flex-1 pb-2">
-                              <div className="bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors">
                                 {/* 标签行 */}
                                 <div className="flex flex-wrap items-center gap-2 mb-2">
                                   {/* 类型标签 */}
@@ -136,24 +147,18 @@ export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
                                       {entry.scope}
                                     </span>
                                   )}
-
-                                  {/* 日期（桌面端靠右，移动端换行） */}
-                                  <span className="inline-flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 sm:ml-auto">
-                                    <CalendarDays size={12} />
-                                    {formatDate(entry.date)}
-                                  </span>
                                 </div>
 
                                 {/* 标题 */}
-                                <h3 className="text-sm font-medium text-gray-900 dark:text-white">
+                                <h4 className="text-sm font-medium text-gray-900 dark:text-white">
                                   {entry.title}
-                                </h3>
+                                </h4>
-                              </div>
-                            </div>
                               </motion.div>
                             )
                           })}
                         </div>
+                      </div>
+                    ))}
                   </motion.div>
                 ) : (
                   <div className="flex flex-col items-center justify-center py-16 text-gray-400 dark:text-gray-500">

src/data/changelog.json

@@ -1,5 +1,12 @@
 {
   "changelogEntries": [
+    {
+      "id": "2026-03-08-changelog-group-by-date",
+      "date": "2026-03-08",
+      "type": "feat",
+      "title": "优化更新日志显示，按日期分组并突出日期标题",
+      "scope": "整合"
+    },
     {
       "id": "2026-03-08-fix-modal-zindex-again",
       "date": "2026-03-08",