Skip to content

KennyZou4468/HomeRepositoryMiniProgram

Repository files navigation

家庭物品管理微信小程序

目标:开发一个使用本地存储的微信小程序,用于记录家庭物品的存放位置与数量,强调"好用、直观、低负担"。

本文档用于提供给 Copilot / AI 编程助手,作为统一的产品与技术上下文说明

Project Type

This project is a WeChat Mini Program.

  • Native Mini Program development (wxml / wxss / js)
  • No web frameworks
  • Local storage only (wx.setStorageSync)

一、产品定位

  • 使用场景:家庭内部物品管理

  • 目标用户:个人 / 家庭成员(第一版仅限单用户)

  • 核心诉求:

    • 快速知道「物品在哪」
    • 清楚「还剩多少」
    • 操作尽量少、学习成本低

二、整体设计原则

  1. 数据全部保存在用户端(本地存储)
  2. 不依赖服务器 / 云数据库
  3. 页面数量尽量少,交互清晰
  4. 优先满足 80% 高频需求,不追求复杂功能
  5. 支持浅色/深色主题切换(跟随系统或手动设置)

三、数据结构设计(本地存储)

1. 物品 Item 数据结构

{
  id: "item_170000000001",      // 唯一标识(字符串)
  name: "5号电池",               // 物品名称(必填)
  location: "客厅 / 电视柜 / 抽屉", // 存放位置(必填,使用人类语言)
  count: 8,                      // 数量
  unit: "节",                   // 单位(可选)
  category: "日用品",            // 分类(可选)
  note: "遥控器用",              // 备注(可选,最多250字符)
  createdAt: 1700000000,         // 创建时间(时间戳)
  updatedAt: 1700000500,         // 最近更新时间
  history: [                     // 库存变更记录(可选,最多保留20条)
    {
      delta: -2,                 // 本次变更数量(+ / -)
      after: 6,                  // 变更后剩余数量
      time: 1700000600           // 时间戳(秒)
    }
  ]
}

2. 设置数据结构

// Storage Key: 'app_settings'
{
  theme: 'system',              // 主题:'system' | 'light' | 'dark'
  locations: ['客厅', '卧室'],   // 预设位置列表
  categories: ['日用品', '食品'] // 预设分类列表
}

3. 本地存储 Key

  • 物品数据:home_items
  • 应用设置:app_settings

四、页面结构设计

页面目录

pages/
├── index/      // 首页:搜索 + 物品列表
├── add/        // 新增物品页面
├── detail/     // 物品详情 / 编辑页面
├── mine/       // 我的:设置 + 存储管理

五、页面功能说明

1️⃣ 首页(index)

功能

  • 展示全部物品列表
  • 支持搜索
  • 跳转新增 / 编辑页面

搜索逻辑

  • 根据以下字段模糊匹配:

    • name
    • location
    • note

UI 结构

[ 搜索框 ]
-----------------
物品名   位置         数量
-----------------
[ + 新增物品 ]

交互细节

  • 搜索为实时过滤
  • 数量较低(<=2)以橙色高亮显示
  • 点击物品进入详情页

2️⃣ 新增物品页(add)

字段顺序(重要)

  1. 物品名称(必填)
  2. 数量(默认 1)
  3. 单位(可选,默认折叠,点击"添加单位"展开)
  4. 存放位置(必填,选择器)
  5. 分类(可选,选择器)
  6. 备注(可选,最多250字符)

交互规则

  • 名称为空 → 不允许保存
  • 数量为空 → 自动设为 1
  • 位置和分类支持选择器,可添加新选项
  • 保存后返回首页并提示"已保存"

3️⃣ 详情页(detail)

功能

  • 查看物品信息
  • 修改数量(加 / 减)
  • 编辑位置、备注等字段
  • 删除物品
  • 查看库存变更记录

数量修改交互(关键)

[-]   当前数量   [+]
  • 单击加减
  • 数量不可小于 0
  • 修改后立即保存到本地

库存变更记录

  • 只在详情页展示「最近变更」区域
  • 记录时机:用户离开详情页时记录一次(非每次点击)
  • 只记录通过 +/- 按钮的数量变化
  • 不记录:新增物品初始数量、编辑页面直接修改数量
  • 最多保留 20 条记录
  • 倒序显示(最新在上)
  • 变更数量:+绿色 / -橙色

备注展示

  • 默认显示前5行
  • 超过80字符显示"展开"按钮
  • 支持长按复制(user-select)

删除交互

  • 点击删除按钮
  • 二次确认弹窗

4️⃣ 我的页面(mine)

功能

  • 主题设置(跟随系统 / 浅色 / 深色)
  • 预设位置管理
  • 预设分类管理
  • 存储空间显示(支持 MB/KB 切换)
  • 一键清空数据(双重确认)

六、核心交互与防呆设计

  1. 所有数据变更立即写入本地存储
  2. 删除操作必须二次确认
  3. 清空数据需要双重确认
  4. 空列表状态需显示引导文案
  5. 存储空间接近上限时提醒用户

空状态文案

🏡 家里还没有记录物品哦~

先加一个吧,让生活更有条理 ✨


七、中文文案规范

通用提示

  • 保存成功:已保存
  • 删除确认:确定要删除这个物品吗?
  • 库存过低:快用完啦,记得补货~

按钮文案

  • 添加物品
  • ✓ 保存到家里
  • 🗑️ 删除物品
  • ✏️ 编辑信息

八、主题支持

主题模式

  • 跟随系统:自动检测系统深浅色模式
  • 浅色模式:温馨米色调
  • 深色模式:护眼深色调

实现要点

  • 每个页面支持 darkMode 状态
  • 使用 .theme-dark 类名切换样式
  • 导航栏、TabBar 颜色同步切换

九、开发建议(给 Copilot)

  • 使用微信小程序原生开发
  • 使用 wx.setStorageSync / wx.getStorageSync
  • 本地状态统一从 storage 初始化
  • 所有页面通过工具函数读写数据(utils/settings.js)
  • 保留结构扩展性,为未来云同步预留接口
  • 使用 WXS 处理模板内的数据格式化(如时间)

十、版本边界(第一版不做)

  • 多用户同步
  • 云数据库
  • 图片长期存储
  • 复杂分类 / 标签系统

十一、目标状态

第一版完成标准:

  • ✅ 可新增 / 编辑 / 删除物品
  • ✅ 可搜索
  • ✅ 数据全部本地保存
  • ✅ 支持深浅色主题
  • ✅ 轻量级库存变更记录
  • ✅ 存储空间管理
  • ✅ 日常家庭使用无障碍

做到这里,即为成功版本。

About

家庭物品管理微信小程序(本地存储版)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published