Update xiaoshi-pad-card.js

xiaoshi-device-balance-button.js

@@ -207,7 +207,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
       }
 
       .remove-btn:hover {
-        color: #f44336;
+        color: rgb(255, 0, 0);
       }
     `;
   }
@@ -294,13 +294,13 @@ class XiaoshiBalanceButtonEditor extends LitElement {
         </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>
 
@@ -327,13 +327,13 @@ class XiaoshiBalanceButtonEditor extends LitElement {
         </div>
         
         <div class="form-group">
-          <label>按钮图标大小：支持像素(px)，默认15px</label>
+          <label>按钮图标大小：支持像素(px)，默认13px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
+            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
             name="button_icon_size"
-            placeholder="默认15px"
+            placeholder="默认13px"
           />
         </div>
 
@@ -425,16 +425,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>
@@ -624,7 +624,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
     } else if (name === 'button_font_size') {
       finalValue = value || '11px';
     } else if (name === 'button_icon_size') {
-      finalValue = value || '15px';
+      finalValue = value || '13px';
     } else if (name === 'width') {
       finalValue = value || '100%';
     } else if (name === 'display_mode') {
@@ -934,7 +934,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;
@@ -955,8 +955,9 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       .status-icon {
-        --mdc-icon-size: var(--button-icon-size, 15px);
+        --mdc-icon-size: var(--button-icon-size, 13px);
         color: var(--fg-color, #000);
+        margin-right: 3px;
       }
 
       /*button新元素 结束*/
@@ -1142,7 +1143,7 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       .device-value.warning {
-        color: var(--warning-color, #F44336);
+        color: var(--warning-color, rgb(255, 0, 0));
       }
 
       .device-unit {
@@ -1153,7 +1154,7 @@ class XiaoshiBalanceButton extends LitElement {
       }
 
       .device-unit.warning {
-        color: var(--warning-color, #F44336);
+        color: var(--warning-color, rgb(255, 0, 0));
       }
 
       .no-devices {
@@ -1704,7 +1705,7 @@ 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;
@@ -1725,7 +1726,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>
@@ -1785,7 +1786,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）
@@ -1806,7 +1807,7 @@ class XiaoshiBalanceButton extends LitElement {
     if (config.button_icon_size) {
       this.style.setProperty('--button-icon-size', config.button_icon_size);
     } else {
-      this.style.setProperty('--button-icon-size', '15px');
+      this.style.setProperty('--button-icon-size', '13px');
     }
     
     // 设置卡片宽度（控制原来的 UI）
@@ -1822,7 +1823,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

@@ -342,13 +342,13 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
         </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>
 
@@ -375,13 +375,13 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
         </div>
         
         <div class="form-group">
-          <label>按钮图标大小：支持像素(px)，默认15px</label>
+          <label>按钮图标大小：支持像素(px)，默认13px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
+            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
             name="button_icon_size"
-            placeholder="默认15px"
+            placeholder="默认13px"
           />
         </div>
 
@@ -691,7 +691,7 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
     } else if (name === 'button_font_size') {
       finalValue = value || '11px';
     } else if (name === 'button_icon_size') {
-      finalValue = value || '15px';
+      finalValue = value || '13px';
     } else if (name === 'width') {
       finalValue = value || '100%';
     } else if (name === 'tap_action') {
@@ -919,7 +919,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;
@@ -940,13 +940,14 @@ class XiaoshiConsumablesButton extends LitElement {
       }
 
       .status-icon {
-        --mdc-icon-size: var(--button-icon-size, 15px);
+        --mdc-icon-size: var(--button-icon-size, 13px);
         color: var(--fg-color, #000);
+        margin-right: 3px;
       }
 
       /* 角标模式样式 */
       .consumables-status.badge-mode {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         border-radius: 10px;
         padding: 0;
@@ -1896,7 +1897,7 @@ class XiaoshiConsumablesButton extends LitElement {
         
         buttonHtml = html`
           <div class="consumables-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -1936,7 +1937,7 @@ class XiaoshiConsumablesButton extends LitElement {
         
         buttonHtml = html`
           <div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -1992,7 +1993,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）
@@ -2013,7 +2014,7 @@ class XiaoshiConsumablesButton extends LitElement {
     if (config.button_icon_size) {
       this.style.setProperty('--button-icon-size', config.button_icon_size);
     } else {
-      this.style.setProperty('--button-icon-size', '15px');
+      this.style.setProperty('--button-icon-size', '13px');
     }
     
     // 设置卡片宽度（控制原来的 UI）

xiaoshi-device-ha-info-button.js

@@ -173,13 +173,13 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
     </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>
 
@@ -206,13 +206,13 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
     </div>
     
     <div class="form-group">
-      <label>按钮图标大小：支持像素(px)，默认15px</label>
+      <label>按钮图标大小：支持像素(px)，默认13px</label>
       <input 
         type="text" 
         @change=${this._entityChanged}
-        .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
+        .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
         name="button_icon_size"
-        placeholder="默认15px"
+        placeholder="默认13px"
       />
     </div>
 
@@ -354,7 +354,7 @@ template: 测试模板(最好引用模板，否则大概率会报错)'>
     } else if (name === 'button_font_size') {
       finalValue = value || '11px';
     } else if (name === 'button_icon_size') {
-      finalValue = value || '15px';
+      finalValue = value || '13px';
     } else if (name === 'width') {
       finalValue = value || '100%';
     } else if (name === 'exclude_entities') {
@@ -417,7 +417,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;
@@ -438,13 +438,14 @@ export class XiaoshiHaInfoButton extends LitElement {
       }
 
       .status-icon {
-        --mdc-icon-size: var(--button-icon-size, 15px);
+        --mdc-icon-size: var(--button-icon-size, 13px);
         color: var(--fg-color, #000);
+        margin-right: 3px;
       }
 
       /* 角标模式样式 */
       .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;
@@ -1826,7 +1827,7 @@ export class XiaoshiHaInfoButton extends LitElement {
         
         buttonHtml = html`
           <div class="ha-info-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -1866,7 +1867,7 @@ export class XiaoshiHaInfoButton extends LitElement {
         
         buttonHtml = html`
           <div class="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -2052,7 +2053,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）
@@ -2073,7 +2074,7 @@ export class XiaoshiHaInfoButton extends LitElement {
     if (config.button_icon_size) {
       this.style.setProperty('--button-icon-size', config.button_icon_size);
     } else {
-      this.style.setProperty('--button-icon-size', '15px');
+      this.style.setProperty('--button-icon-size', '13px');
     }
     
     // 设置卡片宽度（控制原来的 UI）

xiaoshi-device-todo-button.js

@@ -293,13 +293,13 @@ class XiaoshiTodoButtonEditor extends LitElement {
         </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>
 
@@ -326,13 +326,13 @@ class XiaoshiTodoButtonEditor extends LitElement {
         </div>
         
         <div class="form-group">
-          <label>按钮图标大小：支持像素(px)，默认15px</label>
+          <label>按钮图标大小：支持像素(px)，默认13px</label>
           <input 
             type="text" 
             @change=${this._entityChanged}
-            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '15px'}
+            .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
             name="button_icon_size"
-            placeholder="默认15px"
+            placeholder="默认13px"
           />
         </div>
 
@@ -491,7 +491,7 @@ class XiaoshiTodoButtonEditor extends LitElement {
     } else if (name === 'button_font_size') {
       finalValue = value || '11px';
     } else if (name === 'button_icon_size') {
-      finalValue = value || '15px';
+      finalValue = value || '13px';
     } else if (name === 'width') {
       finalValue = value || '100%';
     } else if (name === 'tap_action') {
@@ -633,7 +633,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;
@@ -654,13 +654,14 @@ class XiaoshiTodoButton extends LitElement {
       }
 
       .status-icon {
-        --mdc-icon-size: var(--button-icon-size, 15px);
+        --mdc-icon-size: var(--button-icon-size, 13px);
         color: var(--fg-color, #000);
+        margin-right: 3px;
       }
 
       /* 角标模式样式 */
       .todo-status.badge-mode {
-        width: var(--button-width, 70px);
+        width: var(--button-width, 65px);
         height: var(--button-height, 24px);
         border-radius: 10px;
         padding: 0;
@@ -1663,7 +1664,7 @@ class XiaoshiTodoButton extends LitElement {
         
         buttonHtml = html`
           <div class="todo-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -1703,7 +1704,7 @@ class XiaoshiTodoButton extends LitElement {
         
         buttonHtml = html`
           <div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
-            ${!hideIcon ? html`<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>` : ''}
+            ${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
             ${displayText}
           </div>
         `;
@@ -1975,7 +1976,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）
@@ -1996,7 +1997,7 @@ class XiaoshiTodoButton extends LitElement {
     if (config.button_icon_size) {
       this.style.setProperty('--button-icon-size', config.button_icon_size);
     } else {
-      this.style.setProperty('--button-icon-size', '15px');
+      this.style.setProperty('--button-icon-size', '13px');
     }
     
     // 设置卡片宽度（控制原来的 UI）

xiaoshi-pad-card.js

@@ -1,4 +1,4 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.1.7 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.2.0 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
 
 const loadCards = async () => {
     await import('./xiaoshi-pad-grid-card.js');