feat(web): 店铺管理页与页头平台选择器接入真实 API

- 页头平台选择器:PlatformProvider 加载平台目录与平台上下文
  (X-Atlas-Platform-Id header),平台 id 仅作为非敏感 UI 偏好存
  localStorage,默认取目录第一家(Ozon 优先)
- 店铺管理页覆盖 docs/api/stores-and-platforms.md 已实现接口:
  游标分页列表、创建(202+operation)、编辑(If-Match 乐观锁、
  409 刷新提示)、设为默认、重新验证凭据、仓库同步(422 脱敏
  错误展示)、软删除(DEFAULT_STORE_REPLACEMENT_REQUIRED 提示)
- services/api.ts 新增 getList(保留 {data, meta} 分页信封)与
  apiErrorCode;services/stores.ts 按契约生成 Idempotency-Key
- @atlas/contracts 补充只读响应类型 Platform / PlatformContext /
  CursorPaginationMeta / StoreOperationResponse(无行为变更)
- API Key 仅存在于提交瞬间的内存表单,不落任何存储
- 浏览器实测:注册→平台切换→创建/编辑/设默认/删除保护/同步
  错误路径→刷新会话恢复全部通过;typecheck + production build 通过
This commit is contained in:
2026-09-03 21:40:02 +08:00
parent 8655b7805f
commit 446baf5939
11 changed files with 991 additions and 9 deletions
+145
View File
@@ -0,0 +1,145 @@
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import type { ReactNode } from 'react';
import type { Platform, PlatformContext } from '@atlas/contracts';
import { api, apiErrorMessage } from '@/services/api';
/** 平台选择的本地记忆键:仅保存平台 id 这一非敏感 UI 偏好 */
const PLATFORM_STORAGE_KEY = 'atlas.platform_id';
interface PlatformContextValue {
/** 已启用的平台目录;加载失败时为空数组并置 error */
platforms: Platform[];
/** 页头当前选中的平台;目录未加载完成或为空时为 null */
currentPlatform: Platform | null;
/** 目录加载失败信息;非空时提供重试入口 */
error: string | null;
/** 当前平台的默认门店上下文(GET /api/platform-context) */
context: PlatformContext | null;
contextLoading: boolean;
selectPlatform: (platformId: string) => void;
/** 门店变更后刷新默认门店摘要 */
refreshContext: () => Promise<void>;
/** 目录加载失败后重试 */
reload: () => void;
}
const PlatformContextContext = createContext<PlatformContextValue | null>(null);
/** 平台上下文:页头平台选择器的数据源,门店等模块据此确定当前平台(目录接口将 Ozon 排在最前) */
export function PlatformProvider({ children }: { children: ReactNode }) {
const [platforms, setPlatforms] = useState<Platform[]>([]);
const [selectedId, setSelectedId] = useState<string | null>(() =>
localStorage.getItem(PLATFORM_STORAGE_KEY)
);
const [error, setError] = useState<string | null>(null);
const [context, setContext] = useState<PlatformContext | null>(null);
const [contextLoading, setContextLoading] = useState(false);
// 快速切换平台时丢弃过期响应与 loading:只接受最后一次请求的结果
const contextRequestIdRef = useRef(0);
const loadPlatforms = useCallback(async () => {
setError(null);
try {
const list = await api.get<Platform[]>('/platforms');
setPlatforms(list);
// 已保存的选择失效(平台下线或首次使用)时回退到目录第一家(Ozon 优先)
setSelectedId((prev) =>
prev && list.some((item) => item.id === prev) ? prev : (list[0]?.id ?? null)
);
} catch (err) {
setError(apiErrorMessage(err));
}
}, []);
useEffect(() => {
void loadPlatforms();
}, [loadPlatforms]);
const currentPlatform = useMemo(
() => platforms.find((item) => item.id === selectedId) ?? null,
[platforms, selectedId]
);
const loadContext = useCallback(async (platformId: string) => {
const requestId = ++contextRequestIdRef.current;
setContextLoading(true);
try {
const next = await api.get<PlatformContext>('/platform-context', {
headers: { 'X-Atlas-Platform-Id': platformId },
});
if (contextRequestIdRef.current !== requestId) return;
setContext(next);
} catch {
// 上下文读取失败不阻塞页面:门店页等业务接口自会报错
if (contextRequestIdRef.current !== requestId) return;
setContext(null);
} finally {
if (contextRequestIdRef.current === requestId) {
setContextLoading(false);
}
}
}, []);
useEffect(() => {
if (!currentPlatform) {
setContext(null);
return;
}
void loadContext(currentPlatform.id);
}, [currentPlatform, loadContext]);
const selectPlatform = useCallback((platformId: string) => {
setSelectedId(platformId);
localStorage.setItem(PLATFORM_STORAGE_KEY, platformId);
}, []);
const refreshContext = useCallback(async () => {
if (!currentPlatform) return;
await loadContext(currentPlatform.id);
}, [currentPlatform, loadContext]);
const value = useMemo(
() => ({
platforms,
currentPlatform,
error,
context,
contextLoading,
selectPlatform,
refreshContext,
reload: () => void loadPlatforms(),
}),
[
platforms,
currentPlatform,
error,
context,
contextLoading,
selectPlatform,
refreshContext,
loadPlatforms,
]
);
return (
<PlatformContextContext.Provider value={value}>
{children}
</PlatformContextContext.Provider>
);
}
export function usePlatform(): PlatformContextValue {
const context = useContext(PlatformContextContext);
if (!context) {
throw new Error('usePlatform 必须在 PlatformProvider 内使用');
}
return context;
}