- AppStore 创建
↓
- App.jsx 渲染（使用 observer）
↓
- 传递 store 给 TopBar
↓
- TopBar 访问 store.project（observer 自动跟踪）
↓
- 当 store.project 变化时
↓
- observer 检测到变化
↓
- 自动重新渲染 TopBar
1. App.jsx 的作用
App.jsx 是标注页面的根组件，负责：
主要职责：
- 渲染整个标注界面布局
- TopBar（顶部工具栏）
- BottomBar（底部工具栏）
- SidePanels（侧边栏）
- 主标注区域
- 管理页面状态
- 加载状态（store.isLoading）
- 无任务状态（store.noTask）
- 无访问权限（store.noAccess）
- 标注成功（store.labeledSuccess）
- 传递 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 状态变化。
工作原理：
TypeScript
// 没有 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>;
});