From c76d9531421f8a133f003b8501ebcd63c9657bdb Mon Sep 17 00:00:00 2001
From: walle <wheesys@sina.com>
Date: Tue, 18 Nov 2025 21:19:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=95=B4=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E6=89=8B=E9=A3=8E=E7=90=B4=E6=95=88=E6=9E=9C=E4=B8=8E=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E9=AB=98=E5=BA=A6=E9=9F=B3=E4=B9=90=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 核心功能
- 手风琴效果：展开任意音乐时收起其他所有展开项
- 互斥展开：展开音乐时自动收起当前选中声音模块
- 动态高度：音乐展开时移除容器高度限制，完整展示所有内容

## UI优化
- 音乐信息横向布局：音乐名、声音名、按钮同排对齐
- 声音名称位置调整：优化垂直对齐，增加下移间距
- 平滑动画：添加容器高度过渡动画效果

## 技术实现
- 重构展开逻辑：统一状态管理，确保互斥性
- 动态CSS类：基于展开状态动态添加hasExpanded类
- 响应式设计：容器高度自适应内容变化

## 用户体验
- 界面整洁：同时只展开一个区域，避免视觉混乱
- 内容完整：展开时确保所有声音信息可见
- 交互流畅：平滑动画过渡，提升操作体验
---
 .../selected-sounds-display.tsx               | 13 ++++++--
 src/components/sounds/sounds.module.css       | 30 +++++++++++--------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/selected-sounds-display/selected-sounds-display.tsx b/src/components/selected-sounds-display/selected-sounds-display.tsx
index d0fa1f6..d433d9c 100644
--- a/src/components/selected-sounds-display/selected-sounds-display.tsx
+++ b/src/components/selected-sounds-display/selected-sounds-display.tsx
@@ -50,7 +50,7 @@ export function SelectedSoundsDisplay() {
     Object.keys(state.sounds).filter(id => state.sounds[id].isSelected)
   );
 
-  // 独立展开逻辑：两个区域可以独立展开/收起
+  // 独立展开逻辑：展开当前选中声音时收起所有展开的音乐
   const toggleExpandedCurrent = () => {
     setExpandedCurrent(!expandedCurrent);
     if (!expandedCurrent) {
@@ -101,12 +101,19 @@ export function SelectedSoundsDisplay() {
     setExpandedMusic(prev => {
       const newSet = new Set(prev);
       if (newSet.has(musicId)) {
+        // 如果点击已展开的音乐，直接收起
         newSet.delete(musicId);
       } else {
-        newSet.add(musicId);
+        // 如果点击未展开的音乐，收起其他所有展开的项目，只展开当前这个
+        return new Set([musicId]);
       }
       return newSet;
     });
+
+    // 展开音乐时，同时收起当前选中声音模块
+    if (!expandedMusic.has(musicId)) {
+      setExpandedCurrent(false);
+    }
   };
 
   // 根据选中的声音ID获取声音对象
@@ -354,7 +361,7 @@ export function SelectedSoundsDisplay() {
 
           {/* 音乐列表 - 展开时显示 */}
           {expandedMyMusic && (
-            <div className={styles.musicList}>
+            <div className={`${styles.musicList} ${expandedMusic.size > 0 ? styles.hasExpanded : ''}`}>
               {console.log('🎵 渲染音乐列表:', { isLoadingMusic, listLength: savedMusicList.length })}
               {isLoadingMusic ? (
                 <div className={styles.loading}>加载中...</div>
diff --git a/src/components/sounds/sounds.module.css b/src/components/sounds/sounds.module.css
index 686440a..4fd2841 100644
--- a/src/components/sounds/sounds.module.css
+++ b/src/components/sounds/sounds.module.css
@@ -134,6 +134,12 @@
   overflow-y: auto;
   border-radius: 6px;
   background: var(--color-component-bg);
+  transition: max-height 0.3s ease;
+}
+
+/* 当有展开的音乐项时，移除高度限制 */
+.musicList.hasExpanded {
+  max-height: none;
 }
 
 .musicItem {
@@ -191,8 +197,9 @@
   flex: 1;
   min-width: 0;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
 }
 
 /* 音乐操作按钮容器 - 右侧按钮 */
@@ -207,14 +214,13 @@
 .soundNames {
   font-size: 12px;
   color: var(--color-foreground-subtle);
-  line-height: 1.4;
+  line-height: 1.2;
   display: flex;
   flex-wrap: wrap;
   gap: 2px;
   align-items: center;
-  padding: 1px 4px;
-  flex: 1;
-  justify-content: flex-start;
+  padding: 6px 0;
+  margin: 0;
 }
 
 /* 展开按钮 */
@@ -223,14 +229,14 @@
   border: 1px solid var(--color-border);
   color: var(--color-foreground-subtle);
   border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 10px;
+  padding: 4px 8px;
+  font-size: 11px;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
-  height: 24px;
+  height: auto;
   line-height: 1;
-  margin-left: 4px;
+  margin: 0;
 }
 
 .expandButton:hover {
@@ -287,8 +293,8 @@
   font-size: 11px;
   transition: all 0.2s ease;
   flex-shrink: 0;
-  height: 24px;
-  margin-top: 2px;
+  height: auto;
+  margin: 0;
 }
 
 .deleteButton:hover {