From bf6c7d9a1a1120c52dafe5175d6170e13f86156e Mon Sep 17 00:00:00 2001 From: xiaoshi <115949669+xiaoshi930@users.noreply.github.com> Date: Thu, 1 Jan 2026 15:45:11 +0800 Subject: [PATCH] Update xiaoshi-device-todo-button.js --- xiaoshi-device-todo-button.js | 139 ++++++++++++---------------------- 1 file changed, 48 insertions(+), 91 deletions(-) diff --git a/xiaoshi-device-todo-button.js b/xiaoshi-device-todo-button.js index c0de02d..2bc2332 100644 --- a/xiaoshi-device-todo-button.js +++ b/xiaoshi-device-todo-button.js @@ -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` -
- -
- `; - } 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` -
- ${!hideIcon ? html`` : ''} - ${displayText} -
- `; - } + + // 数据加载完成后 + if (badgeMode) { + // 角标模式：只显示图标，根据数量显示角标 + const hasWarning = totalIncompleteCount > 0; + buttonHtml = html` +
+ + ${hasWarning ? html`
${totalIncompleteCount}
` : ''} +
+ `; } else { - // 数据加载完成后 - if (badgeMode) { - // 角标模式：只显示图标，根据数量显示角标 - const hasWarning = totalIncompleteCount > 0; - buttonHtml = html` -
- - ${hasWarning ? html`
${totalIncompleteCount}
` : ''} -
- `; + // 普通模式：显示文本和数量 + // 应用锁定白色功能，但预警颜色（红色）不受影响 + 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` -
- ${!hideIcon ? html`` : ''} - ${displayText} -
- `; + // 预警状态：始终使用红色，不受锁定白色影响 + 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` +
+ ${!hideIcon ? html`` : ''} + ${displayText} +
+ `; } // 返回最终的渲染结果（包括按钮和预览卡片）