diff --git a/android-app/app/src/main/assets/web/scripts/yuanchi.js b/android-app/app/src/main/assets/web/scripts/yuanchi.js
index 20fed05d..722b5984 100644
--- a/android-app/app/src/main/assets/web/scripts/yuanchi.js
+++ b/android-app/app/src/main/assets/web/scripts/yuanchi.js
@@ -1,4 +1,5 @@
-// 缘池 - 赛博梦幻版
+// 缘池 - 可折叠底部面板版
+// 保留所有原有功能
 
 const AndroidBridge = {
   isAndroid: () => typeof Android !== 'undefined',
@@ -19,9 +20,9 @@ const AndroidBridge = {
   
   getMatchableCount: function() {
     if (this.isAndroid()) {
-      try { return Android.getMatchableCount(); } catch (e) { return '--'; }
+      try { return Android.getMatchableCount(); } catch (e) { return '20'; }
     }
-    return '--';
+    return '20';
   },
   
   getCategories: function() {
@@ -31,41 +32,73 @@ const AndroidBridge = {
     return [];
   },
   
+  // 点击用户头像 - 跳转到用户详情页
   onUserClick: function(userId, userName) {
-    if (this.isAndroid()) Android.onUserClick(userId, userName);
-    else console.log('点击用户:', userId, userName);
+    if (this.isAndroid()) {
+      Android.onUserClick(userId, userName);
+    } else {
+      console.log('点击用户:', userId, userName);
+    }
   },
   
+  // 点击板块 - 跳转到板块详情页
   onCategoryClick: function(categoryId, categoryName, jumpPage) {
-    if (this.isAndroid()) Android.onCategoryClick(categoryId, categoryName, jumpPage);
-    else console.log('点击板块:', categoryId, categoryName);
+    if (this.isAndroid()) {
+      Android.onCategoryClick(parseInt(categoryId), categoryName, jumpPage || '');
+    } else {
+      console.log('点击板块:', categoryId, categoryName, jumpPage);
+    }
   },
   
+  // 刷新数据
   onRefresh: function() {
-    if (this.isAndroid()) Android.onRefresh();
-    else console.log('刷新');
+    if (this.isAndroid()) {
+      Android.onRefresh();
+    } else {
+      console.log('刷新');
+    }
   },
   
+  // 语音匹配
   onVoiceMatch: function() {
-    if (this.isAndroid()) Android.onVoiceMatch();
-    else alert('语音匹配功能待接入～');
+    if (this.isAndroid()) {
+      Android.onVoiceMatch();
+    } else {
+      alert('语音匹配功能待接入～');
+    }
   },
   
+  // 心动信号
   onHeartSignal: function() {
-    if (this.isAndroid()) Android.onHeartSignal();
-    else alert('心动信号功能待接入～');
+    if (this.isAndroid()) {
+      Android.onHeartSignal();
+    } else {
+      alert('心动信号功能待接入～');
+    }
   },
   
   showToast: function(msg) {
-    if (this.isAndroid()) Android.showToast(msg);
-    else console.log('Toast:', msg);
+    if (this.isAndroid()) {
+      Android.showToast(msg);
+    } else {
+      console.log('Toast:', msg);
+    }
   }
 };
 
+// 缓存板块数据
+let cachedCategories = [];
+
+// 底部面板状态
+let sheetExpanded = false;
+let startY = 0;
+let isDragging = false;
+
 document.addEventListener('DOMContentLoaded', initPage);
 
 function initPage() {
   setupEventListeners();
+  setupBottomSheet();
   setTimeout(() => {
     loadUserInfo();
     loadMatchableCount();
@@ -75,58 +108,174 @@ function initPage() {
 }
 
 function setupEventListeners() {
-  // 刷新按钮
-  document.getElementById('refreshBtn').addEventListener('click', function() {
-    this.querySelector('.core-icon').style.animation = 'none';
-    this.offsetHeight;
-    this.querySelector('.core-icon').style.animation = 'spin 0.5s ease';
-    AndroidBridge.onRefresh();
-    loadMatchableCount();
-    loadNearbyUsers();
-  });
+  // 刷新按钮（中心按钮）- 调用原生刷新
+  const refreshBtn = document.getElementById('refreshBtn');
+  if (refreshBtn) {
+    refreshBtn.addEventListener('click', function() {
+      AndroidBridge.onRefresh();
+      loadMatchableCount();
+      loadNearbyUsers();
+    });
+  }
   
-  // 语音匹配
-  document.getElementById('voiceMatchBtn').addEventListener('click', () => AndroidBridge.onVoiceMatch());
+  // 语音匹配 - 调用原生功能
+  const voiceBtn = document.getElementById('voiceMatchBtn');
+  if (voiceBtn) {
+    voiceBtn.addEventListener('click', () => AndroidBridge.onVoiceMatch());
+  }
   
-  // 心动信号
-  document.getElementById('heartSignalBtn').addEventListener('click', () => AndroidBridge.onHeartSignal());
+  // 心动信号 - 调用原生功能
+  const heartBtn = document.getElementById('heartSignalBtn');
+  if (heartBtn) {
+    heartBtn.addEventListener('click', () => AndroidBridge.onHeartSignal());
+  }
   
-  // 用户头像点击
+  // 用户头像点击 - 跳转到用户详情页
   document.querySelectorAll('.orbit-user').forEach(user => {
     user.addEventListener('click', function() {
       const userId = this.dataset.userId || '';
       const userName = this.querySelector('.user-name').textContent || '用户';
-      if (userId) AndroidBridge.onUserClick(userId, userName);
+      if (userId) {
+        AndroidBridge.onUserClick(userId, userName);
+      }
     });
   });
   
-  // 功能卡片点击
-  document.querySelectorAll('.feature-card').forEach(card => {
+  // 底部面板卡片点击
+  setupCardListeners();
+}
+
+function setupCardListeners() {
+  // 快速匹配玩伴
+  document.querySelectorAll('.match-card').forEach(card => {
     card.addEventListener('click', function() {
-      const id = parseInt(this.dataset.id) || 0;
-      const name = this.querySelector('.card-title').textContent || '';
+      const categoryId = this.dataset.categoryId || '0';
+      const categoryName = this.dataset.categoryName || '';
       const jumpPage = this.dataset.jumpPage || '';
-      AndroidBridge.onCategoryClick(id, name, jumpPage);
+      AndroidBridge.onCategoryClick(categoryId, categoryName, jumpPage);
+    });
+  });
+  
+  // 派对卡片
+  document.querySelectorAll('.party-card').forEach(card => {
+    card.addEventListener('click', function() {
+      const categoryId = this.dataset.categoryId || '0';
+      const categoryName = this.dataset.categoryName || '';
+      const jumpPage = this.dataset.jumpPage || '';
+      AndroidBridge.onCategoryClick(categoryId, categoryName, jumpPage);
+    });
+  });
+  
+  // 小游戏
+  document.querySelectorAll('.game-item').forEach(item => {
+    item.addEventListener('click', function() {
+      const categoryId = this.dataset.categoryId || '0';
+      const categoryName = this.dataset.categoryName || '';
+      const jumpPage = this.dataset.jumpPage || '';
+      AndroidBridge.onCategoryClick(categoryId, categoryName, jumpPage);
+    });
+  });
+  
+  // 一起玩
+  document.querySelectorAll('.together-card').forEach(card => {
+    card.addEventListener('click', function() {
+      const categoryId = this.dataset.categoryId || '0';
+      const categoryName = this.dataset.categoryName || '';
+      const jumpPage = this.dataset.jumpPage || '';
+      AndroidBridge.onCategoryClick(categoryId, categoryName, jumpPage);
     });
   });
 }
 
-// 添加旋转动画
-const style = document.createElement('style');
-style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
-document.head.appendChild(style);
+// ========== 底部面板交互 ==========
+function setupBottomSheet() {
+  const sheet = document.getElementById('bottomSheet');
+  const handle = document.getElementById('sheetHandle');
+  const handleText = document.querySelector('.handle-text');
+  
+  if (!sheet || !handle) return;
+  
+  // 点击手柄或"上滑查看更多"切换展开/收起
+  handle.addEventListener('click', toggleSheet);
+  if (handleText) {
+    handleText.addEventListener('click', function(e) {
+      e.stopPropagation();
+      toggleSheet();
+    });
+  }
+  
+  // 点击"上滑查看更多"按钮
+  const expandBtn = document.getElementById('expandBtn');
+  if (expandBtn) {
+    expandBtn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      expandSheet();
+    });
+  }
+  
+  // 触摸拖动
+  sheet.addEventListener('touchstart', onTouchStart, { passive: true });
+  sheet.addEventListener('touchmove', onTouchMove, { passive: false });
+  sheet.addEventListener('touchend', onTouchEnd);
+}
 
+function toggleSheet() {
+  const sheet = document.getElementById('bottomSheet');
+  sheetExpanded = !sheetExpanded;
+  sheet.classList.toggle('expanded', sheetExpanded);
+}
+
+function expandSheet() {
+  const sheet = document.getElementById('bottomSheet');
+  sheetExpanded = true;
+  sheet.classList.add('expanded');
+}
+
+function collapseSheet() {
+  const sheet = document.getElementById('bottomSheet');
+  sheetExpanded = false;
+  sheet.classList.remove('expanded');
+}
+
+function onTouchStart(e) {
+  startY = e.touches[0].clientY;
+  isDragging = true;
+}
+
+function onTouchMove(e) {
+  if (!isDragging) return;
+  
+  const currentY = e.touches[0].clientY;
+  const deltaY = startY - currentY;
+  
+  // 上滑超过40px展开
+  if (deltaY > 40 && !sheetExpanded) {
+    expandSheet();
+    isDragging = false;
+  }
+  // 下滑超过40px收起
+  else if (deltaY < -40 && sheetExpanded) {
+    collapseSheet();
+    isDragging = false;
+  }
+}
+
+function onTouchEnd() {
+  isDragging = false;
+}
+
+// ========== 数据加载 ==========
 function loadUserInfo() {
   const info = AndroidBridge.getUserInfo();
-  if (info) {
-    if (info.name) document.getElementById('userName').textContent = info.name;
-    if (info.info) document.getElementById('userInfo').textContent = info.info;
+  if (info && info.name) {
+    console.log('用户信息:', info.name, info.info);
   }
 }
 
 function loadMatchableCount() {
   const count = AndroidBridge.getMatchableCount();
-  document.getElementById('matchCount').textContent = count;
+  const el = document.getElementById('matchCount');
+  if (el) el.textContent = '剩余匹配' + count + '人';
 }
 
 function loadNearbyUsers() {
@@ -137,12 +286,12 @@ function loadNearbyUsers() {
 function renderOrbitUsers(users) {
   const userEls = document.querySelectorAll('.orbit-user');
   const defaultUsers = [
-    { id: '1', name: '小树', location: '杭州' },
-    { id: '2', name: 'Lina', location: '深圳' },
-    { id: '3', name: '小七', location: '武汉' },
-    { id: '4', name: '小北', location: '西安' },
-    { id: '5', name: '暖暖', location: '成都' },
-    { id: '6', name: '阿宁', location: '南宁' }
+    { id: '1', name: '对你何止...', location: '美国 · 在线' },
+    { id: '2', name: 'cat', location: '保密 · 在线' },
+    { id: '3', name: '雾落溪漫', location: '桂林 · 在线' },
+    { id: '4', name: '313', location: '南宁 · 在线' },
+    { id: '5', name: 'ZwaC', location: '南宁 · 在线' },
+    { id: '6', name: '小惠^', location: '崇左 · 在线' }
   ];
   
   const data = (users && users.length > 0) ? users : defaultUsers;
@@ -150,15 +299,21 @@ function renderOrbitUsers(users) {
   userEls.forEach((el, index) => {
     const user = data[index] || {};
     el.dataset.userId = user.id || '';
-    el.querySelector('.user-name').textContent = user.name || '用户';
-    el.querySelector('.user-location').textContent = user.location || '';
     
+    const nameEl = el.querySelector('.user-name');
+    const locationEl = el.querySelector('.user-location');
     const img = el.querySelector('.avatar-img');
-    if (user.avatar) {
-      img.src = user.avatar;
-      img.onerror = () => { img.src = ''; };
-    } else {
-      img.src = '';
+    
+    if (nameEl) nameEl.textContent = user.name || '用户';
+    if (locationEl) locationEl.textContent = user.location || '';
+    
+    if (img) {
+      if (user.avatar) {
+        img.src = user.avatar;
+        img.onerror = () => { img.src = ''; };
+      } else {
+        img.src = '';
+      }
     }
   });
 }
@@ -166,40 +321,95 @@ function renderOrbitUsers(users) {
 function loadCategories() {
   const categories = AndroidBridge.getCategories();
   if (categories && categories.length > 0) {
+    cachedCategories = categories;
     renderCategories(categories);
   }
 }
 
+// 渲染板块到底部面板
 function renderCategories(categories) {
-  const grid = document.getElementById('categoryGrid');
-  const defaultIcons = ['💕', '🎮', '🎤', '🎨', '🔫', '🎲'];
-  const defaultGlows = ['pink', 'cyan', 'purple', 'pink', 'cyan', 'purple'];
-  
-  const cards = grid.querySelectorAll('.feature-card');
-  cards.forEach((card, index) => {
+  // 快速匹配玩伴区域 - 前3个板块
+  const matchCards = document.querySelectorAll('.match-card');
+  matchCards.forEach((card, index) => {
     const cat = categories[index];
     if (cat) {
-      card.dataset.id = cat.id || index + 1;
+      card.dataset.categoryId = cat.id;
+      card.dataset.categoryName = cat.name || '';
       card.dataset.jumpPage = cat.jumpPage || '';
-      card.querySelector('.card-title').textContent = cat.name || '未知';
+      
+      const titleEl = card.querySelector('.match-title');
+      if (titleEl && cat.name) titleEl.textContent = cat.name;
+    }
+  });
+  
+  // 派对区域
+  const partyCards = document.querySelectorAll('.party-card');
+  partyCards.forEach((card, index) => {
+    const cat = categories[3 + index];
+    if (cat) {
+      card.dataset.categoryId = cat.id;
+      card.dataset.categoryName = cat.name || '';
+      card.dataset.jumpPage = cat.jumpPage || '';
+      
+      const titleEl = card.querySelector('.party-title');
+      if (titleEl && cat.name) titleEl.textContent = cat.name;
+    }
+  });
+  
+  // 小游戏区域
+  const gameItems = document.querySelectorAll('.game-item');
+  gameItems.forEach((item, index) => {
+    const cat = categories[8 + index];
+    if (cat) {
+      item.dataset.categoryId = cat.id;
+      item.dataset.categoryName = cat.name || '';
+      item.dataset.jumpPage = cat.jumpPage || '';
+      
+      const nameEl = item.querySelector('.game-name');
+      if (nameEl && cat.name) nameEl.textContent = cat.name;
+    }
+  });
+  
+  // 一起玩区域
+  const togetherCards = document.querySelectorAll('.together-card');
+  togetherCards.forEach((card, index) => {
+    const cat = categories[12 + index];
+    if (cat) {
+      card.dataset.categoryId = cat.id;
+      card.dataset.categoryName = cat.name || '';
+      card.dataset.jumpPage = cat.jumpPage || '';
+      
+      const titleEl = card.querySelector('.together-title');
+      if (titleEl && cat.name) titleEl.textContent = cat.name;
     }
   });
 }
 
-// Android回调
+// ========== Android回调函数 ==========
 function updateNearbyUsers(json) {
-  try { renderOrbitUsers(JSON.parse(json)); } catch (e) {}
+  try {
+    const users = JSON.parse(json);
+    renderOrbitUsers(users);
+  } catch (e) {
+    console.error('解析用户数据失败:', e);
+  }
 }
 
 function updateMatchableCount(count) {
-  document.getElementById('matchCount').textContent = count;
+  const el = document.getElementById('matchCount');
+  if (el) el.textContent = '剩余匹配' + count + '人';
 }
 
 function updateCategories(json) {
-  try { renderCategories(JSON.parse(json)); } catch (e) {}
+  try {
+    const categories = JSON.parse(json);
+    cachedCategories = categories;
+    renderCategories(categories);
+  } catch (e) {
+    console.error('解析板块数据失败:', e);
+  }
 }
 
 function updateUserInfo(name, info) {
-  if (name) document.getElementById('userName').textContent = name;
-  if (info) document.getElementById('userInfo').textContent = info;
+  console.log('用户信息更新:', name, info);
 }
diff --git a/android-app/app/src/main/assets/web/styles/yuanchi.css b/android-app/app/src/main/assets/web/styles/yuanchi.css
index d5dc4c1c..afa0f0e8 100644
--- a/android-app/app/src/main/assets/web/styles/yuanchi.css
+++ b/android-app/app/src/main/assets/web/styles/yuanchi.css
@@ -7,21 +7,23 @@
 }
 
 :root {
-  --bg-dark: #0a0a14;
-  --bg-mid: #12122b;
-  --neon-pink: #FF2E63;
+  --bg-dark: #1a0a2e;
+  --bg-purple: #2d1b4e;
+  --neon-pink: #FF6B9D;
   --neon-cyan: #08D9D6;
   --neon-purple: #a855f7;
-  --glass-bg: rgba(255, 255, 255, 0.05);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-highlight: rgba(255, 255, 255, 0.15);
+  --center-pink: #FF7EB3;
   --text-primary: #ffffff;
-  --text-secondary: rgba(255, 255, 255, 0.6);
+  --text-secondary: rgba(255, 255, 255, 0.7);
   
-  /* 轨道半径 - 根据屏幕动态调整 */
-  --orbit-radius: min(38vw, 140px);
+  /* 轨道半径 */
+  --orbit-radius: min(32vw, 120px);
   --avatar-size: min(15vw, 56px);
-  --center-size: min(22vw, 90px);
+  --center-size: min(30vw, 115px);
+  
+  /* 底部面板高度 */
+  --sheet-peek-height: 200px;
+  --sheet-expanded-height: 70vh;
 }
 
 html, body {
@@ -30,8 +32,7 @@ html, body {
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
   background: var(--bg-dark);
   color: var(--text-primary);
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 /* ========== 主容器 ========== */
@@ -39,25 +40,26 @@ html, body {
   position: relative;
   width: 100%;
   max-width: 430px;
-  min-height: 100vh;
-  min-height: 100dvh;
+  height: 100vh;
+  height: 100dvh;
   margin: 0 auto;
-  background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-dark) 100%);
-  overflow-x: hidden;
+  background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .pond-inner {
   position: relative;
   z-index: 10;
-  padding: 12px 14px;
-  padding-bottom: 70px;
-  min-height: 100vh;
-  min-height: 100dvh;
+  padding: 12px 16px;
+  flex: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
-/* ========== 背景层 ========== */
+/* ========== 背景层 - 星空效果 ========== */
 .bg-layer {
   position: fixed;
   inset: 0;
@@ -68,146 +70,87 @@ html, body {
 .gradient-orb {
   position: absolute;
   border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.3;
+  filter: blur(100px);
+  opacity: 0.5;
 }
 
 .orb-1 {
-  width: 200px;
-  height: 200px;
-  top: -60px;
-  left: -60px;
-  background: var(--neon-cyan);
-  animation: float-orb 10s ease-in-out infinite;
+  width: 300px;
+  height: 300px;
+  top: -100px;
+  left: -100px;
+  background: #4a2c7a;
 }
 
 .orb-2 {
-  width: 180px;
-  height: 180px;
-  bottom: 100px;
-  right: -60px;
-  background: var(--neon-pink);
-  animation: float-orb 12s ease-in-out infinite reverse;
+  width: 250px;
+  height: 250px;
+  top: 20%;
+  right: -80px;
+  background: #6b3fa0;
 }
 
-@keyframes float-orb {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  50% { transform: translate(15px, 20px) scale(1.05); }
-}
-
-.grid-lines {
+/* 星星效果 */
+.bg-layer::before {
+  content: '';
   position: absolute;
   inset: 0;
   background-image: 
-    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-  background-size: 40px 40px;
-  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+    radial-gradient(2px 2px at 20px 30px, white, transparent),
+    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
+    radial-gradient(1px 1px at 90px 40px, white, transparent),
+    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
+    radial-gradient(1px 1px at 160px 120px, white, transparent),
+    radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
+    radial-gradient(1px 1px at 250px 160px, white, transparent),
+    radial-gradient(2px 2px at 300px 100px, rgba(255,255,255,0.5), transparent);
+  background-size: 350px 200px;
+  animation: twinkle 4s ease-in-out infinite;
 }
 
-/* ========== 玻璃拟态 ========== */
-.glass {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--glass-border);
-  border-radius: 14px;
+@keyframes twinkle {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; }
 }
 
 /* ========== 顶部栏 ========== */
 .top-bar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 10px;
-  flex-shrink: 0;
-}
-
-.logo-area {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.logo-glow {
-  font-size: 20px;
-  color: var(--neon-cyan);
-  text-shadow: 0 0 12px var(--neon-cyan);
-  animation: pulse-glow 2s ease-in-out infinite;
-}
-
-@keyframes pulse-glow {
-  0%, 100% { text-shadow: 0 0 8px var(--neon-cyan); }
-  50% { text-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
-}
-
-.logo-text {
-  font-family: "Snell Roundhand", cursive;
-  font-size: 20px;
-  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* ========== 信息栏 ========== */
-.info-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 14px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   flex-shrink: 0;
 }
 
-.info-left, .info-right {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.info-label, .info-desc {
-  font-size: 10px;
-  color: var(--text-secondary);
-}
-
-.info-value, .info-name {
-  font-size: 15px;
+.page-title {
+  font-size: 22px;
   font-weight: 700;
+  color: var(--text-primary);
 }
 
-.info-unit {
-  font-size: 11px;
-  color: var(--neon-pink);
-  margin-left: 2px;
+.filter-btn {
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.neon-text {
-  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.info-right {
-  text-align: right;
-}
-
-/* ========== 匹配圆环区域 - 摩天轮布局 ========== */
+/* ========== 匹配圆环区域 ========== */
 .match-area {
   position: relative;
   width: 100%;
-  /* 固定高度，确保圆环区域大小一致 */
-  height: calc(var(--orbit-radius) * 2 + var(--avatar-size) + 50px);
-  max-height: 340px;
-  margin: 0 auto 14px;
+  flex: 1;
+  min-height: 280px;
+  max-height: 380px;
+  margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
 }
 
-/* 中心脉冲圆环 */
+/* 中心按钮 - 粉色圆形 */
 .center-ring {
   position: absolute;
   width: var(--center-size);
@@ -218,166 +161,127 @@ html, body {
   z-index: 10;
 }
 
+/* 脉冲动画 */
 .ring-pulse {
   position: absolute;
-  inset: 0;
+  inset: -8px;
   border-radius: 50%;
-  border: 2px solid var(--neon-cyan);
-  animation: ring-expand 2.5s ease-out infinite;
+  background: rgba(255, 126, 179, 0.25);
+  animation: pulse-expand 2s ease-out infinite;
 }
 
-.ring-pulse.delay-1 { animation-delay: 0.8s; }
-.ring-pulse.delay-2 { animation-delay: 1.6s; }
+.ring-pulse.delay-1 { animation-delay: 0.6s; }
+.ring-pulse.delay-2 { animation-delay: 1.2s; }
 
-@keyframes ring-expand {
-  0% { transform: scale(1); opacity: 0.7; }
-  100% { transform: scale(2.2); opacity: 0; }
+@keyframes pulse-expand {
+  0% { transform: scale(1); opacity: 0.5; }
+  100% { transform: scale(1.6); opacity: 0; }
 }
 
 .ring-core {
   position: absolute;
-  inset: 8px;
-  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan));
-  background-size: 200% 200%;
+  inset: 0;
+  background: linear-gradient(180deg, #FFB6D3 0%, #FF7EB3 40%, #FF6BA8 100%);
   border-radius: 50%;
   cursor: pointer;
-  animation: gradient-spin 4s linear infinite;
   box-shadow: 
-    0 0 25px rgba(8, 217, 214, 0.4),
-    0 0 50px rgba(255, 46, 99, 0.3),
-    inset 0 0 15px rgba(255, 255, 255, 0.2);
+    0 6px 24px rgba(255, 107, 157, 0.5),
+    inset 0 2px 8px rgba(255, 255, 255, 0.3);
   transition: transform 0.2s;
 }
 
 .ring-core:active {
-  transform: scale(0.92);
-}
-
-@keyframes gradient-spin {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
+  transform: scale(0.95);
 }
 
 .core-inner {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2px;
 }
 
-.core-icon {
-  font-size: min(8vw, 28px);
+.core-text {
+  font-size: min(5vw, 20px);
+  font-weight: 700;
   color: #fff;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
-/* 轨道环 - 真正的圆形轨道 */
+.core-sub {
+  font-size: min(2.6vw, 10px);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* 轨道环 - 虚线圆 */
 .orbit-ring {
   position: absolute;
-  width: calc(var(--orbit-radius) * 2);
-  height: calc(var(--orbit-radius) * 2);
+  width: calc(var(--orbit-radius) * 2 + 20px);
+  height: calc(var(--orbit-radius) * 2 + 20px);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border: 1.5px dashed rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   pointer-events: none;
 }
 
-/* 外层装饰轨道 */
-.orbit-ring::before {
-  content: '';
-  position: absolute;
-  inset: -15px;
-  border: 1px solid rgba(168, 85, 247, 0.1);
-  border-radius: 50%;
-}
-
-.orbit-ring::after {
-  content: '';
-  position: absolute;
-  inset: 15px;
-  border: 1px solid rgba(8, 217, 214, 0.1);
-  border-radius: 50%;
-}
-
-/* 用户头像容器 - 摩天轮定位 */
+/* 用户头像容器 */
 .orbit-users {
   position: absolute;
-  width: calc(var(--orbit-radius) * 2);
-  height: calc(var(--orbit-radius) * 2);
+  width: calc(var(--orbit-radius) * 2 + var(--avatar-size));
+  height: calc(var(--orbit-radius) * 2 + var(--avatar-size) + 40px);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  /* 整体缓慢旋转 */
-  animation: orbit-spin 60s linear infinite;
 }
 
-@keyframes orbit-spin {
-  from { transform: translate(-50%, -50%) rotate(0deg); }
-  to { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
-/* 单个用户 - 精确定位在轨道上 */
 .orbit-user {
   position: absolute;
-  width: var(--avatar-size);
-  height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
-  transition: transform 0.3s ease;
-  /* 反向旋转保持头像正向 */
-  animation: counter-spin 60s linear infinite;
-}
-
-@keyframes counter-spin {
-  from { transform: translate(-50%, -50%) rotate(0deg); }
-  to { transform: translate(-50%, -50%) rotate(-360deg); }
-}
-
-/* 6个用户的精确位置 - 圆周均匀分布 */
-.orbit-user[data-pos="1"] {
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, -50%);
-}
-
-.orbit-user[data-pos="2"] {
-  left: calc(50% + 86.6%/2);  /* cos(30°) ≈ 0.866 */
-  top: 25%;
-  transform: translate(-50%, -50%);
-}
-
-.orbit-user[data-pos="3"] {
-  left: calc(50% + 86.6%/2);
-  top: 75%;
-  transform: translate(-50%, -50%);
-}
-
-.orbit-user[data-pos="4"] {
-  left: 50%;
-  top: 100%;
-  transform: translate(-50%, -50%);
-}
-
-.orbit-user[data-pos="5"] {
-  left: calc(50% - 86.6%/2);
-  top: 75%;
-  transform: translate(-50%, -50%);
-}
-
-.orbit-user[data-pos="6"] {
-  left: calc(50% - 86.6%/2);
-  top: 25%;
-  transform: translate(-50%, -50%);
+  transition: transform 0.2s;
 }
 
 .orbit-user:active {
-  transform: translate(-50%, -50%) scale(1.1) !important;
+  transform: scale(1.05);
+}
+
+/* 6个用户位置 - 模拟左边图片布局 */
+.orbit-user[data-pos="1"] { 
+  left: 50%; 
+  top: 0;
+  transform: translateX(-50%);
+}
+.orbit-user[data-pos="2"] { 
+  left: 0; 
+  top: 18%;
+  transform: translateX(-20%);
+}
+.orbit-user[data-pos="3"] { 
+  right: 0; 
+  top: 18%;
+  transform: translateX(20%);
+}
+.orbit-user[data-pos="4"] { 
+  left: 0; 
+  top: 62%;
+  transform: translateX(-10%);
+}
+.orbit-user[data-pos="5"] { 
+  right: 0; 
+  top: 62%;
+  transform: translateX(10%);
+}
+.orbit-user[data-pos="6"] { 
+  left: 50%; 
+  bottom: 0;
+  transform: translateX(-50%);
 }
 
 .user-avatar {
@@ -385,8 +289,8 @@ html, body {
   height: var(--avatar-size);
   border-radius: 50%;
   padding: 2px;
+  background: linear-gradient(135deg, #FF6B9D, #a855f7, #08D9D6);
   position: relative;
-  overflow: visible;
   flex-shrink: 0;
 }
 
@@ -395,26 +299,17 @@ html, body {
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
-  background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
-}
-
-.avatar-glow {
-  position: absolute;
-  inset: -3px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--neon-pink), var(--neon-cyan));
-  opacity: 0.4;
-  z-index: -1;
-  filter: blur(6px);
+  background: #2d1b4e;
+  border: 2px solid #1a0a2e;
 }
 
 .user-name {
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--text-primary);
   margin-top: 4px;
   text-align: center;
-  max-width: calc(var(--avatar-size) + 10px);
+  max-width: 70px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -422,212 +317,482 @@ html, body {
 }
 
 .user-location {
-  font-size: 8px;
+  font-size: 9px;
   color: var(--text-secondary);
   text-align: center;
   text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.user-location::before {
+  content: '○';
+  font-size: 6px;
+  color: #4ade80;
+}
+
+/* ========== 广告横幅 ========== */
+.promo-banner {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  margin-bottom: 10px;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.promo-icon-img {
+  width: 48px;
+  height: 36px;
+  object-fit: contain;
+  border-radius: 6px;
+}
+
+.promo-icon {
+  font-size: 20px;
+}
+
+.promo-text {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.promo-link {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.promo-new {
+  font-size: 10px;
+  padding: 2px 8px;
+  background: linear-gradient(90deg, #FF6B9D, #FF8E53);
+  color: #fff;
+  border-radius: 8px;
+  font-weight: 600;
 }
 
 /* ========== 快捷操作按钮 ========== */
 .quick-actions {
   display: flex;
   gap: 10px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   flex-shrink: 0;
 }
 
 .action-btn {
   flex: 1;
-  height: 44px;
+  height: 52px;
   border: none;
-  border-radius: 22px;
+  border-radius: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
+  padding: 0 14px;
 }
 
 .action-btn:active {
-  transform: scale(0.96);
+  transform: scale(0.97);
 }
 
 .action-btn.pink {
-  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
-  box-shadow: 0 4px 16px rgba(255, 46, 99, 0.35);
+  background: linear-gradient(90deg, #FF6B9D, #FF8E9B);
+  box-shadow: 0 4px 14px rgba(255, 107, 157, 0.4);
 }
 
 .action-btn.cyan {
-  background: linear-gradient(90deg, var(--neon-purple), var(--neon-cyan));
-  box-shadow: 0 4px 16px rgba(8, 217, 214, 0.35);
+  background: linear-gradient(90deg, #E8D5F2, #F5E6FA);
+  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.2);
+}
+
+.action-btn.cyan .btn-label,
+.action-btn.cyan .btn-sub {
+  color: #6b3fa0;
 }
 
 .btn-icon {
-  font-size: 16px;
+  font-size: 22px;
+}
+
+.btn-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .btn-label {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   color: #fff;
 }
 
-/* ========== 功能入口 2x3 ========== */
-.feature-grid {
+.btn-sub {
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* ========== 可折叠底部面板 ========== */
+.bottom-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-width: 430px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 20px 20px 0 0;
+  z-index: 100;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(calc(100% - 160px));
+  max-height: var(--sheet-expanded-height);
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
+}
+
+.bottom-sheet.expanded {
+  transform: translateY(0);
+}
+
+/* 拖动手柄 */
+.sheet-handle {
+  display: flex;
+  justify-content: center;
+  padding: 10px 16px 6px;
+  cursor: pointer;
+}
+
+.handle-bar {
+  width: 36px;
+  height: 4px;
+  background: #ddd;
+  border-radius: 2px;
+}
+
+/* 区块头部 - 默认显示在底部 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #333;
+}
+
+/* 上滑查看更多按钮 */
+.section-more {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #999;
+  padding: 4px 10px;
+  background: #f5f5f5;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+.section-more::before {
+  content: '↑';
+  font-size: 10px;
+}
+
+.bottom-sheet.expanded .section-more {
+  display: none;
+}
+
+/* 快速匹配玩伴卡片区域 - 默认显示 */
+.match-grid {
+  display: flex;
+  gap: 10px;
+  padding: 0 16px;
+}
+
+.bottom-sheet.expanded .match-grid {
+  display: flex;
+}
+
+/* 底部面板内容 - 默认隐藏 */
+.sheet-content {
+  display: none;
+  padding: 0 16px 24px;
+  overflow-y: auto;
+  max-height: calc(var(--sheet-expanded-height) - 50px);
+  -webkit-overflow-scrolling: touch;
+}
+
+.bottom-sheet.expanded .sheet-content {
+  display: block;
+}
+
+.sheet-section {
+  margin-bottom: 20px;
+}
+
+.peek-section {
+  padding-bottom: 10px;
+}
+
+/* ========== 快速匹配玩伴卡片 ========== */
+.match-grid {
+  display: flex;
+  gap: 10px;
+  padding: 0 16px;
+}
+
+.match-card {
+  flex: 1;
+  padding: 14px 10px;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: transform 0.2s;
+  position: relative;
+  overflow: hidden;
+  min-height: 80px;
+}
+
+.match-card:active {
+  transform: scale(0.96);
+}
+
+.match-card:nth-child(1) {
+  background: linear-gradient(135deg, #FFE4EC 0%, #FFCDD9 100%);
+}
+
+.match-card:nth-child(2) {
+  background: linear-gradient(135deg, #E0F4F4 0%, #B8E8E8 100%);
+}
+
+.match-card:nth-child(3) {
+  background: linear-gradient(135deg, #FFE8F0 0%, #FFD4E4 100%);
+}
+
+.match-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.match-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #333;
+}
+
+.match-desc {
+  font-size: 10px;
+  color: #888;
+}
+
+.match-icon {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  font-size: 28px;
+  opacity: 0.9;
+}
+
+/* ========== 派对 ========== */
+.party-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto auto;
+  gap: 10px;
+}
+
+.party-card {
+  position: relative;
+  border-radius: 14px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.2s;
+  min-height: 70px;
+}
+
+.party-card:active {
+  transform: scale(0.96);
+}
+
+.party-card.large {
+  grid-column: span 2;
+  min-height: 85px;
+}
+
+.party-bg {
+  position: absolute;
+  inset: 0;
+}
+
+.party-bg.pink { background: linear-gradient(135deg, #FF8FAB, #FF6B8A); }
+.party-bg.cyan { background: linear-gradient(135deg, #4ECDC4, #45B7AA); }
+.party-bg.purple { background: linear-gradient(135deg, #B794F6, #9F7AEA); }
+.party-bg.orange { background: linear-gradient(135deg, #FFB347, #FF9500); }
+.party-bg.green { background: linear-gradient(135deg, #68D391, #48BB78); }
+
+.party-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.party-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.party-count, .party-desc {
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.85);
+  margin-top: 2px;
+}
+
+.party-tag {
+  margin-top: auto;
+  font-size: 9px;
+  padding: 3px 8px;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 10px;
+  color: #fff;
+  width: fit-content;
+}
+
+/* ========== 小游戏 ========== */
+.game-list {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.game-list::-webkit-scrollbar {
+  display: none;
+}
+
+.game-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: #f5f5f5;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.game-item:active {
+  background: #eee;
+}
+
+.game-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+
+.game-icon {
+  font-size: 18px;
+}
+
+/* ========== 一起玩 ========== */
+.together-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
-  flex-shrink: 0;
 }
 
-.feature-card {
-  position: relative;
-  padding: 14px 6px;
+.together-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  padding: 14px 8px;
+  background: #f8f8f8;
+  border-radius: 14px;
   cursor: pointer;
-  overflow: hidden;
-  transition: all 0.3s ease;
 }
 
-.feature-card:active {
-  transform: scale(0.95);
+.together-card:active {
+  transform: scale(0.96);
 }
 
-.card-glow {
-  position: absolute;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  filter: blur(25px);
-  opacity: 0.12;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: opacity 0.3s;
+.together-icon {
+  font-size: 26px;
+  margin-bottom: 6px;
 }
 
-.card-glow.pink { background: var(--neon-pink); }
-.card-glow.cyan { background: var(--neon-cyan); }
-.card-glow.purple { background: var(--neon-purple); }
-
-.feature-card:hover .card-glow {
-  opacity: 0.25;
+.together-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
 }
 
-.card-icon {
-  font-size: 24px;
-  position: relative;
-  z-index: 1;
+.together-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
 }
 
-.card-title {
+.together-desc {
   font-size: 10px;
-  color: var(--text-primary);
-  text-align: center;
-  position: relative;
-  z-index: 1;
+  color: #999;
 }
 
-/* ========== 响应式 - 小屏幕优化 ========== */
-@media (max-height: 680px) {
+/* ========== 响应式 ========== */
+@media (max-height: 700px) {
   :root {
-    --orbit-radius: min(32vw, 115px);
+    --orbit-radius: min(28vw, 105px);
     --avatar-size: min(13vw, 48px);
-    --center-size: min(18vw, 70px);
+    --center-size: min(26vw, 100px);
+    --sheet-peek-height: 180px;
   }
   
   .match-area {
-    max-height: 280px;
-    margin-bottom: 10px;
-  }
-  
-  .info-bar {
-    padding: 8px 12px;
-    margin-bottom: 10px;
-  }
-  
-  .quick-actions {
-    margin-bottom: 10px;
-  }
-  
-  .action-btn {
-    height: 40px;
-  }
-  
-  .feature-card {
-    padding: 10px 4px;
-  }
-  
-  .card-icon {
-    font-size: 20px;
-  }
-  
-  .card-title {
-    font-size: 9px;
+    min-height: 240px;
+    max-height: 320px;
   }
 }
 
 @media (max-height: 600px) {
   :root {
-    --orbit-radius: min(28vw, 100px);
+    --orbit-radius: min(24vw, 90px);
     --avatar-size: min(11vw, 42px);
-    --center-size: min(16vw, 60px);
+    --center-size: min(22vw, 85px);
+    --sheet-peek-height: 160px;
   }
   
   .match-area {
-    max-height: 240px;
-    margin-bottom: 8px;
+    min-height: 200px;
+    max-height: 280px;
   }
   
-  .top-bar {
-    margin-bottom: 6px;
-  }
-  
-  .logo-glow, .logo-text {
-    font-size: 18px;
-  }
-  
-  .pond-inner {
-    padding: 10px 12px;
-    padding-bottom: 65px;
+  .page-title {
+    font-size: 20px;
   }
   
   .action-btn {
-    height: 38px;
+    height: 46px;
   }
   
-  .btn-label {
-    font-size: 12px;
-  }
-  
-  .feature-grid {
-    gap: 8px;
-  }
-}
-
-/* 超小屏幕 */
-@media (max-height: 550px) {
-  :root {
-    --orbit-radius: min(25vw, 85px);
-    --avatar-size: min(10vw, 38px);
-    --center-size: min(14vw, 52px);
-  }
-  
-  .match-area {
-    max-height: 200px;
-  }
-  
-  .user-name {
-    font-size: 9px;
-  }
-  
-  .user-location {
+  .btn-sub {
     display: none;
   }
 }
diff --git a/android-app/app/src/main/assets/web/yuanchi.html b/android-app/app/src/main/assets/web/yuanchi.html
index e49842ad..40db0a3b 100644
--- a/android-app/app/src/main/assets/web/yuanchi.html
+++ b/android-app/app/src/main/assets/web/yuanchi.html
@@ -12,41 +12,30 @@
     <div class="bg-layer">
       <div class="gradient-orb orb-1"></div>
       <div class="gradient-orb orb-2"></div>
-      <div class="grid-lines"></div>
     </div>
 
     <div class="pond-inner">
       <!-- 顶部栏 -->
       <header class="top-bar">
-        <div class="logo-area">
-          <span class="logo-glow">◈</span>
-          <span class="logo-text">FishPond</span>
+        <div class="top-left">
+          <span class="page-title">附近的人</span>
+        </div>
+        <div class="top-right">
+          <span class="filter-btn">▼ 筛选</span>
         </div>
       </header>
 
-      <!-- 信息栏 -->
-      <section class="info-bar glass">
-        <div class="info-left">
-          <span class="info-label">剩余匹配</span>
-          <span class="info-value neon-text" id="matchCount">--</span>
-          <span class="info-unit">人</span>
-        </div>
-        <div class="info-right">
-          <span class="info-desc" id="userInfo">真诚 | 南宁 | 在线</span>
-          <span class="info-name neon-text" id="userName">加载中...</span>
-        </div>
-      </section>
-
       <!-- 匹配圆环区域 -->
       <section class="match-area">
-        <!-- 中心脉冲圆环 -->
+        <!-- 中心按钮 - 粉色圆形 -->
         <div class="center-ring">
           <div class="ring-pulse"></div>
           <div class="ring-pulse delay-1"></div>
           <div class="ring-pulse delay-2"></div>
           <div class="ring-core" id="refreshBtn">
             <div class="core-inner">
-              <span class="core-icon">⟳</span>
+              <span class="core-text">立即速配</span>
+              <span class="core-sub" id="matchCount">剩余匹配20人</span>
             </div>
           </div>
         </div>
@@ -54,104 +43,218 @@
         <!-- 轨道环 -->
         <div class="orbit-ring"></div>
 
-        <!-- 用户头像 - 摩天轮布局 -->
+        <!-- 用户头像 - 固定位置 -->
         <div class="orbit-users" id="orbitGroup">
           <div class="orbit-user" data-pos="1">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">对你何止...</div>
+            <div class="user-location">美国 · 在线</div>
           </div>
           <div class="orbit-user" data-pos="2">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">cat</div>
+            <div class="user-location">保密 · 在线</div>
           </div>
           <div class="orbit-user" data-pos="3">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">雾落溪漫</div>
+            <div class="user-location">桂林 · 在线</div>
           </div>
           <div class="orbit-user" data-pos="4">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">313</div>
+            <div class="user-location">南宁 · 在线</div>
           </div>
           <div class="orbit-user" data-pos="5">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">ZwaC</div>
+            <div class="user-location">南宁 · 在线</div>
           </div>
           <div class="orbit-user" data-pos="6">
-            <div class="user-avatar glass">
+            <div class="user-avatar">
               <img src="" alt="" class="avatar-img">
-              <div class="avatar-glow"></div>
             </div>
-            <div class="user-name"></div>
-            <div class="user-location"></div>
+            <div class="user-name">小惠^</div>
+            <div class="user-location">崇左 · 在线</div>
           </div>
         </div>
       </section>
 
+      <!-- 广告横幅 -->
+      <section class="promo-banner">
+        <img class="promo-icon-img" src="./images/promo_cards.png" alt="卡片" onerror="this.style.display='none'">
+        <span class="promo-text">语音加速卡折扣</span>
+        <span class="promo-link">加速卡/恋爱卡/魔仙卡 ></span>
+        <span class="promo-new">NEW</span>
+      </section>
+
       <!-- 快捷操作按钮 -->
       <section class="quick-actions">
         <button class="action-btn neon-btn pink" id="voiceMatchBtn">
           <span class="btn-icon">🎧</span>
-          <span class="btn-label">语音匹配</span>
+          <div class="btn-content">
+            <span class="btn-label">语音匹配</span>
+            <span class="btn-sub">今日剩9/10次</span>
+          </div>
         </button>
         <button class="action-btn neon-btn cyan" id="heartSignalBtn">
-          <span class="btn-icon">💓</span>
-          <span class="btn-label">心动信号</span>
+          <span class="btn-icon">💗</span>
+          <div class="btn-content">
+            <span class="btn-label">心动信号</span>
+            <span class="btn-sub">已开启</span>
+          </div>
         </button>
       </section>
+    </div>
 
-      <!-- 功能入口 2x3 -->
-      <section class="feature-grid" id="categoryGrid">
-        <div class="feature-card glass" data-id="1">
-          <div class="card-glow pink"></div>
-          <div class="card-icon">💕</div>
-          <div class="card-title">在线处对象</div>
+    <!-- 可折叠底部面板 -->
+    <div class="bottom-sheet" id="bottomSheet">
+      <!-- 快速匹配玩伴 - 始终显示部分 -->
+      <section class="sheet-section peek-section">
+        <div class="sheet-handle" id="sheetHandle">
+          <div class="handle-bar"></div>
         </div>
-        <div class="feature-card glass" data-id="2">
-          <div class="card-glow cyan"></div>
-          <div class="card-icon">🎮</div>
-          <div class="card-title">找人玩游戏</div>
+        <div class="section-header">
+          <span class="section-title">快速匹配玩伴</span>
+          <span class="section-more" id="expandBtn">上滑查看更多</span>
         </div>
-        <div class="feature-card glass" data-id="3">
-          <div class="card-glow purple"></div>
-          <div class="card-icon">🎤</div>
-          <div class="card-title">一起KTV</div>
-        </div>
-        <div class="feature-card glass" data-id="4">
-          <div class="card-glow pink"></div>
-          <div class="card-icon">🎨</div>
-          <div class="card-title">你画我猜</div>
-        </div>
-        <div class="feature-card glass" data-id="5">
-          <div class="card-glow cyan"></div>
-          <div class="card-icon">🔫</div>
-          <div class="card-title">和平精英</div>
-        </div>
-        <div class="feature-card glass" data-id="6">
-          <div class="card-glow purple"></div>
-          <div class="card-icon">🎲</div>
-          <div class="card-title">桌游派对</div>
+        <div class="match-grid">
+          <div class="match-card" data-category-id="1" data-category-name="在线处对象">
+            <div class="match-info">
+              <span class="match-title">在线处对象</span>
+              <span class="match-desc">找个CP上上头</span>
+            </div>
+            <span class="match-icon">💕</span>
+          </div>
+          <div class="match-card" data-category-id="2" data-category-name="找人玩游戏">
+            <div class="match-info">
+              <span class="match-title">找人玩游戏</span>
+              <span class="match-desc">找游戏搭子</span>
+            </div>
+            <span class="match-icon">🎮</span>
+          </div>
+          <div class="match-card" data-category-id="3" data-category-name="心动颜究所">
+            <div class="match-info">
+              <span class="match-title">心动颜究所</span>
+              <span class="match-desc">好看的人都在这</span>
+            </div>
+            <span class="match-icon">💗</span>
+          </div>
         </div>
       </section>
+
+      <!-- 底部面板内容 - 展开后显示 -->
+      <div class="sheet-content">
+        <!-- 派对 -->
+        <section class="sheet-section">
+          <div class="section-header">
+            <span class="section-title">派对</span>
+          </div>
+          <div class="party-grid">
+            <div class="party-card large" data-category-id="10" data-category-name="派对大厅">
+              <div class="party-bg pink"></div>
+              <div class="party-content">
+                <span class="party-title">派对大厅</span>
+                <span class="party-count">12345人在玩</span>
+                <span class="party-tag">快速进入</span>
+              </div>
+            </div>
+            <div class="party-card" data-category-id="11" data-category-name="K歌房">
+              <div class="party-bg cyan"></div>
+              <div class="party-content">
+                <span class="party-title">K歌房</span>
+                <span class="party-desc">热门歌曲</span>
+              </div>
+            </div>
+            <div class="party-card" data-category-id="12" data-category-name="游戏厅">
+              <div class="party-bg purple"></div>
+              <div class="party-content">
+                <span class="party-title">游戏厅</span>
+                <span class="party-desc">一起开黑</span>
+              </div>
+            </div>
+            <div class="party-card" data-category-id="13" data-category-name="剧本杀">
+              <div class="party-bg orange"></div>
+              <div class="party-content">
+                <span class="party-title">剧本杀</span>
+                <span class="party-desc">烧脑推理</span>
+              </div>
+            </div>
+            <div class="party-card" data-category-id="14" data-category-name="你画我猜">
+              <div class="party-bg green"></div>
+              <div class="party-content">
+                <span class="party-title">你画我猜</span>
+                <span class="party-desc">创意涂鸦</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 小游戏 -->
+        <section class="sheet-section">
+          <div class="section-header">
+            <span class="section-title">小游戏</span>
+          </div>
+          <div class="game-list">
+            <div class="game-item" data-category-id="20" data-category-name="飞行棋">
+              <span class="game-name">飞行棋</span>
+              <span class="game-icon">🎲</span>
+            </div>
+            <div class="game-item" data-category-id="21" data-category-name="桌球">
+              <span class="game-name">桌球</span>
+              <span class="game-icon">🎱</span>
+            </div>
+            <div class="game-item" data-category-id="22" data-category-name="五子棋">
+              <span class="game-name">五子棋</span>
+              <span class="game-icon">⚫</span>
+            </div>
+            <div class="game-item" data-category-id="23" data-category-name="你画我猜">
+              <span class="game-name">你画我猜</span>
+              <span class="game-icon">🎨</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- 一起玩 -->
+        <section class="sheet-section">
+          <div class="section-header">
+            <span class="section-title">一起玩</span>
+          </div>
+          <div class="together-grid">
+            <div class="together-card" data-category-id="30" data-category-name="群聊广场">
+              <div class="together-icon">💬</div>
+              <div class="together-info">
+                <span class="together-title">群聊广场</span>
+                <span class="together-desc">31人在一起</span>
+              </div>
+            </div>
+            <div class="together-card" data-category-id="31" data-category-name="游戏组队">
+              <div class="together-icon">👥</div>
+              <div class="together-info">
+                <span class="together-title">游戏组队</span>
+                <span class="together-desc">开黑上分</span>
+              </div>
+            </div>
+            <div class="together-card" data-category-id="32" data-category-name="纸飞机">
+              <div class="together-icon">✈️</div>
+              <div class="together-info">
+                <span class="together-title">纸飞机</span>
+                <span class="together-desc">聊天匹配</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
     </div>
   </div>
 
diff --git a/android-app/app/src/main/java/com/example/livestreaming/DrawGuessActivity.java b/android-app/app/src/main/java/com/example/livestreaming/DrawGuessActivity.java
index 622826b6..ce7e2205 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/DrawGuessActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/DrawGuessActivity.java
@@ -56,7 +56,7 @@ public class DrawGuessActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/DynamicCommunityActivity.java b/android-app/app/src/main/java/com/example/livestreaming/DynamicCommunityActivity.java
index d5fe523e..57a31ccc 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/DynamicCommunityActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/DynamicCommunityActivity.java
@@ -130,7 +130,7 @@ public class DynamicCommunityActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/FindGameActivity.java b/android-app/app/src/main/java/com/example/livestreaming/FindGameActivity.java
index 6f81fa48..e0604a9f 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/FindGameActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/FindGameActivity.java
@@ -57,7 +57,7 @@ public class FindGameActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/FishPondActivity.java b/android-app/app/src/main/java/com/example/livestreaming/FishPondActivity.java
index 083c519f..18e9a780 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/FishPondActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/FishPondActivity.java
@@ -139,7 +139,7 @@ public class FishPondActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/FishPondWebViewActivity.java b/android-app/app/src/main/java/com/example/livestreaming/FishPondWebViewActivity.java
index 2873925c..bfa7cc78 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/FishPondWebViewActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/FishPondWebViewActivity.java
@@ -133,7 +133,7 @@ public class FishPondWebViewActivity extends AppCompatActivity {
                     return true;
                 }
                 if (id == R.id.nav_wish_tree) {
-                    WishTreeWebViewActivity.start(this);
+                    WishTreeActivity.start(this);
                     finish();
                     return true;
                 }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/HeartbeatSignalActivity.java b/android-app/app/src/main/java/com/example/livestreaming/HeartbeatSignalActivity.java
index e0668dab..bc19e9ee 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/HeartbeatSignalActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/HeartbeatSignalActivity.java
@@ -107,7 +107,7 @@ public class HeartbeatSignalActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/KTVTogetherActivity.java b/android-app/app/src/main/java/com/example/livestreaming/KTVTogetherActivity.java
index 0347365c..d44fe47e 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/KTVTogetherActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/KTVTogetherActivity.java
@@ -56,7 +56,7 @@ public class KTVTogetherActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/MessagesActivity.java b/android-app/app/src/main/java/com/example/livestreaming/MessagesActivity.java
index 204096dc..1bcc3279 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/MessagesActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/MessagesActivity.java
@@ -108,7 +108,7 @@ public class MessagesActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/OnlineDatingActivity.java b/android-app/app/src/main/java/com/example/livestreaming/OnlineDatingActivity.java
index 0273b052..8cb77d55 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/OnlineDatingActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/OnlineDatingActivity.java
@@ -56,7 +56,7 @@ public class OnlineDatingActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/PeaceEliteActivity.java b/android-app/app/src/main/java/com/example/livestreaming/PeaceEliteActivity.java
index d723b415..ece36ebc 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/PeaceEliteActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/PeaceEliteActivity.java
@@ -56,7 +56,7 @@ public class PeaceEliteActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/ProfileActivity.java b/android-app/app/src/main/java/com/example/livestreaming/ProfileActivity.java
index 2bd6a88b..36fb9673 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/ProfileActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/ProfileActivity.java
@@ -146,7 +146,7 @@ public class ProfileActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/ProfileWebViewActivity.java b/android-app/app/src/main/java/com/example/livestreaming/ProfileWebViewActivity.java
index 515f9afa..528cc259 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/ProfileWebViewActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/ProfileWebViewActivity.java
@@ -123,7 +123,7 @@ public class ProfileWebViewActivity extends AppCompatActivity {
                     return true;
                 }
                 if (id == R.id.nav_wish_tree) {
-                    WishTreeWebViewActivity.start(this);
+                    WishTreeActivity.start(this);
                     finish();
                     return true;
                 }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/TableGamesActivity.java b/android-app/app/src/main/java/com/example/livestreaming/TableGamesActivity.java
index 31fc24e1..ea0df09c 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/TableGamesActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/TableGamesActivity.java
@@ -56,7 +56,7 @@ public class TableGamesActivity extends BaseCategoryActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/VoiceMatchActivity.java b/android-app/app/src/main/java/com/example/livestreaming/VoiceMatchActivity.java
index 440c923c..593f8bff 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/VoiceMatchActivity.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/VoiceMatchActivity.java
@@ -211,7 +211,7 @@ public class VoiceMatchActivity extends AppCompatActivity {
                 return true;
             }
             if (id == R.id.nav_wish_tree) {
-                WishTreeWebViewActivity.start(this);
+                WishTreeActivity.start(this);
                 finish();
                 return true;
             }
diff --git a/android-app/app/src/main/java/com/example/livestreaming/WorksAdapter.java b/android-app/app/src/main/java/com/example/livestreaming/WorksAdapter.java
index bac85fb5..c9b9c577 100644
--- a/android-app/app/src/main/java/com/example/livestreaming/WorksAdapter.java
+++ b/android-app/app/src/main/java/com/example/livestreaming/WorksAdapter.java
@@ -204,7 +204,7 @@ public class WorksAdapter extends RecyclerView.Adapter<WorksAdapter.WorksViewHol
                 public void onResponse(retrofit2.Call<com.example.livestreaming.net.ApiResponse<Boolean>> call, 
                                      retrofit2.Response<com.example.livestreaming.net.ApiResponse<Boolean>> response) {
                     // 重新启用按钮
-                    like Icon.setEnabled(true);
+                    likeIcon.setEnabled(true);
                     
                     if (response.isSuccessful() && response.body() != null && response.body().isOk()) {
                         // 更新数据
diff --git a/android-app/img/麻将红中龙_1767927109.png b/android-app/img/麻将红中龙_1767927109.png
new file mode 100644
index 00000000..6857b40b
Binary files /dev/null and b/android-app/img/麻将红中龙_1767927109.png differ