Update xiaoshi-pad-card.js

xiaoshi-device-offline-card.js

@@ -281,7 +281,7 @@ export class XiaoshiOfflineCard extends LitElement {
         align-items: center;
         padding: 0px;
         border-bottom: 1px solid rgb(150,150,150,0.2);
-        margin: 0 32px 8px 32px;
+        margin: 0 32px 0px 32px;
       }
 
       /*设备、实体明细背景*/
@@ -289,7 +289,7 @@ export class XiaoshiOfflineCard extends LitElement {
         flex: 1;
         overflow-y: auto;
         min-height: 0;
-        padding: 0 0 8px  0;
+        padding: 0 0 8px 0;
       }
 
       .device-icon {
@@ -304,7 +304,7 @@ export class XiaoshiOfflineCard extends LitElement {
       .device-name {
         font-weight: 500;
         color: var(--fg-color, #000);
-        margin-bottom: 4px;
+        padding: 6px 0 0 0;
       }
 
       .device-entity {
@@ -316,7 +316,6 @@ export class XiaoshiOfflineCard extends LitElement {
       .device-details {
         font-size: 10px;
         color: var(--fg-color, #000);
-        margin-top: 4px;
       }
 
       .device-last-seen {
@@ -327,7 +326,7 @@ export class XiaoshiOfflineCard extends LitElement {
 
       .no-devices {
         text-align: center;
-        padding: 0px;
+        padding: 8px 0 0 0;
         color: var(--fg-color, #000);
       }
 

xiaoshi-device-update-card.js

@@ -307,7 +307,7 @@ export class XiaoshiUpdateCard extends LitElement {
 
       .no-devices {
         text-align: center;
-        padding: 0px;
+        padding: 8px 0 0 0;
         color: var(--fg-color, #000);
       }
 
@@ -342,6 +342,10 @@ export class XiaoshiUpdateCard extends LitElement {
         text-overflow: ellipsis;
       }
 
+      .current-version.outdated {
+        color: rgb(255,20,0);
+      }
+
       .latest-version {
         color: var(--fg-color, #000);
         font-size: 10px;
@@ -690,9 +694,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (osEntity) {
       const current = osEntity.attributes.installed_version || '未知';
       const latest = osEntity.attributes.latest_version || '未知';
+      const osCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">OS</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${osCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }
@@ -702,9 +707,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (coreEntity) {
       const current = coreEntity.attributes.installed_version || '未知';
       const latest = coreEntity.attributes.latest_version || '未知';
+      const coreCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">Core</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${coreCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }
@@ -714,9 +720,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (supervisorEntity) {
       const current = supervisorEntity.attributes.installed_version || '未知';
       const latest = supervisorEntity.attributes.latest_version || '未知';
+      const supervisorCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">Supervisor</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${supervisorCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }

xiaoshi-pad-card.js

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