# 小程序端 UI 布局与设计方案（基于 website-admin 后台）

## 一、结论先行
`website-admin`（Nuxt 4 + Vue3 + ant-design-vue）是「云·企业官网」SaaS 建站后台，管理的核心是可对外发布的**官网内容**（栏目导航、文章、产品、案例、单页、广告、留言线索），以及订阅/模板/域名等租户配置。

因此小程序端的自然定位是：**官网内容的移动端展示 + 获客工具**（即后台所建官网的小程序版），而非现有 `websopy-taro` 里的电商/商城体系。

> ⚠️ 关键提醒：现有 `websopy-taro` 实际是「电商/会员/门店/开发者」小程序，与 `website-admin` 的「官网建站」业务域不一致。下文按"官网展示型小程序"规划，并在第六节给出两种落地路径供选择。

## 二、信息架构（IA）：后台模块 → 小程序页面映射

| website-admin 模块 | 小程序页面 | 说明 |
|---|---|---|
| 控制台（统计/订阅） | 我的 / 首页概览 | 小程序仅展示轻量订阅状态 |
| 栏目导航 menus | 首页导航宫格 | 由后台栏目自动生成入口 |
| 广告 banners | 首页轮播 Banner | 后台配置 |
| 文章 articles | 资讯列表 / 资讯详情 | 含分类筛选 |
| 产品 products | 产品列表 / 产品详情 | 含分类 |
| 案例 cases | 案例列表 / 案例详情 | — |
| 单页 pages | 关于我们 / 联系我们 | 富文本渲染 |
| 留言咨询 messages | 留言咨询表单 / 我的留言 | 提交线索 |
| 模板 / 域名 / 设置 | 不暴露（仅后台） | 小程序按当前租户自动套用 |

## 三、导航与 tabBar 方案
推荐 4 个底部 Tab（沿用微信小程序原生 tabBar，`custom` 可选）：
1. **首页 Home** — Banner + 栏目宫格 + 资讯/产品/案例推荐
2. **产品 Products** — 分类 + 产品网格
3. **案例 Cases**（或 资讯）— 案例列表
4. **我的 Mine** — 账号、我的留言、订阅状态

资讯 / 关于 / 留言作为首页二级入口或非 Tab 页。

## 四、页面布局草案（关键屏）
- **首页**：状态栏+标题栏 → Banner 轮播 → 栏目导航宫格 → "资讯动态"横滑卡片 → "推荐产品/案例"区块 → 底部留言 CTA。
- **产品列表**：左侧分类栏 + 右侧产品网格（ProductCard）。
- **资讯详情**：标题/时间/来源 → 富文本正文（rich-text）→ 相关推荐 → 底部"咨询"按钮。
- **我的**：头像/企业名 → 我的留言 → 订阅状态 → 设置。

## 五、UI 设计规范建议
1. **建立 Design Token**（CSS 变量）：主色、中性色、语义色、间距、圆角、字号。主色默认取自 `website-admin`「网站设置」的 brand 色，支持按租户覆盖。
2. **统一主题**：消除当前 4 套主色并存的混乱（tabBar `#0e932e` / CSS 变量 `#1890ff` / Tailwind `#0ea5e9` / 微信 `#07c160`），收敛为 1 套 token。
3. **图标体系**：弃用 emoji 当图标；改用 `@nutui/icons-react-taro`（SVG，已验证可渲染）或自定义图标组件。
4. **统一布局容器**：新增 `Layout` 组件（NavBar + 内容区 + 可选自定义 TabBar），避免每页各自实现。
5. **NutUI 去"空壳化"**：继续替换 `Cell/Price/Divider/Button`（weapp 端整块空白的已知 bug），改用 Taro 原生 + 项目自定义组件。
6. **富文本**：后台 wangeditor 的 HTML 经 Taro `rich-text` 渲染，需做外联 style 注入与样式隔离。
7. **内容卡片组件集**：Banner、ArticleCard、ProductCard、CaseCard、NavGrid、SectionTitle、LeadForm、EmptyState。

## 六、与现有 websopy-taro 的关系 & 落地路径
- **路径 A（推荐）**：新建独立小程序工程（或 `websopy-taro` 新分支），专门做官网展示端，复用 Taro + React + Tailwind 技术栈与工具链，不混入电商逻辑。
- **路径 B**：在现有 `websopy-taro` 内新增"官网"分包，与电商并存；适合想用一个小程序承载多业务。
- **路径 C**：直接复用 `website-admin` 的 CMS API（`app/api/cms`、`app/api/websopy`），小程序端只做展示层。

建议先确认路径，再进入详细设计 / 实现。

## 七、实施路线图（建议）
1. 定主色 / Design Token / 图标规范
2. 搭 Layout + NavBar + TabBar 骨架
3. 首页（Banner + 宫格 + 资讯/产品/案例区块）
4. 资讯 / 产品 / 案例 列表 + 详情（rich-text）
5. 留言咨询表单 + 我的留言
6. 我的页 + 订阅状态
7. 联调 `website-admin` CMS API、按租户适配模板