接入自建后端 + Gitea CI/CD

- 新增 server/：Node + Express + SQLite + node-cron 实现登录、纪念日 CRUD 和定时订阅消息推送
- 新增 .gitea/workflows/deploy.yml：推送即触发群晖 Docker 部署，监听 15002
- utils/api.js：自动按 envVersion 切换本地/线上 BASE_URL
- app.js 与 add-anniversary.js 移除 wx.cloud 调用，改走自建后端
- cloudfunctions/ 暂保留以便回滚
- 一并提交此前未入库的首页 / 设置页 / 日历 / 万年历等改造

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

pages/index/index.js

@@ -1,13 +1,17 @@
 // index.js
 const storage = require('../../utils/storage')
 const dateUtils = require('../../utils/date')
+const { TYPE_NAMES } = require('../../utils/constants')
 
 Page({
   data: {
     persons: [],
-    originalPersons: [], // 原始数据备份
+    originalPersons: [],
     searchKeyword: '',
-    currentFilter: 'all'
+    currentFilter: 'all',
+    totalCount: 0,
+    upcomingCount: 0,
+    todayText: ''
   },
 
   onLoad() {
@@ -15,7 +19,6 @@ Page({
   },
 
   onShow() {
-    // 每次显示页面时刷新数据
     this.loadPersons()
   },
 
@@ -25,32 +28,24 @@ Page({
   loadPersons() {
     const persons = storage.getPersons()
     const anniversaries = storage.getAnniversaries()
-    
-    // 为每个人员添加纪念日信息
+
     const personsWithAnniversaries = persons.map(person => {
       const personAnniversaries = anniversaries.filter(a => a.personId === person.id)
-      
-      // 找到最近的纪念日
+
       let nextAnniversary = null
       if (personAnniversaries.length > 0) {
-        const today = new Date()
         const upcoming = personAnniversaries
           .map(a => {
-            // 如果是农历，需要特殊处理
-            const date = new Date(a.solarYear, a.solarMonth - 1, a.solarDay)
-            return {
-              ...a,
-              date,
-              daysUntil: dateUtils.getDaysUntil(date)
-            }
+            const { date, daysUntil } = dateUtils.getNextOccurrence(a.solarMonth, a.solarDay)
+            return { ...a, date, daysUntil }
           })
-          .filter(a => a.daysUntil >= 0)
           .sort((a, b) => a.daysUntil - b.daysUntil)
-        
+
         if (upcoming.length > 0) {
           const next = upcoming[0]
           nextAnniversary = {
             type: next.type,
+            typeName: this.getTypeName(next.type, next.customTypeName),
             dateText: dateUtils.formatDate(next.date, 'MM月DD日'),
             daysUntil: next.daysUntil,
             daysUntilText: this.formatDaysUntil(next.daysUntil)
@@ -58,14 +53,9 @@ Page({
         }
       }
 
-      return {
-        ...person,
-        anniversaryCount: personAnniversaries.length,
-        nextAnniversary
-      }
+      return { ...person, anniversaryCount: personAnniversaries.length, nextAnniversary }
     })
 
-    // 按最近的纪念日排序
     const sorted = personsWithAnniversaries.sort((a, b) => {
       if (!a.nextAnniversary && !b.nextAnniversary) return 0
       if (!a.nextAnniversary) return 1
@@ -73,10 +63,18 @@ Page({
       return a.nextAnniversary.daysUntil - b.nextAnniversary.daysUntil
     })
 
-    this.setData({
-      persons: sorted,
-      originalPersons: sorted
-    })
+    const today = new Date()
+    const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+    const todayText = `${today.getMonth() + 1}月${today.getDate()}日 周${weekdays[today.getDay()]}`
+    const upcomingCount = sorted.filter(p => p.nextAnniversary && p.nextAnniversary.daysUntil <= 7).length
+
+    this.setData({ originalPersons: sorted, totalCount: sorted.length, upcomingCount, todayText })
+
+    if (this.data.currentFilter === 'all' && !this.data.searchKeyword) {
+      this.setData({ persons: sorted })
+    } else {
+      this.filterPersons()
+    }
   },
 
   /**
@@ -90,6 +88,14 @@ Page({
     return `还有${Math.floor(days / 30)}个月`
   },
 
+  /**
+   * 获取类型名称
+   */
+  getTypeName(type, customName) {
+    if (type === 'other' && customName) return customName
+    return TYPE_NAMES[type] || '纪念日'
+  },
+
   /**
    * 搜索输入
    */
@@ -104,8 +110,9 @@ Page({
    */
   onFilterTap(e) {
     const filter = e.currentTarget.dataset.filter
-    this.setData({ currentFilter: filter })
-    this.filterPersons()
+    this.setData({ currentFilter: filter }, () => {
+      this.filterPersons()
+    })
   },
 
   /**
@@ -113,6 +120,7 @@ Page({
    */
   filterPersons() {
     const { originalPersons, searchKeyword, currentFilter } = this.data
+    const anniversaries = storage.getAnniversaries()
     
     let filtered = [...originalPersons]
 
@@ -124,12 +132,39 @@ Page({
       )
     }
 
-    // 类型筛选（暂时保留，后续可以实现更精确的筛选）
-    // if (currentFilter !== 'all') {
-    //   // 可以实现更精确的筛选逻辑
-    // }
+    // 类型筛选
+    if (currentFilter !== 'all') {
+      filtered = filtered.filter(person => {
+        const personAnniversaries = anniversaries.filter(a => a.personId === person.id)
+        
+        if (currentFilter === 'birthday') {
+          // 生日筛选：只显示有生日类型的人（公历生日或农历生日）
+          return personAnniversaries.some(a => 
+            a.type === 'birthday' || a.type === 'lunar_birthday'
+          )
+        } else if (currentFilter === 'anniversary') {
+          // 纪念日筛选：只显示有纪念日类型的人（结婚、订婚、其他）
+          return personAnniversaries.some(a => 
+            a.type === 'wedding' || a.type === 'engagement' || a.type === 'other'
+          )
+        } else if (currentFilter === 'upcoming') {
+          // 即将到来：只显示7天内有纪念日的人
+          return person.nextAnniversary && person.nextAnniversary.daysUntil <= 7
+        }
+        
+        return true
+      })
+    }
 
-    this.setData({ persons: filtered })
+    // 排序：与 loadPersons() 保持一致，按最近的纪念日排序
+    const sorted = filtered.sort((a, b) => {
+      if (!a.nextAnniversary && !b.nextAnniversary) return 0
+      if (!a.nextAnniversary) return 1
+      if (!b.nextAnniversary) return -1
+      return a.nextAnniversary.daysUntil - b.nextAnniversary.daysUntil
+    })
+
+    this.setData({ persons: sorted })
   },
 
   /**

pages/index/index.wxml

@@ -1,56 +1,112 @@
 <!--index.wxml-->
-<view class="container">
+<view class="page">
+
+  <!-- 顶部 Header -->
+  <view class="header">
+    <view class="header-top">
+      <view class="header-left">
+        <text class="header-title">生日提醒</text>
+        <text class="header-date">{{todayText}}</text>
+      </view>
+      <view class="header-icon">🎂</view>
+    </view>
+    <view class="stats-row">
+      <view class="stat-item">
+        <text class="stat-num">{{totalCount}}</text>
+        <text class="stat-label">位好友</text>
+      </view>
+      <view class="stat-sep"></view>
+      <view class="stat-item">
+        <text class="stat-num {{upcomingCount > 0 ? 'stat-num-urgent' : ''}}">{{upcomingCount}}</text>
+        <text class="stat-label">即将到来</text>
+      </view>
+    </view>
+  </view>
+
   <!-- 搜索栏 -->
-  <view class="search-bar">
-    <input class="search-input" placeholder="搜索姓名" value="{{searchKeyword}}" bindinput="onSearchInput" />
+  <view class="search-wrap">
+    <view class="search-box">
+      <text class="search-icon">🔍</text>
+      <input
+        class="search-input"
+        placeholder="搜索姓名或昵称"
+        placeholder-class="search-placeholder"
+        value="{{searchKeyword}}"
+        bindinput="onSearchInput"
+      />
+    </view>
   </view>
 
   <!-- 筛选栏 -->
-  <view class="filter-bar">
-    <text class="filter-label">筛选：</text>
-    <scroll-view class="filter-scroll" scroll-x>
-      <view class="filter-item {{currentFilter === 'all' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="all">全部</view>
-      <view class="filter-item {{currentFilter === 'birthday' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="birthday">生日</view>
-      <view class="filter-item {{currentFilter === 'anniversary' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="anniversary">纪念日</view>
-      <view class="filter-item {{currentFilter === 'upcoming' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="upcoming">即将到来</view>
-    </scroll-view>
-  </view>
+  <scroll-view class="filter-scroll" scroll-x enable-flex>
+    <view class="filter-bar">
+      <view class="filter-tab {{currentFilter === 'all' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="all">全部</view>
+      <view class="filter-tab {{currentFilter === 'birthday' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="birthday">🎂 生日</view>
+      <view class="filter-tab {{currentFilter === 'anniversary' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="anniversary">💍 纪念日</view>
+      <view class="filter-tab {{currentFilter === 'upcoming' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="upcoming">⏰ 即将到来</view>
+    </view>
+  </scroll-view>
 
   <!-- 人员列表 -->
-  <scroll-view class="person-list" scroll-y>
-    <view wx:if="{{persons.length === 0}}" class="empty-state">
-      <text class="icon">📅</text>
-      <text class="text">还没有添加任何人</text>
-      <text class="hint">点击右下角 + 添加第一个</text>
+  <scroll-view class="list" scroll-y>
+
+    <!-- 空状态 -->
+    <view wx:if="{{persons.length === 0}}" class="empty">
+      <text class="empty-icon">🌟</text>
+      <text class="empty-title">还没有添加任何人</text>
+      <text class="empty-hint">点击右下角 + 开始添加</text>
     </view>
 
-    <view wx:for="{{persons}}" wx:key="id" class="person-card" bindtap="onPersonTap" data-id="{{item.id}}">
-      <view class="person-header">
-        <image class="avatar" src="{{item.avatar || '/images/default-avatar.png'}}" mode="aspectFill" />
-        <view class="person-info">
-          <text class="person-name">{{item.name}}</text>
-          <text wx:if="{{item.nickname}}" class="person-nickname">{{item.nickname}}</text>
-        </view>
-        <view class="person-count">
-          <text wx:if="{{item.anniversaryCount}}" class="count-text">{{item.anniversaryCount}}</text>
-          <text class="count-label">个纪念日</text>
+    <!-- 人员卡片 -->
+    <view
+      wx:for="{{persons}}"
+      wx:key="id"
+      class="card {{item.nextAnniversary && item.nextAnniversary.daysUntil === 0 ? 'card-today' : item.nextAnniversary && item.nextAnniversary.daysUntil <= 7 ? 'card-urgent' : ''}}"
+      bindtap="onPersonTap"
+      data-id="{{item.id}}"
+    >
+      <!-- 左侧头像 -->
+      <view class="avatar-wrap">
+        <image wx:if="{{item.avatar}}" class="avatar-img" src="{{item.avatar}}" mode="aspectFill" />
+        <view wx:else class="avatar-placeholder">
+          <text class="avatar-initial">{{item.name[0]}}</text>
         </view>
       </view>
-      
-      <!-- 最近的纪念日 -->
-      <view wx:if="{{item.nextAnniversary}}" class="next-anniversary">
-        <text class="next-label">📌 </text>
-        <text class="next-text">{{item.nextAnniversary.type}}: {{item.nextAnniversary.dateText}}</text>
-        <text wx:if="{{item.nextAnniversary.daysUntil}}" class="days-text {{item.nextAnniversary.daysUntil <= 7 ? 'urgent' : ''}}">
-          {{item.nextAnniversary.daysUntilText}}
-        </text>
+
+      <!-- 右侧内容 -->
+      <view class="card-body">
+        <view class="card-row-top">
+          <view class="name-group">
+            <text class="card-name">{{item.name}}</text>
+            <text wx:if="{{item.nickname}}" class="card-nickname">{{item.nickname}}</text>
+          </view>
+          <view
+            wx:if="{{item.nextAnniversary}}"
+            class="badge {{item.nextAnniversary.daysUntil === 0 ? 'badge-today' : item.nextAnniversary.daysUntil <= 3 ? 'badge-hot' : item.nextAnniversary.daysUntil <= 7 ? 'badge-soon' : item.nextAnniversary.daysUntil <= 30 ? 'badge-month' : 'badge-normal'}}"
+          >
+            <text class="badge-text">{{item.nextAnniversary.daysUntilText}}</text>
+          </view>
+        </view>
+
+        <view wx:if="{{item.nextAnniversary}}" class="card-row-ann">
+          <text class="ann-icon">
+            {{item.nextAnniversary.type === 'birthday' || item.nextAnniversary.type === 'lunar_birthday' ? '🎂' : item.nextAnniversary.type === 'wedding' ? '💍' : item.nextAnniversary.type === 'engagement' ? '💕' : '📅'}}
+          </text>
+          <text class="ann-info">{{item.nextAnniversary.typeName}} · {{item.nextAnniversary.dateText}}</text>
+          <text wx:if="{{item.anniversaryCount > 1}}" class="ann-more">+{{item.anniversaryCount - 1}}</text>
+        </view>
+        <view wx:else class="card-row-ann no-ann">
+          <text class="ann-info muted">暂无纪念日</text>
+        </view>
       </view>
     </view>
+
+    <view class="list-bottom"></view>
   </scroll-view>
 
   <!-- 浮动添加按钮 -->
   <view class="fab" bindtap="onAddTap">
-    <text>+</text>
+    <text class="fab-icon">+</text>
   </view>
-</view>
 
+</view>

pages/index/index.wxss

@@ -1,193 +1,410 @@
-/**index.wxss**/
-.container {
-  min-height: 100vh;
-  background-color: #f5f5f5;
+/* index.wxss */
+
+page {
+  background: #f1f4f9;
 }
 
-/* 搜索栏 */
-.search-bar {
-  padding: 24rpx;
-  background-color: #fff;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.search-input {
-  background-color: #f5f5f5;
-  border-radius: 40rpx;
-  padding: 24rpx 32rpx;
-  font-size: 28rpx;
-}
-
-/* 筛选栏 */
-.filter-bar {
+.page {
   display: flex;
-  align-items: center;
-  padding: 20rpx 24rpx;
-  background-color: #fff;
-  border-bottom: 1px solid #f0f0f0;
+  flex-direction: column;
+  height: 100vh;
+  background: #f1f4f9;
 }
 
-.filter-label {
-  font-size: 26rpx;
-  color: #666;
-  margin-right: 16rpx;
-  white-space: nowrap;
+/* ───── Header ───── */
+.header {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  padding: 48rpx 36rpx 40rpx;
+  flex-shrink: 0;
 }
 
-.filter-scroll {
-  white-space: nowrap;
-}
-
-.filter-item {
-  display: inline-block;
-  padding: 12rpx 32rpx;
-  margin-right: 16rpx;
-  border-radius: 40rpx;
-  font-size: 26rpx;
-  background-color: #f5f5f5;
-  color: #666;
-}
-
-.filter-item.active {
-  background-color: #07c160;
-  color: #fff;
-}
-
-/* 人员列表 */
-.person-list {
-  height: calc(100vh - 200rpx);
-  padding: 24rpx;
-}
-
-.person-card {
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
-}
-
-.person-header {
+.header-top {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 32rpx;
 }
 
-.avatar {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
-  margin-right: 24rpx;
-  background-color: #f0f0f0;
-}
-
-.person-info {
-  flex: 1;
+.header-left {
   display: flex;
   flex-direction: column;
 }
 
-.person-name {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8rpx;
+.header-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.2;
+  letter-spacing: 2rpx;
 }
 
-.person-nickname {
-  font-size: 24rpx;
-  color: #999;
+.header-date {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 8rpx;
 }
 
-.person-count {
-  text-align: right;
+.header-icon {
+  font-size: 64rpx;
+  opacity: 0.9;
 }
 
-.count-text {
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #07c160;
-  display: block;
-}
-
-.count-label {
-  font-size: 22rpx;
-  color: #999;
-}
-
-/* 最近的纪念日 */
-.next-anniversary {
-  margin-top: 20rpx;
-  padding-top: 20rpx;
-  border-top: 1px solid #f0f0f0;
+.stats-row {
   display: flex;
   align-items: center;
-  font-size: 26rpx;
-  color: #666;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20rpx;
+  padding: 20rpx 32rpx;
+  backdrop-filter: blur(8rpx);
 }
 
-.next-label {
-  margin-right: 8rpx;
-}
-
-.next-text {
+.stat-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
   flex: 1;
+  justify-content: center;
 }
 
-.days-text {
-  color: #07c160;
-  font-weight: 500;
+.stat-num {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1;
 }
 
-.days-text.urgent {
-  color: #ff5722;
+.stat-num-urgent {
+  color: #fbbf24;
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.stat-sep {
+  width: 2rpx;
+  height: 48rpx;
+  background: rgba(255, 255, 255, 0.25);
+  flex-shrink: 0;
+}
+
+/* ───── Search ───── */
+.search-wrap {
+  padding: 24rpx 24rpx 12rpx;
+  flex-shrink: 0;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 48rpx;
+  padding: 20rpx 28rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
+}
+
+.search-icon {
+  font-size: 32rpx;
+  margin-right: 16rpx;
+  opacity: 0.6;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #1e293b;
+  line-height: 1.5;
+}
+
+.search-placeholder {
+  color: #94a3b8;
+}
+
+/* ───── Filter ───── */
+.filter-scroll {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.filter-bar {
+  display: flex;
+  padding: 16rpx 24rpx 20rpx;
+  gap: 16rpx;
+}
+
+.filter-tab {
+  display: inline-flex;
+  align-items: center;
+  padding: 14rpx 28rpx;
+  border-radius: 48rpx;
+  font-size: 26rpx;
+  color: #64748b;
+  background: #fff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.tab-active {
+  background: #6366f1;
+  color: #fff;
+  box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
+}
+
+/* ───── List ───── */
+.list {
+  flex: 1;
+  overflow: hidden;
+  padding: 0 24rpx;
+}
+
+/* ───── Card ───── */
+.card {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 28rpx 28rpx 28rpx 24rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+  border-left: 6rpx solid #e2e8f0;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.card:active {
+  transform: scale(0.985);
+  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+.card-urgent {
+  border-left-color: #f97316;
+}
+
+.card-today {
+  border-left-color: #ef4444;
+}
+
+/* ───── Avatar ───── */
+.avatar-wrap {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-initial {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #fff;
+}
+
+/* ───── Card body ───── */
+.card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-row-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+
+.name-group {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  min-width: 0;
+  flex: 1;
+  margin-right: 16rpx;
+}
+
+.card-name {
+  font-size: 32rpx;
   font-weight: 600;
+  color: #1e293b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* 空状态 */
-.empty-state {
-  padding: 160rpx 40rpx;
-  text-align: center;
+.card-nickname {
+  font-size: 22rpx;
+  color: #94a3b8;
+  background: #f1f5f9;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.empty-state .icon {
+/* ───── Badge ───── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6rpx 18rpx;
+  border-radius: 24rpx;
+  flex-shrink: 0;
+}
+
+.badge-text {
+  font-size: 22rpx;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.badge-today {
+  background: #fee2e2;
+}
+.badge-today .badge-text {
+  color: #ef4444;
+}
+
+.badge-hot {
+  background: #ffedd5;
+}
+.badge-hot .badge-text {
+  color: #f97316;
+}
+
+.badge-soon {
+  background: #fef9c3;
+}
+.badge-soon .badge-text {
+  color: #ca8a04;
+}
+
+.badge-month {
+  background: #ede9fe;
+}
+.badge-month .badge-text {
+  color: #7c3aed;
+}
+
+.badge-normal {
+  background: #f1f5f9;
+}
+.badge-normal .badge-text {
+  color: #64748b;
+}
+
+/* ───── Anniversary row ───── */
+.card-row-ann {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.ann-icon {
+  font-size: 26rpx;
+  flex-shrink: 0;
+}
+
+.ann-info {
+  font-size: 26rpx;
+  color: #475569;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muted {
+  color: #94a3b8;
+}
+
+.ann-more {
+  font-size: 22rpx;
+  color: #6366f1;
+  background: #ede9fe;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+  flex-shrink: 0;
+}
+
+/* ───── Empty state ───── */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 160rpx 40rpx 80rpx;
+}
+
+.empty-icon {
   font-size: 120rpx;
-  display: block;
   margin-bottom: 32rpx;
 }
 
-.empty-state .text {
-  font-size: 28rpx;
-  color: #999;
-  display: block;
+.empty-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #475569;
   margin-bottom: 16rpx;
 }
 
-.empty-state .hint {
-  font-size: 24rpx;
-  color: #bbb;
-  display: block;
+.empty-hint {
+  font-size: 26rpx;
+  color: #94a3b8;
+  background: #fff;
+  padding: 14rpx 32rpx;
+  border-radius: 40rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
 }
 
-/* 浮动按钮 */
+/* ───── List bottom padding ───── */
+.list-bottom {
+  height: 180rpx;
+}
+
+/* ───── FAB ───── */
 .fab {
   position: fixed;
   bottom: 120rpx;
   right: 40rpx;
-  width: 100rpx;
-  height: 100rpx;
+  width: 112rpx;
+  height: 112rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
-  color: #fff;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 60rpx;
-  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+  box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.5);
   z-index: 100;
-  transition: all 0.3s;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
 }
 
 .fab:active {
-  transform: scale(0.95);
+  transform: scale(0.9);
+  box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.4);
 }
 
+.fab-icon {
+  font-size: 64rpx;
+  color: #fff;
+  font-weight: 300;
+  line-height: 1;
+  margin-top: -4rpx;
+}