在浏览器里打开 index.html 就能用的户型装修设计工具：左边拖家具、中间改平面、右边看预算，一键切 3D 看效果。单文件、零依赖、离线可用——双击即开，不用装环境、不用联网、不用登录，所有数据只存在你自己的浏览器里。
- 🏠 Ai 资源网 —— 免费 AI 工具与资源导航站，本项目页脚同样挂着这枚友链，欢迎互相串门。
想交换友链？改这一节提 PR 即可。
- 打开：双击
index.html（或丢进任意静态服务器）。 - 选户型：顶栏「户型库」有 12 套户型，挑一套点进去，自带一套摆好的默认布置。
- 改布置：左侧家具库点一下添加、拖到平面图上摆放；拖动家具移动，拖上方圆点旋转，拖右下方块改尺寸。
- 看效果：顶栏切到「3D 场景」，
T键来回切；3D 里可切「鸟瞰 / 漫游」，拖动鼠标左键旋转、滚轮缩放。 - 算钱：右侧「报价」页给出家具家电 + 地面 + 墙面乳胶漆的参考价，可导出 CSV。
- 存下来：改动自动保存在浏览器里；「文件 ▾ → 另存为方案」可为一个户型存多套布置，「文件 ▾ → 复制分享链接」把整套布置压进一条 URL 发给客户。
想装成桌面 App：用 Chrome / Edge 打开后选择「安装应用」，会读取
manifest.webmanifest，以独立窗口运行（PWA，图标见icon-192.png/icon-512.png）。
| 三维场景 | 户型库 |
|---|---|
 |
 |
| 报价明细 | 家具属性编辑 |
|---|---|
 |
 |
| 亮色主题 | 命令面板 |
|---|---|
 |
 |
手机 / 平板（触屏适配，浮动工具条 + 底部操作栏）：
内置 12 套户型（均为套内面积，单位 mm），顶栏「户型库」打开卡片画廊，可按居室（开间 / 两居 / 三居 / 四居及以上）筛选；卡片上标着每套的面积、居室数、卫数与布置状态（「默认布置」或「已布置 N 件 · 自动保存」），当前户型带「当前」角标。
| 户型 | 套内 | 户型 | 套内 |
|---|---|---|---|
| 小开间 · 35㎡ | 34.6 m² | 三室一厅一卫 · 80㎡ | 80.3 m² |
| 开间一居 · 42㎡ | 42.3 m² | 三室两厅两卫（默认） | 87.2 m² |
| 一室一厅 · 54㎡ | 53.6 m² | 两室两厅两卫 · 91㎡ | 91.4 m² |
| 两室一厅 · 59㎡ | 59.0 m² | 三室两厅一卫 · 95㎡ | 95.0 m² |
| 两室两厅一卫 · 96㎡ | 96.9 m² | 横厅三居两卫 · 128㎡ | 127.4 m² |
| 四室两厅两卫 · 129㎡ | 128.0 m² | 四室两厅三卫 · 141㎡ | 140.5 m² |
套内面积按计入面积统计（飘窗等不计入，打印清单里带 * 标出）。
- 每个户型独立保存：切换户型不会丢改动，回来还是原样。
- 多方案：「文件 ▾ → 另存为方案」把当前布置存成命名方案，同一户型可存任意多套，随时载入 / 删除。
- 历史快照：「文件 ▾」里的历史列表可回滚到之前的自动存档点。
- 一键恢复：户型没布置时画布中央会提示，可一键套用该户型的推荐布置。
- 74 件内置家具，分 7 类：卧室 15 · 客厅 16 · 餐厨 12 · 卫浴 8 · 家电 9 · 书房 · 休闲 6 · 灯饰 · 布艺 8。
- 搜索 + 分类筛选 + 最近使用，每件家具标出宽×深与参考单价。
- 点按添加（加到房间中心或视图中央）或拖拽摆放（落到指针位置），拖动时贴墙吸附，松手自动避让墙体——只会在原房间内推移，不会被推到墙外。
- 自定义家具：「＋ 自定义」可建任意名称 / 尺寸 / 高度 / 形状（矩形、圆形）/ 颜色 / 单价的家具，保存在「我的家具」分类里反复使用；3D 中按实际尺寸渲染。
- 选择：点选；
Shift+点击加选 / 减选；Shift+拖动或在「框选」工具下拖矩形框选；Ctrl/⌘+A全选。 - 变换：拖动移动、拖上方圆点旋转（
Shift任意角度）、双击家具转 90°、拖右下方块改宽深；整组选中后可一起移动 / 旋转。 - 复制粘贴：
Ctrl/⌘+C / X / V复制 / 剪切 / 粘贴到指针处，Ctrl/⌘+D原地创建副本。 - 多选排版：左中右 / 上中下对齐、等距分布、统一尺寸，一键成组排整齐。
- 其它：镜像（
H）、锁定（L）、置顶 / 置底、恢复默认尺寸颜色、删除（Delete）；方向键微调 10 mm（Shift100 mm）。 - 右键 / 触屏长按弹出操作菜单；选中后底部还会浮出一条常用操作栏（复制 / 旋转 / 镜像 / 锁定 / 置顶 / 删除）。
「显示 ▾ → 编辑辅助」里逐项开关，设置会被记住：
- 贴墙吸附：拖动家具时自动吸附到墙面。
- 对齐参考线：与附近家具的边缘 / 中线对齐时显示参考线。
- 净距标注：选中家具时标出到四周墙面的净距（如「800 / 1070」）。
- 碰撞检查：互相重叠的家具用红色斜线标出（地毯、壁挂、台面设备、绿植等不参与；椅子推进桌下不算重叠）。
- 移动步长：1 / 10 / 50 / 100 mm。
- 「显示 ▾」同时还有平面图层开关（尺寸、房间、家具、网格、承重墙、标注）、1:60 / 1:100 快捷比例，以及 3D 场景开关（全高墙 / 剖切墙 / 家具 / 房间名 / 夜景 / 日照时间）。
右侧面板分「概览 / 清单 / 报价」三页，未选中任何东西时显示：
- 概览：全屋预算粗估（地面材料、墙面乳胶漆、家具家电，含损耗）、占比条、六种风格一键套用、房间面积表（点击查看 / 更换地面）、地面材料估算、方案统计与常用操作提示。
- 清单：按房间分组的家具清单，可定位（飞到该家具）、锁定，并标出「跑到户型外」或「互相重叠」的家具，支持一键移回 / 选中。数量角标会实时提示问题件数。
- 报价：同名同价合并的报价明细（件数 × 单价 = 小计），家具家电 + 地面 + 墙面乳胶漆合计，可导出 CSV（Excel 直接打开）。
预算里的每一项都能改：单价可在家具属性面板里手填，地面材料可从 8 种里换（橡木 / 胡桃木地板、800 / 600 地砖、大理石、300 防滑砖、水磨石、满铺地毯，各带参考单价与损耗率）。
「概览」页提供 原木 / 奶油 / 北欧 / 工业 / 新中式 / 莫兰迪 六种风格，一键统一所有家具配色与客厅、卧室地面，可撤销。
- 测量（
M）：两点测距，Shift锁定水平 / 垂直。 - 拆改墙体（
X）：拆除可拆的非承重墙，承重墙受保护；「显示 ▾ → 承重墙」可高亮承重墙。 - 文字标注（
N）：在平面图任意位置加说明文字，4 种颜色 / 3 种字号，可拖动、双击编辑，随方案保存、导出与打印。 - 门窗：点选门 / 窗可改开启方向、推拉门方向与窗台高度。
- 房间：点选房间可改名、换地面材料。
- 画布：右下角缩放胶囊（点比例在 1:50 / 1:60 / 1:100 / 1:200 间切换）、适应窗口；底部状态栏实时显示鼠标坐标、当前比例、悬停与选中信息。
- 鸟瞰 / 漫游两种模式：鸟瞰（左键旋转、右键平移、滚轮缩放，还有「斜视 / 俯视」预设）；漫游为第一人称，
WASD行走、Shift快走、E开关正前方的门，触屏用摇杆，从入户门进入。 - 光照：「日照」滑杆（7:00–18:00）与夜景模式。
- 剖切墙：切到 1.2 m 高看内部布局，或全高墙看完整空间。
- 房间名标签与「房间」列表：点房间名飞到该房间。
- 实时同步：3D 与 2D 平面共用同一份数据，右侧面板改动立即生效。
「文件 ▾」菜单：
- 🔗 复制分享链接——把整套布置压缩进 URL（
#p=户型&v=数据），发给客户打开即可还原，无需服务器。 - 导出图片（PNG）、导出报价清单 CSV、打印（专排打印样式：白底，只输出平面图与页眉信息表，隐藏全部界面元素）。
- 导出方案 JSON / 导入方案——备份与迁移，导入时自动修复坐标异常的家具。
- 另存为方案 / 历史快照 / 重置… / 清空布置。
- 亮色 / 暗色主题（首次按系统偏好），全界面与 3D 场景联动，顶栏一键切换。
- 简体中文 / 繁體中文 / English 三语，界面文案、家具名、房间名、材料名、户型名全部跟着切。
- 全屏（
Shift+F）、左右面板可收起（[/]）腾出画布。
- 改动自动保存，状态显示在页脚；存储空间不足会明确提示。
- 载入 / 导入时自动修复坐标异常的家具；删除、清空等操作后的提示条自带「撤销」。
- 家具图层被隐藏时画布顶部有提示，点击即可恢复显示。
- 完整的撤销 / 重做栈（
Ctrl/⌘+Z/Ctrl/⌘+Shift+Z）。
页脚「快捷键」按钮（或按 ?）随时查看完整列表。
| 工具与视图 | 编辑 | ||
|---|---|---|---|
V |
选择 / 移动 | Ctrl/⌘+Z |
撤销 |
B |
框选 | Ctrl/⌘+Shift+Z |
重做 |
M |
测量（Shift 水平 / 垂直） |
Ctrl/⌘+C / X / V |
复制 / 剪切 / 粘贴到指针处 |
X |
拆改非承重墙 | Ctrl/⌘+D |
创建副本 |
N |
文字标注 | Ctrl/⌘+A |
全选家具 |
Ctrl/⌘+K |
命令面板（搜索一切） | Delete |
删除 |
T |
切换 2D / 3D | R / Shift+R |
旋转 90° |
F |
适应窗口 | H |
左右镜像 |
Z |
缩放到所选 | L |
锁定 / 解锁 |
+ / − |
放大 / 缩小 | 方向键 | 微调 10 mm（Shift 100 mm） |
空格+拖动 / 中键 |
平移画面 | ||
[ / ] |
收起 / 展开左右面板 | ||
Shift+F |
全屏 | ||
Esc |
取消选择 / 退出工具 |
鼠标 / 触屏：Shift+点击 加选、空白处 Shift+拖动 框选、右键或长按弹菜单、双击家具旋转、拖顶部圆点旋转（Shift 任意角度）、拖右下方块改尺寸、双指缩放平移。
3D 漫游：W A S D 移动、Shift 快走、E 开关正前方的门、Esc 暂停。
命令面板（Ctrl/⌘+K 或页脚「命令」）支持中英文混合搜索全部操作、风格、户型、房间、可添加的家具和已摆放的家具，回车执行——记不住快捷键时用它最快。
纯前端，没有任何后端请求，数据都在 localStorage：
| 键 | 内容 |
|---|---|
huxing-design-v2 |
全部户型的布置、房间命名与地面、墙体拆改、门窗调整、测量线、文字标注、风格、自定义家具（自动兼容迁移 v1） |
huxing-history |
历史快照 |
huxing-ui |
图层开关 / 编辑辅助 / 移动步长 / 面板分页 |
huxing-theme · huxing-lang |
主题、语言 |
huxing-recent · huxing-panes |
最近使用的家具、左右面板开合状态 |
「重置 → 清除本机全部数据」会清空以上所有键（建议先导出方案 JSON 备份）。
装修/
├── index.html # 全部内容：样式 + 户型数据 + 2D 引擎 + 3D 场景（~1.3 MB）
├── validate-plans.mjs # 户型数据自检脚本（node validate-plans.mjs）
├── manifest.webmanifest # PWA 清单（可安装到桌面 / 主屏）
├── icon-192.png / icon-512.png
├── screenshot/ # README 用的界面截图
└── README.md
index.html 内部大致分四段：样式（CSS 变量分「表面」与「外壳」两层）、户型数据与家具库、2D 平面引擎（原生 SVG + 指针事件）、3D 场景（three.js，写在 create3D() 工厂里）。
打开 index.html，在最后一个户型对象（当前为 const P12 = {...}）之后照格式增加一个对象并加入 const PLANS = [...]，再在 NAMES_EN 中补上英文名。改完运行 node validate-plans.mjs 自检；户型库按名称中的「X室 / X卫 / 开间」自动识别居室数：
const P13 = {
id: 'p13', // 唯一 id
name: '四室两厅两卫 · 140㎡', // 显示名（英文界面查 NAMES_EN 表）
en: '4BR · 2LR · 2BA · 140m²', // 英文名
note: '', noteEn: '', // 副标题备注（可空）
walls: [ [x0,y0,x1,y1,'类型'], ... ], // b=承重 e=外墙 n=非承重 low=矮墙；外墙在门窗洞口处断开
wins: [ {rect:[x0,y0,x1,y1], sill:0.9}, ... ], // 窗：sill=窗台高 m（head 默认 2.4）
doors: [ {name, rect, h:[铰点], c:[关闭方向], o:[开门方向], len}, ... ], // 入户门加 entry:true，o 指向室内
slides:[ {rect, v:true} ], // 推拉门，v = 竖向墙
rooms: [ {id, name, poly:[[x,y]...], mat, at:[标签x,y], counted:false?}, ... ], // poly 用墙内皮坐标
dims: [ {h:1, at:-750, start:0, segs:[...]}, ... ], // 尺寸标注链，h=1 水平；at 为标注线位置
bounds:{x, y, w, h}, // 画布初始范围（含标注留白）
defaults:[ {t:'bed', n:'双人床', x, y, w, d, r, c?}, ... ], // 默认家具布置
};坐标约定：mm，原点 = 左侧外墙内皮与顶部外墙内皮。入户箭头、3D 漫游出生点、窗台高、3D 场景中心全部自动推导，无需另行配置。
validate-plans.mjs 会检查：字段合法性与坐标递增、门窗洞口不与墙段实体重叠、尺寸标注链每段为正且总长与墙长一致、房间多边形面积为正且在画布内、默认家具都在室内、门的方向向量 / 铰点 / 入户门唯一性。退出码 0 表示全部通过。由于校验脚本是从 HTML 里提取数据段执行的，户型数据结构改动时只需同步它开头那两个定位字符串。
离线与依赖
- three.js r160 已以 base64 data-URL 形式内联进 importmap（无 CDN 依赖），因此断网、
file://打开都能用。 - 升级 three.js：下载新版
build/three.module.min.js与examples/jsm/{controls/OrbitControls,controls/PointerLockControls,geometries/RoundedBoxGeometry,environments/RoomEnvironment,renderers/CSS2DRenderer}.js，逐个 base64 后替换 importmap 中对应data:text/javascript;base64,...的值（注意 importmap 内必须是纯 JSON，不能加注释）。
加载与渲染
- importmap 位于
</body>前（而非<head>），让 2D 界面先完成解析与首屏绘制。3D 模块写在create3D(...)工厂函数里，首次进入 3D（或鼠标移到「2D / 3D」切换按钮上预加载）时才import()three.js 并创建场景；新增 three 插件时需同时加到load()的 import 列表与create3D参数。 - 3D 采用按需渲染：画面静止时不渲染。直接修改场景（增删物体、改材质 / 可见性 / 相机）后需调用
invalidate()，否则要等下一次交互才刷新；家具与平面实时同步走增量重建（签名对比，只有变化的图层重画）。 - 2D 用原生 SVG 绘制，家具 / 墙体 / 门窗 / 标注分图层（
#gFurn、#gWalls…），选中态与手柄单独一层；大量元素下靠签名（sigArch/sigFurn/sigLabels）避免整树重建。
样式
- 视觉方向「制图工作室」：深墨色背板 + 纸面工作岛 + 朱红信号色
#ef5a24。 - 令牌分两层——
--s-*为卡片表面、--shell-*为深色外壳（顶栏 / 页脚 / 浮动工具条 / 提示等，亮暗主题下都是深色）。组件只使用--ink/--card/--line等语义变量；外壳区域（header, footer, .hero, #fab …选择器组）把语义变量重新指向外壳值，弹出菜单 / 对话框再指回表面值。暗色在:root[data-theme="dark"]覆盖两层取值。新增样式请复用语义变量而非写死颜色；平面 SVG 与 3D 中的选中色写在 JS 常量ACC等处。 - 画布点阵：
main的背景点阵由applyView()写入--gs / --gx / --gy，与平面坐标对齐（1 m 一点，按缩放 2 倍调整）；开启「网格」图层时自动隐藏。
数据模型
- 方案数据另有
notes（文字标注{id,x,y,text,color,size}）与style（最近套用的风格 id）。 - 家具数据字段：
{id,type,name,cx,cy,w,d,rot,color}，可选flip（镜像）、locked（锁定）、price（手填单价，优先于家具库参考价）、h（自定义家具高度 mm）。家具库条目为[类型, 名称, 宽, 深, 颜色, 参考单价]。 - 碰撞检查规则见
NOCOLLIDE（地毯、壁挂、台面设备、绿植不参与）与SEATS/TABLES（椅子推进桌下不算重叠）；内置 12 套户型的默认布置均无重叠（由validate-plans.mjs与运行时检查双重保证）。
多语言
- 静态文案写在元素上（
data-en/data-en-title/data-en-placeholder），首次切换语言时把中文原文存进dataset作为简中回退；动态文案用tr(zh, en)，专有名词（家具名、房间名、材料名、户型名）查NAMES_EN表。 - 新增界面文案若含简体专用字，需在
S2T字表中补上对应繁体字，否则繁体界面会保留简体字。
- 拆改墙体后不合并房间面积（面积表仍按原房间统计）。
- 家具之间只做碰撞「检查」（标红提示），不会自动推开；自动避让只在拖动落点做一次（避让墙体，保持在原房间内）。
- 报价为参考价（材料单价 × 面积含损耗 + 家具库参考价），不是真实预算。
- 数据存在浏览器本地：换浏览器 / 设备 / 清理站点数据会丢，重要方案请「导出方案 JSON」备份或发分享链接。