43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import { useStatusBarStore, type StatusBarItem } from '../../stores/statusBarStore'
|
|
|
|
/**
|
|
* StatusBar — 纯渲染层
|
|
*
|
|
* 不包含任何业务逻辑。所有状态栏项由各功能模块通过
|
|
* useStatusBarStore.register() 注入，本组件按 alignment + priority 排序渲染。
|
|
* 每个 item.Component 是独立 React 组件，可自由使用 hooks。
|
|
*/
|
|
|
|
export const StatusBar = React.memo(function StatusBar() {
|
|
const items = useStatusBarStore(s => s.items)
|
|
|
|
const sorted = useMemo(() => {
|
|
const list = Object.values(items)
|
|
if (list.length === 0) return { left: [] as StatusBarItem[], right: [] as StatusBarItem[] }
|
|
const byAlignment = (a: 'left' | 'right') =>
|
|
list.filter(i => i.alignment === a).sort((x, y) => x.priority - y.priority)
|
|
return { left: byAlignment('left'), right: byAlignment('right') }
|
|
}, [items])
|
|
|
|
return (
|
|
<div id="statusbar" role="status" aria-live="polite">
|
|
<div className="status-left">
|
|
{sorted.left.map(({ id, Component }) => (
|
|
<Component key={id} />
|
|
))}
|
|
</div>
|
|
<div className="status-right">
|
|
{sorted.right.map(({ id, Component }, i) => (
|
|
<React.Fragment key={id}>
|
|
{i > 0 && <span className="status-divider">|</span>}
|
|
<Component />
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
StatusBar.displayName = 'StatusBar'
|