feat(mini-program): 剧本卡片支持 Markdown 渲染

实现内容:
- 扩展 Markdown 组件支持三级标题 (###) 和粗体 (**text**)
- ScriptView.vue 卡片摘要使用 Markdown 组件渲染
- 新增 ScriptDetailView.vue 剧本详情页，展示完整 Markdown 内容
- 点击卡片可跳转查看详情，"路径映射"按钮使用@click.stop 避免事件冒泡

修改文件:
- components/Markdown.vue: 添加 h3 标题、粗体解析和样式
- pages/main/ScriptView.vue: 导入 Markdown 组件，修改摘要渲染方式，添加跳转逻辑
- pages/main/ScriptDetailView.vue: 新建详情页，展示剧本完整内容
- pages.json: 注册 ScriptDetailView 页面

解决 issues: 小程序"创造未来"页面剧本内容以纯文本显示，
            无法正确渲染 Markdown 格式（标题、列表、粗体等）

mini-program/src/components/Markdown.vue

@@ -4,7 +4,10 @@
       <!-- 分割线 -->
       <view v-if="block.type === 'hr'" class="markdown-hr"></view>
 
-      <!-- 标题 -->
+      <!-- 三级标题 -->
+      <text v-else-if="block.type === 'h3'" class="markdown-h3">{{ block.content }}</text>
+
+      <!-- 四级标题 -->
       <text v-else-if="block.type === 'h4'" class="markdown-h4">{{ block.content }}</text>
 
       <!-- 列表项 -->
@@ -13,8 +16,10 @@
         <text class="li-content">{{ block.content }}</text>
       </view>
 
-      <!-- 普通段落 -->
-      <text v-else class="markdown-p">{{ block.content }}</text>
+      <!-- 普通段落（处理粗体） -->
+      <text v-else class="markdown-p">
+        <text v-for="(segment, segIndex) in block.segments" :key="segIndex" :class="segment.bold ? 'bold' : ''">{{ segment.text }}</text>
+      </text>
     </view>
   </view>
 </template>
@@ -48,6 +53,13 @@ const parsedBlocks = computed(() => {
       continue
     }
 
+    // 三级标题 ###
+    const h3Match = trimmed.match(/^###\s+(.+)/)
+    if (h3Match) {
+      blocks.push({ type: 'h3', content: h3Match[1] })
+      continue
+    }
+
     // 四级标题 ####
     const h4Match = trimmed.match(/^####\s+(.+)/)
     if (h4Match) {
@@ -62,12 +74,43 @@ const parsedBlocks = computed(() => {
       continue
     }
 
-    // 普通段落
-    blocks.push({ type: 'p', content: trimmed })
+    // 普通段落（处理粗体 **text**）
+    const segments = parseBoldText(trimmed)
+    blocks.push({ type: 'p', content: trimmed, segments })
   }
 
   return blocks
 })
+
+// 解析粗体文本 **text**
+const parseBoldText = (text) => {
+  const segments = []
+  const boldRegex = /\*\*(.+?)\*\*/g
+  let lastIndex = 0
+  let match
+
+  while ((match = boldRegex.exec(text)) !== null) {
+    // 添加粗体前的普通文本
+    if (match.index > lastIndex) {
+      segments.push({ text: text.slice(lastIndex, match.index), bold: false })
+    }
+    // 添加粗体文本（去掉 ** 标记）
+    segments.push({ text: match[1], bold: true })
+    lastIndex = match.index + match[0].length
+  }
+
+  // 添加剩余的普通文本
+  if (lastIndex < text.length) {
+    segments.push({ text: text.slice(lastIndex), bold: false })
+  }
+
+  // 如果没有粗体，返回单个段落
+  if (segments.length === 0) {
+    segments.push({ text, bold: false })
+  }
+
+  return segments
+}
 </script>
 
 <style scoped>
@@ -90,6 +133,15 @@ const parsedBlocks = computed(() => {
 }
 
 /* 标题 */
+.markdown-h3 {
+  display: block;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: rgba(243, 232, 255, 0.95);
+  margin: 20rpx 0 12rpx 0;
+  line-height: 1.4;
+}
+
 .markdown-h4 {
   display: block;
   font-size: 28rpx;
@@ -131,4 +183,10 @@ const parsedBlocks = computed(() => {
   line-height: 1.6;
   word-break: break-all;
 }
+
+/* 粗体文本 */
+.bold {
+  font-weight: 600;
+  color: rgba(243, 232, 255, 0.9);
+}
 </style>

mini-program/src/pages.json

@@ -24,6 +24,13 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/main/ScriptDetailView",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "剧本详情"
+			}
+		},
 		{
 			"path": "pages/profile/index",
 			"style": {

mini-program/src/pages/main/ScriptDetailView.vue

@@ -0,0 +1,226 @@
+<template>
+  <view class="detail-view">
+    <view class="detail-header">
+      <view class="header-left" @click="goBack">
+        <text class="back-icon">←</text>
+        <text class="back-text">返回</text>
+      </view>
+      <text class="detail-title">{{ script?.title || '剧本详情' }}</text>
+    </view>
+
+    <scroll-view class="detail-content" scroll-y>
+      <view class="content-container">
+        <!-- 基本信息卡片 -->
+        <view class="info-card glass-card">
+          <view class="info-row">
+            <text class="info-label">主题</text>
+            <text class="info-value">{{ script?.theme || '-' }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">风格</text>
+            <text class="info-value">{{ script?.style || '-' }}</text>
+          </view>
+          <view class="info-row">
+            <text class="info-label">篇幅</text>
+            <text class="info-value">{{ script?.length || '-' }}</text>
+          </view>
+        </view>
+
+        <!-- 完整内容 -->
+        <view class="full-content glass-card">
+          <view class="content-header">
+            <text class="content-icon">📖</text>
+            <text class="content-label">完整剧本</text>
+          </view>
+          <Markdown :content="fullContent" />
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAppStore } from '../../stores/app.js'
+import Markdown from '../../components/Markdown.vue'
+
+const store = useAppStore()
+const script = ref(null)
+const fullContent = ref('')
+
+const scripts = computed(() => store.scripts || [])
+
+onMounted(() => {
+  // 获取剧本 ID
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  const scriptId = currentPage.options.id
+
+  // 从 store 获取剧本详情
+  if (scriptId) {
+    script.value = scripts.value.find(s => s.id === scriptId)
+    if (script.value?.plotJson?.fullContent) {
+      fullContent.value = script.value.plotJson.fullContent
+    } else {
+      fullContent.value = '暂无完整内容'
+    }
+  }
+})
+
+const goBack = () => {
+  uni.navigateBack()
+}
+</script>
+
+<style scoped>
+.detail-view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
+}
+
+/* ==================== 顶部导航栏 ==================== */
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  background: rgba(168, 85, 247, 0.1);
+  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 24rpx;
+  background: rgba(168, 85, 247, 0.15);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+}
+
+.back-icon {
+  font-size: 32rpx;
+  color: #C084FC;
+  font-weight: 600;
+}
+
+.back-text {
+  font-size: 24rpx;
+  color: rgba(243, 232, 255, 0.8);
+}
+
+.detail-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: rgba(243, 232, 255, 0.9);
+  font-family: 'Cinzel', 'Inter', serif;
+}
+
+/* ==================== 滚动内容区 ==================== */
+.detail-content {
+  flex: 1;
+  padding: 32rpx;
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+  padding-bottom: 40rpx;
+}
+
+/* ==================== 信息卡片 ==================== */
+.info-card {
+  padding: 32rpx;
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(232, 121, 249, 0.08));
+  border: 1px solid rgba(168, 85, 247, 0.25);
+  border-radius: 40rpx;
+  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05),
+              0 4rpx 20rpx rgba(168, 85, 247, 0.08);
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 22rpx;
+  color: rgba(192, 132, 252, 0.7);
+  font-weight: 600;
+  letter-spacing: 2rpx;
+  text-transform: uppercase;
+}
+
+.info-value {
+  font-size: 26rpx;
+  color: rgba(243, 232, 255, 0.9);
+}
+
+/* ==================== 完整内容卡片 ==================== */
+.full-content {
+  padding: 40rpx 32rpx;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  border-radius: 40rpx;
+  min-height: 400rpx;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 32rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 2rpx solid rgba(168, 85, 247, 0.2);
+}
+
+.content-icon {
+  font-size: 36rpx;
+  filter: drop-shadow(0 0 8rpx rgba(192, 132, 252, 0.6));
+}
+
+.content-label {
+  font-size: 26rpx;
+  color: rgba(192, 132, 252, 0.8);
+  font-weight: 600;
+  letter-spacing: 4rpx;
+  text-transform: uppercase;
+}
+
+/* Markdown 内容间距调整 */
+.full-content .markdown-container {
+  gap: 24rpx;
+}
+
+.full-content .markdown-h3 {
+  margin-top: 32rpx;
+  margin-bottom: 16rpx;
+  font-size: 32rpx;
+}
+
+.full-content .markdown-h4 {
+  margin-top: 24rpx;
+  margin-bottom: 12rpx;
+}
+
+.full-content .markdown-p {
+  font-size: 26rpx;
+  line-height: 1.8;
+  color: rgba(243, 232, 255, 0.85);
+}
+
+.full-content .markdown-hr {
+  margin: 40rpx 0;
+}
+</style>

mini-program/src/pages/main/ScriptView.vue

@@ -2,7 +2,7 @@
   <view class="script-view">
     <text class="page-title font-serif">剧本生成器</text>
 
-    <view class="section-card glass-card">
+    <view class="section-card glass-card-gold">
       <view class="section-header">
         <text class="section-title">我的基础人设</text>
         <text class="section-hint">可自由修改</text>
@@ -36,6 +36,24 @@
           placeholder="如：巅峰重现、治愈之旅、赛博觉醒..."
           v-model="scriptConfig.theme"
         />
+        <!-- 灵感气泡 -->
+        <view class="hint-container">
+          <view class="hint-header">
+            <text class="hint-icon">✨</text>
+            <text class="hint-label">灵感气泡</text>
+          </view>
+          <view class="hint-list">
+            <view
+              v-for="(hint, index) in scriptHints"
+              :key="index"
+              class="hint-chip"
+              :style="{ animationDelay: index * 0.1 + 's' }"
+              @click="addHint(hint)"
+            >
+              <text>{{ hint }}</text>
+            </view>
+          </view>
+        </view>
       </view>
 
       <view class="input-group">
@@ -127,17 +145,20 @@
         :key="script.id"
         class="script-card glass-card"
         :class="{ selected: script.isSelected }"
+        @click="viewScriptDetail(script)"
       >
         <view class="script-header">
           <text class="script-title">{{ script.title }}</text>
           <text class="script-persona">{{ script.theme || '追光者' }}</text>
         </view>
 
-        <text class="script-summary" lines="3">{{ getScriptSummary(script) }}</text>
+        <view class="script-summary">
+          <Markdown :content="getScriptSummary(script)" />
+        </view>
 
         <view class="script-footer">
           <text class="script-style">{{ script.style || '风格' }}</text>
-          <button class="select-btn" @click="selectScript(script.id)">
+          <button class="select-btn" @click.stop="selectScript(script.id)">
             路径映射 →
           </button>
         </view>
@@ -159,6 +180,7 @@
 <script setup>
 import { ref, computed, reactive, onMounted } from 'vue'
 import { useAppStore } from '../../stores/app.js'
+import Markdown from '../../components/Markdown.vue'
 
 const store = useAppStore()
 
@@ -168,6 +190,7 @@ const npcRoleOptions = ['伙伴', '宿敌', '导师', '挚爱', '下属', '路
 const npcRelationOptions = ['信任', '对立', '暧昧', '敬畏', '背叛', '守护']
 const scriptStyles = ['爽文', '治愈', '热血', '玄幻', '职场', '赛博']
 const scriptLengths = ['短篇', '中篇', '长篇', '史诗']
+const scriptHints = ['觉醒时刻', '命运转折', '自我救赎', '巅峰重现', '治愈之旅', '星际穿越', '破茧成蝶', '时光倒流']
 
 const registrationData = computed(() => store.registrationData || {})
 const scripts = computed(() => store.scripts || [])
@@ -232,6 +255,14 @@ const removeNpc = (index) => {
   customNpcs.value.splice(index, 1)
 }
 
+const addHint = (hint) => {
+  if (scriptConfig.theme) {
+    scriptConfig.theme += ' · ' + hint
+  } else {
+    scriptConfig.theme = hint
+  }
+}
+
 const generateScript = async () => {
   if (!scriptConfig.theme || isGenerating.value) return
 
@@ -256,9 +287,31 @@ const selectScript = async (id) => {
   uni.$emit('switchTab', 'path')
 }
 
+const viewScriptDetail = (script) => {
+  uni.navigateTo({
+    url: `/pages/main/ScriptDetailView?id=${script.id}`
+  })
+}
+
 const getScriptSummary = (script) => {
-  const text = script.summary || script.content || ''
-  return text.replace(/\s+/g, ' ').trim()
+  // 优先使用 summary 字段
+  if (script.summary) {
+    return script.summary
+  }
+
+  // 从 fullContent 提取前 200 字符
+  const fullContent = script.plotJson?.fullContent || ''
+  if (fullContent) {
+    // 提取内容，去掉 Markdown 符号
+    return fullContent
+      .split('\n')
+      .filter(line => line.trim())
+      .slice(0, 5)  // 取前 5 行
+      .join('\n')
+      .slice(0, 200) + '...'
+  }
+
+  return '暂无摘要'
 }
 
 onMounted(async () => {
@@ -274,35 +327,36 @@ onMounted(async () => {
   flex-direction: column;
   gap: 20rpx;
   min-height: 100%;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 .page-title {
-  font-size: 32rpx;
+  font-size: 36rpx;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.9);
   letter-spacing: 4rpx;
+  font-family: 'Cinzel', 'Inter', serif;
 }
 
 /* 人设卡片 - 金色玻璃态 */
 .section-card {
-  padding: 32rpx; /* 20rpx → 32rpx */
-  border-radius: 40rpx; /* 28rpx → 40rpx */
-  /* 金色玻璃态背景 */
+  padding: 32rpx;
+  border-radius: 40rpx;
   background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
   border: 1px solid rgba(168, 85, 247, 0.3);
   box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08), 0 4rpx 20rpx rgba(168, 85, 247, 0.1);
   transition: all 0.3s ease;
-  margin-bottom: 32rpx; /* 新增 */
+  margin-bottom: 32rpx;
 }
 
 .section-card:active {
   transform: scale(0.98);
-  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.1), 0 2rpx 12rpx rgba(168, 85, 247, 0.05);
+  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05), 0 2rpx 12rpx rgba(168, 85, 247, 0.05);
 }
 
 .glass-card-main {
-  padding: 32rpx; /* 24rpx → 32rpx */
-  border-radius: 40rpx; /* 56rpx → 40rpx (统一标准) */
+  padding: 32rpx;
+  border-radius: 40rpx;
 }
 
 .section-header {
@@ -313,7 +367,7 @@ onMounted(async () => {
 }
 
 .section-title {
-  font-size: 20rpx; /* 17rpx → 20rpx */
+  font-size: 20rpx;
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
@@ -321,7 +375,7 @@ onMounted(async () => {
 }
 
 .section-hint {
-  font-size: 15rpx; /* 13rpx → 15rpx */
+  font-size: 15rpx;
   color: rgba(255, 255, 255, 0.35);
   font-style: italic;
 }
@@ -329,18 +383,18 @@ onMounted(async () => {
 .profile-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 24rpx; /* 10rpx → 24rpx */
+  gap: 24rpx;
 }
 
 .glass-input, .glass-picker {
   width: 100%;
-  height: 88rpx; /* 64rpx → 88rpx */
+  height: 88rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 32rpx; /* 20rpx → 32rpx */
-  padding: 0 24rpx; /* 16rpx → 24rpx */
+  border-radius: 32rpx;
+  padding: 0 24rpx;
   color: rgba(255, 255, 255, 0.9);
-  font-size: 28rpx; /* 18rpx → 28rpx */
+  font-size: 28rpx;
   box-sizing: border-box;
 }
 
@@ -349,12 +403,12 @@ onMounted(async () => {
 }
 
 .theme-input {
-  height: 88rpx; /* 72rpx → 88rpx */
-  font-size: 28rpx; /* 19rpx → 28rpx */
+  height: 88rpx;
+  font-size: 28rpx;
 }
 
 .picker-value {
-  line-height: 88rpx; /* 64rpx → 88rpx */
+  line-height: 88rpx;
   color: rgba(255, 255, 255, 0.9);
 }
 
@@ -362,14 +416,82 @@ onMounted(async () => {
   margin-bottom: 24rpx;
 }
 
+/* 灵感气泡容器 */
+.hint-container {
+  margin-top: 16rpx;
+  padding: 24rpx;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  border-radius: 32rpx;
+  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.05);
+}
+
+.hint-header {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.hint-icon {
+  font-size: 24rpx;
+  filter: drop-shadow(0 0 8rpx rgba(192, 132, 252, 0.6));
+}
+
+.hint-label {
+  font-size: 18rpx;
+  color: rgba(192, 132, 252, 0.8);
+  font-weight: 600;
+  letter-spacing: 4rpx;
+  text-transform: uppercase;
+}
+
+.hint-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+}
+
+.hint-chip {
+  padding: 10rpx 20rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 24rpx;
+  font-size: 20rpx;
+  color: rgba(243, 232, 255, 0.8);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8rpx);
+  transition: all 0.2s ease;
+  animation: bubble-float 5s ease-in-out infinite;
+}
+
+.hint-chip:active {
+  background: rgba(168, 85, 247, 0.25);
+  border-color: rgba(168, 85, 247, 0.5);
+  transform: scale(0.95);
+  box-shadow: 0 8rpx 15rpx rgba(168, 85, 247, 0.3);
+}
+
+@keyframes bubble-float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-4rpx) rotate(1deg);
+  }
+  66% {
+    transform: translateY(2rpx) rotate(-1deg);
+  }
+}
+
 .label {
   display: block;
-  font-size: 20rpx; /* 17rpx → 20rpx */
+  font-size: 20rpx;
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
   text-transform: uppercase;
-  margin-bottom: 12rpx; /* 10rpx → 12rpx */
+  margin-bottom: 12rpx;
 }
 
 .npc-header {
@@ -398,7 +520,7 @@ onMounted(async () => {
 
 .npc-form {
   display: grid;
-  grid-template-columns: 1fr 1fr; /* 3 列 → 2 列 */
+  grid-template-columns: 1fr 1fr;
   gap: 16rpx;
 }
 
@@ -408,81 +530,81 @@ onMounted(async () => {
 }
 
 .npc-input, .npc-picker {
-  height: 88rpx; /* 60rpx → 88rpx */
-  padding: 0 24rpx; /* 14rpx → 24rpx */
-  font-size: 28rpx; /* 17rpx → 28rpx */
+  height: 88rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
 }
 
 .npc-picker .picker-value {
-  line-height: 88rpx; /* 60rpx → 88rpx */
-  font-size: 28rpx; /* 17rpx → 28rpx */
+  line-height: 88rpx;
+  font-size: 28rpx;
 }
 
 .glass-textarea {
   width: 100%;
-  height: 120rpx; /* 88rpx → 120rpx */
+  height: 120rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 32rpx; /* 20rpx → 32rpx */
-  padding: 20rpx; /* 14rpx → 20rpx */
+  border-radius: 32rpx;
+  padding: 20rpx;
   color: rgba(255, 255, 255, 0.9);
-  font-size: 24rpx; /* 17rpx → 24rpx */
+  font-size: 24rpx;
   box-sizing: border-box;
 }
 
 .npc-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx; /* 10rpx → 16rpx */
+  gap: 16rpx;
 }
 
 .npc-tag {
   background: rgba(168, 85, 247, 0.1);
   border: 1px solid rgba(168, 85, 247, 0.3);
-  border-radius: 24rpx; /* 20rpx → 24rpx */
-  padding: 10rpx 20rpx; /* 6rpx 16rpx → 10rpx 20rpx */
-  font-size: 20rpx; /* 18rpx → 20rpx */
+  border-radius: 24rpx;
+  padding: 10rpx 20rpx;
+  font-size: 20rpx;
   color: rgba(243, 232, 255, 0.8);
   display: flex;
   align-items: center;
-  gap: 8rpx; /* 6rpx → 8rpx */
+  gap: 8rpx;
 }
 
 .delete-btn {
   color: rgba(255, 255, 255, 0.4);
-  font-size: 24rpx; /* 20rpx → 24rpx */
-  padding: 0 4rpx; /* 0 2rpx → 0 4rpx */
+  font-size: 24rpx;
+  padding: 0 4rpx;
 }
 
 .params-section {
-  margin-bottom: 32rpx; /* 24rpx → 32rpx */
+  margin-bottom: 32rpx;
 }
 
 .param-section-label {
   display: block;
-  font-size: 20rpx; /* 17rpx → 20rpx */
+  font-size: 20rpx;
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
   letter-spacing: 3rpx;
   text-transform: uppercase;
-  margin-bottom: 16rpx; /* 12rpx → 16rpx */
+  margin-bottom: 16rpx;
 }
 
 .params-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 24rpx; /* 16rpx → 24rpx */
+  gap: 24rpx;
 }
 
 .param-group {
   display: flex;
   flex-direction: column;
-  gap: 12rpx; /* 8rpx → 12rpx */
+  gap: 12rpx;
   min-width: 0;
 }
 
 .param-sublabel {
-  font-size: 17rpx; /* 15rpx → 17rpx */
+  font-size: 17rpx;
   color: rgba(255, 255, 255, 0.4);
   margin-left: 4rpx;
 }
@@ -490,17 +612,18 @@ onMounted(async () => {
 .param-options {
   display: flex;
   flex-wrap: wrap;
-  gap: 10rpx; /* 6rpx → 10rpx */
+  gap: 10rpx;
 }
 
 .param-option {
-  padding: 12rpx 20rpx; /* 6rpx 12rpx → 12rpx 20rpx */
+  padding: 12rpx 20rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20rpx; /* 18rpx → 20rpx */
-  font-size: 20rpx; /* 17rpx → 20rpx */
+  border-radius: 20rpx;
+  font-size: 20rpx;
   color: rgba(255, 255, 255, 0.4);
   white-space: nowrap;
+  transition: all 0.2s ease;
 }
 
 .param-option.active {
@@ -513,23 +636,22 @@ onMounted(async () => {
 
 .generate-btn {
   width: 100%;
-  height: 96rpx; /* 80rpx → 96rpx */
-  border-radius: 40rpx; /* 28rpx → 40rpx */
+  height: 96rpx;
+  border-radius: 40rpx;
   box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
-  margin-top: 24rpx; /* 8rpx → 24rpx */
+  margin-top: 24rpx;
 }
 
 .scripts-list {
   display: flex;
   flex-direction: column;
-  gap: 24rpx; /* 16rpx → 24rpx */
+  gap: 24rpx;
 }
 
 .script-card {
-  padding: 32rpx; /* 20rpx → 32rpx */
+  padding: 32rpx;
   border-left: 3rpx solid transparent;
-  border-radius: 40rpx; /* 28rpx → 40rpx */
-  /* Crown 图标装饰 */
+  border-radius: 40rpx;
   position: relative;
 }
 
@@ -550,30 +672,30 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 14rpx; /* 10rpx → 14rpx */
+  margin-bottom: 14rpx;
 }
 
 .script-title {
-  font-size: 32rpx; /* 26rpx → 32rpx */
+  font-size: 32rpx;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.9);
 }
 
 .script-persona {
-  font-size: 17rpx; /* 15rpx → 17rpx */
+  font-size: 17rpx;
   color: rgba(168, 85, 247, 0.6);
   background: rgba(168, 85, 247, 0.1);
-  padding: 6rpx 12rpx; /* 5rpx 10rpx → 6rpx 12rpx */
-  border-radius: 12rpx; /* 10rpx → 12rpx */
+  padding: 6rpx 12rpx;
+  border-radius: 12rpx;
   border: 1px solid rgba(168, 85, 247, 0.2);
 }
 
 .script-summary {
   display: block;
-  font-size: 24rpx; /* 20rpx → 24rpx */
+  font-size: 24rpx;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.5;
-  margin-bottom: 16rpx; /* 14rpx → 16rpx */
+  margin-bottom: 16rpx;
 }
 
 .script-footer {
@@ -583,12 +705,12 @@ onMounted(async () => {
 }
 
 .script-style {
-  font-size: 18rpx; /* 16rpx → 18rpx */
+  font-size: 18rpx;
   color: #C084FC;
 }
 
 .select-btn {
-  font-size: 20rpx; /* 18rpx → 20rpx */
+  font-size: 20rpx;
   color: #C084FC;
   font-weight: 600;
   background: transparent;
@@ -682,13 +804,6 @@ onMounted(async () => {
   50% { opacity: 1; }
 }
 
-.generating-text {
-  font-size: 20rpx;
-  color: rgba(192, 132, 252, 0.6);
-  font-style: italic;
-  letter-spacing: 2rpx;
-}
-
 /* 超小屏幕适配 - 375px 断点 */
 @media (max-width: 375px) {
   .params-container {