feat(frontend): 首页信息流与两大核心界面重构

- index.vue: 移除 tabs 单选改为五区块纵向信息流（Hero/排期/歌曲/投稿/消息）
  新增 scrollToSection 平滑滚动与投稿成功自动跳转；为移动端底部导航预留 pb-24
- ScheduleList.vue: 移除左右分栏改为日期横条+时段分组紧凑卡片
  序号采用 28px w900 紫粉蓝渐变 bg-clip-text；卡片三态状态标签色区分
- RequestForm.vue: 序号选择从 pill 升级为 40×40 方格三态（free/taken/selected）
  taken 态删除线+灰色；selected 三色渐变+scale1.05；选中显示「已锁定第N首」提示

app/components/Songs/RequestForm.vue

@@ -176,19 +176,27 @@
               :key="item.seq"
               type="button"
               :class="[
-                'sequence-pill',
-                item.taken ? 'taken' : 'free',
-                expectedPlaySequence === String(item.seq) ? 'selected' : ''
+                'seq',
+                item.taken ? 'seq-taken' : '',
+                expectedPlaySequence === String(item.seq) ? 'seq-selected' : ''
               ]"
               :disabled="item.taken"
-              :title="item.taken ? getTakenSequenceTitle(item.seq) : ''"
+              :title="getTakenSequenceTitle(item.seq)"
               @click="chooseExpectedPlaySequence(item.seq)"
             >
               {{ item.seq }}
             </button>
           </div>
 
-          <div v-if="selectedExpectedPlayDate" class="sequence-hint">绿色可选，红色已占用</div>
+          <div v-if="selectedExpectedPlayDate" class="sequence-hint">🟣 可选（紫粉蓝选中） · ⚪ 已占用（灰色带删除线）</div>
+          <div
+            v-if="selectedExpectedPlayDate && expectedPlaySequence"
+            class="sequence-locked"
+            style="margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; background:linear-gradient(90deg, rgba(168,85,247,.08), rgba(236,72,153,.08), rgba(59,130,246,.08)); border:1px solid rgba(168,85,247,.2); color:#7C3AED; font-size:13px; font-weight:700;"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+            已锁定 第 {{ expectedPlaySequence }} 首 位置
+          </div>
         </div>
 
         <!-- 搜索结果容器 -->
@@ -3126,47 +3134,55 @@ defineExpose({
 }
 
 .sequence-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.sequence-pill {
-  height: 28px;
-  min-width: 28px;
-  padding: 0 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border-primary);
-  background: rgba(0, 0, 0, 0.25);
-  color: rgba(255, 255, 255, 0.85);
-  font-family: 'MiSans', sans-serif;
-  font-weight: 700;
-  font-size: 12px;
-  transition: all 0.2s ease;
+.seq {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #fff;
+  border: 1.5px solid #d1d5db;
+  color: #111827;
+  font-size: 16px;
+  font-weight: 800;
+  transition: all 0.12s ease;
+  cursor: pointer;
 }
 
-.sequence-pill.free {
-  border-color: rgba(16, 185, 129, 0.35);
-  background: rgba(16, 185, 129, 0.08);
-  color: rgba(16, 185, 129, 0.95);
+.seq:hover:not(:disabled) {
+  border-color: #4338ca;
+  color: #4338ca;
+  transform: scale(1.03);
 }
 
-.sequence-pill.taken {
-  border-color: rgba(239, 68, 68, 0.35);
-  background: rgba(239, 68, 68, 0.08);
-  color: rgba(239, 68, 68, 0.95);
+.seq-taken {
+  background: #f3f4f6;
+  border-color: #e5e7eb;
+  color: #9ca3af;
+  text-decoration: line-through;
   cursor: not-allowed;
 }
 
-.sequence-pill.selected {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
-  border-color: rgba(59, 130, 246, 0.6);
+.seq-selected {
+  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.35);
+  transform: scale(1.05);
 }
 
 .sequence-hint {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
+  margin-top: 8px;
 }
 
 .search-section {