Update xiaoshi-pad-card.js

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

xiaoshi-device-balance-button.js

@@ -207,7 +207,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
       }
 
       .remove-btn:hover {
-        color: #f44336;
+        color: rgb(255, 0, 0);
       }
     `;
   }
@@ -216,175 +216,219 @@ class XiaoshiBalanceButtonEditor extends LitElement {
     if (!this.hass) return html``;
 
     return html`
+
       <div class="form">
 
       <!-- button新元素 开始-->
-        <div class="form-group">
-          <label>按钮显示图标
+
+      <div class="form-group">
+        <label>显示模式</label>
+        <select 
+          @change=${this._entityChanged}
+          .value=${this.config.display_mode || 'min_value'}
+          name="display_mode"
+        >
+          <option value="min_value">显示最小值</option>
+          <option value="specific_entity">显示指定实体</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label>小数点精度：控制显示的小数位数，默认1位</label>
+        <input 
+          type="number" 
+          @change=${this._entityChanged}
+          .value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
+          name="decimal_precision"
+          placeholder="默认1"
+          min="0"
+          max="10"
+          step="1"
+        />
+      </div>
+
+      <div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
+        <label>指定显示的实体</label>
+        <div class="entity-selector">
           <input 
             type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
-            name="button_icon"
-            placeholder="mdi:cellphone"
-          /></label>
-        </div>
-
-        <div class="form-group">
-          <label>显示模式</label>
-          <select 
-            @change=${this._entityChanged}
-            .value=${this.config.display_mode || 'min_value'}
-            name="display_mode"
-          >
-            <option value="min_value">显示最小值</option>
-            <option value="specific_entity">显示指定实体</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>小数点精度：控制显示的小数位数，默认1位</label>
-          <input 
-            type="number" 
-            @change=${this._entityChanged}
-            .value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
-            name="decimal_precision"
-            placeholder="默认1"
-            min="0"
-            max="10"
-            step="1"
+            @input=${this._onSpecificEntitySearch}
+            @focus=${this._onSpecificEntitySearch}
+            .value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
+            placeholder="搜索实体..."
+            class="entity-search-input"
           />
-        </div>
-
-        <div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
-          <label>指定显示的实体</label>
-          <div class="entity-selector">
-            <input 
-              type="text" 
-              @input=${this._onSpecificEntitySearch}
-              @focus=${this._onSpecificEntitySearch}
-              .value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
-              placeholder="搜索实体..."
-              class="entity-search-input"
-            />
-            ${this._showSpecificEntityList ? html`
-              <div class="entity-dropdown">
-                ${this._specificFilteredEntities.map(entity => html`
-                  <div 
-                    class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
-                    @click=${() => this._selectSpecificEntity(entity.entity_id)}
-                  >
-                    <div class="entity-info">
-                      <div class="entity-details">
-                        <div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
-                        <div class="entity-id">${entity.entity_id}</div>
-                      </div>
-                      <ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
+          ${this._showSpecificEntityList ? html`
+            <div class="entity-dropdown">
+              ${this._specificFilteredEntities.map(entity => html`
+                <div 
+                  class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
+                  @click=${() => this._selectSpecificEntity(entity.entity_id)}
+                >
+                  <div class="entity-info">
+                    <div class="entity-details">
+                      <div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
+                      <div class="entity-id">${entity.entity_id}</div>
                     </div>
-                    ${this.config.specific_entity_id === entity.entity_id ? 
-                      html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
+                    <ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
                   </div>
-                `)}
-                ${this._specificFilteredEntities.length === 0 ? html`
-                  <div class="no-results">未找到匹配的实体</div>
-                ` : ''}
-              </div>
-            ` : ''}
-          </div>
+                  ${this.config.specific_entity_id === entity.entity_id ? 
+                    html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
+                </div>
+              `)}
+              ${this._specificFilteredEntities.length === 0 ? html`
+                <div class="no-results">未找到匹配的实体</div>
+              ` : ''}
+            </div>
+          ` : ''}
         </div>
+      </div>
 
-        <div class="form-group">
-          <label>按钮宽度：默认70px, 支持像素(px)和百分比(%)</label>
-          <input 
-            type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
-            name="button_width"
-            placeholder="默认70px"
+      <div class="form-group">
+        <label>按钮显示图标
+        <input 
+          type="text" 
+          @change=${this._entityChanged}
+          .value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
+          name="button_icon"
+          placeholder="mdi:cellphone"
+        /></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="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="默认65px"
+        />
+      </div>
+
+      <div class="form-group">
+        <label>按钮高度：支持像素(px)、百分比(%)和视窗高度(vh)，默认24px</label>
+        <input 
+          type="text" 
+          @change=${this._entityChanged}
+          .value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
+          name="button_height"
+          placeholder="默认24px"
           />
-        </div>
+      </div>
+      
+      <div class="form-group">
+        <label>按钮文字大小：支持像素(px)，默认11px</label>
+        <input 
+          type="text" 
+          @change=${this._entityChanged}
+          .value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
+          name="button_font_size"
+          placeholder="默认11px"
+        />
+      </div>
+      
+      <div class="form-group">
+        <label>按钮图标大小：支持像素(px)，默认13px</label>
+        <input 
+          type="text" 
+          @change=${this._entityChanged}
+          .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
+          name="button_icon_size"
+          placeholder="默认13px"
+        />
+      </div>
 
-        <div class="form-group">
-          <label>按钮高度：支持像素(px)、百分比(%)和视窗高度(vh)，默认24px</label>
-          <input 
-            type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
-            name="button_height"
-            placeholder="默认24px"
-            />
-        </div>
-        
-        <div class="form-group">
-          <label>按钮文字大小：支持像素(px)，默认11px</label>
-          <input 
-            type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
-            name="button_font_size"
-            placeholder="默认11px"
-          />
-        </div>
-        
-        <div class="form-group">
-          <label>按钮图标大小：支持像素(px)，默认13px</label>
-          <input 
-            type="text" 
-            @change=${this._entityChanged}
-            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
-            name="button_icon_size"
-            placeholder="默认13px"
-          />
-        </div>
+      <div class="form-group">
+        <label>点击动作：点击按钮时触发的动作</label>
+        <select 
+          @change=${this._entityChanged}
+          .value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
+          name="tap_action"
+        >
+          <option value="tap_action">弹出余额信息卡片（默认）</option>
+          <option value="none">无动作</option>
+        </select>
+      </div>
 
-        <div class="form-group">
-          <label>点击动作：点击按钮时触发的动作</label>
-          <select 
-            @change=${this._entityChanged}
-            .value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
-            name="tap_action"
-          >
-            <option value="tap_action">弹出余额信息卡片（默认）</option>
-            <option value="none">无动作</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
-          <textarea 
-            @change=${this._entityChanged}
-            .value=${this.config.other_cards || ''}
-            name="other_cards"
-            placeholder='# 示例配置：添加button卡片
+      <div class="form-group">
+        <label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
+        <textarea 
+          @change=${this._entityChanged}
+          .value=${this.config.other_cards || ''}
+          name="other_cards"
+          placeholder='# 示例配置：添加button卡片
 - type: custom:button-card
-  template: 测试模板(最好引用模板，否则大概率会报错)
+template: 测试模板(最好引用模板，否则大概率会报错)
 - type: custom:button-card
-  template: 测试模板(最好引用模板，否则大概率会报错)'>
-          </textarea>
-        </div>
+template: 测试模板(最好引用模板，否则大概率会报错)'>
+        </textarea>
+      </div>
 
-        <div class="checkbox-group">
-          <input 
-            type="checkbox" 
-            class="checkbox-input"
-            @change=${this._entityChanged}
-            .checked=${this.config.no_preview === true}
-            name="no_preview"
-            id="no_preview"
-          />
-          <label for="no_preview" class="checkbox-label" style="color: red;"> 
-            📻显示预览📻（ 请先勾选测试显示效果 ）
-          </label>
-        </div>
+      <div class="checkbox-group">
+        <input 
+          type="checkbox" 
+          class="checkbox-input"
+          @change=${this._entityChanged}
+          .checked=${this.config.no_preview === true}
+          name="no_preview"
+          id="no_preview"
+        />
+        <label for="no_preview" class="checkbox-label" style="color: red;"> 
+          📻显示预览📻（ 请先勾选测试显示效果 ）
+        </label>
+      </div>
 
 
-        <div class="form-group">
-          <label> </label>
-          <label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
-          <label> </label>
-        </div>
+      <div class="form-group">
+        <label> </label>
+        <label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
+        <label> </label>
+      </div>
 
-        <!-- button新元素 结束-->
+      <!-- button新元素 结束-->
 
         <div class="form-group">
           <label>卡片宽度：支持像素(px)和百分比(%)，默认100%</label>
@@ -425,16 +469,16 @@ class XiaoshiBalanceButtonEditor extends LitElement {
             <input 
               type="color" 
               @change=${this._entityChanged}
-              .value=${this.config.warning_color || '#f44336'}
+              .value=${this.config.warning_color || 'rgb(255, 0, 0)'}
               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'}
+              .value=${this.config.warning_color || 'rgb(255, 0, 0)'}
               name="warning_color"
-              placeholder="默认：#f44336"
+              placeholder="默认：rgb(255, 0, 0)"
               style="flex: 1;"
             />
           </div>
@@ -658,6 +702,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
       }
     }
     /*button新按钮方法 结束*/
+
     this.config = {
       ...this.config,
       [name]: finalValue
@@ -934,7 +979,7 @@ class XiaoshiBalanceButton extends LitElement {
 
       /*button新元素 开始*/
       .balance-status {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         padding: 0;
         margin: 0;
@@ -978,7 +1023,6 @@ class XiaoshiBalanceButton extends LitElement {
         align-items: center;
         padding: 16px;
         background: var(--bg-color, #fff);
-        
         border-radius: 12px;
       }
 
@@ -1008,8 +1052,6 @@ class XiaoshiBalanceButton extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        
-
       }
 
       /*标题统计数字*/
@@ -1143,7 +1185,7 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       .device-value.warning {
-        color: var(--warning-color, #F44336);
+        color: var(--warning-color, rgb(255, 0, 0));
       }
 
       .device-unit {
@@ -1154,7 +1196,7 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       .device-unit.warning {
-        color: var(--warning-color, #F44336);
+        color: var(--warning-color, rgb(255, 0, 0));
       }
 
       .no-devices {
@@ -1175,7 +1217,6 @@ class XiaoshiBalanceButton extends LitElement {
     super();
     this._oilPriceData = [];
     this._loading = false;
-    this._dataLoaded = false;  //button新元素
     this._refreshInterval = null;
     this.theme = 'on';
   }
@@ -1191,12 +1232,6 @@ class XiaoshiBalanceButton extends LitElement {
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
 
-    //button新元素 开始
-    setTimeout(() => {
-      this._loadOilPriceData();
-    }, 50);
-    //button新元素 结束
-
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
       this._loadOilPriceData();
@@ -1294,11 +1329,9 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       this._oilPriceData = balanceData;
-      this._dataLoaded = true;  //button新元素
     } catch (error) {
       console.error('加载设备余额数据失败:', error);
       this._oilPriceData = [];
-      this._dataLoaded = true;  //button新元素
     }
 
     this._loading = false;
@@ -1613,11 +1646,14 @@ class XiaoshiBalanceButton extends LitElement {
     /*button新元素 前9行和最后1行开始*/
     const showPreview = this.config.no_preview === true;
     
-    // 获取参数
+    // 获取新参数
+    const transparentBg = this.config.transparent_bg === true;
+    const hideIcon = this.config.hide_icon === true;
+    const lockWhiteFg = this.config.lock_white_fg === true;
     const buttonIcon = this.config.button_icon || 'mdi:cellphone';
     
     // 设置背景颜色
-    const buttonBgColor = bgColor;
+    const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
     
     // 获取显示模式
     const displayMode = this.config.display_mode || 'min_value';
@@ -1629,15 +1665,7 @@ class XiaoshiBalanceButton extends LitElement {
     let displayUnit = '元';
     let isWarning = false; // 是否处于预警状态
     
-    if (!this._dataLoaded) {
-      // 数据加载中
-      displayValue = '加载中';
-      displayUnit = '';
-    } else if (this._oilPriceData.length === 0) {
-      // 无数据
-      displayValue = '无数据';
-      displayUnit = '';
-    } else if (displayMode === 'min_value') {
+    if (displayMode === 'min_value') {
       // 显示最小值模式
       const numericValues = this._oilPriceData
         .map(item => {
@@ -1705,15 +1733,24 @@ class XiaoshiBalanceButton extends LitElement {
     const displayText = formattedDisplayValue !== null && displayUnit ? `${formattedDisplayValue}${displayUnit}` : formattedDisplayValue;
     
     // 获取预警颜色
-    const warningColor = this.config.warning_color || '#f44336';
+    const warningColor = this.config.warning_color || 'rgb(255, 0, 0)';
     
-    // 根据预警状态设置数字颜色
-    const numberColor = isWarning ? warningColor : fgColor;
+    // 根据预警状态设置数字颜色，应用锁定白色功能
+    let numberColor, iconColor;
+    if (isWarning) {
+      // 预警状态：数字始终使用红色，图标根据锁定白色设置
+      numberColor = warningColor;
+      iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+    } else {
+      // 非预警状态：数字和图标都根据锁定白色设置
+      numberColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+      iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+    }
     
     // 渲染按钮
     const buttonHtml = html`
-      <div class="balance-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-        <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
+      <div class="balance-status" style="--fg-color: ${numberColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
+      ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
         <span style="color: ${numberColor};">${displayText}</span>
       </div>
     `;
@@ -1726,7 +1763,7 @@ class XiaoshiBalanceButton extends LitElement {
         <label>👇👇👇下面是弹出卡片内容👇👇👇</label>
       </div>
 
-      <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor}; --warning-color: ${this.config.warning_color || '#f44336'};">
+      <ha-card style="--fg-color: ${fgColor}; --bg-color: ${bgColor}; --warning-color: ${this.config.warning_color || 'rgb(255, 0, 0)'};">
         <div class="card-header">
           <div class="card-title">
             <span class="offline-indicator" style="background: rgb(0,222,220); animation: pulse 2s infinite"></span>
@@ -1786,7 +1823,7 @@ class XiaoshiBalanceButton extends LitElement {
     if (config.button_width) {
       this.style.setProperty('--button-width', config.button_width);
     } else {
-      this.style.setProperty('--button-width', '70px');
+      this.style.setProperty('--button-width', '65px');
     }
     
     // 设置按钮高度（只控制 balance-status）
@@ -1823,7 +1860,7 @@ class XiaoshiBalanceButton extends LitElement {
     if (config.warning_color) {
       this.style.setProperty('--warning-color', config.warning_color);
     } else {
-      this.style.setProperty('--warning-color', '#f44336');
+      this.style.setProperty('--warning-color', 'rgb(255, 0, 0)');
     }
 
     if (config.theme) {

xiaoshi-device-consumables-button.js

@@ -262,7 +262,6 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
           </label>
         </div>
 
-
         <div class="form-group">
           <label>按钮显示文本
           <input 
@@ -295,10 +294,24 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
             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" 
@@ -309,10 +322,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
             id="hide_icon"
           />
           <label for="hide_icon" class="checkbox-label"> 
-            隐藏图标（勾选后隐藏图标）
+          （ 平板端特性）隐藏图标（勾选后隐藏图标）
           </label>
         </div>
-
+    
         <div class="checkbox-group">
           <input 
             type="checkbox" 
@@ -323,10 +336,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
             id="hide_colon"
           />
           <label for="hide_colon" class="checkbox-label"> 
-            隐藏冒号（勾选后不显示冒号，改为空格）
+          （平板端特性）隐藏冒号（勾选后不显示冒号，改为空格）
           </label>
         </div>
-
+    
         <div class="checkbox-group">
           <input 
             type="checkbox" 
@@ -337,18 +350,18 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
             id="hide_zero"
           />
           <label for="hide_zero" class="checkbox-label"> 
-            隐藏0值（勾选后数量为0时不显示数量）
+          （平板端特性）隐藏0值（勾选后数量为0时不显示数量）
           </label>
         </div>
 
         <div class="form-group">
-          <label>按钮宽度：默认70px, 支持像素(px)和百分比(%)</label>
+          <label>按钮宽度：默认65px, 支持像素(px)和百分比(%)</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
+            .value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
             name="button_width"
-            placeholder="默认70px"
+            placeholder="默认65px"
           />
         </div>
 
@@ -919,7 +932,7 @@ class XiaoshiConsumablesButton extends LitElement {
 
       /*button新元素 开始*/
       .consumables-status {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         padding: 0;
         margin: 0;
@@ -947,7 +960,7 @@ class XiaoshiConsumablesButton extends LitElement {
 
       /* 角标模式样式 */
       .consumables-status.badge-mode {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         border-radius: 10px;
         padding: 0;
@@ -1273,7 +1286,6 @@ class XiaoshiConsumablesButton extends LitElement {
     super();
     this._oilPriceData = [];
     this._loading = false;
-    this._dataLoaded = false;  //button新元素
     this._refreshInterval = null;
     this.theme = 'on';
   }
@@ -1288,12 +1300,6 @@ class XiaoshiConsumablesButton extends LitElement {
     
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
-    
-    //button新元素 开始
-    setTimeout(() => {
-      this._loadOilPriceData();
-    }, 50);
-    //button新元素 结束
 
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
@@ -1425,11 +1431,9 @@ 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;
@@ -1851,14 +1855,15 @@ class XiaoshiConsumablesButton extends LitElement {
     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' : bgColor;
+    const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
     
     // 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏）
-    const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0;
+    const shouldAutoHide = autoHide && warningCount === 0;
     
     // 如果需要自动隐藏，返回空div
     if (shouldAutoHide) {
@@ -1867,81 +1872,53 @@ class XiaoshiConsumablesButton extends LitElement {
     
     // 渲染按钮
     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 {
-        // 普通模式
-        // 构建显示文本
-        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: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
-      }
+    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 {
-      // 数据加载完成后
-      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>
-        `;
+      // 普通模式：显示文本和数量
+      // 应用锁定白色功能，但预警颜色（红色）不受影响
+      let textColor, iconColor;
+      if (warningCount === 0) {
+        // 非预警状态：根据锁定白色设置决定颜色
+        textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
       } else {
-        // 普通模式：显示文本和数量
-        const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
-        
-        // 构建显示文本
-        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: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
+        // 预警状态：始终使用红色，不受锁定白色影响
+        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>
+      `;
     }
 
     // 返回最终的渲染结果（包括按钮和预览卡片）
@@ -1993,7 +1970,7 @@ class XiaoshiConsumablesButton extends LitElement {
     if (config.button_width) {
       this.style.setProperty('--button-width', config.button_width);
     } else {
-      this.style.setProperty('--button-width', '70px');
+      this.style.setProperty('--button-width', '65px');
     }
     
     // 设置按钮高度（只控制 consumables-status）

xiaoshi-device-ha-info-button.js

@@ -93,7 +93,6 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
       </label>
     </div>
 
-
     <div class="form-group">
       <label>按钮显示文本
       <input 
@@ -126,7 +125,21 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
         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>
 
@@ -140,7 +153,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
         id="hide_icon"
       />
       <label for="hide_icon" class="checkbox-label"> 
-        隐藏图标（勾选后隐藏图标）
+      （ 平板端特性）隐藏图标（勾选后隐藏图标）
       </label>
     </div>
 
@@ -154,7 +167,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
         id="hide_colon"
       />
       <label for="hide_colon" class="checkbox-label"> 
-        隐藏冒号（勾选后不显示冒号，改为空格）
+       （平板端特性）隐藏冒号（勾选后不显示冒号，改为空格）
       </label>
     </div>
 
@@ -168,18 +181,18 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
         id="hide_zero"
       />
       <label for="hide_zero" class="checkbox-label"> 
-        隐藏0值（勾选后数量为0时不显示数量）
+       （平板端特性）隐藏0值（勾选后数量为0时不显示数量）
       </label>
     </div>
 
     <div class="form-group">
-      <label>按钮宽度：默认70px, 支持像素(px)和百分比(%)</label>
+      <label>按钮宽度：默认65px, 支持像素(px)和百分比(%)</label>
       <input 
         type="text" 
         @change=${this._entityChanged}
-        .value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
+        .value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
         name="button_width"
-        placeholder="默认70px"
+        placeholder="默认65px"
       />
     </div>
 
@@ -342,7 +355,7 @@ template: 测试模板(最好引用模板，否则大概率会报错)'>
     if (type === 'checkbox') {
       finalValue = checked;
     } else {
-      if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action') return;
+      if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action' && name !== 'display_mode' && name !== 'decimal_precision') return;
       finalValue = value 
     }
     
@@ -392,7 +405,7 @@ template: 测试模板(最好引用模板，否则大概率会报错)'>
 } 
 customElements.define('xiaoshi-ha-info-button-editor', XiaoshiHaInfoButtonEditor);
 
-export class XiaoshiHaInfoButton extends LitElement {
+class XiaoshiHaInfoButton extends LitElement {
   static get properties() {
     return {
       hass: Object,
@@ -403,7 +416,6 @@ export class XiaoshiHaInfoButton extends LitElement {
       _offlineEntities: Array,
       _loading: Boolean,
       _refreshInterval: Number,
-      _dataLoaded: Boolean,   //button新元素
       theme: { type: String }
     };
   }
@@ -417,7 +429,7 @@ export class XiaoshiHaInfoButton extends LitElement {
 
       /*button新元素 开始*/
       .ha-info-status {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         padding: 0;
         margin: 0;
@@ -445,7 +457,7 @@ export class XiaoshiHaInfoButton extends LitElement {
 
       /* 角标模式样式 */
       .ha-info-status.badge-mode {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         border-radius: 10px;
         padding: 0;
@@ -772,7 +784,6 @@ export class XiaoshiHaInfoButton extends LitElement {
     this._offlineDevices = [];
     this._offlineEntities = [];
     this._loading = false;
-    this._dataLoaded = false;  //button新元素
     this._refreshInterval = null;
     this.theme = 'on';
   }
@@ -788,14 +799,7 @@ export class XiaoshiHaInfoButton extends LitElement {
     
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
-    
-    //button新元素 开始
-    setTimeout(() => {
-      this._loadUpdateData();
-      this._loadOfflineDevices();
-    }, 50);
-    //button新元素 结束
-    
+
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
       this._loadUpdateData();
@@ -977,11 +981,9 @@ export class XiaoshiHaInfoButton extends LitElement {
 
       this._offlineDevices = offlineDevices;
       this._offlineEntities = offlineEntities;
-      this._dataLoaded = true;  //button新元素
     } catch (error) {
       console.error('加载离线设备失败:', error);
       this._offlineDevices = [];
-      this._dataLoaded = true;  //button新元素
     }
 
     this._loading = false;
@@ -1213,7 +1215,7 @@ export class XiaoshiHaInfoButton extends LitElement {
     const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写
     return regex.test(str);
   }
-  async _loadUpdateData() {
+  _loadUpdateData() {
     if (!this.hass) return;
     
     this._loading = true;
@@ -1538,8 +1540,6 @@ export class XiaoshiHaInfoButton extends LitElement {
     return html`${backupElements}`;
   }
 
-
-
   /*button新元素 开始*/
   _handleButtonClick() {
     const tapAction = this.config.tap_action;
@@ -1781,14 +1781,15 @@ export class XiaoshiHaInfoButton extends LitElement {
     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 || 'HA';
     const buttonIcon = this.config.button_icon || 'mdi:home-assistant';
     
     // 设置背景颜色
-    const buttonBgColor = transparentBg ? 'transparent' : bgColor;
+    const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
     
     // 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏）
-    const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0;
+    const shouldAutoHide = autoHide && warningCount === 0;
     
     // 如果需要自动隐藏，返回空div
     if (shouldAutoHide) {
@@ -1797,81 +1798,53 @@ export class XiaoshiHaInfoButton extends LitElement {
     
     // 渲染按钮
     let buttonHtml;
-    if (!this._dataLoaded) {
-      if (badgeMode) {
-        // 角标模式：只显示图标，数量为0时不显示角标
-        buttonHtml = html`
-          <div class="ha-info-status badge-mode" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
-          </div>
-        `;
-      } else {
-        // 普通模式
-        // 构建显示文本
-        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="ha-info-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
-      }
+    if (badgeMode) {
+      // 角标模式：只显示图标，根据数量显示角标
+      const hasWarning = warningCount > 0;
+      buttonHtml = html`
+        <div class="ha-info-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 {
-      // 数据加载完成后
-      if (badgeMode) {
-        // 角标模式：只显示图标，根据数量显示角标
-        const hasWarning = warningCount > 0;
-        buttonHtml = html`
-          <div class="ha-info-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>
-        `;
+      // 普通模式：显示文本和数量
+      // 应用锁定白色功能，但预警颜色（红色）不受影响
+      let textColor, iconColor;
+      if (warningCount === 0) {
+        // 非预警状态：根据锁定白色设置决定颜色
+        textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
       } else {
-        // 普通模式：显示文本和数量
-        const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
-        
-        // 构建显示文本
-        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="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
+        // 预警状态：始终使用红色，不受锁定白色影响
+        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="ha-info-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`
@@ -2053,7 +2026,7 @@ export class XiaoshiHaInfoButton extends LitElement {
     if (config.button_width) {
       this.style.setProperty('--button-width', config.button_width);
     } else {
-      this.style.setProperty('--button-width', '70px');
+      this.style.setProperty('--button-width', '65px');
     }
     
     // 设置按钮高度（只控制 ha-info-status）

xiaoshi-device-ha-info-card.js

@@ -153,7 +153,7 @@ class XiaoshiHaInfoCardEditor extends LitElement {
 } 
 customElements.define('xiaoshi-ha-info-card-editor', XiaoshiHaInfoCardEditor);
 
-export class XiaoshiHaInfoCard extends LitElement {
+class XiaoshiHaInfoCard extends LitElement {
   static get properties() {
     return {
       hass: Object,

xiaoshi-device-todo-button.js

@@ -213,7 +213,6 @@ class XiaoshiTodoButtonEditor extends LitElement {
           </label>
         </div>
 
-
         <div class="form-group">
           <label>按钮显示文本
           <input 
@@ -246,10 +245,24 @@ class XiaoshiTodoButtonEditor extends LitElement {
             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" 
@@ -260,10 +273,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
             id="hide_icon"
           />
           <label for="hide_icon" class="checkbox-label"> 
-            隐藏图标（勾选后隐藏图标）
+          （ 平板端特性）隐藏图标（勾选后隐藏图标）
           </label>
         </div>
-
+    
         <div class="checkbox-group">
           <input 
             type="checkbox" 
@@ -274,10 +287,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
             id="hide_colon"
           />
           <label for="hide_colon" class="checkbox-label"> 
-            隐藏冒号（勾选后不显示冒号，改为空格）
+          （平板端特性）隐藏冒号（勾选后不显示冒号，改为空格）
           </label>
         </div>
-
+    
         <div class="checkbox-group">
           <input 
             type="checkbox" 
@@ -288,18 +301,18 @@ class XiaoshiTodoButtonEditor extends LitElement {
             id="hide_zero"
           />
           <label for="hide_zero" class="checkbox-label"> 
-            隐藏0值（勾选后数量为0时不显示数量）
+          （平板端特性）隐藏0值（勾选后数量为0时不显示数量）
           </label>
         </div>
 
         <div class="form-group">
-          <label>按钮宽度：默认70px, 支持像素(px)和百分比(%)</label>
+          <label>按钮宽度：默认65px, 支持像素(px)和百分比(%)</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_width !== undefined ? this.config.button_width : '70px'}
+            .value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
             name="button_width"
-            placeholder="默认70px"
+            placeholder="默认65px"
           />
         </div>
 
@@ -633,7 +646,7 @@ class XiaoshiTodoButton extends LitElement {
 
       /*button新元素 开始*/
       .todo-status {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         padding: 0;
         margin: 0;
@@ -661,7 +674,7 @@ class XiaoshiTodoButton extends LitElement {
 
       /* 角标模式样式 */
       .todo-status.badge-mode {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         border-radius: 10px;
         padding: 0;
@@ -1094,7 +1107,6 @@ class XiaoshiTodoButton extends LitElement {
     super();
     this._todoData = [];
     this._loading = false;
-    this._dataLoaded = false;  //button新元素
     this._refreshInterval = null;
     this.theme = 'on';
     this._editingItem = null;
@@ -1109,19 +1121,13 @@ class XiaoshiTodoButton extends LitElement {
     super.connectedCallback();
     this._loadTodoData();
     
-    
-    //button新元素 开始
-    setTimeout(() => {
-      this._loadTodoData();
-    }, 50);
-    //button新元素 结束
     // 设置主题属性
     this.setAttribute('theme', this._evaluateTheme());
-    
+
     // 每300秒刷新一次数据，减少频繁刷新
     this._refreshInterval = setInterval(() => {
       this._loadTodoData();
-    }, 300000);
+    }, 3000);
   }
 
   _evaluateTheme() {
@@ -1259,11 +1265,9 @@ class XiaoshiTodoButton extends LitElement {
       }
 
       this._todoData = todoData;
-      this._dataLoaded = true;  //button新元素
     } catch (error) {
       console.error('加载待办事项数据失败:', error);
       this._todoData = [];
-      this._dataLoaded = true;  //button新元素
     }
 
     this._loading = false;
@@ -1618,14 +1622,15 @@ class XiaoshiTodoButton extends LitElement {
     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:clipboard-list';
     
     // 设置背景颜色
-    const buttonBgColor = transparentBg ? 'transparent' : bgColor;
+    const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
     
     // 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏）
-    const shouldAutoHide = this._dataLoaded && autoHide && totalIncompleteCount === 0;
+    const shouldAutoHide =  autoHide && totalIncompleteCount === 0;
     
     // 如果需要自动隐藏，返回空div
     if (shouldAutoHide) {
@@ -1634,81 +1639,55 @@ class XiaoshiTodoButton extends LitElement {
     
     // 渲染按钮
     let buttonHtml;
-    if (!this._dataLoaded) {
-      if (badgeMode) {
-        // 角标模式：只显示图标，数量为0时不显示角标
-        buttonHtml = html`
-          <div class="todo-status badge-mode" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
-          </div>
-        `;
-      } else {
-        // 普通模式
-        // 构建显示文本
-        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="todo-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
-      }
+  
+    // 数据加载完成后
+    if (badgeMode) {
+      // 角标模式：只显示图标，根据数量显示角标
+      const hasWarning = totalIncompleteCount > 0;
+      buttonHtml = html`
+        <div class="todo-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">${totalIncompleteCount}</div>` : ''}
+        </div>
+      `;
     } else {
-      // 数据加载完成后
-      if (badgeMode) {
-        // 角标模式：只显示图标，根据数量显示角标
-        const hasWarning = totalIncompleteCount > 0;
-        buttonHtml = html`
-          <div class="todo-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">${totalIncompleteCount}</div>` : ''}
-          </div>
-        `;
+      // 普通模式：显示文本和数量
+      // 应用锁定白色功能，但预警颜色（红色）不受影响
+      let textColor, iconColor;
+      if (totalIncompleteCount === 0) {
+        // 非预警状态：根据锁定白色设置决定颜色
+        textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
+        iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
       } else {
-        // 普通模式：显示文本和数量
-        const textColor = totalIncompleteCount === 0 ? fgColor : 'rgb(255, 0, 0)';
-        
-        // 构建显示文本
-        let displayText = buttonText;
-        
-        // 根据hide_colon参数决定是否显示冒号
-        if (!hideColon) {
-          displayText += ':';
-        } else {
-          displayText += ' ';
-        }
-        
-        // 根据hide_zero参数和实际数量决定是否显示数量
-        if (hideZero && totalIncompleteCount === 0) {
-          // 隐藏0值时使用CSS空格占位符，保持布局稳定
-          displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
-        } else {
-          displayText += ` ${totalIncompleteCount}`;
-        }
-        
-        buttonHtml = html`
-          <div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
-            ${displayText}
-          </div>
-        `;
+        // 预警状态：始终使用红色，不受锁定白色影响
+        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 && totalIncompleteCount === 0) {
+        // 隐藏0值时使用CSS空格占位符，保持布局稳定
+        displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
+      } else {
+        displayText += ` ${totalIncompleteCount}`;
+      }
+      
+      buttonHtml = html`
+        <div class="todo-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>
+      `;
     }
 
     // 返回最终的渲染结果（包括按钮和预览卡片）
@@ -1976,7 +1955,7 @@ class XiaoshiTodoButton extends LitElement {
     if (config.button_width) {
       this.style.setProperty('--button-width', config.button_width);
     } else {
-      this.style.setProperty('--button-width', '70px');
+      this.style.setProperty('--button-width', '65px');
     }
     
     // 设置按钮高度（只控制 todo-status）

xiaoshi-pad-card.js

@@ -1,15 +1,15 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.1.9 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.2.7 ", "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-ha-info-button.js'); 
+const loadCards = () => {
+    import('./xiaoshi-device-balance-button.js');
+    import('./xiaoshi-device-ha-info-button.js'); 
+    import('./xiaoshi-device-todo-button.js');
+    import('./xiaoshi-device-consumables-button.js');
+    import('./xiaoshi-device-balance-card.js');
+    import('./xiaoshi-device-ha-info-card.js'); 
+    import('./xiaoshi-device-todo-card.js');
+    import('./xiaoshi-device-consumables-card.js');
+    import('./xiaoshi-pad-grid-card.js');
     
     window.customCards = window.customCards || [];
     window.customCards.push(...cardConfigs);

xiaoshi-pad-grid-card.js

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