Ai装修日记开源源码

weixin_53505226

546人浏览 · 2026-05-28 10:44:54

weixin_53505226 · 2026-05-28 10:44:54 发布

项目名称

Ai装修日记 (Renovation Diary) — 智能装修跟踪助手

项目概述

一个面向正在装修或准备装修的用户的全功能管理工具。项目同时提供 Web 版（React SPA）和微信小程序版两套实现，模拟微信小程
序的移动端交互体验，帮助用户系统化地记录装修过程、管理预算支出、跟踪施工进度，并集成 AI 智能建议。

下载地址： https://pan.quark.cn/s/3845dab267c2


双端架构

Web 版（React SPA）

- 技术栈：React 19 + TypeScript + Vite + Tailwind CSS
- UI 图标：Lucide React
- 图表：Recharts（饼图分析）
- AI 服务：Google Gemini API（gemini-2.5-flash 模型）
- 入口：index.html → index.tsx → App.tsx（单文件 1100+ 行组件）
- 样式：通过 CDN 引入 Tailwind CSS，模拟移动端微信小程序风格

微信小程序版

- 框架：原生微信小程序（WXML + WXSS + JS）
- 项目配置：AppID wx1953ece1433be159，基础库 3.4.1
- 页面：7 个页面（首页、日记、账本、分析、任务清单、图纸档案、设置）
- 数据存储：wx.setStorageSync / wx.getStorageSync 本地持久化
- 自定义图标：SVG 图标集（30+ 个），通过 Python 脚本 generate_icons.py 生成

---
核心功能模块

1. 首页（Home）

┌─────────────┬──────────────────────────────────────────────┐
│ 功能 │ 说明 │
├─────────────┼──────────────────────────────────────────────┤
│ 装修天数 │ 自动计算从第一天到当前的天数 │
├─────────────┼──────────────────────────────────────────────┤
│ 入住倒计时 │ 用户设置预计入住日期后显示剩余天数 │
├─────────────┼──────────────────────────────────────────────┤
│ 累计支出 │ 汇总所有记账条目的总花费 │
├─────────────┼──────────────────────────────────────────────┤
│ 待办事项 │ 显示未完成任务数量 │
├─────────────┼──────────────────────────────────────────────┤
│ 每日黄历 │ 基于日期生成"宜/忌"装修活动（装饰性功能） │
├─────────────┼──────────────────────────────────────────────┤
│ AI 装修助手 │ 根据当前阶段提供"今日建议"和"避坑指南" │
├─────────────┼──────────────────────────────────────────────┤
│ 快速工具 │ 任务清单、图纸档案、瓷砖/涂料/窗帘计算器入口 │
├─────────────┼──────────────────────────────────────────────┤
│ 最近动态 │ 展示最新 3 条日记 │
└─────────────┴──────────────────────────────────────────────┘

2. 日记（Diary）

- 三种记录类型：
- LOG（日记）：记录装修日常
- EXPENSE（记账）：记录支出，关联金额
- MILESTONE（里程碑）：标记重要节点
- 字段：日期、内容、图片（支持多图）、金额、装修阶段、标签
- 展示：按时间倒序排列，卡片式布局，带日期徽章和阶段标签

3. 账本（Budget）

- 预算设置：可为每个装修阶段独立设置预算上限
- 预算明细：按阶段显示已支出/预算，带进度条（超支变红预警）
- 支出流水：列出所有记账类型的日记条目

4. 分析（Analysis）

- 支出构成：环形饼图展示各阶段支出占比
- 支出排行榜：按金额排序，前 3 名带特殊标记

5. 任务清单（Checklist）

- 预置模板：10 个默认任务，覆盖全部 7 个装修阶段
- 分组展示：按阶段分组，每组显示完成进度
- 交互：点击切换完成状态，完成项带删除线和绿色标记

6. 图纸档案（Documents）

- 分类管理：平面图、效果图、报价单、合同/票据
- 筛选：支持按分类 Tab 过滤
- 展示：网格卡片布局，悬浮预览效果

7. 材料计算器

┌────────┬──────────────────────────────────────┐
│ 计算器 │ 算法 │
├────────┼──────────────────────────────────────┤
│ 瓷砖 │ 面积 ÷ 单砖面积 × 1.05（含 5% 损耗） │
├────────┼──────────────────────────────────────┤
│ 涂料 │ 面积 × 3面 × 3遍 ÷ 13㎡/桶 ÷ 5L │
├────────┼──────────────────────────────────────┤
│ 窗帘 │ 窗户宽度 × 2（褶皱系数） │
└────────┴──────────────────────────────────────┘

8. 设置（Settings，仅小程序版）

- 房屋名称修改（带快速选择建议）
- 入住日期设置
- 数据统计查看
- 重置所有数据

---
装修阶段体系

前期准备 → 拆改阶段 → 水电工程 → 泥木工程 → 油漆工程 → 竣工安装 → 软装入住
#94a3b8 #f87171 #60a5fa #fbbf24 #c084fc #34d399 #fb7185
灰色红色蓝色琥珀色紫色翠绿玫瑰色

每个阶段有独立的颜色标识、默认预算和对应的建议任务。

---
AI 服务集成

Web 版（Gemini API）

- 模型：gemini-2.5-flash
- 调用方式：@google/genai SDK
- Prompt 策略：根据当前装修阶段和最近日记内容，生成 JSON 格式的 {tip, warning} 建议
- 容错：API Key 缺失或调用失败时返回默认建议

小程序版（本地模拟）

- 使用本地 getAdviceForStage() 方法，按阶段返回预设建议
- 每个阶段有专属的"今日建议"和"避坑指南"

---
数据模型

// 日记条目
interface DiaryEntry {
id: string;
date: string; // ISO 日期
content: string; // 文字内容
type: EntryType; // LOG | EXPENSE | MILESTONE
images: string[]; // 图片 URL 列表
cost?: number; // 金额（仅 EXPENSE）
stage: RenovationStage; // 所属装修阶段
tags: string[]; // 标签
}

// 任务
interface RenovationTask {
id: string;
title: string;
stage: RenovationStage;
completed: boolean;
}

// 文档
interface DocumentItem {
id: string;
title: string;
category: DocumentCategory; // 平面图 | 效果图 | 报价单 | 合同/票据
url: string;
date: string;
}

---
项目目录结构

renovation-diary-(装修日记)/
├── App.tsx # Web 版主组件（React，单文件 ~1170 行）
├── types.ts # TypeScript 类型定义
├── index.html # Web 入口 HTML
├── index.tsx # React 挂载入口
├── services/
│ └── geminiService.ts # Gemini AI 服务封装
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
├── package.json # 依赖管理
├── metadata.json # 项目元数据
├── .jpg # 背景/装饰图片
│
└── miniprogram/ # 微信小程序版本
├── app.js # 小程序入口（全局数据管理、存储操作）
├── app.json # 小程序配置（页面、TabBar）
├── app.wxss # 全局样式
├── project.config.json # 开发者工具配置
├── images/
│ ├── icons/ # 30+ SVG 图标
│ ├── .png # TabBar 图标（选中/未选中）
│ └── generate_icons.py # 图标生成脚本
└── pages/
├── home/ # 首页（wxml/js/wxss/json）
├── diary/ # 日记列表
├── budget/ # 账本
├── analysis/ # 分析图表
├── checklist/ # 任务清单
├── documents/ # 图纸档案
└── settings/ # 设置

---
启动方式

Web 版

npm install
# 在 .env.local 中设置 GEMINI_API_KEY
npm run dev

微信小程序版

用微信开发者工具导入 miniprogram/ 目录即可预览。

---
设计特点

- 移动端优先：所有界面针对手机屏幕优化，max-width 480px 居中展示
- 微信风格 UI：底部 TabBar、圆角卡片、毛玻璃效果、渐变头部
- 视觉层次分明：每个装修阶段有独立色彩体系，贯穿全应用
- 新用户引导（小程序版）：首次打开弹出欢迎弹窗，支持命名新家和设置入住日期
- 数据持久化：小程序版使用 wx.setStorageSync，Web 版使用 React 状态（可扩展为 localStorage）

智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

MCP协议开发实战：从零搭建AI Agent工具链

创建静态资源（如项目 README 文件）。创建动态资源（如实时系统状态）。在 Client 中请求并利用资源上下文。回顾 MCP 协议如何降低 AI Agent 开发门槛。当前生态的局限与未来的演进方向。鼓励读者基于此大纲进行实践，并参与开源贡献。

智能体开发者社区

AI Agent可观测性：破解多步推理黑盒

随着AI Agent在复杂任务中承担越来越多的决策角色，其内部的多步推理过程往往如同一个“黑盒”，难以理解、调试和信任。本文旨在探讨AI Agent可观测性（Observability）的核心概念、技术挑战与实践方案，为开发者提供一套系统的方法论和工具链，以“照亮”Agent的推理黑盒，实现对其行为、决策逻辑与内部状态的全面洞察。构建AI Agent的可观测性体系不再是“锦上添花”，而是保障其在大