电脑装机报价单生成器

一个基于 Vue 3 + Vite 的纯前端台式机装机报价单工具。适合个人业余帮朋友、客户或同事整理电脑配置报价，不需要后端服务，所有数据都在浏览器本地编辑和导入导出。

功能

• 手动编辑报价编号、日期、客户称呼、联系方式、主要用途和备注
• 预置台式机必备配件：CPU、主板、显卡、内存、固态硬盘、电源、机箱、CPU 散热器
• 快速添加可选配件：机械硬盘、机箱风扇、显示器、键鼠、系统安装、装机/理线/测试
• 支持自定义添加任意配件
• 自动计算配件小计、服务费和总价
• 实时报价单预览
• 导出报价单为 PNG 图片
• 导出报价单为 PDF 文件
• 导出 JSON 配置，方便下次继续修改
• 导入 JSON 配置恢复历史报价单
• 一键重置必备项
• 一键清空全部页面信息

环境要求

• Node.js 18 或更高版本
• npm

安装与运行

npm install
npm run dev

默认启动后访问：

http://localhost:5173

如果需要指定端口：

npm run dev -- --port 5173

Docker Compose 快速启动

如果你只想快速把页面跑起来，可以直接使用 Docker Compose：

docker compose up -d --build

启动后访问：

http://localhost:5173

停止服务：

docker compose down

构建

npm run build

构建产物会生成到 dist 目录。

本地预览构建结果：

npm run preview

使用说明

1. 在左侧填写基础信息，例如客户称呼、联系方式和主要用途。
2. 使用“快速添加”添加常见配件，也可以点击“自定义配件”手动添加。
3. 在配件明细中填写型号、规格、数量和单价。
4. 如有装机、理线、跑分、送货等费用，填写服务费。
5. 右侧会实时生成报价单预览。
6. 点击“导出 PNG”或“导出 PDF”保存报价单。
7. 点击“导出配置”保存当前配置，之后可用“导入配置”继续修改。

配置文件

“导出配置”会生成一个 JSON 文件，里面包含：

• 基础信息
• 服务费设置
• 配件列表
• 数量和价格

这个文件用于之后重新导入编辑，不建议手动修改。如果确实需要修改，请保持 JSON 格式合法。

常用命令

npm install      # 安装依赖
npm run dev      # 启动开发服务
npm run build    # 生产构建
npm run preview  # 预览构建结果

技术栈

• Vue 3
• Vite
• html2canvas
• jsPDF
• lucide-vue-next

License

本项目使用自定义非商用署名许可证，详见 LICENSE。

简单来说：

• 允许个人学习、自用、研究和非商业分享
• 禁止未经授权的商业使用
• 修改源码或基于本项目再发布时，必须注明来源
• 修改后的版本需要明确说明已基于原项目做过改动

注意：由于许可证包含“禁止商用”限制，本项目不属于 OSI 定义下的开源软件。