lable_studio前端页面逻辑

1. AppStore 创建

↓

2. App.jsx 渲染（使用 observer）

↓

3. 传递 store 给 TopBar

↓

4. TopBar 访问 store.project（observer 自动跟踪）

↓

5. 当 store.project 变化时

↓

6. observer 检测到变化

↓

7. 自动重新渲染 TopBar

1. App.jsx 的作用

App.jsx 是标注页面的根组件，负责：

主要职责：

1. 渲染整个标注界面布局

• TopBar（顶部工具栏）

• BottomBar（底部工具栏）

• SidePanels（侧边栏）

• 主标注区域

1. 管理页面状态

• 加载状态（store.isLoading）

• 无任务状态（store.noTask）

• 无访问权限（store.noAccess）

• 标注成功（store.labeledSuccess）

1. 传递 store 给子组件

• 第 308 行：<TopBar store={store}/>

• 第 321 行：<BottomBar store={store}/>

• 所有子组件都接收同一个 store 实例

架构说明

1. AppStore.js 的作用

• 位置：web/libs/editor/src/stores/AppStore.js

• 作用：标注页面的核心状态管理（使用 MobX-State-Tree）

• 管理内容：

• project：项目信息

• task：当前任务

• annotationStore：标注数据

• user：用户信息

• 其他 UI 状态

2. TopBar.jsx 中的 store

• store 就是 AppStore 的实例

• 通过 observer 包装，可响应式访问 store.project

• 在 App.jsx 中传递：<TopBar store={store}/>

2. observer 是什么？

observer 来自 mobx-react，用于让 React 组件响应 MobX 状态变化。

工作原理：

// 没有 observer 的普通组件
const TopBar = ({store}) => {
  const project = store.project; // ❌ 读取了，但不会自动更新
  return <div>{project?.id}</div>;
};

// 使用 observer 的组件
const TopBar = observer(({store}) => {
  const project = store.project; // ✅ 读取了，会自动跟踪变化
  return <div>{project?.id}</div>;
});