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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user