HomeAssistant/xiaoshi-pad-card
1
0
Fork 1
mirror of https://github.com/xiaoshi930/xiaoshi-pad-card.git synced 2026-01-13 07:04:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update xiaoshi-device-balance-button.js

Browse Source
This commit is contained in:
xiaoshi
2025-12-13 22:47:43 +08:00
committed by GitHub
parent 6abbc0e917
commit 1fb2f8dcb7
1 changed files with 213 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
xiaoshi-device-balance-button.js
View File

@@ -216,175 +216,219 @@ class XiaoshiBalanceButtonEditor extends LitElement {
if (!this.hass) return html``; if (!this.hass) return html``;
return html` return html`
<div class="form"> <div class="form">
<!-- button新元素 开始--> <!-- 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 <input
type="text" type="text"
@change=${this._entityChanged} @input=${this._onSpecificEntitySearch}
.value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'} @focus=${this._onSpecificEntitySearch}
name="button_icon" .value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
placeholder="mdi:cellphone" placeholder="搜索实体..."
/></label> class="entity-search-input"
</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"
/> />
</div> ${this._showSpecificEntityList ? html`
<div class="entity-dropdown">
<div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group"> ${this._specificFilteredEntities.map(entity => html`
<label>指定显示的实体</label> <div
<div class="entity-selector"> class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
<input @click=${() => this._selectSpecificEntity(entity.entity_id)}
type="text" >
@input=${this._onSpecificEntitySearch} <div class="entity-info">
@focus=${this._onSpecificEntitySearch} <div class="entity-details">
.value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()} <div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
placeholder="搜索实体..." <div class="entity-id">${entity.entity_id}</div>
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>
</div> </div>
${this.config.specific_entity_id === entity.entity_id ? <ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
</div> </div>
`)} ${this.config.specific_entity_id === entity.entity_id ?
${this._specificFilteredEntities.length === 0 ? html` html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
<div class="no-results">未找到匹配的实体</div> </div>
` : ''} `)}
</div> ${this._specificFilteredEntities.length === 0 ? html`
` : ''} <div class="no-results">未找到匹配的实体</div>
</div> ` : ''}
</div>
` : ''}
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label>按钮宽度：默认65px, 支持像素(px)和百分比(%)</label> <label>按钮显示图标
<input <input
type="text" type="text"
@change=${this._entityChanged} @change=${this._entityChanged}
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'} .value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
name="button_width" name="button_icon"
placeholder="默认65px" 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"> <div class="form-group">
<label>按钮高度：支持像素(px)、百分比(%)和视窗高度(vh)，默认24px</label> <label>按钮文字大小：支持像素(px)，默认11px</label>
<input <input
type="text" type="text"
@change=${this._entityChanged} @change=${this._entityChanged}
.value=${this.config.button_height !== undefined ? this.config.button_height : '24px'} .value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
name="button_height" name="button_font_size"
placeholder="默认24px" placeholder="默认11px"
/> />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>按钮文字大小：支持像素(px)，默认11px</label> <label>按钮图标大小：支持像素(px)，默认13px</label>
<input <input
type="text" type="text"
@change=${this._entityChanged} @change=${this._entityChanged}
.value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'} .value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
name="button_font_size" name="button_icon_size"
placeholder="默认11px" placeholder="默认13px"
/> />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>按钮图标大小：支持像素(px)，默认13px</label> <label>点击动作：点击按钮时触发的动作</label>
<input <select
type="text" @change=${this._entityChanged}
@change=${this._entityChanged} .value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'} name="tap_action"
name="button_icon_size" >
placeholder="默认13px" <option value="tap_action">弹出余额信息卡片（默认）</option>
/> <option value="none">无动作</option>
</div> </select>
</div>
<div class="form-group"> <div class="form-group">
<label>点击动作：点击按钮时触发的动作</label> <label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
<select <textarea
@change=${this._entityChanged} @change=${this._entityChanged}
.value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'} .value=${this.config.other_cards || ''}
name="tap_action" name="other_cards"
> placeholder='# 示例配置：添加button卡片
<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卡片
- type: custom:button-card - type: custom:button-card
template: 测试模板(最好引用模板，否则大概率会报错) template: 测试模板(最好引用模板，否则大概率会报错)
- type: custom:button-card - type: custom:button-card
template: 测试模板(最好引用模板，否则大概率会报错)'> template: 测试模板(最好引用模板，否则大概率会报错)'>
</textarea> </textarea>
</div> </div>
<div class="checkbox-group"> <div class="checkbox-group">
<input <input
type="checkbox" type="checkbox"
class="checkbox-input" class="checkbox-input"
@change=${this._entityChanged} @change=${this._entityChanged}
.checked=${this.config.no_preview === true} .checked=${this.config.no_preview === true}
name="no_preview" name="no_preview"
id="no_preview" id="no_preview"
/> />
<label for="no_preview" class="checkbox-label" style="color: red;"> <label for="no_preview" class="checkbox-label" style="color: red;">
📻显示预览📻（ 请先勾选测试显示效果 ） 📻显示预览📻（ 请先勾选测试显示效果 ）
</label> </label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label> </label> <label> </label>
<label>👇👇👇下方是弹出的主卡配置项👇👇👇</label> <label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
<label> </label> <label> </label>
</div> </div>
<!-- button新元素 结束--> <!-- button新元素 结束-->
<div class="form-group"> <div class="form-group">
<label>卡片宽度：支持像素(px)和百分比(%)，默认100%</label> <label>卡片宽度：支持像素(px)和百分比(%)，默认100%</label>
@@ -658,6 +702,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
} }
} }
/*button新按钮方法 结束*/ /*button新按钮方法 结束*/
this.config = { this.config = {
...this.config, ...this.config,
[name]: finalValue [name]: finalValue
@@ -978,7 +1023,6 @@ class XiaoshiBalanceButton extends LitElement {
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--bg-color, #fff); background: var(--bg-color, #fff);
border-radius: 12px; border-radius: 12px;
} }
@@ -1008,8 +1052,6 @@ class XiaoshiBalanceButton extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/*标题统计数字*/ /*标题统计数字*/
@@ -1613,11 +1655,14 @@ class XiaoshiBalanceButton extends LitElement {
/*button新元素 前9行和最后1行开始*/ /*button新元素 前9行和最后1行开始*/
const showPreview = this.config.no_preview === true; 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 buttonIcon = this.config.button_icon || 'mdi:cellphone';
// 设置背景颜色 // 设置背景颜色
const buttonBgColor = bgColor; const buttonBgColor = transparentBg ? 'transparent' : bgColor;
// 获取显示模式 // 获取显示模式
const displayMode = this.config.display_mode || 'min_value'; 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 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` 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> <span style="color: ${numberColor};">${displayText}</span>
</div> </div>
`; `;