生活指南 Living Guide

基于 uni-app + Vue 3 + TypeScript + TailwindCSS 的生活知识产品 MVP，面向小程序、App 和 H5 多端复用。当前版本聚焦“找入口 -> 缩范围 -> 照着做 -> 沉淀”的核心路径，已完成首页、分类、搜索、详情、应急、收藏、历史、设置、反馈等完整前端闭环。

项目目标

• 用统一内容模型承载常见生活知识、步骤清单和应急主题
• 用单一前端工程同时服务 H5、小程序和 App 形态
• 用本地状态管理先跑通收藏、历史、阅读偏好和引导流程
• 为后续 NestJS + TypeScript 后端接入预留清晰边界

技术栈

• uni-app
• Vue 3
• TypeScript
• Pinia
• TailwindCSS
• weapp-tailwindcss
• 预留后端：NestJS + TypeScript

当前能力

• 首次启动引导与可跳过完成标记
• 首页启动台、高频场景、推荐与最近浏览
• 分类浏览、分类结果与多条件筛选
• 搜索联想、热门搜索、最近搜索与搜索结果
• 常规指南详情页与应急执行页
• 收藏、最近浏览、阅读偏好、反馈提交成功态
• 移动端优先的统一视觉 token、外壳和共享组件

目录结构

.
├── src/                         # uni-app 前端主工程
│   ├── app/                     # 应用级路由、偏好、导航、外壳
│   ├── features/guides/         # 指南领域组件、数据、服务、store
│   ├── pages/                   # 页面入口
│   └── shared/                  # 通用组件、样式、类型、工具
├── backend/                     # NestJS 后端预留目录
├── docs/                        # 产品原型与低保真说明
└── openspec/                    # 规格、变更和归档

页面概览

• 主页面：首页 / 分类 / 搜索 / 我的
• 发现链路：分类结果 / 搜索结果
• 阅读链路：常规详情 / 应急详情
• 个人内容库：收藏 / 历史 / 设置 / 反馈
• 首次体验：引导页

本地开发

1. 安装依赖

pnpm install

2. 启动 H5

pnpm run dev:h5

启动前会自动生成 Tailwind 输出文件。H5 端口以终端输出为准，通常为 5173。

3. 小程序开发

pnpm run dev:mp-weixin

4. 构建

pnpm run build:h5
pnpm run build:mp-weixin

5. 质量检查

pnpm run styles:build:h5
pnpm run type-check

文档与规格

• 产品原型说明：docs/living-guide-prototype-spec.md
• 低保真线框说明：docs/living-guide-wireframe-spec.md
• 主规格目录：openspec/specs/
• 变更归档目录：openspec/changes/archive/

后端预留

backend/ 已按 NestJS 项目结构预留基础目录，当前尚未接入真实接口。后续建议优先实现以下能力：

• 指南内容接口
• 搜索联想与搜索结果接口
• 反馈提交接口
• 收藏、历史与偏好的账号同步
• CMS / 运营后台读写接口

详细说明见 backend/README.md。

说明

• 当前仓库优先交付 MVP，可直接继续向真实内容接口和账号体系演进
• openspec 记录了本次能力建设的设计、任务与规格收口过程