Update xiaoshi-pad-card.js

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

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>
         
@@ -824,7 +841,7 @@ class XiaoshiBalanceCard extends LitElement {
       }
 
       .device-value.warning {
-        color: #F44336;
+        color: var(--warning-color, #F44336);
       }
 
       .device-unit {
@@ -835,7 +852,7 @@ class XiaoshiBalanceCard extends LitElement {
       }
 
       .device-unit.warning {
-        color: #F44336;
+        color: var(--warning-color, #F44336);
       }
 
       .no-devices {
@@ -975,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 });
@@ -989,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;
     
@@ -1048,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>
@@ -1105,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-button.js

@@ -234,47 +234,167 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
       <div class="form">
 
       <!-- button新元素 开始-->
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.badge_mode === true}
+            name="badge_mode"
+            id="badge_mode"
+          />
+          <label for="badge_mode" class="checkbox-label" style="color: orange; font-weight: bold;"> 
+            🏷️ 角标模式（勾选后只显示图标，数量>0时显示红色角标）
+          </label>
+        </div>
+
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.auto_hide === true}
+            name="auto_hide"
+            id="auto_hide"
+          />
+          <label for="auto_hide" class="checkbox-label" style="color: orange; font-weight: bold;"> 
+            🚫 自动隐藏（勾选后数量为0时完全不显示）
+          </label>
+        </div>
+
         <div class="form-group">
-          <label>按钮宽度：默认16vw, 支持像素(px)和百分比(%)</label>
+          <label>按钮显示文本
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_width !== undefined ? this.config.button_width : '16vw'}
+            .value=${this.config.button_text !== undefined ? this.config.button_text : '耗材'}
+            name="button_text"
+            placeholder="耗材"
+          /></label>
+        </div>
+
+        <div class="form-group">
+          <label>按钮显示图标
+          <input 
+            type="text" 
+            @change=${this._entityChanged}
+            .value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:battery-sync'}
+            name="button_icon"
+            placeholder="mdi:battery-sync"
+          /></label>
+        </div>
+
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.transparent_bg === true}
+            name="transparent_bg"
+            id="transparent_bg"
+          />
+          <label for="transparent_bg" class="checkbox-label"> 
+            （平板端特性）透明背景（勾选后按钮背景透明）
+          </label>
+        </div>
+    
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.lock_white_fg === true}
+            name="lock_white_fg"
+            id="lock_white_fg"
+          />
+          <label for="lock_white_fg" class="checkbox-label"> 
+            （平板端特性）白色图标文字（勾选后锁定显示白色）
+          </label>
+        </div>
+    
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.hide_icon === true}
+            name="hide_icon"
+            id="hide_icon"
+          />
+          <label for="hide_icon" class="checkbox-label"> 
+          （ 平板端特性）隐藏图标（勾选后隐藏图标）
+          </label>
+        </div>
+    
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.hide_colon === true}
+            name="hide_colon"
+            id="hide_colon"
+          />
+          <label for="hide_colon" class="checkbox-label"> 
+          （平板端特性）隐藏冒号（勾选后不显示冒号，改为空格）
+          </label>
+        </div>
+    
+        <div class="checkbox-group">
+          <input 
+            type="checkbox" 
+            class="checkbox-input"
+            @change=${this._entityChanged}
+            .checked=${this.config.hide_zero === true}
+            name="hide_zero"
+            id="hide_zero"
+          />
+          <label for="hide_zero" class="checkbox-label"> 
+          （平板端特性）隐藏0值（勾选后数量为0时不显示数量）
+          </label>
+        </div>
+
+        <div class="form-group">
+          <label>按钮宽度：默认65px, 支持像素(px)和百分比(%)</label>
+          <input 
+            type="text" 
+            @change=${this._entityChanged}
+            .value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
             name="button_width"
-            placeholder="默认16vw"
+            placeholder="默认65px"
           />
         </div>
 
         <div class="form-group">
-          <label>按钮高度：支持像素(px)、百分比(%)和视窗高度(vh)，默认2.8vh</label>
+          <label>按钮高度：支持像素(px)、百分比(%)和视窗高度(vh)，默认24px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_height !== undefined ? this.config.button_height : '2.8vh'}
+            .value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
             name="button_height"
-            placeholder="默认2.8vh"
+            placeholder="默认24px"
             />
         </div>
         
         <div class="form-group">
-          <label>按钮文字大小：支持像素(px)，默认1.25vh</label>
+          <label>按钮文字大小：支持像素(px)，默认11px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '1.25vh'}
+            .value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
             name="button_font_size"
-            placeholder="默认1.25vh"
+            placeholder="默认11px"
           />
         </div>
         
         <div class="form-group">
-          <label>按钮图标大小：支持像素(px)，默认18px</label>
+          <label>按钮图标大小：支持像素(px)，默认13px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '18px'}
+            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
             name="button_icon_size"
-            placeholder="默认18px"
+            placeholder="默认13px"
           />
         </div>
 
@@ -291,9 +411,17 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
         </div>
 
         <div class="form-group">
-          <label> </label>
-          <label>👇👇👇下面是弹出卡片内容👇👇👇</label>
-          <label> </label>
+          <label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
+          <textarea 
+            @change=${this._entityChanged}
+            .value=${this.config.other_cards || ''}
+            name="other_cards"
+            placeholder='# 示例配置：添加button卡片
+- type: custom:button-card
+  template: 测试模板(最好引用模板，否则大概率会报错)
+- type: custom:button-card
+  template: 测试模板(最好引用模板，否则大概率会报错)'>
+          </textarea>
         </div>
 
         <div class="checkbox-group">
@@ -301,11 +429,20 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
             type="checkbox" 
             class="checkbox-input"
             @change=${this._entityChanged}
-            .checked=${this.config.show_preview !== false}
-            name="show_preview"
-            id="show_preview"
+            .checked=${this.config.no_preview === true}
+            name="no_preview"
+            id="no_preview"
           />
-          <label for="show_preview" class="checkbox-label" style="color: red;"> 弹出卡片预览（正式使用时取消勾选）</label>
+          <label for="no_preview" class="checkbox-label" style="color: red;"> 
+            📻显示预览📻（ 请先勾选测试显示效果 ）
+          </label>
+        </div>
+
+
+        <div class="form-group">
+          <label> </label>
+          <label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
+          <label> </label>
         </div>
 
         <!-- button新元素 结束-->
@@ -532,17 +669,15 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
           </div>
           <div class="help-text">
             搜索并选择要显示的设备耗材实体，支持多选。每个实体可以配置：<br>
-            • <strong>特殊实体显示：</strong>binary_sensor(off→正常,on→缺少), event(unknown→正常,其他→低电量)<br>
             • 属性名：留空使用实体状态，或输入属性名<br>
             • 名称重定义：勾选后可自定义显示名称<br>
             • 图标重定义：勾选后可自定义图标（如 mdi:phone）<br>
             • 单位重定义：勾选后可自定义单位（如 元、$、kWh 等）<br>
             • 预警条件：勾选后设置预警条件，支持 >10, >=10, <10, <=10, ==10, ==on, ==off, =="hello world" 等<br>
             • 换算：对数值进行数学运算，支持 +10, -10, *1.5, /2 等<br>
-            • 未勾选重定义时，将使用实体的原始属性值
+            </div>
           </div>
         </div>
-      </div>
 
     `;
   }
@@ -553,7 +688,6 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
     const { name, value, type, checked } = e.target;
     
     let finalValue;
-    
     // 处理复选框
     if (type === 'checkbox') {
       finalValue = checked;
@@ -566,11 +700,11 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
     if (name === 'button_width') {
       finalValue = value || '100%';
     } else if (name === 'button_height') {
-      finalValue = value || '2.8vh';
+      finalValue = value || '24px';
     } else if (name === 'button_font_size') {
-      finalValue = value || '1.25vh';
+      finalValue = value || '11px';
     } else if (name === 'button_icon_size') {
-      finalValue = value || '18px';
+      finalValue = value || '13px';
     } else if (name === 'width') {
       finalValue = value || '100%';
     } else if (name === 'tap_action') {
@@ -769,7 +903,7 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
     this._filteredEntities = [];
     this._showEntityList = false;
   }
-
+    
   setConfig(config) {
     this.config = config;
   }
@@ -784,6 +918,7 @@ class XiaoshiConsumablesButton extends LitElement {
       _oilPriceData: Array,
       _loading: Boolean,
       _refreshInterval: Number,
+      _dataLoaded: Boolean,   //button新元素
       theme: { type: String }
     };
   }
@@ -797,14 +932,14 @@ class XiaoshiConsumablesButton extends LitElement {
 
       /*button新元素 开始*/
       .consumables-status {
-        width: var(--button-width, 16vw);
-        height: var(--button-height, 2.8vh);
+        width: var(--button-width, 65px);
+        height: var(--button-height, 24px);
         padding: 0;
         margin: 0;
         background: var(--bg-color, #fff);
         color: var(--fg-color, #000);
         border-radius: 10px;
-        font-size: var(--button-font-size, 14px);
+        font-size: var(--button-font-size, 11px);
         font-weight: 500;
         text-align: center;
         box-sizing: border-box;
@@ -814,12 +949,55 @@ class XiaoshiConsumablesButton extends LitElement {
         gap: 0;
         cursor: pointer;
         transition: background-color 0.2s, transform 0.1s;
+        position: relative;
       }
 
       .status-icon {
-        --mdc-icon-size: var(--button-icon-size, 18px);
+        --mdc-icon-size: var(--button-icon-size, 13px);
         color: var(--fg-color, #000);
+        margin-right: 3px;
       }
+
+      /* 角标模式样式 */
+      .consumables-status.badge-mode {
+        width: var(--button-width, 65px);
+        height: var(--button-height, 24px);
+        border-radius: 10px;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .consumables-status.badge-mode .status-icon {
+        color: rgb(128, 128, 128);
+        transition: color 0.2s;
+      }
+
+      .consumables-status.badge-mode.has-warning .status-icon {
+        color: rgb(255, 0, 0);
+      }
+
+      .badge-number {
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        min-width: 12px;
+        height: 12px;
+        background: rgb(255, 0, 0);
+        color: rgb(255, 255, 255);
+        border-radius: 50%;
+        font-size: 8px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        box-sizing: border-box;
+        line-height: 1;
+      }
+
       /*button新元素 结束*/
 
       ha-card {
@@ -1044,7 +1222,7 @@ class XiaoshiConsumablesButton 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;
@@ -1054,7 +1232,7 @@ class XiaoshiConsumablesButton extends LitElement {
 
       .device-name {
         color: var(--fg-color, #000);
-        font-size: 9px;
+        font-size: 11px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -1064,13 +1242,12 @@ class XiaoshiConsumablesButton 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;
       }
 
@@ -1079,7 +1256,7 @@ class XiaoshiConsumablesButton extends LitElement {
       }
 
       .device-unit {
-        font-size: 9px;
+        font-size: 11px;
         color: var(--fg-color, #000);
         margin-left: 0.5px;
         font-weight: bold;
@@ -1109,6 +1286,7 @@ class XiaoshiConsumablesButton extends LitElement {
     super();
     this._oilPriceData = [];
     this._loading = false;
+    this._dataLoaded = false;  //button新元素
     this._refreshInterval = null;
     this.theme = 'on';
   }
@@ -1123,11 +1301,11 @@ class XiaoshiConsumablesButton extends LitElement {
     
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
-    
+
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
       this._loadOilPriceData();
-    }, 300000);
+    }, 3000);
   }
 
   _evaluateTheme() {
@@ -1157,8 +1335,10 @@ class XiaoshiConsumablesButton extends LitElement {
   async _loadOilPriceData() {
     if (!this.hass) return;
     
-    this._loading = true;
-    this.requestUpdate();
+    // button新元素 开始 删除下面
+    // this._loading = true;
+    // this.requestUpdate();
+    // button新元素 介素 删除下面
 
     try {
       const entities = this.config.entities || [];
@@ -1252,21 +1432,23 @@ class XiaoshiConsumablesButton extends LitElement {
       }
 
       this._oilPriceData = consumablesData;
+      this._dataLoaded = true;  //button新元素
     } catch (error) {
       console.error('加载设备耗材数据失败:', error);
       this._oilPriceData = [];
+      this._dataLoaded = true; //button新元素
     }
 
     this._loading = false;
   }
 
   _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 });
@@ -1274,28 +1456,74 @@ class XiaoshiConsumablesButton extends LitElement {
       this.dispatchEvent(evt);
     }
   }
+
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   /*button新元素 开始*/
   _handleButtonClick() {
     const tapAction = this.config.tap_action;
     
     if (!tapAction || tapAction !== 'none') {
-      // 默认 tap_action 行为：弹出耗材卡片
+      // 默认 tap_action 行为：弹出垂直堆叠卡片
       const excludedParams = ['type', 'button_height', 'button_width', 'button_font_size', 'button_icon_size', 'show_preview', 'tap_action'];
-      const cardConfig = {};
       
+      // 构建垂直堆叠卡片的内容
+      const cards = [];
+      
+      // 1. 添加耗材卡片
+      const consumablesCardConfig = {};
       Object.keys(this.config).forEach(key => {
-        if (!excludedParams.includes(key)) {
-          cardConfig[key] = this.config[key];
+        if (!excludedParams.includes(key) && key !== 'other_cards' && key !== 'no_preview') {
+          consumablesCardConfig[key] = this.config[key];
         }
       });
-  
-      const popupContent = {
+      
+      cards.push({
         type: 'custom:xiaoshi-consumables-card',
-        ...cardConfig
+        ...consumablesCardConfig
+      });
+      
+      // 2. 添加附加卡片
+      if (this.config.other_cards && this.config.other_cards.trim()) {
+        try {
+          const additionalCardsConfig = this._parseYamlCards(this.config.other_cards);
+          
+          // 为每个附加卡片传递 theme 值
+          const cardsWithTheme = additionalCardsConfig.map(card => {
+            // 如果卡片没有 theme 配置，则从当前卡片配置中传递
+            if (!card.theme && this.config.theme) {
+              return {
+                ...card,
+                theme: this.config.theme
+              };
+            }
+            return card;
+          });
+          
+          cards.push(...cardsWithTheme);
+        } catch (error) {
+          console.error('解析附加卡片配置失败:', error);
+        }
+      }
+      
+      // 创建垂直堆叠卡片
+      const popupContent = {
+        type: 'vertical-stack',
+        cards: cards
       };
       
       const popupStyle = this.config.popup_style || `
         --mdc-theme-surface: rgb(0,0,0,0); 
+        --dialog-backdrop-filter: blur(10px) brightness(1);
       `;
       
       if (window.browser_mod) {
@@ -1307,8 +1535,158 @@ class XiaoshiConsumablesButton extends LitElement {
         console.warn('browser_mod not available, cannot show popup');
       }
     }
-    navigator.vibrate(50);
+    this._handleClick();
   }
+
+  _parseYamlCards(yamlString) {
+    try {
+      const lines = yamlString.split('\n');
+      const cards = [];
+      let currentCard = null;
+      let indentStack = [];
+      let contextStack = [];
+      
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const trimmed = line.trim();
+        
+        if (!trimmed || trimmed.startsWith('#')) continue;
+        
+        const indentLevel = line.length - line.trimStart().length;
+        if (trimmed.startsWith('- type')) {
+          if (currentCard) {
+            cards.push(currentCard);
+            currentCard = null;
+            indentStack = [];
+            contextStack = [];
+          }
+          const content = trimmed.substring(1).trim();
+          if (content.includes(':')) {
+            const [key, ...valueParts] = content.split(':');
+            const value = valueParts.join(':').trim();
+            currentCard = {};
+            this._setNestedValue(currentCard, key.trim(), this._parseValue(value));
+          } else {
+            currentCard = { type: content };
+          }
+          
+          indentStack = [indentLevel];
+          contextStack = [currentCard];
+        } else if (currentCard && trimmed.startsWith('-')) {
+          while (indentStack.length > 1 && indentLevel <= indentStack[indentStack.length - 1]) {
+            indentStack.pop();
+            contextStack.pop();
+          }
+          
+          let currentContext = contextStack[contextStack.length - 1];
+          const itemValue = trimmed.substring(1).trim();
+          
+          if (!Array.isArray(currentContext)) {
+            if (contextStack.length > 1) {
+              const parentContext = contextStack[contextStack.length - 2];
+              for (let key in parentContext) {
+                if (parentContext[key] === currentContext) {
+                  parentContext[key] = [];
+                  contextStack[contextStack.length - 1] = parentContext[key];
+                  currentContext = parentContext[key];
+                  break;
+                }
+              }
+            }
+          }
+          if (Array.isArray(currentContext)) {
+            if (itemValue.includes(':')) {
+              const [key, ...valueParts] = itemValue.split(':');
+              const value = valueParts.join(':').trim();
+              const obj = {};
+              obj[key.trim()] = this._parseValue(value);
+              currentContext.push(obj);
+            } else {
+              currentContext.push(this._parseValue(itemValue));
+            }
+          }
+        } else if (currentCard && trimmed.includes(':')) {
+          const [key, ...valueParts] = trimmed.split(':');
+          const value = valueParts.join(':').trim();
+          const keyName = key.trim();
+          
+          while (indentStack.length > 1 && indentLevel <= indentStack[indentStack.length - 1]) {
+            indentStack.pop();
+            contextStack.pop();
+          }
+          
+          const currentContext = contextStack[contextStack.length - 1];
+          
+          if (value) {
+            this._setNestedValue(currentContext, keyName, this._parseValue(value));
+          } else {
+            let nextLine = null, nextIndent = null;
+            for (let j = i + 1; j < lines.length; j++) {
+              const nextTrimmed = lines[j].trim();
+              if (nextTrimmed && !nextTrimmed.startsWith('#')) {
+                nextLine = nextTrimmed;
+                nextIndent = lines[j].length - lines[j].trimStart().length;
+                break;
+              }
+            }
+            
+            currentContext[keyName] = (nextLine && nextLine.startsWith('-') && nextIndent > indentLevel) 
+              ? [] : (currentContext[keyName] || {});
+            
+            indentStack.push(indentLevel);
+            contextStack.push(currentContext[keyName]);
+          }
+        }
+      }
+      
+      if (currentCard) cards.push(currentCard);
+      
+      return cards;
+    } catch (error) {
+      console.error('YAML解析错误:', error);
+      return [];
+    }
+  }
+  
+  _parseValue(value) {
+    if (!value) return '';
+    
+    // 移除引号
+    if ((value.startsWith('"') && value.endsWith('"')) || 
+        (value.startsWith("'") && value.endsWith("'"))) {
+      return value.slice(1, -1);
+    }
+    
+    // 尝试解析为数字
+    if (!isNaN(value) && value.trim() !== '') {
+      return Number(value);
+    }
+    
+    // 尝试解析为布尔值
+    if (value === 'true') return true;
+    if (value === 'false') return false;
+    if (value === 'null') return null;
+    
+    // 返回字符串
+    return value;
+  }
+  
+  _setNestedValue(obj, path, value) {
+    // 支持嵌套路径，如 "styles.card"
+    const keys = path.split('.');
+    let current = obj;
+    
+    for (let i = 0; i < keys.length - 1; i++) {
+      const key = keys[i];
+      if (!current[key] || typeof current[key] !== 'object') {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+    
+    current[keys[keys.length - 1]] = value;
+  }
+
   /*button新元素 结束*/
   
   _renderDeviceItem(consumablesData) {
@@ -1437,7 +1815,6 @@ class XiaoshiConsumablesButton extends LitElement {
     return false;
   }
 
-
   render() {
     if (!this.hass) {
       return html`<div class="loading">等待Home Assistant连接...</div>`;
@@ -1472,13 +1849,126 @@ class XiaoshiConsumablesButton extends LitElement {
     }).length;
 
     /*button新元素 前9行和最后1行开始*/
-    const showPreview = this.config.show_preview !== false;
+    const showPreview = this.config.no_preview === true;
     
+    // 获取新参数
+    const badgeMode = this.config.badge_mode === true;
+    const transparentBg = this.config.transparent_bg === true;
+    const hideIcon = this.config.hide_icon === true;
+    const hideColon = this.config.hide_colon === true;
+    const hideZero = this.config.hide_zero === true;
+    const autoHide = this.config.auto_hide === true;
+    const lockWhiteFg = this.config.lock_white_fg === true;
+    const buttonText = this.config.button_text || '耗材';
+    const buttonIcon = this.config.button_icon || 'mdi:battery-sync';
+    
+    // 设置背景颜色
+    const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(50, 50, 50, 0.6)';
+    
+    // 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏）
+    const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0;
+    
+    // 如果需要自动隐藏，返回空div
+    if (shouldAutoHide) {
+      return html`<div></div>`;
+    }
+    
+    // 渲染按钮
+    let buttonHtml;
+    if (!this._dataLoaded) {
+      if (badgeMode) {
+        // 角标模式：只显示图标，数量为0时不显示角标
+        buttonHtml = html`
+          <div class="consumables-status badge-mode" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
+            <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
+          </div>
+        `;
+      } else {
+        // 普通模式
+        // 应用锁定白色功能
+        const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        
+        // 构建显示文本
+        let displayText = buttonText;
+        
+        // 根据hide_colon参数决定是否显示冒号
+        if (!hideColon) {
+          displayText += ':';
+        } else {
+          displayText += ' ';
+        }
+        
+        // 根据hide_zero参数决定是否显示0值
+        if (!hideZero) {
+          displayText += ' 0';
+        } else {
+          // 隐藏0值时使用CSS空格占位符，保持布局稳定
+          displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
+        }
+        
+        buttonHtml = html`
+          <div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${displayText}
+          </div>
+        `;
+      }
+    } else {
+      // 数据加载完成后
+      if (badgeMode) {
+        // 角标模式：只显示图标，根据数量显示角标
+        const hasWarning = warningCount > 0;
+        buttonHtml = html`
+          <div class="consumables-status badge-mode ${hasWarning ? 'has-warning' : ''}" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
+            <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
+            ${hasWarning ? html`<div class="badge-number">${warningCount}</div>` : ''}
+          </div>
+        `;
+      } else {
+        // 普通模式：显示文本和数量
+        // 应用锁定白色功能，但预警颜色（红色）不受影响
+        let textColor, iconColor;
+        if (warningCount === 0) {
+          // 非预警状态：根据锁定白色设置决定颜色
+          textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+          iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        } else {
+          // 预警状态：始终使用红色，不受锁定白色影响
+          textColor = 'rgb(255, 0, 0)';
+          iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        }
+        
+        // 构建显示文本
+        let displayText = buttonText;
+        
+        // 根据hide_colon参数决定是否显示冒号
+        if (!hideColon) {
+          displayText += ':';
+        } else {
+          displayText += ' ';
+        }
+        
+        // 根据hide_zero参数和实际数量决定是否显示数量
+        if (hideZero && warningCount === 0) {
+          // 隐藏0值时使用CSS空格占位符，保持布局稳定
+          displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
+        } else {
+          displayText += ` ${warningCount}`;
+        }
+        
+        buttonHtml = html`
+          <div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${displayText}
+          </div>
+        `;
+      }
+    }
+
+    // 返回最终的渲染结果（包括按钮和预览卡片）
     return html`
-      <div class="consumables-status" style="--fg-color: ${fgColor}; --bg-color: ${bgColor};" @click=${this._handleButtonClick}>
-        <ha-icon class="status-icon" icon="mdi:battery-sync"></ha-icon>
-        耗材: ${warningCount === 0 ? 0 : warningCount}
-      </div>
+      ${buttonHtml}
       ${showPreview ? html`
       <div class="form-group">
         <label>👇👇👇下面是弹出卡片内容👇👇👇</label>
@@ -1517,34 +2007,36 @@ class XiaoshiConsumablesButton extends LitElement {
   }
 
   setConfig(config) {
-    this.config = config;
-    
     /*button新元素 开始*/
+    // 不设置默认值，只有明确配置时才添加 no_preview
+    this.config = {
+      ...config
+    };
     if (config.button_width) {
       this.style.setProperty('--button-width', config.button_width);
     } else {
-      this.style.setProperty('--button-width', '16vw');
+      this.style.setProperty('--button-width', '65px');
     }
     
     // 设置按钮高度（只控制 consumables-status）
     if (config.button_height) {
       this.style.setProperty('--button-height', config.button_height);
     } else {
-      this.style.setProperty('--button-height', '2.8vh');
+      this.style.setProperty('--button-height', '24px');
     }
     
     // 设置按钮文字大小（只控制 consumables-status）
     if (config.button_font_size) {
       this.style.setProperty('--button-font-size', config.button_font_size);
     } else {
-      this.style.setProperty('--button-font-size', '14px');
+      this.style.setProperty('--button-font-size', '11px');
     }
     
     // 设置按钮图标大小（只控制 consumables-status）
     if (config.button_icon_size) {
       this.style.setProperty('--button-icon-size', config.button_icon_size);
     } else {
-      this.style.setProperty('--button-icon-size', '18px');
+      this.style.setProperty('--button-icon-size', '13px');
     }
     
     // 设置卡片宽度（控制原来的 UI）
@@ -1567,3 +2059,4 @@ class XiaoshiConsumablesButton extends LitElement {
   }
 }
 customElements.define('xiaoshi-consumables-button', XiaoshiConsumablesButton);
+

xiaoshi-device-consumables-card.js

@@ -435,14 +435,12 @@ class XiaoshiConsumablesCardEditor extends LitElement {
           </div>
           <div class="help-text">
             搜索并选择要显示的设备耗材实体，支持多选。每个实体可以配置：<br>
-            • <strong>特殊实体显示：</strong>binary_sensor(off→正常,on→缺少), event(unknown→正常,其他→低电量)<br>
             • 属性名：留空使用实体状态，或输入属性名<br>
             • 名称重定义：勾选后可自定义显示名称<br>
             • 图标重定义：勾选后可自定义图标（如 mdi:phone）<br>
             • 单位重定义：勾选后可自定义单位（如 元、$、kWh 等）<br>
             • 预警条件：勾选后设置预警条件，支持 >10, >=10, <10, <=10, ==10, ==on, ==off, =="hello world" 等<br>
             • 换算：对数值进行数学运算，支持 +10, -10, *1.5, /2 等<br>
-            • 未勾选重定义时，将使用实体的原始属性值
           </div>
         </div>
       </div>
@@ -896,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;
@@ -906,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;
@@ -916,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;
       }
 
@@ -931,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;
@@ -1113,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 });
@@ -1127,6 +1124,17 @@ class XiaoshiConsumablesCard extends LitElement {
     }
   }
 
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   _renderDeviceItem(consumablesData) {
     let isWarning = false;
     
@@ -1253,7 +1261,6 @@ class XiaoshiConsumablesCard extends LitElement {
     return false;
   }
 
-
   render() {
     if (!this.hass) {
       return html`<div class="loading">等待Home Assistant连接...</div>`;

xiaoshi-device-ha-info-card.js

@@ -766,6 +766,14 @@ export class XiaoshiHaInfoCard extends LitElement {
     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';
   }
 
@@ -788,13 +796,13 @@ export class XiaoshiHaInfoCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadOfflineDevices();
-    navigator.vibrate(50);
   }
 
   _handleDeviceClick(device) {
-    navigator.vibrate(50);
     // 点击设备时跳转到设备详情页
+    this._handleClick();
     if (device.device_id) {
       // 先关闭当前弹窗/界面
       this._closeCurrentDialog();
@@ -817,7 +825,7 @@ export class XiaoshiHaInfoCard extends LitElement {
   }
   
   _handleEntityClick(entity) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击实体时打开实体详情页
     if (entity.entity_id) {
       // 使用您建议的第一种方式
@@ -826,7 +834,18 @@ export class XiaoshiHaInfoCard extends LitElement {
       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');
@@ -907,6 +926,12 @@ export class XiaoshiHaInfoCard 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,
@@ -946,14 +971,14 @@ export class XiaoshiHaInfoCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadUpdateData();
     this._loadOfflineDevices();
-    navigator.vibrate(50);
   }
   
   _handleUpdateClick(update) {
-    navigator.vibrate(50);
     // 点击更新项时弹出实体详情
+    this._handleClick();
     
     // 如果有entity_id，弹出实体详情
     if (update.entity_id) {
@@ -974,14 +999,19 @@ export class XiaoshiHaInfoCard 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) {
@@ -1194,19 +1224,20 @@ export class XiaoshiHaInfoCard 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 + this._offlineDevices.length + this._offlineEntities.length=== 0 ? 'rgb(0,205,0)' : 'rgb(255,20,0)'}; animation: ${this._haUpdates.length + this._otherUpdates.length + 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._haUpdates.length + this._otherUpdates.length + this._offlineDevices.length + this._offlineEntities.length> 0 ? 'non-zero' : 'zero'}">
-                ${this._haUpdates.length + this._otherUpdates.length + this._offlineDevices.length + this._offlineEntities.length}
-              </span>
-            <button class="refresh-btn" style="background: ${this._haUpdates.length + this._otherUpdates.length +this._offlineDevices.length + this._offlineEntities.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>
@@ -1245,7 +1276,7 @@ export class XiaoshiHaInfoCard extends LitElement {
                         <div class="device-name">${update.name}</div>
                         <div class="device-details">
                           当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
-                          ${update.skipped_version ? html`<span style="color: #ff9800;"> 已跳过版本: ${update.skipped_version}</span>` : ''}
+                          ${update.skipped_version ? html`<br><span style="color: #ff9800;">已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
                       <div class="device-last-seen-update" @click=${(e) => this._handleConfirmUpdate(update, e)}>
@@ -1270,7 +1301,7 @@ export class XiaoshiHaInfoCard extends LitElement {
                         <div class="device-name">${update.name}</div>
                         <div class="device-details">
                           当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
-                          ${update.skipped_version ? html`<span style="color: #ff9800;"> 已跳过版本: ${update.skipped_version}</span>` : ''}
+                          ${update.skipped_version ? html`<br><span style="color: #ff9800;">已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
                       <div class="device-last-seen-update" @click=${(e) => this._handleConfirmUpdate(update, e)}>

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-device-update-card.js

@@ -1,924 +0,0 @@
-import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
-
-class XiaoshiUpdateCardEditor 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>
-            <input 
-              type="checkbox" 
-              @change=${this._entityChanged}
-              .checked=${this.config.skip_updates !== false}
-              name="skip_updates"
-            />
-            包含已跳过的更新
-          </label>
-          <div class="help-text">如果勾选，将包含标记为跳过的版本更新</div>
-        </div>
-        
-
-      </div>
-
-    `;
-  }
-
-  _entityChanged(e) {
-    const { name, value, type, checked } = e.target;
-    
-    let finalValue;
-    
-    // 处理复选框
-    if (type === 'checkbox') {
-      finalValue = checked;
-    } else {
-      if (!value && name !== 'theme' && name !== 'width') return;
-      finalValue = value;
-    }
-    
-    // 处理不同字段的默认值
-    if (name === 'width') {
-      finalValue = value || '100%';
-    }
-    
-    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-update-card-editor', XiaoshiUpdateCardEditor);
-
-export class XiaoshiUpdateCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      _haUpdates: Array,
-      _otherUpdates: 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 24px 8px 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);
-        margin-bottom: 4px;
-      }
-
-      .device-entity {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        font-family: monospace;
-      }
-
-      .device-details {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        margin-top: 4px;
-      }
-
-      .device-last-seen { 
-        font-size: 10px; 
-        color: var(--fg-color, #000); 
-        padding: 5px; 
-        background: rgb(255, 0, 0, 0.1); 
-        border: 1px solid rgb(255, 0, 0, 0.3); 
-        border-radius: 4px; 
-        cursor: pointer; 
-        white-space: nowrap;
-        transition: background-color 0.2s; 
-      }
-
-      .device-last-seen:hover {
-        background: rgb(255, 0, 0, 0.2);
-      }
-
-      .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);
-      }
-
-      /* HA版本信息样式 */
-      .ha-version-info {
-        padding: 4px 0 4px 16px;
-        margin: 0 16px 0 30px;
-        display: grid;
-        grid-template-columns: auto auto auto;
-        gap: 4px;
-        align-items: center;
-      }
-
-      .version-label {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        text-align: left;
-      }
-
-      .current-version {
-        color: var(--fg-color, #000);
-        font-size: 10px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .current-version.outdated {
-        color: rgb(255,20,0);
-      }
-
-      .latest-version {
-        color: var(--fg-color, #000);
-        font-size: 10px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      
-
-      .warning-message {
-        color: #ff6b6b;
-        font-size: 10px;
-        font-style: italic;
-      }
-
-      /* 备份信息样式 */
-      .backup-label {
-        font-size: 10px;
-        color: var(--fg-color, #000);
-        text-align: left;
-      }
-
-      .backup-time, .backup-relative {
-        color: var(--fg-color, #000);
-        font-size: 10px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .backup-separator {
-        grid-column: 1 / -1;
-        height: 1px;
-        background: rgb(150,150,150,0.2);
-        margin: 0px 0px;
-      }
-
-      /* 备份信息独立容器 */
-      .backup-info {
-        padding: 4px 0 4px 16px;
-        margin: 0 16px 0 30px;
-        border-bottom: 1px solid rgb(150,150,150,0.2);
-        display: grid;
-        grid-template-columns: auto auto auto;
-        gap: 4px;
-        align-items: center;
-      }
-    `;
-  }
-
-  constructor() {
-    super();
-    this._haUpdates = [];
-    this._otherUpdates = [];
-    this._loading = false;
-    this._refreshInterval = null;
-    this.theme = 'on';
-  }
-
-  static getConfigElement() {
-    return document.createElement("xiaoshi-update-card-editor");
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadUpdateData();
-    
-    // 设置主题属性
-    this.setAttribute('theme', this._evaluateTheme());
-    
-    // 每300秒刷新一次数据，减少频繁刷新
-    this._refreshInterval = setInterval(() => {
-      this._loadUpdateData();
-    }, 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 _loadUpdateData() {
-    if (!this.hass) return;
-    
-    this._loading = true;
-    this.requestUpdate();
-
-    try {
-      const haUpdates = [];
-      const otherUpdates = [];
-
-      // 获取update.开头的实体更新信息
-      try {
-        const entities = Object.values(this.hass.states);
-        const skipUpdates = this.config.skip_updates !== false; // 默认为true
-        
-        entities.forEach(entity => {
-          // 筛选以update.开头的实体
-          if (entity.entity_id.startsWith('update.') && entity.state !== 'unavailable') {
-            const attributes = entity.attributes;
-            
-            // 检查是否有更新可用
-            if (attributes.in_progress === false && 
-                attributes.latest_version && 
-                attributes.installed_version &&
-                attributes.latest_version !== attributes.installed_version) {
-              
-              // 如果不跳过更新，检查skipped_version属性
-              if (!skipUpdates) {
-                const skippedVersion = attributes.skipped_version;
-                // 如果skipped_version不为null且等于latest_version，则跳过此更新
-                if (skippedVersion !== null && skippedVersion === attributes.latest_version) {
-                  return; // 跳过此更新
-                }
-              }
-              
-              const updateData = {
-                name: attributes.friendly_name || entity.entity_id.replace('update.', ''),
-                current_version: attributes.installed_version,
-                latest_version: attributes.latest_version,
-                update_type: 'entity_update',
-                icon: attributes.icon || 'mdi:update',
-                entity_id: entity.entity_id,
-                title: attributes.title || '',
-                release_url: attributes.release_url || '',
-                entity_picture: attributes.entity_picture || '',
-                skipped_version: attributes.skipped_version || null
-              };
-              
-              // 检查是否为home_assistant开头的实体
-              if (entity.entity_id.includes('home_assistant') || 
-                  entity.entity_id.includes('hacs')) {
-                haUpdates.push(updateData);
-              } else {
-                otherUpdates.push(updateData);
-              }
-            }
-          }
-        });
-      } catch (error) {
-        console.warn('获取update实体更新信息失败:', error);
-      }
-
-      this._haUpdates = haUpdates;
-      this._otherUpdates = otherUpdates;
-    } catch (error) {
-      console.error('加载更新信息失败:', error);
-      this._haUpdates = [];
-      this._otherUpdates = [];
-    }
-
-    this._loading = false;
-  }
-
-
-
-  _handleRefresh() {
-    this._loadUpdateData();
-    navigator.vibrate(50);
-  }
-
-
-  
-  _handleUpdateClick(update) {
-    navigator.vibrate(50);
-    // 点击更新项时弹出实体详情
-    
-    // 如果有entity_id，弹出实体详情
-    if (update.entity_id) {
-      this.dispatchEvent(new CustomEvent('hass-more-info', {
-        detail: { entityId: update.entity_id },
-        bubbles: true,
-        composed: true
-      }));
-    } else {
-      // 对于没有entity_id的更新项，可以显示一个提示信息
-      // 可选：显示一个简单的提示
-      if (update.update_type === 'version') {
-        alert(`${update.name}\n当前版本: ${update.current_version}\n最新版本: ${update.latest_version}\n\n请点击右侧的"立即更新"按钮进行更新`);
-      }
-    }
-  }
-
-  _handleConfirmUpdate(update, event) {
-    event.stopPropagation(); // 阻止事件冒泡
-    event.preventDefault(); // 阻止默认行为
-    navigator.vibrate(50);
-    
-    // 弹出确认对话框
-    const confirmed = confirm(`确认要更新 ${update.name} 吗？\n当前版本: ${update.current_version}\n最新版本: ${update.latest_version}`);
-    
-    if (confirmed) {
-      this._executeUpdate(update);
-    }
-  }
-
-  _executeUpdate(update) {
-    // 根据更新类型执行不同的更新逻辑
-    if (update.update_type === 'version') {
-      if (update.name.includes('Core')) {
-        this._callUpdateService('homeassistant', 'core', 'update');
-      } else if (update.name.includes('Supervisor')) {
-        this._callUpdateService('hassio', 'supervisor', 'update');
-      } else if (update.name.includes('OS')) {
-        this._callUpdateService('hassio', 'os', 'update');
-      }
-    } else if (update.update_type.startsWith('hacs')) {
-      // HACS更新逻辑
-      // 可以通过调用HACS服务来更新
-      this.hass.callService('hacs', 'download', {
-        repository: update.name.replace('HACS - ', '')
-      });
-    } else if (update.update_type === 'integration') {
-      // 集成更新逻辑
-    } else if (update.update_type === 'entity_update') {
-      // 实体更新逻辑
-      this.hass.callService('update', 'install', {
-        entity_id: update.entity_id
-      });
-    }
-  }
-
-  _callUpdateService(domain, service, action) {
-    try {
-      this.hass.callService(domain, service, {
-        [action]: true
-      });
-    } catch (error) {
-      console.error(`调用更新服务失败: ${domain}.${service}`, error);
-    }
-  }
-
-  _isNewerVersion(latest, current) {
-    if (!latest || !current) return false;
-    
-    const latestParts = latest.split('.').map(Number);
-    const currentParts = current.split('.').map(Number);
-    
-    for (let i = 0; i < Math.max(latestParts.length, currentParts.length); i++) {
-      const latestPart = latestParts[i] || 0;
-      const currentPart = currentParts[i] || 0;
-      
-      if (latestPart > currentPart) return true;
-      if (latestPart < currentPart) return false;
-    }
-    
-    return false;
-  }
-
-  _getHacsIcon(category) {
-    const iconMap = {
-      'integration': 'mdi:puzzle',
-      'plugin': 'mdi:card-multiple',
-      'theme': 'mdi:palette',
-      'python_script': 'mdi:language-python',
-      'netdaemon': 'mdi:code-braces',
-      'appdaemon': 'mdi:application'
-    };
-    
-    return iconMap[category] || 'mdi:download';
-  }
-
-  _formatDateTime(dateString) {
-    if (!dateString || dateString === 'unknown' || dateString === '未知') {
-      return '无';
-    }
-    
-    try {
-      // 解析ISO时间字符串，Date对象会自动处理时区转换
-      const date = new Date(dateString);
-      if (isNaN(date.getTime())) {
-        return '无';
-      }
-      
-      // 使用toLocaleString直接格式化为东八区时间
-      return date.toLocaleString('zh-CN', {
-        timeZone: 'Asia/Shanghai',
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
-      }).replace(/\//g, '-');
-    } catch (error) {
-      console.warn('时间格式化失败:', dateString, error);
-      return '无';
-    }
-  }
-
-  _getRelativeTime(dateString, isFuture = false) {
-    if (!dateString || dateString === 'unknown' || dateString === '未知') {
-      return '无';
-    }
-    
-    try {
-      const date = new Date(dateString);
-      if (isNaN(date.getTime())) {
-        return '无';
-      }
-      
-      const now = new Date();
-      const diffMs = isFuture ? date.getTime() - now.getTime() : now.getTime() - date.getTime();
-      const diffHours = Math.abs(Math.floor(diffMs / (1000 * 60 * 60)));
-      
-      if (diffHours >= 24) {
-        const diffDays = Math.floor(diffHours / 24);
-        return `${diffDays}天${isFuture ? '后' : '前'}`;
-      } else {
-        return `${diffHours}小时${isFuture ? '后' : '前'}`;
-      }
-    } catch (error) {
-      console.warn('相对时间计算失败:', dateString, error);
-      return '无';
-    }
-  }
-
-  _renderHAVersionInfo() {
-    if (!this.hass) return html``;
-    
-    const versionElements = [];
-    
-    // OS版本信息 - 只有当update.home_assistant_operating_system_update存在时才显示
-    const osEntity = this.hass.states['update.home_assistant_operating_system_update'];
-    if (osEntity) {
-      const current = osEntity.attributes.installed_version || '未知';
-      const latest = osEntity.attributes.latest_version || '未知';
-      const osCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
-      versionElements.push(html`
-        <div class="version-label">OS</div>
-        <div class="current-version ${osCurrentVersionClass}">当前版本：${current}</div>
-        <div class="latest-version">最新版本：${latest}</div>
-      `);
-    }
-    
-    // Core版本信息
-    const coreEntity = this.hass.states['update.home_assistant_core_update'];
-    if (coreEntity) {
-      const current = coreEntity.attributes.installed_version || '未知';
-      const latest = coreEntity.attributes.latest_version || '未知';
-      const coreCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
-      versionElements.push(html`
-        <div class="version-label">Core</div>
-        <div class="current-version ${coreCurrentVersionClass}">当前版本：${current}</div>
-        <div class="latest-version">最新版本：${latest}</div>
-      `);
-    }
-    
-    // Supervisor版本信息
-    const supervisorEntity = this.hass.states['update.home_assistant_supervisor_update'];
-    if (supervisorEntity) {
-      const current = supervisorEntity.attributes.installed_version || '未知';
-      const latest = supervisorEntity.attributes.latest_version || '未知';
-      const supervisorCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
-      versionElements.push(html`
-        <div class="version-label">Supervisor</div>
-        <div class="current-version ${supervisorCurrentVersionClass}">当前版本：${current}</div>
-        <div class="latest-version">最新版本：${latest}</div>
-      `);
-    }
-    
-    return html`${versionElements}`;
-  }
-
-  _renderBackupInfo() {
-    if (!this.hass) return html``;
-    
-    const backupElements = [];
-    
-    // 上次备份信息
-    const lastBackupEntity = this.hass.states['sensor.backup_last_successful_automatic_backup'];
-    if (lastBackupEntity) {
-      const lastBackupTime = this._formatDateTime(lastBackupEntity.state);
-      const lastBackupRelative = this._getRelativeTime(lastBackupEntity.state, false);
-      const lastBackupCombined = lastBackupRelative !== '无' ? `${lastBackupTime}（${lastBackupRelative}）` : lastBackupTime;
-      
-      backupElements.push(html`
-        <div class="backup-label">HA上次备份</div>
-        <div class="backup-time" style="grid-column: 2 / -1;">${lastBackupCombined}</div>
-      `);
-    }
-    
-    // 下次备份信息
-    const nextBackupEntity = this.hass.states['sensor.backup_next_scheduled_automatic_backup'];
-    if (nextBackupEntity) {
-      const nextBackupTime = this._formatDateTime(nextBackupEntity.state);
-      const nextBackupRelative = this._getRelativeTime(nextBackupEntity.state, true);
-      const nextBackupCombined = nextBackupRelative !== '无' ? `${nextBackupTime}（${nextBackupRelative}）` : nextBackupTime;
-      
-      backupElements.push(html`
-        <div class="backup-label">HA下次备份</div>
-        <div class="backup-time" style="grid-column: 2 / -1;">${nextBackupCombined}</div>
-      `);
-    }
-    
-    return html`${backupElements}`;
-  }
-
-  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._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}>
-              刷新
-            </button>
-          </div>
-        </div>
-        
-        <!-- HA版本信息 -->
-        <div class="section-divider">
-          <div class="section-title">
-            <span> • HA版本信息</span>
-          </div>
-        </div>
-        <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>` :
-            
-            (this._haUpdates.length === 0 && this._otherUpdates.length === 0) ? 
-              html`<div class="no-devices">✅ 所有组件都是最新版本</div>` :
-              html`
-                ${this._haUpdates.length > 0 ? html`
-                  <div class="section-divider">
-                    <div class="section-title">
-                      <span> • HA版本更新</span>
-                      <span class="section-count ${this._haUpdates.length > 0 ? 'non-zero' : 'zero'}">${this._haUpdates.length}</span>
-                    </div>
-                  </div>
-                  ${this._haUpdates.map(update => html`
-                    <div class="device-item">
-                      <div class="device-icon">
-                        <ha-icon icon="${update.icon}"></ha-icon>
-                      </div>
-                      <div class="device-info">
-                        <div class="device-name">${update.name}</div>
-                        <div class="device-details">
-                          当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
-                          ${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>
-                    </div>
-                  `)}\n                ` : ''}
-
-                ${this._otherUpdates.length > 0 ? html`
-                  <div class="section-divider">
-                    <div class="section-title">
-                      <span> • 加载项、卡片更新</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-icon">
-                        <ha-icon icon="${update.icon}"></ha-icon>
-                      </div>
-                      <div class="device-info">
-                        <div class="device-name">${update.name}</div>
-                        <div class="device-details">
-                          当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
-                          ${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>
-                    </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 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;
-  }
-}
-customElements.define('xiaoshi-update-card', XiaoshiUpdateCard);
-
-
-
-

xiaoshi-pad-card.js

@@ -1,14 +1,15 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.1.3 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.2.3 ", "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-balance-card.js');
+    await import('./xiaoshi-device-balance-button.js');
     await import('./xiaoshi-device-todo-card.js');
+    await import('./xiaoshi-device-todo-button.js');
     await import('./xiaoshi-device-consumables-card.js');
     await import('./xiaoshi-device-consumables-button.js');
     await import('./xiaoshi-device-ha-info-card.js'); 
-    await import('./xiaoshi-device-update-card.js');
-    await import('./xiaoshi-device-offline-card.js');
+    await import('./xiaoshi-device-ha-info-button.js'); 
     
     window.customCards = window.customCards || [];
     window.customCards.push(...cardConfigs);
@@ -22,26 +23,50 @@ const cardConfigs = [
   },
   {
     type: 'xiaoshi-ha-info-card',
-    name: '消逝卡HA信息卡片',
-    description: '消逝卡HA信息卡片',
+    name: '消逝HA信息卡片',
+    description: '消逝HA信息卡片',
+    preview: true
+  },
+  {
+    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
   }
 ];