尝试修复前端显示问题

Author: Applesaber

web/src/views/ConverterView.vue

@@ -205,7 +205,7 @@ const isApiFormValid = computed(() => {
 
 <template>
   <div class="flex flex-col gap-6">
-    <Section title="数据转换">
+    <Section title="数据转换" expend>
       <Tabs v-model:value="activeTab">
         <TabPane name="api" tab="API 模式">
           <div class="flex flex-col gap-4 mt-4">
@@ -307,14 +307,14 @@ const isApiFormValid = computed(() => {
     </Section>
 
     <!-- Progress Output -->
-    <Section v-if="progressMessages.length > 0" title="运行日志">
+    <Section v-if="progressMessages.length > 0" title="运行日志" expend>
       <div class="font-mono text-sm max-h-48 overflow-y-auto" style="color: var(--text-secondary)">
         <div v-for="(msg, i) in progressMessages" :key="i">[{{ new Date().toLocaleTimeString() }}] {{ msg }}</div>
       </div>
     </Section>
 
     <!-- Success Output -->
-    <Section v-if="conversionResult" title="转换成功！" style="border-color: var(--success-color); box-shadow: 0 0 15px var(--success-bg)">
+    <Section v-if="conversionResult" title="转换成功！" expend style="border-color: var(--success-color); box-shadow: 0 0 15px var(--success-bg)">
       <div class="stats-grid mt-2">
         <div class="stat-card">
           <div class="stat-value">{{ resultStats.scores }}</div>

web/src/views/VisualizerView.vue

@@ -303,7 +303,7 @@ const getRankName = (score: number) => {
 <template>
   <div class="flex flex-col gap-6">
     <!-- Upload Section if no data -->
-    <Section v-if="!munetData" title="数据可视化">
+    <Section v-if="!munetData" title="数据可视化" expend>
       <div class="text-center py-10" style="padding: 4rem 2rem;">
         <p class="mb-6" style="color: var(--text-secondary)">上传 MuNET 格式的 JSON 导出文件，分析你的游玩数据。</p>
 
@@ -350,7 +350,7 @@ const getRankName = (score: number) => {
       </div>
 
       <!-- Player Info Card -->
-      <Section style="background: var(--primary-gradient); color: white; border: none;">
+      <Section expend style="background: var(--primary-gradient); color: white; border: none;">
         <div class="flex" style="flex-wrap: wrap; gap: 2rem; align-items: center;">
           <div style="flex: 1; min-width: 200px;">
             <div style="font-size: 0.875rem; opacity: 0.8;">PLAYER</div>
@@ -399,20 +399,20 @@ const getRankName = (score: number) => {
 
       <!-- Charts -->
       <div class="charts-grid">
-        <Section title="成绩分布">
+        <Section title="成绩分布" expend>
           <div class="chart-container" style="height: 280px; padding: 0; background: transparent; border: none;">
             <Bar :data="scoreDistData" :options="barChartOptions" />
           </div>
         </Section>
-        <Section title="难度分布">
+        <Section title="难度分布" expend>
           <div class="chart-container" style="height: 280px; padding: 0; background: transparent; border: none;">
             <Doughnut :data="diffDistData" :options="commonOptions" />
           </div>
         </Section>
       </div>
 
       <!-- Detailed Table -->
-      <Section :title="`游玩详情 (共 ${sortedMusicList.length} 首)`">
+      <Section :title="`游玩详情 (共 ${sortedMusicList.length} 首)`" expend>
         <div class="table-container">
           <table>
             <thead>