Update xiaoshi-pad-card.js

Changed the data refresh interval from 300 seconds to 3 seconds.

README.md

@@ -24,19 +24,12 @@ max: 80                      # 当前地区最大值
 mode: 湿度                   # 【温度】或者【湿度】
 ~~~
 
-## 功能2：HA版本更新卡(手机平板端通用)
+## 功能2：HA信息卡(手机平板端通用)
 **引用示例**
 ~~~
 type: custom:xiaoshi-update-card
 width: 100%
-theme: on
-~~~
-
-## 功能3：HA离线设备卡(手机平板端通用)
-**引用示例**
-~~~
-type: custom:xiaoshi-offline-card
-width: 100%
+skip_updates: false    #是否包含已跳过的更新
 theme: on
 exclude_devices:
   - *设备*
@@ -44,7 +37,7 @@ exclude_entities:
   - *shiti*
 ~~~
 
-## 功能4：电话信息余额卡(手机平板端通用)
+## 功能3：电话信息余额卡(手机平板端通用)
 **引用示例**
 ~~~
 type: custom:xiaoshi-balance-card
@@ -68,7 +61,7 @@ entities:
       warning: "99"
 ~~~
 
-## 功能5：待办事项卡(手机平板端通用)
+## 功能4：待办事项卡(手机平板端通用)
 **引用示例**
 ~~~
 type: custom:xiaoshi-todo-card
@@ -79,7 +72,7 @@ entities:
   - todo.ji_shi_ben
 ~~~
 
-## 功能6：耗材信息卡片(手机平板端通用)
+## 功能5：耗材信息卡片(手机平板端通用)
 **引用示例**
 ~~~
 type: custom:xiaoshi-consumables-card

xiaoshi-device-balance-card.js

@@ -245,9 +245,26 @@ class XiaoshiBalanceCardEditor extends LitElement {
             name="global_warning"
             placeholder="如: >10, <=5, ==on, ==off, =='hello world'"
           />
-          <div class="help-text">
-            全局预警条件：当任一实体满足此条件时，该实体显示为红色预警状态<br>
-            优先级：明细预警 > 全局预警 > 无预警
+        </div>
+        
+        <div class="form-group">
+          <label>预警颜色：设置预警状态下的显示颜色</label>
+          <div style="display: flex; gap: 8px; align-items: center;">
+            <input 
+              type="color" 
+              @change=${this._entityChanged}
+              .value=${this.config.warning_color || '#f44336'}
+              name="warning_color"
+              style="width: 50px; height: 34px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;"
+            />
+            <input 
+              type="text" 
+              @change=${this._entityChanged}
+              .value=${this.config.warning_color || '#f44336'}
+              name="warning_color"
+              placeholder="默认：#f44336"
+              style="flex: 1;"
+            />
           </div>
         </div>
         
@@ -466,11 +483,12 @@ class XiaoshiBalanceCardEditor extends LitElement {
       newEntities = currentEntities.filter(e => e.entity_id !== entityId);
     } else {
       // 添加实体
-      newEntities = [...currentEntities, { 
-        entity_id: entityId, 
-        attribute: null,
+      const newEntity = { 
+        entity_id: entityId,
         overrides: undefined
-      }];
+      };
+      // 只有在明确指定属性时才添加 attribute 字段
+      newEntities = [...currentEntities, newEntity];
     }
     
     this.config = {
@@ -510,10 +528,17 @@ class XiaoshiBalanceCardEditor extends LitElement {
     const newEntities = [...currentEntities];
     
     if (newEntities[index]) {
-      newEntities[index] = {
-        ...newEntities[index],
-        attribute: attributeValue.trim() || null
-      };
+      const updatedEntity = { ...newEntities[index] };
+      
+      if (attributeValue.trim()) {
+        // 只有当属性值不为空时才设置 attribute 字段
+        updatedEntity.attribute = attributeValue.trim();
+      } else {
+        // 如果属性值为空，则移除 attribute 字段
+        delete updatedEntity.attribute;
+      }
+      
+      newEntities[index] = updatedEntity;
     }
     
     this.config = {
@@ -816,7 +841,7 @@ class XiaoshiBalanceCard extends LitElement {
       }
 
       .device-value.warning {
-        color: #F44336;
+        color: var(--warning-color, #F44336);
       }
 
       .device-unit {
@@ -827,7 +852,7 @@ class XiaoshiBalanceCard extends LitElement {
       }
 
       .device-unit.warning {
-        color: #F44336;
+        color: var(--warning-color, #F44336);
       }
 
       .no-devices {
@@ -967,12 +992,12 @@ class XiaoshiBalanceCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadOilPriceData();
-    navigator.vibrate(50);
   }
 
   _handleEntityClick(entity) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击实体时打开实体详情页
     if (entity.entity_id) {
       const evt = new Event('hass-more-info', { composed: true });
@@ -981,6 +1006,17 @@ class XiaoshiBalanceCard extends LitElement {
     }
   }
 
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   _evaluateWarningCondition(value, condition) {
     if (!condition) return false;
     
@@ -1040,7 +1076,7 @@ class XiaoshiBalanceCard extends LitElement {
     const bgColor = theme === 'on' ? 'rgb(255, 255, 255)' : 'rgb(50, 50, 50)';
     
     return html`
-      <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor};">
+      <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor}; --warning-color: ${this.config.warning_color || '#f44336'};">
         <div class="card-header">
           <div class="card-title">
             <span class="offline-indicator" style="background: rgb(0,222,220); animation: pulse 2s infinite"></span>
@@ -1097,7 +1133,13 @@ class XiaoshiBalanceCard extends LitElement {
       this.style.setProperty('--card-width', config.width);
     }
     
-    // 设置主题
+    // 设置预警颜色
+    if (config.warning_color) {
+      this.style.setProperty('--warning-color', config.warning_color);
+    } else {
+      this.style.setProperty('--warning-color', '#f44336');
+    }
+    
     if (config.theme) {
       this.setAttribute('theme', config.theme);
     }

xiaoshi-device-consumables-card.js

@@ -74,7 +74,6 @@ class XiaoshiConsumablesCardEditor extends LitElement {
         align-items: center;
         justify-content: space-between;
         padding: 8px 12px;
-        cursor: pointer;
         border-bottom: 1px solid #eee;
       }
 
@@ -441,7 +440,7 @@ class XiaoshiConsumablesCardEditor extends LitElement {
             • 图标重定义：勾选后可自定义图标（如 mdi:phone）<br>
             • 单位重定义：勾选后可自定义单位（如 元、$、kWh 等）<br>
             • 预警条件：勾选后设置预警条件，支持 >10, >=10, <10, <=10, ==10, ==on, ==off, =="hello world" 等<br>
-            • 未勾选重定义时，将使用实体的原始属性值
+            • 换算：对数值进行数学运算，支持 +10, -10, *1.5, /2 等<br>
           </div>
         </div>
       </div>
@@ -450,6 +449,8 @@ class XiaoshiConsumablesCardEditor extends LitElement {
   }
 
   _entityChanged(e) {
+
+    
     const { name, value } = e.target;
     if (!value && name !== 'theme' && name !== 'width' ) return;
     
@@ -500,7 +501,6 @@ class XiaoshiConsumablesCardEditor extends LitElement {
     } else {
       newEntities = [...currentEntities, { 
         entity_id: entityId, 
-        attribute: null,
         overrides: undefined
       }];
     }
@@ -542,10 +542,18 @@ class XiaoshiConsumablesCardEditor extends LitElement {
     const newEntities = [...currentEntities];
     
     if (newEntities[index]) {
-      newEntities[index] = {
-        ...newEntities[index],
-        attribute: attributeValue.trim() || null
-      };
+      const trimmedValue = attributeValue.trim();
+      if (trimmedValue === '') {
+        // 如果属性为空，则从配置中移除 attribute 字段
+        const { attribute, ...entityWithoutAttribute } = newEntities[index];
+        newEntities[index] = entityWithoutAttribute;
+      } else {
+        // 如果属性不为空，则设置属性值
+        newEntities[index] = {
+          ...newEntities[index],
+          attribute: trimmedValue
+        };
+      }
     }
     
     this.config = {
@@ -886,7 +894,7 @@ class XiaoshiConsumablesCard extends LitElement {
         margin-right: 8px;
         color: var(--fg-color, #000);
         flex-shrink: 0;
-        font-size: 10px;
+        font-size: 11px;
         width: 12px;
         height: 12px;
         display: flex;
@@ -896,7 +904,7 @@ class XiaoshiConsumablesCard extends LitElement {
 
       .device-name {
         color: var(--fg-color, #000);
-        font-size: 9px;
+        font-size: 11px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -906,13 +914,12 @@ class XiaoshiConsumablesCard extends LitElement {
 
       .device-value {
         color: var(--fg-color, #000);
-        font-size: 9px;
+        font-size: 11px;
         flex-shrink: 0;
         font-weight: bold;
         max-width: 45%;
         text-align: right;
         overflow: hidden;
-        text-overflow: ellipsis;
         white-space: nowrap;
       }
 
@@ -921,7 +928,7 @@ class XiaoshiConsumablesCard extends LitElement {
       }
 
       .device-unit {
-        font-size: 9px;
+        font-size: 11px;
         color: var(--fg-color, #000);
         margin-left: 0.5px;
         font-weight: bold;
@@ -1021,6 +1028,26 @@ class XiaoshiConsumablesCard extends LitElement {
           value = attributes[attributeName];
         }
 
+        // 特殊实体类型的数值显示逻辑
+        if (!attributeName) {
+          // binary_sensor 实体：off显示正常，on显示缺少
+          if (entityId.startsWith('binary_sensor.')) {
+            if (value === 'off') {
+              value = '正常';
+            } else if (value === 'on') {
+              value = '缺少';
+            }
+          }
+          // event 实体：unknown显示正常，非unknown或不可用时显示低电量
+          else if (entityId.startsWith('event.')) {
+            if (value === 'unknown') {
+              value = '正常';
+            } else if (value !== 'unknown' && value !== 'unavailable') {
+              value = '低电量';
+            }
+          }
+        }
+
         // 尝试从属性中获取单位
         if (attributes.unit_of_measurement) {
           unit = attributes.unit_of_measurement;
@@ -1054,10 +1081,11 @@ class XiaoshiConsumablesCard extends LitElement {
           }
         }
 
-        // 应用换算
+        // 应用换算（只对数值进行换算，不对文本状态进行换算）
         let originalValue = value;
-        if (conversion) {
+        if (conversion && !isNaN(parseFloat(value))) {
           value = this._applyConversion(value, conversion);
+        } else if (conversion && isNaN(parseFloat(value))) {
         }
 
         consumablesData.push({
@@ -1082,12 +1110,12 @@ class XiaoshiConsumablesCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadOilPriceData();
-    navigator.vibrate(50);
   }
 
   _handleEntityClick(entity) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击实体时打开实体详情页
     if (entity.entity_id) {
       const evt = new Event('hass-more-info', { composed: true });
@@ -1096,14 +1124,35 @@ class XiaoshiConsumablesCard extends LitElement {
     }
   }
 
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   _renderDeviceItem(consumablesData) {
     let isWarning = false;
     
-    if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') {
-      isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold);
+    // 特殊实体类型的默认预警逻辑
+    if (consumablesData.entity_id.startsWith('binary_sensor.') && !consumablesData.warning_threshold) {
+      // binary_sensor: "缺少"状态时预警
+      isWarning = consumablesData.value === '缺少';
+    } else if (consumablesData.entity_id.startsWith('event.') && !consumablesData.warning_threshold) {
+      // event: "低电量"状态时预警
+      isWarning = consumablesData.value === '低电量';
     } else {
-      if (this.config.global_warning && this.config.global_warning.trim() !== '') {
-        isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning);
+      // 使用配置的预警条件
+      if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') {
+        isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold);
+      } else {
+        if (this.config.global_warning && this.config.global_warning.trim() !== '') {
+          isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning);
+        }
       }
     }
     
@@ -1212,7 +1261,6 @@ class XiaoshiConsumablesCard extends LitElement {
     return false;
   }
 
-
   render() {
     if (!this.hass) {
       return html`<div class="loading">等待Home Assistant连接...</div>`;
@@ -1225,11 +1273,21 @@ class XiaoshiConsumablesCard extends LitElement {
     const warningCount = this._oilPriceData.filter(consumablesData => {
       let isWarning = false;
       
-      if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') {
-        isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold);
+      // 对于 binary_sensor 和 event，使用默认预警逻辑
+      if (consumablesData.entity_id.startsWith('binary_sensor.') && !consumablesData.warning_threshold) {
+        // binary_sensor: "缺少"状态时预警
+        isWarning = consumablesData.value === '缺少';
+      } else if (consumablesData.entity_id.startsWith('event.') && !consumablesData.warning_threshold) {
+        // event: "低电量"状态时预警
+        isWarning = consumablesData.value === '低电量';
       } else {
-        if (this.config.global_warning && this.config.global_warning.trim() !== '') {
-          isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning);
+        // 使用配置的预警条件
+        if (consumablesData.warning_threshold && consumablesData.warning_threshold.trim() !== '') {
+          isWarning = this._evaluateWarningCondition(consumablesData.value, consumablesData.warning_threshold);
+        } else {
+          if (this.config.global_warning && this.config.global_warning.trim() !== '') {
+            isWarning = this._evaluateWarningCondition(consumablesData.value, this.config.global_warning);
+          }
         }
       }
       

xiaoshi-device-ha-info-card.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
 
-class XiaoshiUpdateCardEditor extends LitElement {
+class XiaoshiHaInfoCardEditor extends LitElement {
   static get properties() {
     return {
       hass: { type: Object },
@@ -81,7 +81,31 @@ class XiaoshiUpdateCardEditor extends LitElement {
           <div class="help-text">如果勾选，将包含标记为跳过的版本更新</div>
         </div>
         
+        <div class="form-group">
+          <label>排除离线设备：每行一个设备名称，支持通配符(*)</label>
+          <textarea 
+            @change=${this._entityChanged}
+            .value=${this.config.exclude_devices ? this.config.exclude_devices.join('\n') : ''}
+            name="exclude_devices"
+            placeholder="例如：&#10;*温度传感器*&#10;客厅*&#10;*测试设备"
+          ></textarea>
+          <div class="help-text">
+            支持通配符匹配，例如 *客厅* 会匹配所有包含"客厅"的设备
+          </div>
+        </div>
 
+        <div class="form-group">
+          <label>排除离线实体：每行一个实体ID，支持通配符(*)</label>
+          <textarea 
+            @change=${this._entityChanged}
+            .value=${this.config.exclude_entities ? this.config.exclude_entities.join('\n') : ''}
+            name="exclude_entities"
+            placeholder="例如：&#10;sensor.*_temperature&#10;switch.guest_*&#10;binary_sensor.*_motion"
+          ></textarea>
+          <div class="help-text">
+            支持通配符匹配，例如 sensor.* 会匹配所有以 sensor. 开头的实体
+          </div>
+        </div>
       </div>
 
     `;
@@ -103,7 +127,13 @@ class XiaoshiUpdateCardEditor extends LitElement {
     // 处理不同字段的默认值
     if (name === 'width') {
       finalValue = value || '100%';
-    }
+    } else if (name === 'exclude_entities') {
+      // 将文本行转换为数组
+      finalValue = value ? value.split('\n').filter(line => line.trim()).map(line => line.trim()) : [];
+    } else if (name === 'exclude_devices') {
+      // 将文本行转换为数组
+      finalValue = value ? value.split('\n').filter(line => line.trim()).map(line => line.trim()) : [];
+    } 
     
     this.config = {
       ...this.config,
@@ -121,15 +151,17 @@ class XiaoshiUpdateCardEditor extends LitElement {
     this.config = config;
   }
 } 
-customElements.define('xiaoshi-update-card-editor', XiaoshiUpdateCardEditor);
+customElements.define('xiaoshi-ha-info-card-editor', XiaoshiHaInfoCardEditor);
 
-export class XiaoshiUpdateCard extends LitElement {
+class XiaoshiHaInfoCard extends LitElement {
   static get properties() {
     return {
       hass: Object,
       config: Object,
       _haUpdates: Array,
       _otherUpdates: Array,
+      _offlineDevices: Array,
+      _offlineEntities: Array,
       _loading: Boolean,
       _refreshInterval: Number,
       theme: { type: String }
@@ -159,7 +191,6 @@ export class XiaoshiUpdateCard extends LitElement {
         align-items: center;
         padding: 16px;
         background: var(--bg-color, #fff);
-        
         border-radius: 12px;
       }
 
@@ -189,7 +220,6 @@ export class XiaoshiUpdateCard extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-
       }
 
       /*标题统计数字*/
@@ -271,7 +301,8 @@ export class XiaoshiUpdateCard extends LitElement {
         align-items: center;
         padding: 0px;
         border-bottom: 1px solid rgb(150,150,150,0.2);
-        margin: 0 24px 8px 32px;
+        margin: 0 32px 4px 32px;
+        padding: 4px 0 0 0;
       }
 
       /*设备、实体明细背景*/
@@ -279,7 +310,7 @@ export class XiaoshiUpdateCard extends LitElement {
         flex: 1;
         overflow-y: auto;
         min-height: 0;
-        padding: 0 0 8px  0;
+        padding: 4px 0;
       }
 
       .device-icon {
@@ -294,7 +325,7 @@ export class XiaoshiUpdateCard extends LitElement {
       .device-name {
         font-weight: 500;
         color: var(--fg-color, #000);
-        margin-bottom: 4px;
+        margin: 2px 0;
       }
 
       .device-entity {
@@ -306,10 +337,9 @@ export class XiaoshiUpdateCard extends LitElement {
       .device-details {
         font-size: 10px;
         color: var(--fg-color, #000);
-        margin-top: 4px;
       }
 
-      .device-last-seen { 
+      .device-last-seen-update { 
         font-size: 10px; 
         color: var(--fg-color, #000); 
         padding: 5px; 
@@ -321,19 +351,25 @@ export class XiaoshiUpdateCard extends LitElement {
         transition: background-color 0.2s; 
       }
 
-      .device-last-seen:hover {
+      .device-last-seen-update:hover {
         background: rgb(255, 0, 0, 0.2);
       }
 
+      .device-last-seen {
+        font-size: 10px;
+        color: var(--fg-color, #000);
+        margin-left: auto;
+      }
+
       .no-devices {
         text-align: center;
-        padding: 8px 0 0 0;
+        padding: 8px 0;
         color: var(--fg-color, #000);
       }
 
       .loading {
         text-align: center;
-        padding: 0px;
+        padding: 10px 0px;
         color: var(--fg-color, #000);
       }
 
@@ -409,12 +445,12 @@ export class XiaoshiUpdateCard extends LitElement {
       /* 备份信息独立容器 */
       .backup-info {
         padding: 4px 0 4px 16px;
-        margin: 0 16px 0 30px;
-        border-bottom: 1px solid rgb(150,150,150,0.2);
+        margin: 0 32px 8px 32px;
         display: grid;
         grid-template-columns: auto auto auto;
         gap: 4px;
         align-items: center;
+        border-bottom: 1px solid rgb(150,150,150,0.2);
       }
     `;
   }
@@ -423,18 +459,21 @@ export class XiaoshiUpdateCard extends LitElement {
     super();
     this._haUpdates = [];
     this._otherUpdates = [];
+    this._offlineDevices = [];
+    this._offlineEntities = [];
     this._loading = false;
     this._refreshInterval = null;
     this.theme = 'on';
   }
 
   static getConfigElement() {
-    return document.createElement("xiaoshi-update-card-editor");
+    return document.createElement("xiaoshi-ha-info-card-editor");
   }
 
   connectedCallback() {
     super.connectedCallback();
     this._loadUpdateData();
+    this._loadOfflineDevices();
     
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
@@ -442,6 +481,7 @@ export class XiaoshiUpdateCard extends LitElement {
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
       this._loadUpdateData();
+      this._loadOfflineDevices();
     }, 300000);
   }
 
@@ -469,6 +509,388 @@ export class XiaoshiUpdateCard extends LitElement {
     }
   }
 
+  async _loadOfflineDevices() {
+    if (!this.hass) return;
+    
+    this._loading = true;
+    this.requestUpdate();
+
+    try {
+      // 并行获取所有需要的数据
+      const [devices, allEntityRegs] = await Promise.all([
+        this.hass.callWS({
+          type: 'config/device_registry/list'
+        }),
+        this.hass.callWS({
+          type: 'config/entity_registry/list'
+        })
+      ]);
+
+      // 获取当前实体状态
+      const entities = Object.values(this.hass.states);
+      const entityMap = {};
+      entities.forEach(entity => {
+        entityMap[entity.entity_id] = entity;
+      });
+
+      // 按设备ID分组实体
+      const entitiesByDevice = {};
+      allEntityRegs.forEach(entity => {
+        if (entity.device_id) {
+          if (!entitiesByDevice[entity.device_id]) {
+            entitiesByDevice[entity.device_id] = [];
+          }
+          entitiesByDevice[entity.device_id].push(entity);
+        }
+      });
+
+      const offlineDevices = [];
+
+      // 获取设备排除模式
+      const excludeDevicePatterns = this.config.exclude_devices || [];
+      
+      // 记录被排除的设备ID集合
+      const excludedDeviceIds = new Set();
+      
+      // 并行检查所有设备
+      const deviceChecks = devices.map(device => {
+        const deviceEntities = entitiesByDevice[device.id] || [];
+        return {
+          device,
+          deviceEntities,
+          isOffline: this._checkDeviceAvailabilitySync(device, deviceEntities, entityMap)
+        };
+      });
+      
+      // 过滤离线设备并构建数据
+      deviceChecks.forEach(({ device, deviceEntities, isOffline }) => {
+        if (isOffline) {
+          const deviceName = device.name_by_user || device.name || `设备 ${device.id.slice(0, 8)}`;
+          
+          // 检查设备名称是否匹配排除模式
+          if (this._matchesExcludePattern(deviceName, excludeDevicePatterns)) {
+            // 记录被排除的设备ID，以便后续排除其下属实体
+            excludedDeviceIds.add(device.id);
+            return; // 跳过匹配排除模式的设备
+          }
+          
+          // 再次确保设备有有效实体
+          const validEntities = deviceEntities.filter(entityReg => {
+            const entity = entityMap[entityReg.entity_id];
+            return entity && !entityReg.disabled_by;
+          });
+          
+          // 只有当设备有有效实体时才添加到离线设备列表
+          if (validEntities.length > 0) {
+            offlineDevices.push({
+              device_id: device.id,
+              name: deviceName,
+              model: device.model,
+              manufacturer: device.manufacturer,
+              area_id: device.area_id,
+              entities: validEntities, // 使用有效实体而不是所有实体
+              last_seen: this._getDeviceLastSeen(validEntities, entityMap),
+              icon: this._getDeviceIcon(device, validEntities)
+            });
+          }
+        }
+      });
+
+      // 按最后看到时间排序
+      offlineDevices.sort((a, b) => 
+        new Date(b.last_seen || 0) - new Date(a.last_seen || 0)
+      );
+
+      // 获取离线设备的所有实体ID
+      const offlineDeviceEntityIds = new Set();
+      offlineDevices.forEach(device => {
+        device.entities.forEach(entity => {
+          offlineDeviceEntityIds.add(entity.entity_id);
+        });
+      });
+
+      // 获取排除模式
+      const excludePatterns = this.config.exclude_entities || [];
+      
+      // 获取独立的离线实体（不属于离线设备的实体）
+      const offlineEntities = [];
+      allEntityRegs.forEach(entityReg => {
+        if (entityReg.disabled_by) return; // 跳过被禁用的实体
+        
+        const entity = entityMap[entityReg.entity_id];
+        if (!entity) return;
+
+        // 检查是否匹配排除模式
+        if (this._matchesExcludePattern(entityReg.entity_id, excludePatterns)) {
+          return; // 跳过匹配排除模式的实体
+        }
+
+        // 检查实体是否属于被排除的设备
+        if (entityReg.device_id && excludedDeviceIds.has(entityReg.device_id)) {
+          return; // 跳过属于被排除设备的实体
+        }
+
+        // 检查实体是否离线
+        const isEntityOffline = entity.state === 'unavailable' ;
+        
+        // 只处理离线且不属于离线设备的实体
+        if (isEntityOffline && !offlineDeviceEntityIds.has(entityReg.entity_id)) {
+          offlineEntities.push({
+            entity_id: entityReg.entity_id,
+            friendly_name: entity.attributes.friendly_name || entityReg.entity_id,
+            state: entity.state,
+            last_changed: entity.last_changed,
+            last_updated: entity.last_updated,
+            icon: entity.attributes.icon || this._getDefaultIcon(entityReg.entity_id),
+            device_class: entity.attributes.device_class,
+            unit_of_measurement: entity.attributes.unit_of_measurement,
+            device_id: entityReg.device_id,
+            platform: entityReg.platform
+          });
+        }
+      });
+
+      // 按最后更新时间排序
+      offlineEntities.sort((a, b) => 
+        new Date(b.last_updated) - new Date(a.last_updated)
+      );
+
+      this._offlineDevices = offlineDevices;
+      this._offlineEntities = offlineEntities;
+    } catch (error) {
+      console.error('加载离线设备失败:', error);
+      this._offlineDevices = [];
+    }
+
+    this._loading = false;
+  }
+
+  _checkDeviceAvailabilitySync(device, deviceEntities, entityMap) {
+    if (!deviceEntities || deviceEntities.length === 0) {
+      return false; // 没有实体的设备不视为离线，直接排除
+    }
+
+    // 检查设备的可用性状态
+    if (device.disabled_by) {
+      return false; // 被禁用的设备不算离线
+    }
+
+    // 过滤出有效的实体（未被禁用且在entityMap中存在）
+    const validEntities = deviceEntities.filter(entityReg => {
+      const entity = entityMap[entityReg.entity_id];
+      return entity && !entityReg.disabled_by;
+    });
+
+    // 如果没有有效实体，则不视为离线设备，直接排除
+    if (validEntities.length === 0) {
+      return false;
+    }
+
+    let hasAvailableEntity = false;
+    let hasUnavailableEntity = false;
+
+    for (const entityReg of validEntities) {
+      const entity = entityMap[entityReg.entity_id];
+      
+      if (entity.state !== 'unavailable' ) {
+        hasAvailableEntity = true;
+        break; // 找到一个可用实体就可以停止检查
+      } else {
+        hasUnavailableEntity = true;
+      }
+    }
+
+    // 如果设备有有效实体但所有实体都不可用，则设备离线
+    return hasUnavailableEntity && !hasAvailableEntity;
+  }
+
+  _getDeviceLastSeen(deviceEntities, entityMap) {
+    let lastSeen = null;
+
+    for (const entityReg of deviceEntities) {
+      const entity = entityMap[entityReg.entity_id];
+      if (!entity) continue;
+
+      const entityTime = new Date(entity.last_updated);
+      if (!lastSeen || entityTime > lastSeen) {
+        lastSeen = entityTime;
+      }
+    }
+
+    return lastSeen;
+  }
+
+  _getDeviceIcon(device, deviceEntities) {
+    // 优先使用设备图标
+    if (device.icon) {
+      return device.icon;
+    }
+
+    // 根据设备类型推断图标
+    if (device.model) {
+      const model = device.model.toLowerCase();
+      if (model.includes('light') || model.includes('bulb')) return 'mdi:lightbulb';
+      if (model.includes('switch') || model.includes('plug')) return 'mdi:power';
+      if (model.includes('sensor')) return 'mdi:eye';
+      if (model.includes('camera')) return 'mdi:camera';
+      if (model.includes('fan')) return 'mdi:fan';
+      if (model.includes('tv')) return 'mdi:multimedia'; 
+      if (model.includes('button')) return 'mdi:button-pointer'; 
+      if (model.includes('thermostat') || model.includes('climate')) return 'mdi:thermostat';
+    }
+
+    // 根据制造商推断图标
+    if (device.manufacturer) {
+      const manufacturer = device.manufacturer.toLowerCase();
+      if (manufacturer.includes('xiaomi') || manufacturer.includes('aqara')) return 'mdi:home-automation';
+      if (manufacturer.includes('philips')) return 'mdi:lightbulb';
+      if (manufacturer.includes('tp-link')) return 'mdi:network';
+    }
+
+    // 根据第一个实体的类型推断图标
+    if (deviceEntities && deviceEntities.length > 0) {
+      const firstEntityId = deviceEntities[0].entity_id;
+      return this._getDefaultIcon(firstEntityId);
+    }
+
+    return 'mdi:device-hub';
+  }
+
+  _getDefaultIcon(entityId) {
+    if (entityId.startsWith('light.')) return 'mdi:lightbulb';
+    if (entityId.startsWith('switch.')) return 'mdi:power';
+    if (entityId.startsWith('sensor.')) return 'mdi:eye';
+    if (entityId.startsWith('binary_sensor.')) return 'mdi:eye';
+    if (entityId.startsWith('device_tracker.')) return 'mdi:cellphone';
+    if (entityId.startsWith('media_player.')) return 'mdi:speaker';
+    if (entityId.startsWith('climate.')) return 'mdi:thermostat';
+    if (entityId.startsWith('cover.')) return 'mdi:window-shutter';
+    if (entityId.startsWith('weather.')) return 'mdi:weather-cloudy';
+    if (entityId.startsWith('input_select.')) return 'mdi:form-select';
+    if (entityId.startsWith('select.')) return 'mdi:form-select';
+    if (entityId.startsWith('input_text.')) return 'mdi:form-textbox';
+    if (entityId.startsWith('text.')) return 'mdi:form-textbox';
+    if (entityId.startsWith('button.')) return 'mdi:button-pointer';
+    if (entityId.startsWith('event.')) return 'mdi:gesture-tap-button';
+    if (entityId.startsWith('device_tracker.')) return 'mdi:lan-connect';
+    if (entityId.startsWith('notify.')) return 'mdi:message';
+    return 'mdi:help-circle';
+  }
+
+  _formatLastSeen(timestamp) {
+    if (!timestamp) return '未知';
+    
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 1) return '刚刚';
+    if (diffMins < 60) return `${diffMins}分钟前`;
+    if (diffHours < 24) return `${diffHours}小时前`;
+    if (diffDays < 7) return `${diffDays}天前`;
+    
+    return date.toLocaleDateString('zh-CN');
+  }
+
+  _handleRefresh() {
+    this._handleClick();
+    this._loadOfflineDevices();
+  }
+
+  _handleDeviceClick(device) {
+    // 点击设备时跳转到设备详情页
+    this._handleClick();
+    if (device.device_id) {
+      // 先关闭当前弹窗/界面
+      this._closeCurrentDialog();
+      
+      // 延迟执行导航，确保当前界面已关闭
+      setTimeout(() => {
+        const deviceUrl = `/config/devices/device/${device.device_id}`;
+        
+        // 尝试在Home Assistant环境中导航
+        try {
+          // 在Home Assistant环境中导航
+          window.history.pushState(null, '', deviceUrl);
+          window.dispatchEvent(new CustomEvent('location-changed'));
+        } catch (e) {
+          // 如果导航失败，在新标签页中打开，确保在最上层
+          window.open(deviceUrl, '_blank', 'noopener,noreferrer');
+        }
+      }, 300); // 短暂延迟确保当前界面已关闭
+    }
+  }
+  
+  _handleEntityClick(entity) {
+    this._handleClick();
+    // 点击实体时打开实体详情页
+    if (entity.entity_id) {
+      // 使用您建议的第一种方式
+      const evt = new Event('hass-more-info', { composed: true });
+      evt.detail = { entityId: entity.entity_id };
+      this.dispatchEvent(evt);
+    }
+  }
+
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
+  _closeCurrentDialog() {
+    // 查找并关闭当前可能的弹窗或对话框
+    const dialogs = document.querySelectorAll('ha-dialog, .mdc-dialog, paper-dialog, vaadin-dialog');
+    dialogs.forEach(dialog => {
+      if (dialog && dialog.open) {
+        dialog.close();
+      }
+    });
+    
+    // 尝试关闭更多UI的弹窗
+    const moreUIs = document.querySelectorAll('ha-more-info-dialog, .ha-more-info-dialog');
+    moreUIs.forEach(ui => {
+      if (ui && ui.close) {
+        ui.close();
+      }
+    });
+    
+    // 如果是在卡片详情页面，尝试返回上一页
+    if (window.history.length > 1) {
+      window.history.back();
+    }
+  }
+  
+  _matchesExcludePattern(entityId, patterns) {
+    if (!patterns || patterns.length === 0) {
+      return false;
+    }
+
+    for (const pattern of patterns) {
+      if (this._matchPattern(entityId, pattern)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  _matchPattern(str, pattern) {
+    // 将通配符模式转换为正则表达式
+    const regexPattern = pattern
+      .replace(/\./g, '\\.')  // 转义点号
+      .replace(/\*/g, '.*');   // 将 * 转换为 .*
+    
+    const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写
+    return regex.test(str);
+  }
   async _loadUpdateData() {
     if (!this.hass) return;
     
@@ -504,6 +926,12 @@ export class XiaoshiUpdateCard extends LitElement {
                 }
               }
               
+              // 新增规则：如果skipped_version为null情况下，当latest_version !== installed_version时，
+              // 且实体状态为off时，有可能是安装的版本比latest_version还高，这种不算更新的实体
+              if (attributes.skipped_version === null && entity.state === 'off') {
+                return; // 跳过此更新
+              }
+              
               const updateData = {
                 name: attributes.friendly_name || entity.entity_id.replace('update.', ''),
                 current_version: attributes.installed_version,
@@ -542,18 +970,15 @@ export class XiaoshiUpdateCard extends LitElement {
     this._loading = false;
   }
 
-
-
   _handleRefresh() {
+    this._handleClick();
     this._loadUpdateData();
-    navigator.vibrate(50);
+    this._loadOfflineDevices();
   }
-
-
   
   _handleUpdateClick(update) {
-    navigator.vibrate(50);
     // 点击更新项时弹出实体详情
+    this._handleClick();
     
     // 如果有entity_id，弹出实体详情
     if (update.entity_id) {
@@ -574,14 +999,19 @@ export class XiaoshiUpdateCard extends LitElement {
   _handleConfirmUpdate(update, event) {
     event.stopPropagation(); // 阻止事件冒泡
     event.preventDefault(); // 阻止默认行为
-    navigator.vibrate(50);
+    this._handleClick();
     
     // 弹出确认对话框
     const confirmed = confirm(`确认要更新 ${update.name} 吗？\n当前版本: ${update.current_version}\n最新版本: ${update.latest_version}`);
     
     if (confirmed) {
       this._executeUpdate(update);
+      // 延迟3秒后刷新数据，给更新操作足够时间完成
+      setTimeout(() => {
+        this._loadUpdateData();
+      }, 1000);
     }
+
   }
 
   _executeUpdate(update) {
@@ -794,19 +1224,20 @@ export class XiaoshiUpdateCard extends LitElement {
     const theme = this._evaluateTheme();
     const fgColor = theme === 'on' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
     const bgColor = theme === 'on' ? 'rgb(255, 255, 255)' : 'rgb(50, 50, 50)';
+    const warningCount =this._haUpdates.length + this._otherUpdates.length + this._offlineDevices.length + this._offlineEntities.length;
     
     return html`
       <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor};">
         <div class="card-header">
           <div class="card-title">
-            <span class="offline-indicator" style="background: ${this._haUpdates.length + this._otherUpdates.length === 0 ? 'rgb(0,205,0)' : 'rgb(255,20,0)'}; animation: ${this._haUpdates.length + this._otherUpdates.length === 0 ? 'none' : 'pulse 1s infinite'}"></span>
-            HA更新监控
-          </div>
-          <div style="display: flex; align-items: center; gap: 8px; ">
-              <span class="device-count ${this._haUpdates.length + this._otherUpdates.length > 0 ? 'non-zero' : 'zero'}">
-                ${this._haUpdates.length + this._otherUpdates.length}
-              </span>
-            <button class="refresh-btn" style="background: ${this._haUpdates.length + this._otherUpdates.length > 0 ? 'rgb(255,0,0,0.5)' : 'rgb(0,205,0)'}" @click=${this._handleRefresh}>
+          <span class="offline-indicator" style="background: ${warningCount=== 0 ? 'rgb(0,205,0)' : 'rgb(255,20,0)'}; animation: ${warningCount=== 0 ? 'none' : 'pulse 1s infinite'}"></span>
+          HA信息监控
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px; ">
+            <span class="device-count ${warningCount> 0 ? 'non-zero' : 'zero'}">
+              ${warningCount}
+            </span>
+          <button class="refresh-btn" style="background: ${warningCount> 0 ? 'rgb(255,0,0,0.5)' : 'rgb(0,205,0)'}" @click=${this._handleRefresh}>
               刷新
             </button>
           </div>
@@ -821,20 +1252,10 @@ export class XiaoshiUpdateCard extends LitElement {
         <div class="ha-version-info">
           ${this._renderHAVersionInfo()}
         </div>
-        
-        <!-- 备份信息 -->
-        <div class="section-divider">
-          <div class="section-title">
-            <span> • 备份信息</span>
-          </div>
-        </div>
-        <div class="backup-info">
-          ${this._renderBackupInfo()}
-        </div>
-        
+
         <div class="devices-list">
           ${this._loading ? 
-            html`<div class="loading">加载中...</div>` :
+            html`<div class="loading">HA版本信息加载中...</div>` :
             
             (this._haUpdates.length === 0 && this._otherUpdates.length === 0) ? 
               html`<div class="no-devices">✅ 所有组件都是最新版本</div>` :
@@ -847,7 +1268,7 @@ export class XiaoshiUpdateCard extends LitElement {
                     </div>
                   </div>
                   ${this._haUpdates.map(update => html`
-                    <div class="device-item">
+                    <div class="device-item" @click=${() => this._handleEntityClick(update)}>
                       <div class="device-icon">
                         <ha-icon icon="${update.icon}"></ha-icon>
                       </div>
@@ -858,7 +1279,7 @@ export class XiaoshiUpdateCard extends LitElement {
                           ${update.skipped_version ? html`<br><span style="color: #ff9800;">已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
-                      <div class="device-last-seen" @click=${(e) => this._handleConfirmUpdate(update, e)}>
+                      <div class="device-last-seen-update" @click=${(e) => this._handleConfirmUpdate(update, e)}>
                         立即更新
                       </div>
                     </div>
@@ -867,12 +1288,12 @@ export class XiaoshiUpdateCard extends LitElement {
                 ${this._otherUpdates.length > 0 ? html`
                   <div class="section-divider">
                     <div class="section-title">
-                      <span> • 加载项、卡片更新</span>
+                      <span> • HACS更新</span>
                       <span class="section-count ${this._otherUpdates.length > 0 ? 'non-zero' : 'zero'}">${this._otherUpdates.length}</span>
                     </div>
                   </div>
                   ${this._otherUpdates.map(update => html`
-                    <div class="device-item">
+                    <div class="device-item" @click=${() => this._handleEntityClick(update)}>
                       <div class="device-icon">
                         <ha-icon icon="${update.icon}"></ha-icon>
                       </div>
@@ -883,14 +1304,86 @@ export class XiaoshiUpdateCard extends LitElement {
                           ${update.skipped_version ? html`<br><span style="color: #ff9800;">已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
-                      <div class="device-last-seen" @click=${(e) => this._handleConfirmUpdate(update, e)}>
+                      <div class="device-last-seen-update" @click=${(e) => this._handleConfirmUpdate(update, e)}>
                         立即更新
                       </div>
                     </div>
                   `)}\n                ` : ''}
               `
           }
+   
+          ${this._loading ? 
+            html`<div class="loading">设备和实体加载中...</div>` :
+            
+            (this._offlineDevices.length === 0 && this._offlineEntities.length === 0) ? 
+              html`<div class="no-devices">✅ 所有设备和实体都在线</div>` :
+              html`
+                ${this._offlineDevices.length > 0 ? html`
+                  <div class="section-divider">
+                    <div class="section-title">
+                      <span> • 离线设备</span>
+                      <span class="section-count">${this._offlineDevices.length}</span>
+                    </div>
+                  </div>
+                  ${this._offlineDevices.map(device => html`
+                    <div class="device-item" @click=${() => this._handleDeviceClick(device)}>
+                      <div class="device-icon">
+                        <ha-icon icon="${device.icon}"></ha-icon>
+                      </div>
+                      <div class="device-info">
+                        <div class="device-name">${device.name}</div>
+                        <div class="device-details">
+                          ${device.manufacturer && device.model ? 
+                            `${device.manufacturer} ${device.model}` : 
+                            device.manufacturer || device.model || '未知设备'}
+                          ${device.entities ? `• ${device.entities.length} 个实体` : ''}
+                        </div>
+                      </div>
+                      <div class="device-last-seen">
+                        ${this._formatLastSeen(device.last_seen)}
+                      </div>
+                    </div>
+                  `)}\n                ` : ''}
+
+                ${this._offlineEntities.length > 0 ? html`
+                  <div class="section-divider">
+                    <div class="section-title">
+                      <span> • 离线实体</span>
+                      <span class="section-count">${this._offlineEntities.length}</span>
+                    </div>
+                  </div>
+                  ${this._offlineEntities.map(entity => html`
+                    <div class="device-item" @click=${() => this._handleEntityClick(entity)}>
+                      <div class="device-icon">
+                        <ha-icon icon="${entity.icon}"></ha-icon>
+                      </div>
+                      <div class="device-info">
+                        <div class="device-name">${entity.friendly_name}</div>
+                        <div class="device-details">
+                          ${entity.entity_id}
+                          ${entity.platform ? `• ${entity.platform}` : ''}
+                          ${entity.unit_of_measurement ? `• ${entity.unit_of_measurement}` : ''}
+                        </div>
+                      </div>
+                      <div class="device-last-seen">
+                        ${this._formatLastSeen(entity.last_updated)}
+                      </div>
+                    </div>
+                  `)}\n                ` : ''}
+              `
+          }
         </div>
+        
+        <!-- 备份信息 -->
+        <div class="section-divider">
+          <div class="section-title">
+            <span> • 备份信息</span>
+          </div>
+        </div>
+        <div class="backup-info">
+          ${this._renderBackupInfo()}
+        </div>
+
       </ha-card>
     `;
   }
@@ -914,10 +1407,12 @@ export class XiaoshiUpdateCard extends LitElement {
     const baseSize = 4;
     const haSize = Math.max(0, Math.min(this._haUpdates.length, 6));
     const otherSize = Math.max(0, Math.min(this._otherUpdates.length, 8));
-    return baseSize + haSize + otherSize;
+    const deviceSize = Math.max(0, Math.min(this._offlineDevices.length, 6));
+    const entitySize = Math.max(0, Math.min(this._offlineEntities.length, 8));
+    return baseSize + haSize + otherSize + deviceSize + entitySize;
   }
 }
-customElements.define('xiaoshi-update-card', XiaoshiUpdateCard);
+customElements.define('xiaoshi-ha-info-card', XiaoshiHaInfoCard);
 
 
 

xiaoshi-device-offline-card.js

@@ -1,873 +0,0 @@
-import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
-
-class XiaoshiOfflineCardEditor extends LitElement {
-  static get properties() {
-    return {
-      hass: { type: Object },
-      config: { type: Object }
-    };
-  }
-
-  static get styles() {
-    return css`
-      .form {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-      }
-      .form-group {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-      label {
-        font-weight: bold;
-      }
-      select, input, textarea {
-        padding: 8px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-      }
-      textarea {
-        min-height: 80px;
-        resize: vertical;
-      }
-      .help-text {
-        font-size: 0.85em;
-        color: #666;
-        margin-top: 4px;
-      }
-    `;
-  }
-
-  render() {
-    if (!this.hass) return html``;
-
-    return html`
-      <div class="form">
-        <div class="form-group">
-          <label>卡片宽度：支持像素(px)和百分比(%)，默认100%</label>
-          <input 
-            type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.width !== undefined ? this.config.width : '100%'}
-            name="width"
-            placeholder="默认100%"
-          />
-        </div>
-        
-        <div class="form-group">
-          <label>主题</label>
-          <select 
-            @change=${this._entityChanged}
-            .value=${this.config.theme !== undefined ? this.config.theme : 'on'}
-            name="theme"
-          >
-            <option value="on">浅色主题（白底黑字）</option>
-            <option value="off">深色主题（深灰底白字）</option>
-          </select>
-        </div>
-        
-        <div class="form-group">
-          <label>排除设备：每行一个设备名称，支持通配符(*)</label>
-          <textarea 
-            @change=${this._entityChanged}
-            .value=${this.config.exclude_devices ? this.config.exclude_devices.join('\n') : ''}
-            name="exclude_devices"
-            placeholder="例如：&#10;*温度传感器*&#10;客厅*&#10;*测试设备"
-          ></textarea>
-          <div class="help-text">
-            支持通配符匹配，例如 *客厅* 会匹配所有包含"客厅"的设备
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>过滤实体：每行一个实体ID，支持通配符(*)</label>
-          <textarea 
-            @change=${this._entityChanged}
-            .value=${this.config.exclude_entities ? this.config.exclude_entities.join('\n') : ''}
-            name="exclude_entities"
-            placeholder="例如：&#10;sensor.*_temperature&#10;switch.guest_*&#10;binary_sensor.*_motion"
-          ></textarea>
-          <div class="help-text">
-            支持通配符匹配，例如 sensor.* 会匹配所有以 sensor. 开头的实体
-          </div>
-        </div>
-      </div>
-
-    `;
-  }
-
-  _entityChanged(e) {
-    const { name, value } = e.target;
-    if (!value && name !== 'theme' && name !== 'width' && name !== 'exclude_entities' && name !== 'exclude_devices' ) return;
-    
-    let finalValue = value;
-    
-    // 处理不同字段的默认值
-    if (name === 'width') {
-      finalValue = value || '100%';
-    } else if (name === 'exclude_entities') {
-      // 将文本行转换为数组
-      finalValue = value ? value.split('\n').filter(line => line.trim()).map(line => line.trim()) : [];
-    } else if (name === 'exclude_devices') {
-      // 将文本行转换为数组
-      finalValue = value ? value.split('\n').filter(line => line.trim()).map(line => line.trim()) : [];
-    } 
-    
-    this.config = {
-      ...this.config,
-      [name]: finalValue
-    };
-    
-    this.dispatchEvent(new CustomEvent('config-changed', {
-      detail: { config: this.config },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  setConfig(config) {
-    this.config = config;
-  }
-} 
-customElements.define('xiaoshi-offline-card-editor', XiaoshiOfflineCardEditor);
-
-export class XiaoshiOfflineCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      _offlineDevices: Array,
-      _offlineEntities: Array,
-      _loading: Boolean,
-      _refreshInterval: Number,
-      theme: { type: String }
-    };
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        width: var(--card-width, 100%);
-      }
-
-      ha-card {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        background: var(--bg-color, #fff);
-        border-radius: 12px;
-      }
-
-      /*标题容器*/
-      .card-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 16px;
-        background: var(--bg-color, #fff);
-        
-        border-radius: 12px;
-      }
-
-      /*标题红色圆点*/
-      .offline-indicator {
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        margin-right: 8px;
-      }
-
-      /*标题红色圆点动画*/
-      @keyframes pulse {
-        0% { opacity: 1; }
-        50% { opacity: 0.5; }
-        100% { opacity: 1; }
-      }
-
-      /*标题*/
-      .card-title {
-        font-size: 20px;
-        font-weight: 500;
-        color: var(--fg-color, #000);
-        height: 30px;
-        line-height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-      }
-
-      /*标题统计数字*/
-      .device-count {
-        color: var(--fg-color, #000);
-        border-radius: 8px;
-        font-size: 13px;
-        width: 30px;
-        height: 30px;
-        text-align: center;
-        line-height: 30px;
-        font-weight: bold;
-        padding: 0px;
-      }
-      
-      .device-count.non-zero {
-        background: rgb(255, 0, 0, 0.5);
-      }
-      
-      .device-count.zero {
-        background: rgb(0, 205, 0);
-      }
-
-      /*标题刷新按钮*/
-      .refresh-btn {
-        color: var(--fg-color, #fff);
-        border: none;
-        border-radius: 8px;
-        padding: 5px;
-        cursor: pointer;
-        font-size: 13px;
-        width: 50px;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        font-weight: bold;
-        padding: 0px;
-      }
-
-      /*2级标题*/
-      .section-divider {
-        margin: 0 0 8px 0;
-        padding: 8px 8px;
-        background: var(--bg-color, #fff);
-        font-weight: 500;
-        color: var(--fg-color, #000);
-        border-top: 1px solid rgb(150,150,150,0.5);
-        border-bottom: 1px solid rgb(150,150,150,0.5);
-        margin: 0 16px 0 16px;
-
-      }
-      
-      /*2级标题字体*/
-      .section-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: var(--fg-color, #000);
-        font-size: 13px;
-      }
-
-      /*2级标题,统计数量字体*/
-      .section-count {
-        background: rgb(255,0,0,0.5);
-        color: var(--fg-color, #000);
-        border-radius: 12px;
-        width: 15px;
-        height: 15px;
-        text-align: center;
-        line-height: 15px;
-        padding: 3px;
-        font-size: 12px;
-        font-weight: bold;
-      }
-
-      /*设备、实体明细*/
-      .device-item {
-        display: flex;
-        align-items: center;
-        padding: 0px;
-        border-bottom: 1px solid rgb(150,150,150,0.2);
-        margin: 0 32px 0px 32px;
-      }
-
-      /*设备、实体明细背景*/
-      .devices-list {
-        flex: 1;
-        overflow-y: auto;
-        min-height: 0;
-        padding: 0 0 8px 0;
-      }
-
-      .device-icon {
-        margin-right: 12px;
-        color: var(--error-color);
-      }
-
-      .device-info {
-        flex-grow: 1;
-      }
-
-      .device-name {
-        font-weight: 500;
-        color: var(--fg-color, #000);
-        padding: 6px 0 0 0;
-      }
-
-      .device-entity {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        font-family: monospace;
-      }
-
-      .device-details {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-      }
-
-      .device-last-seen {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        margin-left: auto;
-      }
-
-      .no-devices {
-        text-align: center;
-        padding: 8px 0 0 0;
-        color: var(--fg-color, #000);
-      }
-
-      .loading {
-        text-align: center;
-        padding: 0px;
-        color: var(--fg-color, #000);
-      }
-    `;
-  }
-
-  constructor() {
-    super();
-    this._offlineDevices = [];
-    this._offlineEntities = [];
-    this._loading = false;
-    this._refreshInterval = null;
-    this.theme = 'on';
-  }
-
-  static getConfigElement() {
-    return document.createElement("xiaoshi-offline-card-editor");
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadOfflineDevices();
-    
-    // 设置主题属性
-    this.setAttribute('theme', this._evaluateTheme());
-    
-    // 每300秒刷新一次数据，减少频繁刷新
-    this._refreshInterval = setInterval(() => {
-      this._loadOfflineDevices();
-    }, 300000);
-  }
-
-  _evaluateTheme() {
-    try {
-      if (!this.config || !this.config.theme) return 'on';
-      if (typeof this.config.theme === 'function') {
-          return this.config.theme();
-      }
-      if (typeof this.config.theme === 'string' && 
-              (this.config.theme.includes('return') || this.config.theme.includes('=>'))) {
-          return (new Function(`return ${this.config.theme}`))();
-      }
-      return this.config.theme;
-    } catch(e) {
-      console.error('计算主题时出错:', e);
-      return 'on';
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._refreshInterval) {
-      clearInterval(this._refreshInterval);
-    }
-  }
-
-  async _loadOfflineDevices() {
-    if (!this.hass) return;
-    
-    this._loading = true;
-    this.requestUpdate();
-
-    try {
-      // 并行获取所有需要的数据
-      const [devices, allEntityRegs] = await Promise.all([
-        this.hass.callWS({
-          type: 'config/device_registry/list'
-        }),
-        this.hass.callWS({
-          type: 'config/entity_registry/list'
-        })
-      ]);
-
-      // 获取当前实体状态
-      const entities = Object.values(this.hass.states);
-      const entityMap = {};
-      entities.forEach(entity => {
-        entityMap[entity.entity_id] = entity;
-      });
-
-      // 按设备ID分组实体
-      const entitiesByDevice = {};
-      allEntityRegs.forEach(entity => {
-        if (entity.device_id) {
-          if (!entitiesByDevice[entity.device_id]) {
-            entitiesByDevice[entity.device_id] = [];
-          }
-          entitiesByDevice[entity.device_id].push(entity);
-        }
-      });
-
-      const offlineDevices = [];
-
-      // 获取设备排除模式
-      const excludeDevicePatterns = this.config.exclude_devices || [];
-      
-      // 记录被排除的设备ID集合
-      const excludedDeviceIds = new Set();
-      
-      // 并行检查所有设备
-      const deviceChecks = devices.map(device => {
-        const deviceEntities = entitiesByDevice[device.id] || [];
-        return {
-          device,
-          deviceEntities,
-          isOffline: this._checkDeviceAvailabilitySync(device, deviceEntities, entityMap)
-        };
-      });
-      
-      // 过滤离线设备并构建数据
-      deviceChecks.forEach(({ device, deviceEntities, isOffline }) => {
-        if (isOffline) {
-          const deviceName = device.name_by_user || device.name || `设备 ${device.id.slice(0, 8)}`;
-          
-          // 检查设备名称是否匹配排除模式
-          if (this._matchesExcludePattern(deviceName, excludeDevicePatterns)) {
-            // 记录被排除的设备ID，以便后续排除其下属实体
-            excludedDeviceIds.add(device.id);
-            return; // 跳过匹配排除模式的设备
-          }
-          
-          // 再次确保设备有有效实体
-          const validEntities = deviceEntities.filter(entityReg => {
-            const entity = entityMap[entityReg.entity_id];
-            return entity && !entityReg.disabled_by;
-          });
-          
-          // 只有当设备有有效实体时才添加到离线设备列表
-          if (validEntities.length > 0) {
-            offlineDevices.push({
-              device_id: device.id,
-              name: deviceName,
-              model: device.model,
-              manufacturer: device.manufacturer,
-              area_id: device.area_id,
-              entities: validEntities, // 使用有效实体而不是所有实体
-              last_seen: this._getDeviceLastSeen(validEntities, entityMap),
-              icon: this._getDeviceIcon(device, validEntities)
-            });
-          }
-        }
-      });
-
-      // 按最后看到时间排序
-      offlineDevices.sort((a, b) => 
-        new Date(b.last_seen || 0) - new Date(a.last_seen || 0)
-      );
-
-      // 获取离线设备的所有实体ID
-      const offlineDeviceEntityIds = new Set();
-      offlineDevices.forEach(device => {
-        device.entities.forEach(entity => {
-          offlineDeviceEntityIds.add(entity.entity_id);
-        });
-      });
-
-      // 获取排除模式
-      const excludePatterns = this.config.exclude_entities || [];
-      
-      // 获取独立的离线实体（不属于离线设备的实体）
-      const offlineEntities = [];
-      allEntityRegs.forEach(entityReg => {
-        if (entityReg.disabled_by) return; // 跳过被禁用的实体
-        
-        const entity = entityMap[entityReg.entity_id];
-        if (!entity) return;
-
-        // 检查是否匹配排除模式
-        if (this._matchesExcludePattern(entityReg.entity_id, excludePatterns)) {
-          return; // 跳过匹配排除模式的实体
-        }
-
-        // 检查实体是否属于被排除的设备
-        if (entityReg.device_id && excludedDeviceIds.has(entityReg.device_id)) {
-          return; // 跳过属于被排除设备的实体
-        }
-
-        // 检查实体是否离线
-        const isEntityOffline = entity.state === 'unavailable' ;
-        
-        // 只处理离线且不属于离线设备的实体
-        if (isEntityOffline && !offlineDeviceEntityIds.has(entityReg.entity_id)) {
-          offlineEntities.push({
-            entity_id: entityReg.entity_id,
-            friendly_name: entity.attributes.friendly_name || entityReg.entity_id,
-            state: entity.state,
-            last_changed: entity.last_changed,
-            last_updated: entity.last_updated,
-            icon: entity.attributes.icon || this._getDefaultIcon(entityReg.entity_id),
-            device_class: entity.attributes.device_class,
-            unit_of_measurement: entity.attributes.unit_of_measurement,
-            device_id: entityReg.device_id,
-            platform: entityReg.platform
-          });
-        }
-      });
-
-      // 按最后更新时间排序
-      offlineEntities.sort((a, b) => 
-        new Date(b.last_updated) - new Date(a.last_updated)
-      );
-
-      this._offlineDevices = offlineDevices;
-      this._offlineEntities = offlineEntities;
-    } catch (error) {
-      console.error('加载离线设备失败:', error);
-      this._offlineDevices = [];
-    }
-
-    this._loading = false;
-  }
-
-  _checkDeviceAvailabilitySync(device, deviceEntities, entityMap) {
-    if (!deviceEntities || deviceEntities.length === 0) {
-      return false; // 没有实体的设备不视为离线，直接排除
-    }
-
-    // 检查设备的可用性状态
-    if (device.disabled_by) {
-      return false; // 被禁用的设备不算离线
-    }
-
-    // 过滤出有效的实体（未被禁用且在entityMap中存在）
-    const validEntities = deviceEntities.filter(entityReg => {
-      const entity = entityMap[entityReg.entity_id];
-      return entity && !entityReg.disabled_by;
-    });
-
-    // 如果没有有效实体，则不视为离线设备，直接排除
-    if (validEntities.length === 0) {
-      return false;
-    }
-
-    let hasAvailableEntity = false;
-    let hasUnavailableEntity = false;
-
-    for (const entityReg of validEntities) {
-      const entity = entityMap[entityReg.entity_id];
-      
-      if (entity.state !== 'unavailable' ) {
-        hasAvailableEntity = true;
-        break; // 找到一个可用实体就可以停止检查
-      } else {
-        hasUnavailableEntity = true;
-      }
-    }
-
-    // 如果设备有有效实体但所有实体都不可用，则设备离线
-    return hasUnavailableEntity && !hasAvailableEntity;
-  }
-
-  _getDeviceLastSeen(deviceEntities, entityMap) {
-    let lastSeen = null;
-
-    for (const entityReg of deviceEntities) {
-      const entity = entityMap[entityReg.entity_id];
-      if (!entity) continue;
-
-      const entityTime = new Date(entity.last_updated);
-      if (!lastSeen || entityTime > lastSeen) {
-        lastSeen = entityTime;
-      }
-    }
-
-    return lastSeen;
-  }
-
-  _getDeviceIcon(device, deviceEntities) {
-    // 优先使用设备图标
-    if (device.icon) {
-      return device.icon;
-    }
-
-    // 根据设备类型推断图标
-    if (device.model) {
-      const model = device.model.toLowerCase();
-      if (model.includes('light') || model.includes('bulb')) return 'mdi:lightbulb';
-      if (model.includes('switch') || model.includes('plug')) return 'mdi:power';
-      if (model.includes('sensor')) return 'mdi:eye';
-      if (model.includes('camera')) return 'mdi:camera';
-      if (model.includes('fan')) return 'mdi:fan';
-      if (model.includes('tv')) return 'mdi:multimedia'; 
-      if (model.includes('button')) return 'mdi:button-pointer'; 
-      if (model.includes('thermostat') || model.includes('climate')) return 'mdi:thermostat';
-    }
-
-    // 根据制造商推断图标
-    if (device.manufacturer) {
-      const manufacturer = device.manufacturer.toLowerCase();
-      if (manufacturer.includes('xiaomi') || manufacturer.includes('aqara')) return 'mdi:home-automation';
-      if (manufacturer.includes('philips')) return 'mdi:lightbulb';
-      if (manufacturer.includes('tp-link')) return 'mdi:network';
-    }
-
-    // 根据第一个实体的类型推断图标
-    if (deviceEntities && deviceEntities.length > 0) {
-      const firstEntityId = deviceEntities[0].entity_id;
-      return this._getDefaultIcon(firstEntityId);
-    }
-
-    return 'mdi:device-hub';
-  }
-
-  _getDefaultIcon(entityId) {
-    if (entityId.startsWith('light.')) return 'mdi:lightbulb';
-    if (entityId.startsWith('switch.')) return 'mdi:power';
-    if (entityId.startsWith('sensor.')) return 'mdi:eye';
-    if (entityId.startsWith('binary_sensor.')) return 'mdi:eye';
-    if (entityId.startsWith('device_tracker.')) return 'mdi:cellphone';
-    if (entityId.startsWith('media_player.')) return 'mdi:speaker';
-    if (entityId.startsWith('climate.')) return 'mdi:thermostat';
-    if (entityId.startsWith('cover.')) return 'mdi:window-shutter';
-    if (entityId.startsWith('weather.')) return 'mdi:weather-cloudy';
-    return 'mdi:help-circle';
-  }
-
-  _formatLastSeen(timestamp) {
-    if (!timestamp) return '未知';
-    
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now - date;
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMins / 60);
-    const diffDays = Math.floor(diffHours / 24);
-
-    if (diffMins < 1) return '刚刚';
-    if (diffMins < 60) return `${diffMins}分钟前`;
-    if (diffHours < 24) return `${diffHours}小时前`;
-    if (diffDays < 7) return `${diffDays}天前`;
-    
-    return date.toLocaleDateString('zh-CN');
-  }
-
-  _handleRefresh() {
-    this._loadOfflineDevices();
-    navigator.vibrate(50);
-  }
-
-  _handleDeviceClick(device) {
-    navigator.vibrate(50);
-    // 点击设备时跳转到设备详情页
-    if (device.device_id) {
-      // 先关闭当前弹窗/界面
-      this._closeCurrentDialog();
-      
-      // 延迟执行导航，确保当前界面已关闭
-      setTimeout(() => {
-        const deviceUrl = `/config/devices/device/${device.device_id}`;
-        
-        // 尝试在Home Assistant环境中导航
-        try {
-          // 在Home Assistant环境中导航
-          window.history.pushState(null, '', deviceUrl);
-          window.dispatchEvent(new CustomEvent('location-changed'));
-        } catch (e) {
-          // 如果导航失败，在新标签页中打开，确保在最上层
-          window.open(deviceUrl, '_blank', 'noopener,noreferrer');
-        }
-      }, 300); // 短暂延迟确保当前界面已关闭
-    }
-  }
-  
-  _handleEntityClick(entity) {
-    navigator.vibrate(50);
-    // 点击实体时打开实体详情页
-    if (entity.entity_id) {
-      // 使用您建议的第一种方式
-      const evt = new Event('hass-more-info', { composed: true });
-      evt.detail = { entityId: entity.entity_id };
-      this.dispatchEvent(evt);
-    }
-  }
-  
-  _closeCurrentDialog() {
-    // 查找并关闭当前可能的弹窗或对话框
-    const dialogs = document.querySelectorAll('ha-dialog, .mdc-dialog, paper-dialog, vaadin-dialog');
-    dialogs.forEach(dialog => {
-      if (dialog && dialog.open) {
-        dialog.close();
-      }
-    });
-    
-    // 尝试关闭更多UI的弹窗
-    const moreUIs = document.querySelectorAll('ha-more-info-dialog, .ha-more-info-dialog');
-    moreUIs.forEach(ui => {
-      if (ui && ui.close) {
-        ui.close();
-      }
-    });
-    
-    // 如果是在卡片详情页面，尝试返回上一页
-    if (window.history.length > 1) {
-      window.history.back();
-    }
-  }
-  
-  _matchesExcludePattern(entityId, patterns) {
-    if (!patterns || patterns.length === 0) {
-      return false;
-    }
-
-    for (const pattern of patterns) {
-      if (this._matchPattern(entityId, pattern)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  _matchPattern(str, pattern) {
-    // 将通配符模式转换为正则表达式
-    const regexPattern = pattern
-      .replace(/\./g, '\\.')  // 转义点号
-      .replace(/\*/g, '.*');   // 将 * 转换为 .*
-    
-    const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写
-    return regex.test(str);
-  }
-
-  render() {
-    if (!this.hass) {
-      return html`<div class="loading">等待Home Assistant连接...</div>`;
-    }
-    // 获取主题和颜色
-    const theme = this._evaluateTheme();
-    const fgColor = theme === 'on' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
-    const bgColor = theme === 'on' ? 'rgb(255, 255, 255)' : 'rgb(50, 50, 50)';
-    
-    return html`
-      <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor};">
-        <div class="card-header">
-          <div class="card-title">
-            <span class="offline-indicator" style="background: ${this._offlineDevices.length + this._offlineEntities.length === 0 ? 'rgb(0,205,0)' : 'rgb(255,20,0)'}; animation: ${this._offlineDevices.length + this._offlineEntities.length === 0 ? 'none' : 'pulse 1s infinite'}"></span>
-            HA离线设备监控
-          </div>
-          <div style="display: flex; align-items: center; gap: 8px; ">
-              <span class="device-count ${this._offlineDevices.length + this._offlineEntities.length > 0 ? 'non-zero' : 'zero'}">
-                ${this._offlineDevices.length + this._offlineEntities.length}
-              </span>
-            <button class="refresh-btn" style="background: ${this._offlineDevices.length + this._offlineEntities.length > 0 ? 'rgb(255,0,0,0.5)' : 'rgb(0,205,0)'}" @click=${this._handleRefresh}>
-              刷新
-            </button>
-          </div>
-        </div>
-        
-        <div class="devices-list">
-          ${this._loading ? 
-            html`<div class="loading">加载中...</div>` :
-            
-            (this._offlineDevices.length === 0 && this._offlineEntities.length === 0) ? 
-              html`<div class="no-devices">✅ 所有设备和实体都在线</div>` :
-              html`
-                ${this._offlineDevices.length > 0 ? html`
-                  <div class="section-divider">
-                    <div class="section-title">
-                      <span> • 离线设备</span>
-                      <span class="section-count">${this._offlineDevices.length}</span>
-                    </div>
-                  </div>
-                  ${this._offlineDevices.map(device => html`
-                    <div class="device-item" @click=${() => this._handleDeviceClick(device)}>
-                      <div class="device-icon">
-                        <ha-icon icon="${device.icon}"></ha-icon>
-                      </div>
-                      <div class="device-info">
-                        <div class="device-name">${device.name}</div>
-                        <div class="device-details">
-                          ${device.manufacturer && device.model ? 
-                            `${device.manufacturer} ${device.model}` : 
-                            device.manufacturer || device.model || '未知设备'}
-                          ${device.entities ? `• ${device.entities.length} 个实体` : ''}
-                        </div>
-                      </div>
-                      <div class="device-last-seen">
-                        ${this._formatLastSeen(device.last_seen)}
-                      </div>
-                    </div>
-                  `)}\n                ` : ''}
-
-                ${this._offlineEntities.length > 0 ? html`
-                  <div class="section-divider">
-                    <div class="section-title">
-                      <span> • 离线实体</span>
-                      <span class="section-count">${this._offlineEntities.length}</span>
-                    </div>
-                  </div>
-                  ${this._offlineEntities.map(entity => html`
-                    <div class="device-item" @click=${() => this._handleEntityClick(entity)}>
-                      <div class="device-icon">
-                        <ha-icon icon="${entity.icon}"></ha-icon>
-                      </div>
-                      <div class="device-info">
-                        <div class="device-name">${entity.friendly_name}</div>
-                        <div class="device-details">
-                          ${entity.entity_id}
-                          ${entity.platform ? `• ${entity.platform}` : ''}
-                          ${entity.unit_of_measurement ? `• ${entity.unit_of_measurement}` : ''}
-                        </div>
-                      </div>
-                      <div class="device-last-seen">
-                        ${this._formatLastSeen(entity.last_updated)}
-                      </div>
-                    </div>
-                  `)}\n                ` : ''}
-              `
-          }
-        </div>
-      </ha-card>
-    `;
-  }
-
-  setConfig(config) {
-    this.config = config;
-    
-    // 设置CSS变量来控制卡片的宽度和高度
-    if (config.width) {
-      this.style.setProperty('--card-width', config.width);
-    }
-    
-    // 设置主题
-    if (config.theme) {
-      this.setAttribute('theme', config.theme);
-    }
-  }
-
-  getCardSize() {
-    // 根据离线设备和实体数量动态计算卡片大小
-    const baseSize = 4;
-    const deviceSize = Math.max(0, Math.min(this._offlineDevices.length, 6));
-    const entitySize = Math.max(0, Math.min(this._offlineEntities.length, 8));
-    return baseSize + deviceSize + entitySize;
-  }
-}
-customElements.define('xiaoshi-offline-card', XiaoshiOfflineCard);
-
-
-
-

xiaoshi-device-todo-card.js

@@ -941,12 +941,12 @@ class XiaoshiTodoCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadTodoData();
-    navigator.vibrate(50);
   }
 
   _handleEntityClick(entity) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击实体时打开实体详情页
     if (entity.entity_id) {
       const evt = new Event('hass-more-info', { composed: true });
@@ -955,6 +955,17 @@ class XiaoshiTodoCard extends LitElement {
     }
   }
 
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   async _addTodoItem(entityId, item, description = '', due = '') {
     try {
       const params = {
@@ -1082,7 +1093,25 @@ class XiaoshiTodoCard extends LitElement {
                       ${todoData.items.length === 0 ? 
                         html`<div class="no-devices">暂无待办事项</div>` :
                         html`
-                          ${todoData.items.map(item => {
+                          ${(() => {
+                            // 将待办事项分为有时间和无时间两组
+                            const itemsWithoutTime = todoData.items.filter(item => !item.due);
+                            const itemsWithTime = todoData.items.filter(item => item.due);
+                            
+                            // 没有时间的按名称排序
+                            itemsWithoutTime.sort((a, b) => (a.summary || '').localeCompare(b.summary || ''));
+                            
+                            // 有时间的按时间排序
+                            itemsWithTime.sort((a, b) => {
+                              const dateA = new Date(a.due);
+                              const dateB = new Date(b.due);
+                              return dateA - dateB;
+                            });
+                            
+                            // 合并结果：无时间的在前，有时间的在后
+                            const sortedItems = [...itemsWithoutTime, ...itemsWithTime];
+                            
+                            return sortedItems.map(item => {
                             const dueText = this._calculateDueDate(item.due);
                             const isEditing = this._editingItem && this._editingItem.entityId === todoData.entity_id && this._editingItem.uid === item.uid;
                             
@@ -1091,7 +1120,10 @@ class XiaoshiTodoCard extends LitElement {
                                 <input 
                                   type="checkbox" 
                                   .checked=${item.status === 'completed'}
-                                  @change=${(e) => this._updateTodoItem(todoData.entity_id, item.summary || item.uid, e.target.checked ? 'completed' : 'needs_action')}
+                                  @change=${(e) => {
+                                    this._updateTodoItem(todoData.entity_id, item.summary || item.uid, e.target.checked ? 'completed' : 'needs_action'); 
+                                    this._handleClick();
+                                  }}
                                   style="margin-right: 8px; margin-top: 2px;"
                                 />
                                 ${isEditing ? html`
@@ -1124,6 +1156,7 @@ class XiaoshiTodoCard extends LitElement {
                                         @input=${(e) => {
                                           this._editingItem.due = e.target.value;
                                           this.requestUpdate();
+                                          this._handleClick();
                                         }}
                                       />
                                       <button 
@@ -1132,6 +1165,7 @@ class XiaoshiTodoCard extends LitElement {
                                           this._editTodoItem(todoData.entity_id, item.summary || item.uid, this._editingItem.summary, this._editingItem.description, this._editingItem.due);
                                           this._editingItem = null;
                                           this.requestUpdate();
+                                          this._handleClick();
                                         }}
                                       >
                                         保存
@@ -1141,6 +1175,7 @@ class XiaoshiTodoCard extends LitElement {
                                         @click=${() => {
                                           this._editingItem = null;
                                           this.requestUpdate();
+                                          this._handleClick();
                                         }}
                                       >
                                         取消
@@ -1168,6 +1203,7 @@ class XiaoshiTodoCard extends LitElement {
                                         due: this._formatDateForInput(item.due) || ''
                                       };
                                       this.requestUpdate();
+                                      this._handleClick();
                                     }}
                                     style="margin-left: 8px; margin-top: 2px;"
                                     title="修改"
@@ -1177,7 +1213,10 @@ class XiaoshiTodoCard extends LitElement {
                                 ` : ''}
                                 <button 
                                   class="remove-btn" 
-                                  @click=${() => this._removeTodoItem(todoData.entity_id, item.summary || item.uid)}
+                                  @click=${() => {
+                                    this._removeTodoItem(todoData.entity_id, item.summary || item.uid);
+                                    this._handleClick();
+                                  }}
                                   style="margin-left: 4px; margin-top: 2px;"
                                   title="删除"
                                 >
@@ -1185,7 +1224,8 @@ class XiaoshiTodoCard extends LitElement {
                                 </button>
                               </div>
                             `;
-                          })}
+                          });
+                          })()}
                         `
                       }
                       <div>
@@ -1197,6 +1237,7 @@ class XiaoshiTodoCard extends LitElement {
                               [todoData.entity_id]: !this._expandedAddForm[todoData.entity_id]
                             };
                             this.requestUpdate();
+                            this._handleClick();
                           }}
                         >
                           ${this._expandedAddForm[todoData.entity_id] ? '收起' : '添加新待办事项'}
@@ -1244,6 +1285,7 @@ class XiaoshiTodoCard extends LitElement {
                                     descInput.value = '';
                                     dateInput.value = '';
                                   }
+                                  this._handleClick();
                                 }}
                               >
                                 添加

xiaoshi-pad-card.js

@@ -1,12 +1,15 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.1.1 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.2.5 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
 
-const loadCards = async () => {
-    await import('./xiaoshi-pad-grid-card.js');
-    await import('./xiaoshi-device-update-card.js');
-    await import('./xiaoshi-device-offline-card.js');
-    await import('./xiaoshi-device-balance-card.js');
-    await import('./xiaoshi-device-todo-card.js');
-    await import('./xiaoshi-device-consumables-card.js');
+const loadCards = () => {
+    import('./xiaoshi-pad-grid-card.js');
+    import('./xiaoshi-device-balance-card.js');
+    import('./xiaoshi-device-balance-button.js');
+    import('./xiaoshi-device-todo-card.js');
+    import('./xiaoshi-device-todo-button.js');
+    import('./xiaoshi-device-consumables-card.js');
+    import('./xiaoshi-device-consumables-button.js');
+    import('./xiaoshi-device-ha-info-card.js'); 
+    import('./xiaoshi-device-ha-info-button.js'); 
     
     window.customCards = window.customCards || [];
     window.customCards.push(...cardConfigs);
@@ -19,33 +22,51 @@ const cardConfigs = [
     description: '温度分布、湿度分布'
   },
   {
-    type: 'xiaoshi-update-card',
-    name: '消逝卡HA更新监控卡片',
-    description: '显示需要更新的组件和版本',
+    type: 'xiaoshi-ha-info-card',
+    name: '消逝HA信息卡片',
+    description: '消逝HA信息卡片',
     preview: true
   },
   {
-    type: 'xiaoshi-offline-card',
-    name: '消逝卡HA离线设备卡片',
-    description: '显示所有离线的设备和实体',
+    type: 'xiaoshi-ha-info-button',
+    name: '消逝HA信息按钮',
+    description: '消逝HA信息按钮',
     preview: true
   },
   {
     type: 'xiaoshi-balance-card',
-    name: '消逝电话余额卡',
-    description: '消逝电话余额卡',
+    name: '消逝余额信息卡片',
+    description: '消逝余额信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-balance-button',
+    name: '消逝余额信息按钮',
+    description: '消逝余额信息按钮',
     preview: true
   },
   {
     type: 'xiaoshi-todo-card',
-    name: '消逝待办事项',
-    description: '消逝待办事项',
+    name: '消逝待办信息卡片',
+    description: '消逝待办信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-todo-button',
+    name: '消逝待办信息按钮',
+    description: '消逝待办信息按钮',
     preview: true
   },
   {
     type: 'xiaoshi-consumables-card',
-    name: '消逝耗材统计',
-    description: '消逝耗材统计',
+    name: '消逝耗材信息卡片',
+    description: '消逝耗材信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-consumables-button',
+    name: '消逝耗材信息按钮',
+    description: '消逝耗材信息按钮',
     preview: true
   }
 ];

xiaoshi-pad-grid-card.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
 
-export class XiaoshiPadGridCard extends LitElement {
+class XiaoshiPadGridCard extends LitElement {
   static get properties() {
     return {
       hass: Object,