Update xiaoshi-pad-climate-card.js

2026-02-13 06:58:07 +00:00 · 2026-01-25 22:12:52 +08:00 · 2026-01-25 20:08:20 +08:00 · 2026-01-25 20:01:09 +08:00 · 2026-01-25 19:50:50 +08:00 · 2026-01-25 19:50:39 +08:00
2 changed files with 21 additions and 81 deletions
--- a/xiaoshi-pad-card.js
+++ b/xiaoshi-pad-card.js
@@ -1,4 +1,4 @@
-console.info("%c 消逝卡-平板端 \n%c      v 1.0.1 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 1.0.4 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");

 const loadCards = () => {
    import('./xiaoshi-pad-climate-card.js');
--- a/xiaoshi-pad-climate-card.js
+++ b/xiaoshi-pad-climate-card.js
@@ -681,49 +681,6 @@ class XiaoshiPadClimateCardEditor extends LitElement {
            <option value="off">深色主题（深灰底白字）</option>
          </select>
        </div>
-        
-        <!-- 温度传感器 -->
-        <div class="form-group">
-          <label>温度传感器 (可选)</label>
-          <div class="entity-selector-with-remove">
-            <div class="entity-selector">
-              <input
-                type="text"
-                @input=${this._onTemperatureSearch}
-                @focus=${this._onTemperatureSearch}
-                .value=${this._temperatureSearchTerm || this.config.temperature || ''}
-                placeholder="搜索传感器..."
-                class="entity-search-input"
-              />
-              ${this._showTemperatureList ? html`
-                <div class="entity-dropdown">
-                  ${this._filteredTemperatureEntities.map(entity => html`
-                    <div
-                      class="entity-option ${this.config.temperature === entity.entity_id ? 'selected' : ''}"
-                      @click=${() => this._selectTemperature(entity.entity_id)}
-                    >
-                      <div class="entity-info">
-                        <ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
-                        <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>
-                      </div>
-                      ${this.config.temperature === entity.entity_id ?
-                        html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
-                    </div>
-                  `)}
-                  ${this._filteredTemperatureEntities.length === 0 ? html`
-                    <div class="no-results">未找到匹配的实体</div>
-                  ` : ''}
-                </div>
-              ` : ''}
-            </div>
-            <button class="remove-button" @click=${this._removeTemperature} title="移除温度传感器">
-              <ha-icon icon="mdi:close"></ha-icon>
-            </button>
-          </div>
-        </div>

        <!-- 定时器位置 -->
        ${this.config.timer ? html`
@@ -933,32 +890,15 @@ class XiaoshiPadClimateCardEditor extends LitElement {

        <!-- 宽度设置 -->
        <div class="form-group">
-          <label>卡片宽度：支持像素(px)和百分比(%)，默认300px</label>
+          <label>卡片主体宽度</label>
          <input
            type="text"
            @change=${this._widthChanged}
            .value=${this.config.width !== undefined ? this.config.width : '300px'}
            name="width"
-            placeholder="默认300px"
          />
        </div>

-        <!-- 高度设置 -->
-        <div class="form-group">
-          <label>卡片高度：支持像素(px)，默认300px</label>
-          <input
-            type="text"
-            @change=${this._heightChanged}
-            .value=${this.config.height !== undefined ? this.config.height : '300px'}
-            name="height"
-            placeholder="默认300px"
-          />
-          <div class="help-text">
-            输入高度值，例如：300px
-          </div>
-        </div>
-
-
      </div>
    `;
  }
@@ -1315,7 +1255,6 @@ class XiaoshiPadClimateCard extends LitElement {
    return {
      hass: { type: Object },
      width: { type: String, attribute: true },
-      height: { type: String, attribute: true },
      config: { type: Object },
      buttons: { type: Array },
      theme: { type: String },
@@ -1344,7 +1283,6 @@ class XiaoshiPadClimateCard extends LitElement {
    this.buttons2 = config.buttons2 || [];
    this._externalTempSensor = config.temperature || null;
    if (config.width !== undefined) this.width = config.width;
-    if (config.height !== undefined) this.height = config.height;
    this.requestUpdate();
  }

@@ -1361,7 +1299,7 @@ class XiaoshiPadClimateCard extends LitElement {
        position: relative;
        background-color: var(--bg-color);
        border-radius: 15px;
-        width: 300px;
+        width: var(--card-width, 300px);
      }

      .side-button-wrapper {
@@ -1378,7 +1316,7 @@ class XiaoshiPadClimateCard extends LitElement {

      .thermostat-card {
        position: relative;
-        width: 300px;
+        width: var(--card-width, 300px);
        height: 265px;
        display: flex;
        flex-direction: column;
@@ -1386,7 +1324,7 @@ class XiaoshiPadClimateCard extends LitElement {

      .thermostat-container {
        flex: 1;
-        width: 300px;
+        width: var(--card-width, 300px);
        height: 265px;
        position: relative;
      }
@@ -1429,6 +1367,7 @@ class XiaoshiPadClimateCard extends LitElement {
        background: rgb(0,0,0,0);
        cursor: pointer;
        padding: 0;
+        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
@@ -1523,7 +1462,6 @@ class XiaoshiPadClimateCard extends LitElement {
    this.buttons2 = [];
    this.theme = 'on';
    this.width = '300px';
-    this.height = '300px';
    this._timerInterval = null;
    this.temperatureData = [];
    this.canvas = null;
@@ -1743,7 +1681,7 @@ class XiaoshiPadClimateCard extends LitElement {
          </div>
        ` : ''}

-        <div class="main-card" style="--bg-color: ${bgColor}; --fg-color: ${fgColor};">
+        <div class="main-card" style="--bg-color: ${bgColor}; --fg-color: ${fgColor}; --card-width: ${this.config.width || '300px'};">
          <div class="thermostat-card ${themeClass}" style="height: ${cardHeight}px; --card-height: ${cardHeight}px;">
            <div class="thermostat-container" id="thermostatContainer"></div>

@@ -1987,7 +1925,7 @@ _renderExtraButtons(buttonType = 1) {
        const domain = buttonEntityId.split('.')[0];
        const friendlyName = entity.attributes.friendly_name || '';
        const displayName = friendlyName.slice(0, 4);
-        const displayValueColor = entity.state === '低' ? 'red' : fgColor;
+        const displayValueColor = entity.state.includes('低') || entity.state.includes('少') || entity.state.includes('缺') ? 'red' : fgColor;

        // 根据名称自定义图标
        const _getCustomIcon = (name, isActive) => {
@@ -1997,6 +1935,9 @@ _renderExtraButtons(buttonType = 1) {
            if (name.includes('睡眠')) return isActive ? 'mdi:sleep' : 'mdi:sleep-off';
            if (name.includes('指示灯')) return isActive ? 'mdi:lightbulb-on' : 'mdi:lightbulb-off';
            if (name.includes('提示音')) return isActive ? 'mdi:volume-high' : 'mdi:volume-mute';
+            if (name.includes('防冻')) return isActive ? 'mdi:snowflake' : 'mdi:snowflake-off';
+            if (name.includes('防烫伤')) return isActive ? 'mdi:fire' : 'mdi:fire-off';
+            if (name.includes('按键锁')) return isActive ? 'mdi:lock-open' : 'mdi:lock-open-variant';
            return null;
        };

@@ -2026,8 +1967,8 @@ _renderExtraButtons(buttonType = 1) {

                return html`
                    <div class="side-extra-button" style="cursor: default; --bg-color: ${bgColor};">
-                        <div class="side-value" style="color: ${displayValueColor}; font-size: 12px;">${displayValue}</div>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                        <div class="side-value" style="color: ${displayValueColor}; font-size: 11px; font-weight: bold; white-space: nowrap">${displayValue}</div>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                    </div>
                `;

@@ -2037,23 +1978,22 @@ _renderExtraButtons(buttonType = 1) {
                return html`
                    <button class="side-extra-button"
                            @click=${() => this._handleExtraButtonClick(buttonEntityId, domain)}
-                            style="color: ${buttonColor}; --bg-color: ${bgColor};">
-                        <ha-icon class="side-icon" icon="${buttonIcon}" style="color: ${buttonColor}"></ha-icon>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                            style="color: ${fgColor}; --bg-color: ${bgColor};">
+                        <ha-icon class="side-icon" icon="${buttonIcon}" style="color: ${fgColor}"></ha-icon>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                    </button>
                `;

            case 'select':
-                const options = entity.attributes.options || [];
-                const firstOption = options[0] || '';
-                const selectDisplayValue = firstOption.slice(0, 4);
+                const state = entity.state || '';
+                const selectDisplayValue = state.slice(0, 4);

                return html`
                    <div class="side-extra-button"
                            @click=${() => this._handleExtraButtonClick(buttonEntityId, domain)}
                            style="cursor: default; --bg-color: ${bgColor};">
-                        <div class="side-value" style="color: ${buttonColor}; font-size: 12px;">${selectDisplayValue}</div>
-                        <span class="side-text" style="color: ${buttonColor}">${displayName}</span>
+                        <div class="side-value" style="color: ${fgColor}; font-size: 11px; font-weight: bold; white-space: nowrap">${selectDisplayValue}</div>
+                        <span class="side-text" style="color: ${fgColor};">${displayName}</span>
                    </div>
                `;

@@ -2434,4 +2374,4 @@ _renderExtraButtons(buttonType = 1) {
  }
 }

-customElements.define('xiaoshi-pad-climate-card', XiaoshiPadClimateCard);
+customElements.define('xiaoshi-pad-climate-card', XiaoshiPadClimateCard);
Author	SHA1	Message	Date
xiaoshi	4aca5983e6	Update xiaoshi-pad-climate-card.js	2026-01-25 22:12:52 +08:00
xiaoshi	16e8cb8493	Update xiaoshi-pad-climate-card.js	2026-01-25 20:08:20 +08:00
xiaoshi	d0c11c3f08	Update xiaoshi-pad-climate-card.js	2026-01-25 20:01:09 +08:00
xiaoshi	1908ec0fae	Update version number in console log	2026-01-25 19:50:50 +08:00
xiaoshi	98ec3bfd5e	Update xiaoshi-pad-climate-card.js	2026-01-25 19:50:39 +08:00
xiaoshi	57d4627fa0	Update xiaoshi-pad-climate-card.js	2026-01-25 19:48:42 +08:00
xiaoshi	e12f60b284	Update xiaoshi-pad-card.js	2026-01-25 16:46:02 +08:00
xiaoshi	b12c5c633a	Update xiaoshi-pad-climate-card.js	2026-01-25 16:45:51 +08:00
xiaoshi	49e3ce2b0d	Update xiaoshi-pad-climate-card.js	2026-01-25 16:39:28 +08:00
xiaoshi	366d9625bb	Update xiaoshi-pad-climate-card.js	2026-01-25 16:36:00 +08:00
xiaoshi	db7c3c7b34	Update xiaoshi-pad-card.js	2026-01-25 16:35:48 +08:00