feat(fe): 评论改小红书式展开输入面板;FAB 统一暖橘;顶部去冗余入口

- 评论:底部平时一条细「说点什么」,点开才展开大写评论面板
  (大输入框+工具栏+发送,浮在键盘上方)。失焦时有草稿保持展开,
  避免点发送因面板收起而丢点击
- FAB 主题色统一:社区发帖 FAB 从深色改成和首页肉垫一致的暖橘圆钮
- 报告页顶部筛选去掉「添加」(报告页不需要建档入口)
- 社区去掉顶部「发布」按钮,发帖统一走右下角悬浮按钮

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-30 18:13:41 +08:00
parent 4f52a7d3a1
commit c48e241fe1
6 changed files with 71 additions and 46 deletions
@@ -136,22 +136,35 @@
background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap);
}
.cm-cancel{display:flex;align-items:center}
/* 相机 + 输入框 + 发送 合成一条圆角输入栏,像聊天输入条;
textarea 撑开时相机和发送贴着底部 */
.cm-inputrow{
display:flex;align-items:flex-end;gap:var(--sp-2);
background:var(--surface-2);border:1rpx solid var(--line);
border-radius:32rpx;padding:10rpx var(--sp-2) 10rpx var(--sp-3);
/* 收起态:底部一条细条,点了才展开成大面板(小红书那套) */
.cm-collapsed{
flex:none;display:flex;align-items:center;gap:var(--sp-3);
background:#fff;border-top:1rpx solid var(--line);
padding:var(--sp-3) var(--sp-5) calc(20rpx + env(safe-area-inset-bottom));
}
.cm-pic{flex:none;display:flex;align-items:center;height:64rpx;color:var(--muted)}
.cm-collapsed-pill{
flex:1;min-width:0;height:76rpx;line-height:76rpx;padding:0 var(--sp-5);
border-radius:var(--r-full);background:var(--surface-2);color:var(--muted2);
font-size:var(--fs-md);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.cm-collapsed-pill.has{color:var(--text)}
.cm-collapsed-ic{flex:none;display:flex;align-items:center;color:var(--muted)}
/* 展开态:大写评论面板 */
.cm-dock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.cm-dock-title{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
.cm-dock-close{display:flex;align-items:center;color:var(--muted);padding:var(--sp-1)}
.cm-ta{
flex:1;min-width:0;min-height:64rpx;max-height:280rpx;height:auto;
padding:16rpx 0;background:transparent;font-size:var(--fs-md);line-height:1.4;
width:100%;box-sizing:border-box;min-height:200rpx;max-height:520rpx;height:auto;
padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-md);
font-size:var(--fs-lg);line-height:1.5;
}
.cm-toolbar{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.cm-pic{flex:none;display:flex;align-items:center;color:var(--muted)}
.cm-count{margin-left:auto;color:var(--muted2);font-size:var(--fs-cap)}
.cm-send{
flex:none;height:64rpx;padding:0 var(--sp-4);border-radius:var(--r-full);
flex:none;height:76rpx;padding:0 var(--sp-6);border-radius:var(--r-full);
display:flex;align-items:center;justify-content:center;
background:var(--line);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-b);transition:.16s ease;
background:var(--line);color:#fff;font-size:var(--fs-md);font-weight:var(--fw-b);transition:.16s ease;
}
.cm-send.on{background:var(--cta)}
.cm-count{display:block;text-align:right;margin-top:6rpx;color:var(--muted2);font-size:var(--fs-cap)}