ux: 动作收藏按钮从顶部浮窗移到底部,与加入计划并排 + 图标美化
- detail 顶部 favbtn 浮窗(需避让胶囊、丑)移除,改为底部 addbar 内与 CTA 并排的方形按钮 - fc-icon 新增 filled 属性:收藏态实心心形(Lucide 描边图标默认 fill=none,filled=true 时 fill=stroke 变实心) - 收藏按钮美化:圆角 24rpx 方形 + 发丝边框,未收藏描边(text-2)、已收藏实心(accent)+ accent-soft 底色 + accent-ring 边框 + 点按 scale 反馈 - detail.js 清理 favRight/favTop 胶囊避让逻辑(不再需要)
This commit is contained in:
@@ -29,23 +29,28 @@ Component({
|
||||
size: { type: Number, value: 20 },
|
||||
// 颜色:可传具体 hex,或 var(--xxx)(自动解析为对应 token 色值)
|
||||
color: { type: String, value: '' },
|
||||
// 是否实心填充(如收藏后实心心形)。默认描边
|
||||
filled: { type: Boolean, value: false },
|
||||
},
|
||||
data: { src: '' },
|
||||
observers: {
|
||||
name(n) { this._build(n, this.data.color); },
|
||||
color(c) { this._build(this.data.name, c); },
|
||||
name() { this._build(); },
|
||||
color() { this._build(); },
|
||||
filled() { this._build(); },
|
||||
},
|
||||
lifetimes: {
|
||||
attached() { this._build(this.data.name, this.data.color); },
|
||||
attached() { this._build(); },
|
||||
},
|
||||
methods: {
|
||||
_build(name, color) {
|
||||
_build() {
|
||||
const { name, color, filled } = this.data;
|
||||
const inner = iconSvg[name];
|
||||
if (!inner) { this.setData({ src: '' }); return; }
|
||||
const stroke = resolveColor(color);
|
||||
const fill = filled ? stroke : 'none';
|
||||
const body = inner.replace(/__C__/g, stroke);
|
||||
const svg =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" ' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="' + fill + '" ' +
|
||||
'stroke="' + stroke + '" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
|
||||
body + '</svg>';
|
||||
this.setData({ src: 'data:image/svg+xml,' + encodeURIComponent(svg) });
|
||||
|
||||
Reference in New Issue
Block a user