fix: render dashboard rankings as bar charts

LianSyn-platform/app.js

@@ -1322,21 +1322,15 @@ function renderOperationsDashboardSummary() {
   }
 }
 
-function operationsDashboardRankBar(total, completed, maximum) {
+function operationsDashboardRankBar(total, maximum) {
   const safeMaximum = Math.max(1, Number(maximum || 0));
   const safeTotal = Math.max(0, Number(total || 0));
-  const safeCompleted = Math.min(safeTotal, Math.max(0, Number(completed || 0)));
   const bar = el('span', 'operations-dashboard-rank-bar');
   bar.setAttribute('aria-hidden', 'true');
   if (safeTotal > 0) {
-    const totalFill = el('i', 'is-total');
-    totalFill.style.width = `${Math.min(100, (safeTotal / safeMaximum) * 100)}%`;
-    bar.append(totalFill);
-  }
-  if (safeCompleted > 0) {
-    const successFill = el('i', 'is-success');
-    successFill.style.width = `${Math.min(100, (safeCompleted / safeMaximum) * 100)}%`;
-    bar.append(successFill);
+    bar.style.width = `${Math.min(100, (safeTotal / safeMaximum) * 100)}%`;
+  } else {
+    bar.hidden = true;
   }
   return bar;
 }
@@ -1345,7 +1339,8 @@ function renderOperationsDashboardBusinesses() {
   const container = $('#operationsDashboardBusinesses');
   if (!container) return;
   container.replaceChildren();
-  const businesses = operationsDashboardData?.businesses || [];
+  const businesses = [...(operationsDashboardData?.businesses || [])]
+    .sort((left, right) => Number(right.total || 0) - Number(left.total || 0));
   if (!businesses.length) {
     container.append(el('p', 'operations-dashboard-empty', '当前范围内还没有任务类型数据。'));
     return;
@@ -1360,7 +1355,7 @@ function renderOperationsDashboardBusinesses() {
       el('span', 'operations-dashboard-rank-number', String(index + 1).padStart(2, '0')),
       el('strong', 'operations-dashboard-rank-name', operationsDashboardBusinessLabel(item.label))
     );
-    button.append(operationsDashboardRankBar(item.total, item.completed, maximum));
+    button.prepend(operationsDashboardRankBar(item.total, maximum));
     const metrics = el('span', 'operations-dashboard-rank-metrics');
     metrics.append(
       el('span', 'is-total', `操作 ${Number(item.total || 0)}`),
@@ -1379,7 +1374,8 @@ function renderOperationsDashboardUsers() {
   const container = $('#operationsDashboardUsers');
   if (!container) return;
   container.replaceChildren();
-  const users = operationsDashboardData?.users || [];
+  const users = [...(operationsDashboardData?.users || [])]
+    .sort((left, right) => Number(right.total || 0) - Number(left.total || 0));
   $('#operationsDashboardUserCount').textContent = `${users.length} 名员工`;
   if (!users.length) {
     container.append(el('p', 'operations-dashboard-empty', '当前范围内还没有人员工作数据。'));
@@ -1401,13 +1397,14 @@ function renderOperationsDashboardUsers() {
       el('strong', '', item.actor.username),
       el('small', '', accountRoleLabel(item.actor.role))
     );
-    const bar = operationsDashboardRankBar(item.total, item.completed, maximum);
+    const bar = operationsDashboardRankBar(item.total, maximum);
     const metrics = el('div', 'operations-dashboard-user-metrics');
     metrics.append(
       el('span', 'is-total', `操作 ${Number(item.total || 0)}`),
       el('span', 'is-success', `成功 ${Number(item.completed || 0)}`)
     );
-    button.append(identity, bar, metrics);
+    button.prepend(bar);
+    button.append(identity, metrics);
     container.append(button);
   }
 }

LianSyn-platform/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#edf2f4">
     <title>AI操作台 · LianSyn-platform</title>
-      <link rel="stylesheet" href="styles.css?v=20260902-dashboard-ranking-bars-1">
+      <link rel="stylesheet" href="styles.css?v=20260902-dashboard-bar-chart-1">
   </head>
   <body>
     <main class="app-shell">
@@ -398,6 +398,6 @@
       </section>
 
     </main>
-  <script src="app.js?v=20260902-dashboard-ranking-bars-1"></script>
+  <script src="app.js?v=20260902-dashboard-bar-chart-1"></script>
   </body>
 </html>

LianSyn-platform/styles.css

@@ -4038,17 +4038,20 @@ textarea {
 
 .operations-dashboard-business-row,
 .operations-dashboard-user-row {
+  position: relative;
+  isolation: isolate;
   width: 100%;
   min-width: 0;
   min-height: 42px;
   display: grid;
-  grid-template-columns: 34px minmax(110px, 0.9fr) minmax(96px, 1.15fr) auto;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
+  overflow: hidden;
   padding: 7px 10px;
   border: 0;
   border-radius: 6px;
-  background: #f4f6f3;
+  background: transparent;
   color: var(--dashboard-ink);
   font: inherit;
   text-align: left;
@@ -4057,10 +4060,16 @@ textarea {
 
 .operations-dashboard-business-row:hover,
 .operations-dashboard-user-row:hover {
-  background: #eaf2ee;
+  background: transparent;
   transform: none;
 }
 
+.operations-dashboard-business-row > :not(.operations-dashboard-rank-bar),
+.operations-dashboard-user-row > :not(.operations-dashboard-rank-bar) {
+  position: relative;
+  z-index: 1;
+}
+
 .operations-dashboard-rank-number {
   color: #87938e;
   font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
@@ -4090,36 +4099,20 @@ textarea {
 }
 
 .operations-dashboard-rank-bar {
-  position: relative;
-  width: 100%;
-  height: 7px;
-  display: block;
-  overflow: hidden;
-  border-radius: 3px;
-  background: #e1e7e3;
-  box-shadow: inset 0 0 0 1px rgba(62, 91, 81, 0.08);
-}
-
-.operations-dashboard-rank-bar i {
   position: absolute;
-  left: 0;
+  z-index: 0;
+  inset: 0 auto 0 0;
+  min-width: 3px;
   display: block;
-  min-width: 2px;
-  border-radius: inherit;
-  transition: width 220ms ease;
+  border-radius: 6px;
+  background: #d9e7e0;
+  box-shadow: inset 3px 0 0 rgba(37, 119, 96, 0.72);
+  transition: width 220ms ease, background-color 180ms ease;
 }
 
-.operations-dashboard-rank-bar .is-total {
-  top: 0;
-  height: 100%;
-  background: #b6c6bf;
-}
-
-.operations-dashboard-rank-bar .is-success {
-  top: 2px;
-  height: 3px;
-  background: var(--dashboard-accent);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
+.operations-dashboard-business-row:hover .operations-dashboard-rank-bar,
+.operations-dashboard-user-row:hover .operations-dashboard-rank-bar {
+  background: #cfe1d8;
 }
 
 .operations-dashboard-rank-metrics .is-total,
@@ -4135,7 +4128,7 @@ textarea {
 }
 
 .operations-dashboard-user-row {
-  grid-template-columns: 34px minmax(110px, 0.9fr) minmax(96px, 1.15fr) auto;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
 }
 
 .operations-dashboard-user-identity {
@@ -4402,23 +4395,6 @@ textarea {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .operations-dashboard-business-row,
-  .operations-dashboard-user-row {
-    min-height: 52px;
-    grid-template-columns: 28px minmax(0, 1fr) auto;
-    grid-template-rows: auto auto;
-    gap: 6px 8px;
-  }
-
-  .operations-dashboard-rank-number {
-    grid-row: 1 / span 2;
-  }
-
-  .operations-dashboard-rank-bar {
-    grid-column: 2 / -1;
-    grid-row: 2;
-  }
-
   .operations-dashboard-filters {
     grid-template-columns: minmax(0, 1fr);
   }