---
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 都能正常显示