fix(ui): 修复浅色主题下的 Tailwind CSS 及部分残留硬编码

app/components/UserTutorial.vue

@@ -2,11 +2,11 @@
   <div class="user-tutorial-container relative">
     <div class="tutorial-header flex justify-between items-start">
       <div>
-        <h3 class="text-lg font-black text-zinc-100 flex items-center gap-2">
-          <BookOpen class="w-5 h-5 text-blue-400" />
+        <h3 class="text-lg font-black text-text-primary flex items-center gap-2">
+          <BookOpen class="w-5 h-5 text-primary" />
           使用指南
         </h3>
-        <p class="text-xs text-zinc-500 mt-1">快速了解如何使用 VoiceHub 校园广播系统</p>
+        <p class="text-xs text-text-secondary mt-1">快速了解如何使用 VoiceHub 校园广播系统</p>
       </div>
       <button 
         class="start-tour-btn"
@@ -19,7 +19,7 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
       <div class="tutorial-card">
-        <div class="card-icon bg-blue-500/10 text-blue-400">
+        <div class="card-icon bg-primary/10 text-primary">
           <Search class="w-6 h-6" />
         </div>
         <h4 class="card-title">1. 搜索与投稿</h4>
@@ -27,7 +27,7 @@
       </div>
 
       <div class="tutorial-card">
-        <div class="card-icon bg-emerald-500/10 text-emerald-400">
+        <div class="card-icon bg-success/10 text-success">
           <ThumbsUp class="w-6 h-6" />
         </div>
         <h4 class="card-title">2. 互动与点赞</h4>
@@ -35,7 +35,7 @@
       </div>
 
       <div class="tutorial-card">
-        <div class="card-icon bg-purple-500/10 text-purple-400">
+        <div class="card-icon bg-[#a855f7]/10 text-[#a855f7]">
           <CalendarDays class="w-6 h-6" />
         </div>
         <h4 class="card-title">3. 关注排期与通知</h4>
@@ -276,25 +276,25 @@ onMounted(() => {
 
 <style scoped>
 .user-tutorial-container {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--bg-secondary, rgba(0, 0, 0, 0.4));
   border-radius: 16px;
   padding: 1.5rem;
   margin-top: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.05));
   backdrop-filter: blur(10px);
 }
 
 .tutorial-card {
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--bg-tertiary, rgba(255, 255, 255, 0.02));
+  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.05));
   border-radius: 12px;
   padding: 1.25rem;
   transition: all 0.3s ease;
 }
 
 .tutorial-card:hover {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
+  border-color: var(--border-tertiary, rgba(255, 255, 255, 0.1));
   transform: translateY(-2px);
 }
 
@@ -312,14 +312,14 @@ onMounted(() => {
   font-family: 'MiSans', sans-serif;
   font-weight: 800;
   font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary, rgba(255, 255, 255, 0.9));
   margin-bottom: 0.5rem;
 }
 
 .card-desc {
   font-family: 'MiSans', sans-serif;
   font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
   line-height: 1.6;
 }
 
@@ -387,14 +387,14 @@ onMounted(() => {
 .tour-title {
   font-size: 1.1rem;
   font-weight: 800;
-  color: #f4f4f5;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .tour-close-btn {
   background: none;
   border: none;
-  color: #71717a;
+  color: var(--text-tertiary);
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
@@ -403,11 +403,11 @@ onMounted(() => {
 }
 
 .tour-close-btn:hover {
-  color: #f4f4f5;
+  color: var(--text-primary);
 }
 
 .tour-body p {
-  color: #a1a1aa;
+  color: var(--text-secondary);
   font-size: 0.9rem;
   line-height: 1.5;
   margin: 0 0 1rem 0;
@@ -420,7 +420,7 @@ onMounted(() => {
 }
 
 .tour-progress {
-  color: #71717a;
+  color: var(--text-tertiary);
   font-size: 0.8rem;
   font-weight: 600;
 }
@@ -441,7 +441,7 @@ onMounted(() => {
 
 .tour-btn-secondary {
   background: var(--bg-tertiary, #27272a);
-  color: #d4d4d8;
+  color: var(--text-primary);
   border: 1px solid var(--border-secondary, #3f3f46);
 }
 
@@ -451,7 +451,7 @@ onMounted(() => {
 
 .tour-btn-primary {
   background: #3b82f6;
-  color: white;
+  color: var(--btn-primary-text);
   border: none;
 }