装修行业项目管理后台系统

面向装修行业垂直领域的项目进度管理与客户管理平台

一个专为装修行业小程序设计的管理后台，提供全流程的项目管理、客户管理、进度跟踪和质量检查功能。

---

📋 项目简介

本项目是一个装修行业项目管理小程序的管理后台，旨在帮助装修公司、工程队和项目经理高效管理装修项目的全生命周期。

核心定位

• 垂直领域：专注于装修行业的业务场景和痛点
• 小程序后台：为小程序端提供数据管理和配置支持
• 项目管理：覆盖从客户签约到项目验收的全流程管理
• 进度跟踪：实时掌握每个工地的施工进度和里程碑

主要功能

🏗️ 项目管理

• 工地信息管理（工地名称、地址、客户信息）
• 项目状态跟踪（规划中、进行中、已完成、已暂停）
• 预算与费用管理（总预算、分类支出统计）
• 项目时间线管理（开工日期、预计完工日期、关键节点）

👥 客户管理

• 客户信息维护（姓名、联系方式、地址）
• 客户关联项目查看
• 客户沟通记录

📊 进度跟踪

• 施工阶段管理（拆除、水电、泥瓦、木工、油漆等）
• 里程碑节点记录
• 进度可视化展示
• 延期预警

✅ 质量检查

• 质检记录管理
• 问题跟踪与整改
• 质检状态（通过、未通过、待检查）
• 质检员管理

📈 数据看板

• 项目统计概览
• 费用支出分析
• 项目进度汇总
• 关键指标展示

⚙️ 系统配置

• 资讯管理（公告、活动、新品）
• 分类设置（工程类别、费用类别）
• 系统参数配置

---

🛠️ 技术栈

前端框架

• React 18 - 现代化的UI框架
• TypeScript - 类型安全的开发体验
• Vite - 快速的构建工具

路由与状态管理

• React Router v6 - 声明式路由
• TanStack Query - 服务端状态管理

UI 组件库

• Ant Design - 企业级 UI 设计语言和 React 组件库
• @ant-design/icons - Ant Design 官方图标库

其他工具

• dayjs - 日期处理（Ant Design DatePicker 依赖）

---

🚀 快速开始

环境要求

• Node.js >= 16.x
• npm >= 8.x

推荐使用 nvm 管理 Node.js 版本。

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:8080 查看应用。

构建生产版本

# 生产环境构建
npm run build

# 开发模式构建
npm run build:dev

代码检查

npm run lint

预览生产构建

npm run preview

---

📁 项目结构

src/
├── components/          # 组件
│   ├── Layout.tsx      # 布局组件（集成侧边栏导航）
│   └── ProjectForm.tsx # 项目表单
├── pages/              # 页面
│   ├── Login.tsx       # 登录页
│   ├── Dashboard.tsx   # 数据看板
│   ├── Projects.tsx    # 项目管理
│   ├── Customers.tsx   # 客户管理
│   ├── Progress.tsx    # 进度跟踪
│   ├── Quality.tsx     # 质量检查
│   ├── NewsSettings.tsx      # 资讯设置
│   └── CategorySettings.tsx  # 分类设置
├── data/               # 数据层
│   └── mockData.ts     # 模拟数据
├── App.tsx             # 根组件
├── main.tsx            # 入口文件
└── index.css           # 全局样式

---

🎯 核心特性

1. 企业级 UI 组件

基于 Ant Design 构建，所有 UI 组件都是：

• 开箱即用：丰富的组件库满足各种业务需求
• 国际化：内置中文语言包，完善的本地化支持
• 可访问性：遵循 WAI-ARIA 标准
• 主题定制：支持自定义主题配置

2. 响应式设计

• 适配桌面端和移动端
• 使用 Ant Design Grid 响应式布局系统
• 侧边栏可折叠设计

3. 表单管理

使用 Ant Design Form 组件，具有以下特性：

• 声明式验证：通过 rules 属性定义验证规则
• 字段联动：支持字段间的关联和条件显示
• 丰富的表单控件：Input、Select、DatePicker、Upload 等
• 自动布局：支持水平、垂直、内联等多种布局方式

4. 路径别名

使用 @/ 作为 src/ 目录的别名：

import { Button } from "antd"
import { mockProjects } from "@/data/mockData"
import Layout from "@/components/Layout"

---

🔐 身份验证

当前版本使用 localStorage 实现简单的登录状态管理：

• 登录状态存储在 localStorage.isLoggedIn
• 用户名存储在 localStorage.username
• 所有非登录页面都受保护（在 Layout.tsx 中实现）

💡 后续规划：接入真实的身份认证系统（JWT、OAuth 等）

---

📊 数据管理

当前状态：模拟数据

项目目前使用 src/data/mockData.ts 中的模拟数据进行开发和演示。

数据实体：

• Customer - 客户信息
• Project - 项目信息（包含预算、支出、时间线）
• QualityCheck - 质检记录

未来规划：后端集成

计划通过以下方式集成真实后端：

1. 使用 TanStack Query 封装 API 调用
2. 替换 mockData.ts 的导入为实际 API 请求
3. 实现数据缓存、乐观更新等高级特性

推荐 API 架构：

GET    /api/projects          # 获取项目列表
POST   /api/projects          # 创建项目
GET    /api/projects/:id      # 获取项目详情
PUT    /api/projects/:id      # 更新项目
DELETE /api/projects/:id      # 删除项目

GET    /api/customers         # 获取客户列表
POST   /api/customers         # 创建客户
...

---

🎨 主题与样式

Ant Design 主题配置

项目在 App.tsx 中配置了 Ant Design 主题：

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

<ConfigProvider
  locale={zhCN}
  theme={{
    token: {
      colorPrimary: '#1677ff',
      borderRadius: 6,
    },
  }}
>
  {/* 应用内容 */}
</ConfigProvider>

组件样式

• 使用 Ant Design 内置样式系统
• 支持通过 ConfigProvider 全局配置主题
• 可以通过 token 自定义颜色、间距、圆角等设计变量
• 使用内联样式或 CSS 文件进行局部样式调整

---

🌐 国际化

当前版本使用简体中文作为唯一语言。

• 所有 UI 文本、标签、提示信息均为中文
• Ant Design 组件通过 ConfigProvider 配置了 zhCN 语言包
• 日期组件使用 dayjs 中文本地化

贴合国内装修行业的使用场景。

💡 后续规划：可通过 Ant Design 的国际化方案支持多语言。

---

🔧 开发规范

代码风格

• 使用函数式组件和 Hooks
• 组件使用 const + 箭头函数定义
• 使用 TypeScript 接口定义类型
• 遵循 ESLint 配置的规则

命名规范

• 变量/函数：camelCase（如 getUserInfo）
• 组件：PascalCase（如 ProjectCard）
• 常量：UPPER_SNAKE_CASE（如 API_BASE_URL）
• 文件名：与组件名保持一致

Git 提交规范

推荐使用语义化提交信息：

feat: 添加项目导出功能
fix: 修复日期选择器错误
docs: 更新 README
style: 调整按钮样式
refactor: 重构表单验证逻辑
test: 添加单元测试
chore: 更新依赖版本

---

🗺️ 开发路线图

✅ 已完成

• 基础项目架构搭建
• UI 组件库集成（Ant Design）
• 路由和导航系统
• 项目管理模块（CRUD）
• 客户管理模块
• 进度跟踪模块
• 质量检查模块
• 数据看板
• 表单系统（基于 Ant Design Form）

🚧 进行中

• 后端 API 集成
• 用户权限系统
• 数据导出功能

📅 计划中

• 移动端小程序开发
• 实时消息推送
• 文件上传与管理（施工照片、合同文件等）
• 财务报表生成
• 供应商管理
• 施工人员管理
• 项目甘特图
• 数据可视化增强
• 多租户支持

---

🤝 贡献指南

欢迎贡献代码！请遵循以下流程：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

---

📄 许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

---

💬 联系方式

如有问题或建议，欢迎通过以下方式联系：

• 提交 Issue
• 发起 Discussion

---

🙏 致谢

本项目基于以下优秀的开源项目构建：

• React
• Vite
• Ant Design
• TanStack Query
• dayjs

特别感谢 Lovable.dev 提供的初始项目脚手架支持。

---

⭐ 如果这个项目对你有帮助，欢迎 Star 支持！

Made with ❤️ for the home improvement industry