Show online status as inline dot

apps/senlinai-acro-react/scripts/visual-check.mjs

@@ -32,6 +32,8 @@ await page.screenshot({ path: 'test-results/workbench-react-acro-dark.png', full
 
 const metrics = await page.evaluate(() => {
   const statusbar = document.querySelector('.statusbar')
+  const statusName = document.querySelector('.status-name')
+  const statusOnlineDot = document.querySelector('.status-online-dot')
   const search = document.querySelector('.global-search')
   const main = document.querySelector('.workbench-main')
   const workspacePage = document.querySelector('.workspace-page')
@@ -73,6 +75,8 @@ const metrics = await page.evaluate(() => {
 
   return {
     statusbarHeight: statusbar?.getBoundingClientRect().height,
+    statusName: rect(statusName),
+    statusOnlineDot: rect(statusOnlineDot),
     searchHeight: search?.getBoundingClientRect().height,
     workbenchMain: rect(main),
     hasWorkspacePage: Boolean(workspacePage),
@@ -106,6 +110,10 @@ console.log(JSON.stringify({ metrics, errors }, null, 2))
 const failures = []
 if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
 if (metrics.statusbarHeight !== 32) failures.push(`expected statusbar height 32, got ${metrics.statusbarHeight}`)
+if (!metrics.statusOnlineDot) failures.push('expected online status to render as an icon dot')
+if (metrics.statusName && metrics.statusOnlineDot && Math.abs(metrics.statusName.top - metrics.statusOnlineDot.top) > 6) {
+  failures.push(`expected online dot to sit beside username, got name=${JSON.stringify(metrics.statusName)}, dot=${JSON.stringify(metrics.statusOnlineDot)}`)
+}
 if (metrics.searchHeight !== 42) failures.push(`expected search height 42, got ${metrics.searchHeight}`)
 if (metrics.overflowX) failures.push('expected no horizontal overflow')
 if (!metrics.workbenchMain) failures.push('missing workbench main')

apps/senlinai-acro-react/src/App.css

@@ -661,17 +661,25 @@
 }
 
 .status-name {
-  display: block;
+  display: inline-flex;
   font-size: 12px;
   font-weight: 700;
   line-height: 1;
 }
 
-.status-online {
-  display: block;
-  color: #7be188 !important;
-  font-size: 11px;
-  line-height: 1;
+.status-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.status-online-dot {
+  width: 7px;
+  height: 7px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #7be188;
+  box-shadow: 0 0 0 2px rgba(123, 225, 136, 0.16);
 }
 
 .status-system b {

apps/senlinai-acro-react/src/pages/projects/project-statusbar.tsx

@@ -1,5 +1,15 @@
 import { Avatar, Button, Layout, Space, Typography } from '@arco-design/web-react'
-import { IconApps, IconCalendar, IconCheckCircleFill, IconMessage, IconRobot, IconSettings, IconStorage, IconThunderbolt, IconUserGroup } from '@arco-design/web-react/icon'
+import {
+  IconApps,
+  IconCalendar,
+  IconCheckCircleFill,
+  IconMessage,
+  IconRobot,
+  IconSettings,
+  IconStorage,
+  IconThunderbolt,
+  IconUserGroup,
+} from '@arco-design/web-react/icon'
 
 const { Footer } = Layout
 const { Text } = Typography
@@ -7,9 +17,27 @@ const { Text } = Typography
 export function ProjectStatusbar() {
   return (
     <Footer className="statusbar">
-      <div className="status-user"><Avatar size={26} style={{ backgroundColor: '#165DFF' }}>张</Avatar><div><Text className="status-name">张明</Text><Text className="status-online">在线</Text></div><Button type="text" icon={<IconUserGroup />}>好友</Button><Button type="text" icon={<IconMessage />}>私信</Button><Button type="text" icon={<IconSettings />}>设置</Button></div>
-      <Space className="status-tasks" size={28}><span><IconCheckCircleFill /> 同步完成</span><span><IconInteractionFallback /> 3 个任务进行中</span><span><IconRobot /> AI 队列空闲</span><span><IconThunderbolt /> 本地草稿已保存</span></Space>
-      <Space className="status-system" size={24}><span><IconStorage /> 系统存储 152GB 可用</span><span>系统健康 <b>正常</b></span><IconApps /></Space>
+      <div className="status-user">
+        <Avatar size={26} style={{ backgroundColor: '#165DFF' }}>张</Avatar>
+        <div className="status-identity">
+          <Text className="status-name">张明</Text>
+          <span className="status-online-dot" aria-label="在线" title="在线" />
+        </div>
+        <Button type="text" icon={<IconUserGroup />}>好友</Button>
+        <Button type="text" icon={<IconMessage />}>私信</Button>
+        <Button type="text" icon={<IconSettings />}>设置</Button>
+      </div>
+      <Space className="status-tasks" size={28}>
+        <span><IconCheckCircleFill /> 同步完成</span>
+        <span><IconInteractionFallback /> 3 个任务进行中</span>
+        <span><IconRobot /> AI 队列空闲</span>
+        <span><IconThunderbolt /> 本地草稿已保存</span>
+      </Space>
+      <Space className="status-system" size={24}>
+        <span><IconStorage /> 系统存储 152GB 可用</span>
+        <span>系统健康 <b>正常</b></span>
+        <IconApps />
+      </Space>
     </Footer>
   )
 }