Ai装修日记开源源码
项目名称
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）
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
13
0- 0
已为社区贡献2条内容
所有评论(0)