## 目标 - 首页 UI 始终可见:轮播图在无数据时也显示占位滑块;通知始终滚动显示(Marquee)。 - 接口路径统一为 `/api/app/*`,兼容返回 `{list: [...]}` 与字段 `snake_case`(如 `image_url`)。 ## 变更范围 - 文件:`pages/index/index.vue` - 保留现有登录弹窗,但不阻断首页数据加载;完善数据清洗与空态展示。 ## 轮播图(无数据也展示) - 始终渲染 `swiper.banner-swiper`,不再用 `v-if` 隐藏容器。 - 数据存在:按 `banners` 渲染;字段映射 `id`、`image_url|imageUrl|image`、`link_url|linkUrl|link|url`。 - 数据为空:渲染 3 个占位滑块(`swiper-item` 内用 `` 纯色/渐变背景 + 文案“敬请期待”),避免依赖静态图片资源。 - URL 清洗:移除反引号与空格,保证 `image_url` 可用。 ## 通知滚动(Marquee) - 始终渲染通知条。 - 有数据:横向无缝滚动(CSS `@keyframes` + `transform: translateX`),将所有通知拼接为一条长文本,重复一份以实现循环滚动。 - 无数据:使用默认文案(如“欢迎光临”“最新活动敬请期待”)参与滚动,保证始终有动效。 ## 活动区 - 保持当前两列栅格布局;无数据时显示“暂无活动”占位文案;点击仅在 `link` 为内部路径时跳转。 ## 数据与接口 - 请求入口统一:`/api/app/notices`、`/api/app/banners`、`/api/app/activities`。 - 解包:支持 `list|items|data`。 - 映射:通知 `content|text|title`;轮播图 `image_url|imageUrl|image|img|pic`、`link_url|linkUrl|link|url`;活动 `cover_url|coverUrl|image|img|pic`、`title|name`、`sub_title|subTitle|subtitle|desc|description`。 ## 交互与空态 - 未登录/未绑定:弹窗提醒,但首页照常加载并显示占位内容。 - 点击跳转:内部路径以 `/` 开头才触发 `navigateTo`;避免空链接导致错误。 ## 验证 - 模拟后端返回 `{list:[...]}` 含反引号的 `image_url`,确认轮播图正常显示。 - 清空 `banners` 与 `notices`,确认占位滑块与默认滚动文案显示。 - 在微信小程序/浏览器预览,验证滚动流畅度与样式适配。