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

author, created_at, purpose

author	created_at	purpose
Peanut	2026-04-07	优化"创造未来"页面生成按钮样式，与原型图完全一致

小程序"生成平行人生剧本"按钮样式优化设计

问题背景

当前 ScriptView.vue 中的"生成平行人生剧本"按钮存在以下问题：

1. 文字没有垂直居中，视觉上偏上或偏下
2. 缺少渐变背景，使用纯色而非原版的渐变效果
3. 圆角与原型不一致
4. 整体视觉效果与原型有较大差异

原型参考

原型代码（mini-program-prototype/components.js）：

<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	居中对齐

设计方案

当前代码问题

/* 当前样式 - 缺少关键属性 */
.generate-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 40rpx;  /* 问题：圆角过大 */
  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
  margin-top: 24rpx;
  /* 缺失：渐变背景、文字居中 */
}

修改后样式

.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 全局样式（如有需要）

验收标准

• 按钮文字在按钮内垂直和水平居中
• 按钮背景为紫色渐变（#9333EA → #7C3AED）
• 圆角为 32rpx
• 高度保持 96rpx
• 点击时有缩放反馈效果（scale 0.98）
• 禁用状态有透明度降低效果

注意事项

1. 不要破坏现有功能：保持按钮的 loading、disabled 状态逻辑
2. 保持代码一致性：使用现有的 CSS 变量和命名约定
3. 小程序兼容性：确保样式在微信小程序和 H5 都能正常显示