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,  })}