feat: 创建 PlanningContext.tsx
This commit is contained in:
60
src/views/Dashboard/components/PlanningContext.tsx
Normal file
60
src/views/Dashboard/components/PlanningContext.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* InvestmentPlanningCenter Context
|
||||
* 用于在日历、计划、复盘三个面板间共享数据和状态
|
||||
*/
|
||||
|
||||
import React, { createContext, useContext, ReactNode } from 'react';
|
||||
import type { PlanningContextValue } from '@/types';
|
||||
|
||||
/**
|
||||
* Planning Data Context
|
||||
* 提供投资规划数据和操作方法
|
||||
*/
|
||||
const PlanningDataContext = createContext<PlanningContextValue | null>(null);
|
||||
|
||||
/**
|
||||
* PlanningDataProvider Props
|
||||
*/
|
||||
interface PlanningDataProviderProps {
|
||||
/** Context 值 */
|
||||
value: PlanningContextValue;
|
||||
/** 子组件 */
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* PlanningDataProvider 组件
|
||||
* 包裹需要访问投资规划数据的组件
|
||||
*/
|
||||
export const PlanningDataProvider: React.FC<PlanningDataProviderProps> = ({ value, children }) => {
|
||||
return (
|
||||
<PlanningDataContext.Provider value={value}>
|
||||
{children}
|
||||
</PlanningDataContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* usePlanningData Hook
|
||||
* 在子组件中访问投资规划数据
|
||||
*
|
||||
* @throws {Error} 如果在 PlanningDataProvider 外部调用
|
||||
* @returns {PlanningContextValue} Context 值
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* function CalendarPanel() {
|
||||
* const { allEvents, loading, toast } = usePlanningData();
|
||||
* // ...
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export const usePlanningData = (): PlanningContextValue => {
|
||||
const context = useContext(PlanningDataContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error('usePlanningData 必须在 PlanningDataProvider 内部使用');
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
Reference in New Issue
Block a user