mirror of
https://github.com/xiaoshi930/xiaoshi-pad-card.git
synced 2026-02-12 06:33:49 +00:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6e1c745a47 | ||
|
|
e4e2a218c1 | ||
|
|
2aeca95db9 | ||
|
|
bf6c7d9a1a | ||
|
|
b5dfe6ac0a | ||
|
|
e4c9bcfe32 | ||
|
|
c30a918614 |
@@ -1217,7 +1217,6 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
super();
|
||||
this._oilPriceData = [];
|
||||
this._loading = false;
|
||||
this._dataLoaded = false; //button新元素
|
||||
this._refreshInterval = null;
|
||||
this.theme = 'on';
|
||||
}
|
||||
@@ -1236,7 +1235,7 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 3000);
|
||||
}, 300000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1330,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;
|
||||
@@ -1668,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 => {
|
||||
|
||||
@@ -1286,7 +1286,6 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
super();
|
||||
this._oilPriceData = [];
|
||||
this._loading = false;
|
||||
this._dataLoaded = false; //button新元素
|
||||
this._refreshInterval = null;
|
||||
this.theme = 'on';
|
||||
}
|
||||
@@ -1305,7 +1304,7 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 3000);
|
||||
}, 300000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1432,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;
|
||||
@@ -1866,7 +1863,7 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
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) {
|
||||
@@ -1875,95 +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 {
|
||||
// 普通模式
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
// 构建显示文本
|
||||
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: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" 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 {
|
||||
// 普通模式:显示文本和数量
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (warningCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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>
|
||||
`;
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
// 返回最终的渲染结果(包括按钮和预览卡片)
|
||||
|
||||
@@ -416,7 +416,6 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
_offlineEntities: Array,
|
||||
_loading: Boolean,
|
||||
_refreshInterval: Number,
|
||||
_dataLoaded: Boolean, //button新元素
|
||||
theme: { type: String }
|
||||
};
|
||||
}
|
||||
@@ -785,7 +784,6 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
this._offlineDevices = [];
|
||||
this._offlineEntities = [];
|
||||
this._loading = false;
|
||||
this._dataLoaded = false; //button新元素
|
||||
this._refreshInterval = null;
|
||||
this.theme = 'on';
|
||||
}
|
||||
@@ -801,12 +799,12 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadUpdateData();
|
||||
this._loadOfflineDevices();
|
||||
}, 3000);
|
||||
}, 300000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -983,11 +981,9 @@ 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;
|
||||
@@ -1219,7 +1215,7 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写
|
||||
return regex.test(str);
|
||||
}
|
||||
async _loadUpdateData() {
|
||||
_loadUpdateData() {
|
||||
if (!this.hass) return;
|
||||
|
||||
this._loading = true;
|
||||
@@ -1544,8 +1540,6 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
return html`${backupElements}`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*button新元素 开始*/
|
||||
_handleButtonClick() {
|
||||
const tapAction = this.config.tap_action;
|
||||
@@ -1795,7 +1789,7 @@ class XiaoshiHaInfoButton extends LitElement {
|
||||
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) {
|
||||
@@ -1804,95 +1798,53 @@ 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"的宽度
|
||||
}
|
||||
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
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 {
|
||||
// 普通模式:显示文本和数量
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (warningCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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>
|
||||
`;
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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`
|
||||
|
||||
@@ -1107,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;
|
||||
@@ -1124,7 +1123,7 @@ class XiaoshiTodoButton extends LitElement {
|
||||
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadTodoData();
|
||||
@@ -1266,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;
|
||||
@@ -1633,7 +1630,7 @@ class XiaoshiTodoButton extends LitElement {
|
||||
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) {
|
||||
@@ -1642,95 +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 {
|
||||
// 普通模式
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
// 构建显示文本
|
||||
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: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" 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 {
|
||||
// 普通模式:显示文本和数量
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (totalIncompleteCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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>
|
||||
`;
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
// 返回最终的渲染结果(包括按钮和预览卡片)
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.2.5 ", "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 = () => {
|
||||
import('./xiaoshi-pad-grid-card.js');
|
||||
import('./xiaoshi-device-balance-card.js');
|
||||
import('./xiaoshi-device-balance-button.js');
|
||||
import('./xiaoshi-device-todo-card.js');
|
||||
import('./xiaoshi-device-todo-button.js');
|
||||
import('./xiaoshi-device-consumables-card.js');
|
||||
import('./xiaoshi-device-consumables-button.js');
|
||||
import('./xiaoshi-device-ha-info-card.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);
|
||||
|
||||
Reference in New Issue
Block a user