From 23f671fa6252d83470cd2302655b4c3d8f95279c Mon Sep 17 00:00:00 2001
From: impressionyang <impressionyang@users.noreply.example.com>
Date: Thu, 16 Apr 2026 14:26:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Lovelace=20?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8A=A0=E8=BD=BD=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：Custom element not found: sigmesh-gateway-panel

修复内容:
1. sigmesh-gateway-panel.js:
   - 添加 window.customCards 注册
   - 添加卡片元数据（name, description, preview）
   - 更新使用说明

2. hacs.json:
   - 添加 frontend.extra_module_url 配置
   - 添加 category: integration

3. 新增 deploy.sh 部署脚本:
   - 自动复制集成文件和 Lovelace 卡片
   - 设置正确权限
   - 提示用户配置 frontend

4. README.md:
   - 添加部署脚本使用说明
   - 添加常见问题排查（卡片加载错误）
   - 区分手动部署和 HACS 安装两种方式

部署步骤:
1. chmod +x deploy.sh && ./deploy.sh
2. 在 configuration.yaml 添加 frontend.extra_module_url
3. ha core restart
4. 清除浏览器缓存后添加卡片
---
 README.md                                     | 35 +++++++++++++--
 .../sigmesh_gateway/sigmesh-gateway-panel.js  | 21 +++++++--
 deploy.sh                                     | 45 +++++++++++++++++++
 hacs.json                                     |  6 ++-
 4 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 deploy.sh

diff --git a/README.md b/README.md
index 20ed444..5543d35 100644
--- a/README.md
+++ b/README.md
@@ -111,10 +111,22 @@ sigmesh_gateway:
 
 ### 添加 Lovelace 面板
 
-1. **复制前端文件**
+**方式一：手动部署（推荐）**
+
+1. **运行部署脚本**
    ```bash
-   mkdir -p /config/www/sigmesh_gateway
-   cp custom_components/sigmesh_gateway/sigmesh-gateway-panel.js /config/www/sigmesh_gateway/
+   chmod +x deploy.sh
+   ./deploy.sh
+   ```
+
+   或者手动执行：
+   ```bash
+   # 复制集成文件
+   cp -r custom_components/sigmesh_gateway ~/.homeassistant/custom_components/
+
+   # 复制 Lovelace 卡片文件
+   mkdir -p ~/.homeassistant/www/sigmesh_gateway
+   cp custom_components/sigmesh_gateway/sigmesh-gateway-panel.js ~/.homeassistant/www/sigmesh_gateway/
    ```
 
 2. **配置 frontend**
@@ -127,11 +139,28 @@ sigmesh_gateway:
    ```
 
 3. **重启 Home Assistant**
+   ```bash
+   ha core restart
+   ```
 
 4. **添加卡片到 Dashboard**
    - 编辑仪表板 → 添加卡片 → 自定义卡片
    - 输入：`custom:sigmesh-gateway-panel`
 
+**方式二：通过 HACS 安装**
+
+通过 HACS 安装后，前端模块会自动加载。
+
+### 常见问题
+
+**错误：Custom element not found: sigmesh-gateway-panel**
+
+解决方法：
+1. 确认卡片文件已复制到正确位置：`~/.homeassistant/www/sigmesh_gateway/sigmesh-gateway-panel.js`
+2. 确认 `configuration.yaml` 中配置了 `extra_module_url`
+3. 清除浏览器缓存或硬刷新（Ctrl+Shift+R）
+4. 检查浏览器控制台是否有加载错误
+
 ### Web UI 功能
 
 - 📡 **设备扫描** - 扫描可用的 Bluetooth Mesh 设备
diff --git a/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js b/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js
index dffabb0..c14fb9a 100644
--- a/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js
+++ b/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js
@@ -2,18 +2,31 @@
  * SigMesh Gateway 配网控制面板 - Lovelace 自定义卡片
  *
  * 使用方法:
- * 1. 将此文件复制到 HA 的 www/community/sigmesh_gateway/ 目录
- * 2. 在 HA 的 configuration.yaml 中添加:
+ * 1. 在 HACS 中安装本集成后，卡片会自动可用
+ * 2. 或者手动复制此文件到 HA 的 www/sigmesh_gateway/ 目录
+ * 3. 在 HA 的 configuration.yaml 中添加:
  *    frontend:
  *      extra_module_url:
- *        - /local/community/sigmesh_gateway/sigmesh-gateway-panel.js
- * 3. 在 Lovelace Dashboard 中添加自定义卡片
+ *        - /local/sigmesh_gateway/sigmesh-gateway-panel.js
+ * 4. 在 Lovelace Dashboard 中添加自定义卡片: custom:sigmesh-gateway-panel
  */
 
 // 配置常量
 const API_BASE = '/api/sigmesh_gateway';
 const POLL_INTERVAL = 3000;
 
+// 注册到全局自定义卡片列表
+if (!window.customCards) {
+  window.customCards = [];
+}
+window.customCards.push({
+  type: 'sigmesh-gateway-panel',
+  name: 'SigMesh Gateway 配网管理',
+  description: '管理 SigMesh 网关的配网和分组功能',
+  preview: true,
+  documentationURL: 'https://github.com/impress-sig-mesh/sigmesh_gateway',
+});
+
 /**
  * Lovelace 卡片组件
  */
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..0167965
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,45 @@
+#!/bin/bash
+# SigMesh Gateway 部署脚本
+
+set -e
+
+echo "=== SigMesh Gateway 部署脚本 ==="
+
+# 获取 HA 配置目录
+HA_CONFIG="${HOME}/.homeassistant"
+if [ -n "$1" ]; then
+    HA_CONFIG="$1"
+fi
+
+echo "HA 配置目录：$HA_CONFIG"
+
+# 1. 复制集成文件
+echo "复制集成文件..."
+cp -r custom_components/sigmesh_gateway "$HA_CONFIG/custom_components/"
+
+# 2. 复制 Lovelace 卡片文件
+echo "复制 Lovelace 卡片文件..."
+mkdir -p "$HA_CONFIG/www/sigmesh_gateway"
+cp custom_components/sigmesh_gateway/sigmesh-gateway-panel.js "$HA_CONFIG/www/sigmesh_gateway/"
+
+# 3. 设置权限
+echo "设置权限..."
+chown -R homeassistant:homeassistant "$HA_CONFIG/custom_components/sigmesh_gateway"
+chown -R homeassistant:homeassistant "$HA_CONFIG/www/sigmesh_gateway"
+
+# 4. 提示用户配置 frontend
+echo ""
+echo "=== 配置步骤 ==="
+echo "请在 configuration.yaml 中添加以下内容:"
+echo ""
+echo "frontend:"
+echo "  extra_module_url:"
+echo "    - /local/sigmesh_gateway/sigmesh-gateway-panel.js"
+echo ""
+
+# 5. 重启提示
+echo "=== 重启 Home Assistant ==="
+echo "运行以下命令重启:"
+echo "  ha core restart"
+echo ""
+echo "部署完成！"
diff --git a/hacs.json b/hacs.json
index b692b19..c5b2ec8 100644
--- a/hacs.json
+++ b/hacs.json
@@ -6,5 +6,9 @@
   "zip_release": true,
   "homeassistant": "2024.1.0",
   "hacs": "1.34.0",
-  "icon": ".asset/impress_sig_mesh_hacs.png"
+  "icon": ".asset/impress_sig_mesh_hacs.png",
+  "category": "integration",
+  "frontend": {
+    "extra_module_url": "/local/sigmesh_gateway/sigmesh-gateway-panel.js"
+  }
 }