feat(web): redesign fleet cards and instance workspace

apps/web/src/instances/overview-system.tsx

@@ -102,6 +102,66 @@ function StructuredSection({ label, values }: { label: string; values: OverviewS
   );
 }
 
+function ResourceSummary({ instance }: { instance: InstanceContext }) {
+  const resources = instance.resources;
+  const metric = (label: string, value: number | undefined) => (
+    <article className="overview-resource-card">
+      <span>{label}</span>
+      {value === undefined ? (
+        <strong>暂未获取</strong>
+      ) : (
+        <>
+          <strong>{value.toFixed(1)}%</strong>
+          <meter min="0" max="100" value={value} aria-label={`${label}使用率`} />
+        </>
+      )}
+    </article>
+  );
+  return (
+    <section className="overview-operations" aria-label="运行状态与资源">
+      <h2>运行状态</h2>
+      {instance.resourceSummaryState === 'loading' ? (
+        <p role="status" aria-label="资源摘要状态">
+          正在加载资源摘要…
+        </p>
+      ) : null}
+      {instance.resourceSummaryState === 'unavailable' ? (
+        <p role="status" aria-label="资源摘要状态">
+          资源摘要暂不可用，实例基本信息仍可使用。
+        </p>
+      ) : null}
+      <div className="overview-resource-grid">
+        <article className="overview-resource-card">
+          <span>连接状态</span>
+          <strong>
+            {instance.status === 'online'
+              ? '在线'
+              : instance.status === 'offline'
+                ? '离线'
+                : instance.status === 'auth-required'
+                  ? '需要认证'
+                  : '未知'}
+          </strong>
+        </article>
+        {metric('CPU', resources?.cpuPercent)}
+        {metric('内存', resources?.memoryPercent)}
+        <article className="overview-resource-card">
+          <span>最高温度</span>
+          <strong>
+            {resources?.maxTemperatureCelsius === undefined
+              ? '暂未获取'
+              : `${resources.maxTemperatureCelsius.toFixed(1)} °C`}
+          </strong>
+        </article>
+        <article className="overview-resource-card overview-resource-phone">
+          <span>手机号</span>
+          <strong>{resources?.phoneNumbers?.join('、') || '暂未获取'}</strong>
+        </article>
+      </div>
+    </section>
+  );
+}
+
 export function OverviewSystemPage({
   instance,
   dataSource,
@@ -159,12 +219,7 @@ export function OverviewSystemPage({
       </div>
     );
 
-  if (!dataSource)
-    return (
-      <div className="state-panel" role="status" aria-label="概览不可用">
-        没有可用的安全概览只读数据源。此控制台不会臆造或调用未签订契约的生产端点。
-      </div>
-    );
+  if (!dataSource) return <ResourceSummary instance={instance} />;
 
   const retainedSnapshot =
     state.kind === 'loading' || state.kind === 'error' ? state.snapshot : undefined;
@@ -191,6 +246,7 @@ export function OverviewSystemPage({
 
   return (
     <div className="overview-system">
+      <ResourceSummary instance={instance} />
       {state.kind === 'loading' ? <p role="status">正在刷新概览…</p> : null}
       {state.kind === 'error' ? (
         <div className="state-panel state-error" role="alert">
@@ -211,10 +267,10 @@ export function OverviewSystemPage({
           <StructuredSection key={key} label={label} values={snapshot[key]} />
         ))}
       </div>
-      <section className="state-panel" aria-label="系统操作">
-        <h2>系统操作</h2>
+      <details className="system-operation-note">
+        <summary>系统操作说明</summary>
         <p>重启不可用，因为后端尚未实现 R3 重启操作，因此不提供任何操作。</p>
-      </section>
+      </details>
     </div>
   );
 }