From b40c529cd81d49448a222cb3d2951c1da135b35d Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 19:08:51 +0800
Subject: [PATCH] feat(portal): implement structural content detail page with
 opera specific features and paywall

---
 .../portal/src/views/content/DetailView.vue   | 221 +++++++++++++++++-
 1 file changed, 215 insertions(+), 6 deletions(-)

diff --git a/frontend/portal/src/views/content/DetailView.vue b/frontend/portal/src/views/content/DetailView.vue
index 8039929..5f39172 100644
--- a/frontend/portal/src/views/content/DetailView.vue
+++ b/frontend/portal/src/views/content/DetailView.vue
@@ -1,10 +1,219 @@
 <template>
-  <div>
-    <!-- Placeholder for Content Detail View -->
-    <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-100 mx-auto max-w-screen-xl my-8 text-center">
-       <h1 class="text-2xl font-bold mb-4">Content Detail Page</h1>
-       <p class="text-slate-500">ID: {{ $route.params.id }}</p>
-       <p class="text-slate-400 mt-2">(Implementation pending based on PAGE_CONTENT_DETAIL.md)</p>
+  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 items-start">
+    
+    <!-- Main Content (Left 9) -->
+    <div class="lg:col-span-9 space-y-6">
+       <!-- Article Body -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8 md:p-12 relative overflow-hidden">
+          <!-- Header -->
+          <div class="mb-8 border-b border-slate-100 pb-8">
+             <div class="flex items-start justify-between gap-4 mb-4">
+                <h1 class="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
+                   <span class="text-primary-600 mr-2 text-2xl align-middle">[京剧]</span>
+                   《锁麟囊》春秋亭 · 二六
+                </h1>
+             </div>
+             
+             <!-- Opera Meta -->
+             <div class="flex flex-wrap gap-3 mb-6">
+                <span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">行当: 青衣</span>
+                <span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">定调: F大调</span>
+                <span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">板式: 二六</span>
+             </div>
+
+             <!-- Author & Tools -->
+             <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-10 h-10 rounded-full border border-slate-200">
+                   <div>
+                      <div class="font-bold text-slate-900 text-sm">梅派传人小林 <i class="pi pi-check-circle text-blue-500 text-xs"></i></div>
+                      <div class="text-xs text-slate-400">发布于 2025-12-24</div>
+                   </div>
+                </div>
+                <div class="flex items-center gap-2">
+                   <button @click="fontSize++" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="放大字体"><i class="pi pi-plus" style="font-size: 0.8rem"></i>A</button>
+                   <button @click="fontSize--" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="缩小字体"><i class="pi pi-minus" style="font-size: 0.8rem"></i>A</button>
+                   <div class="w-px h-4 bg-slate-200 mx-1"></div>
+                   <button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-share-alt"></i></button>
+                   <button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-bookmark"></i></button>
+                </div>
+             </div>
+          </div>
+
+          <!-- Content Render -->
+          <div class="prose prose-slate max-w-none text-slate-800" :style="{ fontSize: fontSize + 'px' }">
+             <!-- Video Player (Trial) -->
+             <div class="not-prose mb-8 rounded-xl overflow-hidden bg-black relative group aspect-video">
+                <div class="absolute inset-0 flex items-center justify-center text-white" v-if="!isPlaying">
+                   <button @click="isPlaying = true" class="w-16 h-16 bg-white/20 hover:bg-white/30 backdrop-blur rounded-full flex items-center justify-center transition-all">
+                      <i class="pi pi-play text-3xl ml-1"></i>
+                   </button>
+                </div>
+                <!-- Mock Video UI -->
+                <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent flex items-center gap-4 text-white">
+                   <button class="text-white hover:text-primary-400"><i class="pi pi-play-circle text-2xl"></i></button>
+                   <div class="flex-1 h-1.5 bg-white/30 rounded-full relative overflow-hidden group/bar cursor-pointer">
+                      <!-- Trial Segment (Highlight) -->
+                      <div class="absolute top-0 left-0 h-full bg-primary-500 w-[30%]"></div>
+                      <!-- Locked Segment -->
+                      <div class="absolute top-0 right-0 h-full bg-slate-500/50 w-[70%] flex items-center justify-center">
+                         <i class="pi pi-lock text-[10px]"></i>
+                      </div>
+                   </div>
+                   <span class="text-xs font-mono">01:30 / 05:00</span>
+                </div>
+                <!-- Paywall Overlay -->
+                <div v-if="showPaywall" class="absolute inset-0 bg-black/80 backdrop-blur-sm flex flex-col items-center justify-center text-center p-8 z-20">
+                   <h3 class="text-white text-xl font-bold mb-2">试看已结束</h3>
+                   <p class="text-slate-300 text-sm mb-6">购买后可观看完整内容 (包含高清视频 + 完整剧本)</p>
+                   <button class="px-8 py-3 bg-primary-600 text-white rounded-full font-bold hover:bg-primary-700 shadow-lg shadow-primary-900/50 transition-transform hover:scale-105 active:scale-95">
+                      ¥ 9.90 立即解锁
+                   </button>
+                </div>
+             </div>
+
+             <p>（白）听薛良一语，一似那金钟猛撞。</p>
+             <p>（唱）春秋亭外风雨暴，何处悲声破寂寥。</p>
+             
+             <!-- Script Block -->
+             <div class="pl-6 border-l-4 border-primary-200 bg-slate-50 p-4 rounded-r-lg my-6 not-prose">
+                <div class="flex gap-2">
+                   <span class="font-bold text-slate-900 flex-shrink-0">薛湘灵：</span>
+                   <span class="text-slate-700 leading-relaxed">
+                      隔帘只见一花轿，想必是新婚渡鹊桥。<br>
+                      吉日良辰当欢笑，为什么被珠泪抛？<br>
+                      此时却又明白了，<br>
+                      (白) 世上何尝尽富豪。<br>
+                      (唱) 也有饥寒悲怀抱，也有失意痛哭嚎啕。<br>
+                      轿内的人儿，命薄如纸，<br>
+                      苦煞了严亲，累煞了做娘的。
+                   </span>
+                </div>
+             </div>
+
+             <!-- Aria Block -->
+             <div class="flex items-center gap-4 p-4 border border-purple-100 bg-purple-50 rounded-xl my-6 not-prose cursor-pointer hover:bg-purple-100 transition-colors">
+                <div class="w-12 h-12 rounded-full bg-purple-600 text-white flex items-center justify-center flex-shrink-0 shadow-sm"><i class="pi pi-play"></i></div>
+                <div class="flex-1 min-w-0">
+                   <div class="font-bold text-slate-900 truncate">名家示范：流水板式要点</div>
+                   <div class="text-xs text-purple-600 flex gap-2 mt-1 font-mono">
+                      <span class="bg-white px-1.5 rounded border border-purple-200">Key: F</span>
+                      <span class="bg-white px-1.5 rounded border border-purple-200">Beat: 1/4</span>
+                   </div>
+                </div>
+                <span class="text-xs text-slate-500 font-mono">00:45</span>
+             </div>
+
+             <p>在这里，程派独特的“嗽音”运用得淋漓尽致，表现了湘灵对贫富无常的深刻感悟...</p>
+             
+             <!-- Paywall Mask for Text -->
+             <div class="relative mt-8 pt-20 pb-8 text-center" v-if="!isPurchased">
+                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/90 to-white z-10"></div>
+                <div class="relative z-20">
+                   <button class="px-10 py-3.5 bg-primary-600 text-white rounded-full font-bold text-lg hover:bg-primary-700 shadow-xl shadow-primary-100 transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto">
+                      <i class="pi pi-lock"></i> 购买解锁全文 ¥ 9.90
+                   </button>
+                   <p class="text-xs text-slate-400 mt-3">支持微信 / 支付宝</p>
+                </div>
+             </div>
+          </div>
+       </div>
+
+       <!-- Comments Section -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
+          <div class="flex items-center justify-between mb-6">
+             <h2 class="text-xl font-bold text-slate-900">全部评论 (24)</h2>
+             <div class="flex text-sm font-bold text-slate-400">
+                <button class="text-slate-900 mr-4">最新</button>
+                <button class="hover:text-slate-900">热门</button>
+             </div>
+          </div>
+          
+          <div class="flex gap-4 mb-8">
+             <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=User" class="w-10 h-10 rounded-full bg-slate-100">
+             <div class="flex-1">
+                <textarea rows="2" class="w-full p-3 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none resize-none transition-colors" placeholder="写下你的想法..."></textarea>
+                <div class="flex justify-end mt-2">
+                   <button class="px-6 py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 text-sm">发布</button>
+                </div>
+             </div>
+          </div>
+
+          <div class="space-y-6">
+             <div v-for="i in 3" :key="i" class="flex gap-4">
+                <img :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`" class="w-10 h-10 rounded-full bg-slate-100">
+                <div>
+                   <div class="flex items-center gap-2 mb-1">
+                      <span class="font-bold text-slate-900 text-sm">戏迷_{{ i*92 }}</span>
+                      <span class="text-xs text-slate-400">1小时前</span>
+                   </div>
+                   <p class="text-slate-700 text-sm leading-relaxed mb-2">这段唱腔真是经典，张火丁老师的演绎太有味道了，反复听了十几遍！</p>
+                   <div class="flex gap-4 text-xs text-slate-500">
+                      <button class="hover:text-primary-600 flex items-center gap-1"><i class="pi pi-thumbs-up"></i> 12</button>
+                      <button class="hover:text-primary-600">回复</button>
+                   </div>
+                </div>
+             </div>
+          </div>
+       </div>
     </div>
+
+    <!-- Sidebar (Right 3) - Sticky -->
+    <div class="lg:col-span-3 space-y-6 sticky top-24 h-fit">
+       <!-- Author Card -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 text-center">
+          <div class="w-20 h-20 rounded-full border-4 border-slate-50 mx-auto -mt-10 mb-4 bg-white shadow-sm overflow-hidden">
+             <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-full h-full object-cover">
+          </div>
+          <h3 class="font-bold text-slate-900 text-lg">梅派传人小林</h3>
+          <p class="text-xs text-slate-500 mt-1 mb-4">专注京剧程派艺术传承与推广</p>
+          <div class="flex justify-center gap-4 text-sm font-bold text-slate-900 mb-6">
+             <div>125 <span class="text-xs text-slate-400 font-normal block">内容</span></div>
+             <div>1.2w <span class="text-xs text-slate-400 font-normal block">关注</span></div>
+          </div>
+          <div class="grid grid-cols-2 gap-3">
+             <button class="py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200">关注</button>
+             <button class="py-2 border border-slate-200 text-slate-700 rounded-lg font-bold hover:bg-slate-50">私信</button>
+          </div>
+       </div>
+
+       <!-- TOC -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+          <h3 class="font-bold text-slate-900 mb-4">目录</h3>
+          <div class="space-y-3 text-sm relative">
+             <!-- Active Line -->
+             <div class="absolute left-0 top-2 bottom-2 w-0.5 bg-slate-100"></div>
+             
+             <a href="#" class="block pl-4 border-l-2 border-primary-600 text-primary-600 font-bold -ml-[1px]">唱段背景介绍</a>
+             <a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">发音技巧解析</a>
+             <a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">逐句示范 (00:45)</a>
+             <a href="#" class="block pl-4 border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300">完整伴奏下载</a>
+          </div>
+       </div>
+
+       <!-- Related -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+          <h3 class="font-bold text-slate-900 mb-4">相关推荐</h3>
+          <div class="space-y-4">
+             <div v-for="i in 3" :key="i" class="flex gap-3 group cursor-pointer">
+                <img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-20 h-14 object-cover rounded bg-slate-100 flex-shrink-0">
+                <div>
+                   <h4 class="text-sm font-bold text-slate-900 line-clamp-2 group-hover:text-primary-600 leading-snug">程派《荒山泪》夜织选段</h4>
+                   <span class="text-xs text-slate-400 mt-1 block">8.5k 阅读</span>
+                </div>
+             </div>
+          </div>
+       </div>
+    </div>
+
   </div>
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+const fontSize = ref(18); // Default 18px
+const isPlaying = ref(false);
+const showPaywall = ref(true); // Simulate trial ended
+const isPurchased = ref(false); // Simulate paid content
+</script>
\ No newline at end of file