REAL SHOWCASE SOURCEapp-context-page
1 个文件 · 64 行 · TypeScript
// ===== showcase/src/examples/components/app_context_page.ts ===== import { RenderAppContextScope, RenderButton, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel, createAppContext, createAppContextKey,} from 'ds-ui' const userKey = createAppContextKey<{ id: string; name: string }>('session.user')const recordKey = createAppContextKey<{ id: string; title: string }>('record.current') export function createAppContextPageExample(): RenderAppContextScope { const appContext = createAppContext([ [userKey, { id: 'u001', name: '张医生' }], ]) const pageContext = appContext.derive([ [recordKey, { id: 'r001', title: '入院记录' }], ]) const userText = new RenderText(`应用级上下文:${pageContext.require(userKey).name}`, { role: 'secondary' }) const recordText = new RenderText(`页面级上下文:${pageContext.require(recordKey).title}`, { role: 'accent' }) const status = new RenderText('子上下文能读取应用级用户,同时覆盖或追加页面级业务对象。', { role: 'secondary' }) const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 }) actions.addChild(new RenderButton({ label: '打开病程记录', onClick: () => { pageContext.set(recordKey, { id: 'r002', title: '首次病程记录' }) recordText.text = `页面级上下文:${pageContext.require(recordKey).title}` status.text = '只更新当前页面上下文,不影响应用级登录用户。' }, })) actions.addChild(new RenderButton({ label: '恢复入院记录', variant: 'primary', onClick: () => { pageContext.set(recordKey, { id: 'r001', title: '入院记录' }) recordText.text = `页面级上下文:${pageContext.require(recordKey).title}` status.text = '页面关闭时,RenderAppContextScope 会释放自己的页面上下文。' }, })) const content = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) content.addChild(new RenderPageHeader({ title: 'App Context 页面作用域', description: '应用级登录用户由父上下文提供,当前病历由页面子上下文持有。', })) content.addChild(userText) content.addChild(recordText) content.addChild(actions) content.addChild(status) content.padding = 24 return new RenderAppContextScope({ context: pageContext, child: content, disposeContextOnDispose: true, })}