Update xiaoshi-device-balance-button.js

xiaoshi-device-balance-button.js

@@ -216,19 +216,10 @@ class XiaoshiBalanceButtonEditor extends LitElement {
     if (!this.hass) return html``;
 
     return html`
+
       <div class="form">
 
       <!-- button新元素 开始-->
-        <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="form-group">
         <label>显示模式</label>
@@ -293,6 +284,59 @@ class XiaoshiBalanceButtonEditor extends LitElement {
         </div>
       </div>
 
+      <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 
@@ -357,9 +401,9 @@ class XiaoshiBalanceButtonEditor extends LitElement {
           name="other_cards"
           placeholder='# 示例配置：添加button卡片
 - type: custom:button-card
-  template: 测试模板(最好引用模板，否则大概率会报错)
+template: 测试模板(最好引用模板，否则大概率会报错)
 - type: custom:button-card
-  template: 测试模板(最好引用模板，否则大概率会报错)'>
+template: 测试模板(最好引用模板，否则大概率会报错)'>
         </textarea>
       </div>
 
@@ -658,6 +702,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
       }
     }
     /*button新按钮方法 结束*/
+
     this.config = {
       ...this.config,
       [name]: finalValue
@@ -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;
-        
-
       }
 
       /*标题统计数字*/
@@ -1613,11 +1655,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' : bgColor;
     
     // 获取显示模式
     const displayMode = this.config.display_mode || 'min_value';
@@ -1707,13 +1752,22 @@ class XiaoshiBalanceButton extends LitElement {
     // 获取预警颜色
     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}>
+      <div class="balance-status" style="--fg-color: ${numberColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-        <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
+      ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
         <span style="color: ${numberColor};">${displayText}</span>
       </div>
     `;