空气质量传感器界面【视频演示】

109nas

                               
登录/注册后可看大图

这是优化过的界面，这样显示的内容就更紧凑

版本：1.2.0 · 2026-09-15

## 1. 交付内容与界面

- `indoor-environment-card.js`：完整自定义 Lovelace 卡片，只需此文件运行。
- 本文：安装、配置、历史统计、亮度服务和排错指南。

无需 HACS、构建工具、第三方前端库或外部网络资源。使用内置 SVG 图标、原生 Web Component 和 SVG 趋势图。

**1.2.0 紧凑版，按参考图保留左右结构**：顶部叶片图标、标题/副标题、数据更新时间；左侧大圆弧 PM2.5 仪表；右侧温度、湿度、甲醛、屏幕亮度四格；底部横向导航。首页直接提供亮度滑块。PM2.5 数字只出现一次，等级只在圆弧内显示一次。右上角更多按钮打开对应 HA 实体信息。

默认 `appearance: light`，固定参考图浅色，避免 HA 主题把整张卡染蓝；仪表盘系统背景不改变。选择 `appearance: theme` 则继承 HA 卡片背景和文字色。所有常见宽度均保留左侧圆弧仪表、右侧四格，不再在窄屏堆成上下长卡。标题、图标、数字随宽度缩放，压缩上下留白。420px 浏览器窗口（卡片约396px宽）的模拟检查中卡片高约296px；实际高度会受实体文本和主题影响。温度、湿度单位放在数值后，甲醛单位保留下一行。已去除亮度滑块下方全部百分比刻度，亮度当前百分比仍保留。

圆弧为参考图的固定装饰弧形，**不是 AQI、百分比或健康评分**；真实数值来自 PM2.5 实体，圆弧不随数值变化。实体不可用时弧线变灰。等级文字由可选 `quality_entity` 提供；未配置显示“实时监测”，不凭空显示“优”。图下默认说明为“室内环境 · 实时数据”，不再添加重复等级。随包预览图片使用模拟数据，不代表你的传感器读数。

底部固定五个入口：智能环境、温度、湿度、甲醛、亮度。点击切换卡片内部内容，不需要创建额外 dashboard view，不改变 URL，刷新页面后回到总览。

**防闪动改动**：过滤无关实体更新；保留 ha-card、图标、圆弧和滑块节点，仅更新有变化的文本/属性；不再每次更新都替换 shadowRoot.innerHTML。使用同步内置 SVG 图标，取消异步图标加载。拖动期间暂缓更新，避免滑块被重

这个界面在手机上确实挺 好看的，10 个以上人需要，到时候我再发布代码以及安装教程。

手机端界面展示 效果。
如果需要代码的，留言，我这边在测试代码当中，做完后，打开挺 好看的。高级感 十足，

gaofei930

大佬，小白求代码

ilongjiang

漂亮，求代码

lx8692

佬，求一个

penguinmm

大佬，求代码，谢谢