xsl
1b534f5133
- 预览区 3:4 大图(437vp/占屏57%) → 固定 300vp + Contain 不裁切（用户要求预览变小且不裁切） - 新增 ImageViewer 全屏查看器：点预览/生成完成自动弹出；原图|效果图页签与预览角标共用 showOriginal；保存走三态口径 - 衣橱网格双列带文字行 → 三列纯图卡（104×139，品类图内左下角标），首屏可见 6 卡 vs 原 3 卡 - 试穿胶囊 52×120→44×96、品类 chips 高 32→28、角标 12→11 - 设计稿：docs/美搭配与美学诊断-UI规范.md §10（含 7 条冲突修订表与 8 条验收）
37 lines
1.1 KiB
Plaintext
37 lines
1.1 KiB
Plaintext
/**
|
||
* CapsuleButton —— 「试穿」黑色竖向胶囊（《美搭配与美学诊断-UI规范》§3/§7，需求 v2 §3.2）。
|
||
*
|
||
* 形态：44×96 竖条（v2.1 §10.4 紧凑化），黑底白字 14（COLOR_BLACK_CAPSULE），
|
||
* 右缘悬浮垂直居中；未选上衣/未传本人照/生成中置灰（§2 主按钮禁用态：
|
||
* 底 COLOR_DIVIDER、字 COLOR_TEXT_DISABLED）。label 支持换行竖排（如 '试\n穿'）。
|
||
*/
|
||
|
||
import { COLOR_BLACK_CAPSULE, COLOR_DIVIDER, COLOR_TEXT_DISABLED } from '../../core/Theme'
|
||
|
||
@Component
|
||
export struct CapsuleButton {
|
||
label: string = ''
|
||
@Prop isActive: boolean = true
|
||
onAction: () => void = () => {}
|
||
|
||
build() {
|
||
Column() {
|
||
Text(this.label)
|
||
.fontSize(14)
|
||
.fontWeight(FontWeight.Medium)
|
||
.fontColor(this.isActive ? Color.White : COLOR_TEXT_DISABLED)
|
||
.textAlign(TextAlign.Center)
|
||
}
|
||
.width(44)
|
||
.height(96)
|
||
.justifyContent(FlexAlign.Center)
|
||
.borderRadius(22)
|
||
.backgroundColor(this.isActive ? COLOR_BLACK_CAPSULE : COLOR_DIVIDER)
|
||
.onClick(() => {
|
||
if (this.isActive) {
|
||
this.onAction()
|
||
}
|
||
})
|
||
}
|
||
}
|