# Design

Wemoments 的前台按微信朋友圈式单栏信息流实现：`main` 最大宽度 576px，居中显示；顶部导航固定 56px；顶部封面高 320px；头像 60px，下沉到封面右下角。

## Tokens

核心 CSS 变量位于 `public/assets/css/wemoments.css`：

```css
:root {
  --main-background:#ffffff;
  --body-background:#f0f0f0;
  --primary-background:#F7F7F7;
  --primary-background-hover:#DEDEDE;
  --text-color:#333333;
  --text-sub-color:#555555;
  --line:rgb(243 244 246 / 1);
  --link:#576b95;
  --green:#07C160;
}
```

暗黑模式通过 `<html class="dark">` 切换，并在 head 顶部内联脚本读取 `localStorage.wemoments_theme_mode`，避免首屏闪烁。

## Components

- `.top-nav`：初始透明，滚动后切换背景和图标颜色。
- `.header-container`：支持背景图和 `autoplay muted loop playsinline` 视频。
- `.post-item`：左侧 36px 头像，右侧内容、媒体、位置、时间和操作菜单。
- `.post-images.single/four/grid`：单图、四图、九宫格布局。
- `.post-comment-container`：浅灰评论盒，包含点赞行和扁平楼中楼评论。
- `.wm-modal`：登录、注册、设置、友链、发布说说共享模态结构。
- `window.WemomentsDialog`：Promise 化 notice/confirm 对话框。

## Interaction Details

所有按钮命中区域至少 40px。按钮按下使用 `scale(0.96)`，过渡只声明具体属性。图片统一加低透明 outline，动态数字使用 `font-variant-numeric: tabular-nums`，避免数量变化造成布局跳动。
