初次提交

src/views/MusicRhythm.vue

@@ -950,6 +950,10 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 20px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .control-panel {
@@ -1691,6 +1695,9 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .search-hint {
@@ -1748,12 +1755,17 @@ onUnmounted(() => {
 .my-playlists {
   max-height: 300px;
   overflow-y: auto;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .playlists-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 12px;
+  width: 100%;
+  max-width: 100%;
 }
 
 .playlist-card {
@@ -1763,6 +1775,9 @@ onUnmounted(() => {
   padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .playlist-card:hover {
@@ -1823,6 +1838,10 @@ onUnmounted(() => {
 .results-header span {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
 }
 
 .btn-clear-small {
@@ -1902,6 +1921,8 @@ onUnmounted(() => {
 .track-details {
   flex: 1;
   min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .track-title {
@@ -1911,6 +1932,8 @@ onUnmounted(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 100%;
+  max-width: 100%;
 }
 
 .track-artist {
@@ -1919,6 +1942,8 @@ onUnmounted(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 100%;
+  max-width: 100%;
 }
 
 .track-bpm {
@@ -2161,11 +2186,16 @@ onUnmounted(() => {
   
   .content {
     gap: 15px;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
   }
   
   /* 控制面板 */
   .control-panel {
     padding: 20px 15px;
+    width: 100%;
+    max-width: 100%;
   }
   
   .panel-header {
@@ -2296,13 +2326,24 @@ onUnmounted(() => {
     margin-left: 55px;
   }
   
+  /* 中间列 */
+  .middle-column {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
   /* 可视化画布 */
   .visualizer {
     padding: 15px;
+    width: 100%;
+    max-width: 100%;
   }
   
   .visualizer-canvas {
     height: 250px;
+    width: 100%;
+    max-width: 100%;
   }
   
   .beat-indicators {
@@ -2594,6 +2635,8 @@ onUnmounted(() => {
   /* 信息面板 */
   .info-panel {
     padding: 20px 15px;
+    width: 100%;
+    max-width: 100%;
   }
   
   .info-panel h3 {