docs: 添加生成剧本按钮样式优化设计文档

设计内容:
- 添加渐变背景 linear-gradient(135deg, #9333EA 0%, #7C3AED 100%)
- 文字居中使用 flex + align-items/justify-content
- 圆角调整为 32rpx（与原型 rounded-2xl 一致）
- 保持高度 96rpx

解决 issues: 小程序"创造未来"页面生成按钮文字不居中，
            缺少渐变背景，与原型图不一致

docs/superpowers/specs/2026-04-07-script-generate-btn-design.md

@@ -0,0 +1,118 @@
+---
+author: Peanut
+created_at: 2026-04-07
+purpose: 优化"创造未来"页面生成按钮样式，与原型图完全一致
+---
+
+# 小程序"生成平行人生剧本"按钮样式优化设计
+
+## 问题背景
+
+当前 ScriptView.vue 中的"生成平行人生剧本"按钮存在以下问题：
+1. 文字没有垂直居中，视觉上偏上或偏下
+2. 缺少渐变背景，使用纯色而非原版的渐变效果
+3. 圆角与原型不一致
+4. 整体视觉效果与原型有较大差异
+
+## 原型参考
+
+**原型代码**（mini-program-prototype/components.js）：
+```html
+<button id="gen-script" class="w-full py-4 mt-2 bg-gradient-to-r from-purple-500 to-violet-500 text-white rounded-2xl font-bold text-sm shadow-[0_8px_20px_rgba(168,85,247,0.3)] flex items-center justify-center gap-2 active:scale-95 transition-all">
+    生成平行人生剧本
+</button>
+```
+
+**原型样式解析**：
+| 属性 | 原型值 | 换算为 rpx |
+|------|--------|-----------|
+| 宽度 | w-full | 100% |
+| 高度 | py-4 (3rem) | ≈ 96rpx |
+| 背景 | bg-gradient-to-r from-purple-500 to-violet-500 | 渐变 |
+| 圆角 | rounded-2xl (1rem) | ≈ 32rpx |
+| 字号 | text-sm (0.875rem) | ≈ 28rpx |
+| 阴影 | shadow-[0_8px_20px_rgba(168,85,247,0.3)] | 保持一致 |
+| 文字对齐 | flex items-center justify-center | 居中对齐 |
+
+## 设计方案
+
+### 当前代码问题
+
+```css
+/* 当前样式 - 缺少关键属性 */
+.generate-btn {
+  width: 100%;
+  height: 96rpx;
+  border-radius: 40rpx;  /* 问题：圆角过大 */
+  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
+  margin-top: 24rpx;
+  /* 缺失：渐变背景、文字居中 */
+}
+```
+
+### 修改后样式
+
+```css
+.generate-btn {
+  /* 尺寸 */
+  width: 100%;
+  height: 96rpx;
+  
+  /* 背景渐变 - 与原型一致 */
+  background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
+  
+  /* 圆角 - 与原型 rounded-2xl 一致 */
+  border-radius: 32rpx;
+  
+  /* 阴影 */
+  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
+  
+  /* 外边距 */
+  margin-top: 24rpx;
+  
+  /* 文字居中 - 核心修复 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  /* 文字样式 */
+  color: #ffffff !important;
+  font-size: 28rpx;
+  font-weight: 600;
+  
+  /* 过渡动画 */
+  transition: all 0.2s ease;
+}
+
+.generate-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+.generate-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+### 修改文件
+
+| 文件 | 修改内容 |
+|------|----------|
+| `mini-program/src/pages/main/ScriptView.vue` | 更新 `.generate-btn` 样式 |
+| `mini-program/src/App.vue` | 检查并更新 `.btn-primary` 全局样式（如有需要） |
+
+### 验收标准
+
+- [x] 按钮文字在按钮内垂直和水平居中
+- [x] 按钮背景为紫色渐变（#9333EA → #7C3AED）
+- [x] 圆角为 32rpx
+- [x] 高度保持 96rpx
+- [x] 点击时有缩放反馈效果（scale 0.98）
+- [x] 禁用状态有透明度降低效果
+
+## 注意事项
+
+1. **不要破坏现有功能**：保持按钮的 loading、disabled 状态逻辑
+2. **保持代码一致性**：使用现有的 CSS 变量和命名约定
+3. **小程序兼容性**：确保样式在微信小程序和 H5 都能正常显示