REAL SHOWCASE SOURCEquick-start-application

1 个文件 · 63 行 · TypeScript

// ===== showcase/src/examples/getting_started/quick_start_application.ts ===== import {  Application,  MedicalCompactLightTheme,  RenderButton,  RenderPage,  RenderStackPanel,  RenderText,  RenderWindow,  loadDirectSurfaceFonts,  type AppHost,} from 'ds-ui' function createHelloPage(): RenderPage {  const status = new RenderText('应用已经挂载,可以开始交互。', { role: 'secondary' })  const content = new RenderStackPanel({    orientation: 'vertical',    spacing: 12,    padding: 24,    crossAxisAlignment: 'stretch',  })   content.addChild(new RenderText('Hello DirectSurface UI', { role: 'title' }))  content.addChild(new RenderText(    '页面、布局、组件与事件均由 DirectSurface UI 的 Render Tree 管理。',  ))  content.addChild(status)  content.addChild(new RenderButton({    label: '执行操作',    variant: 'primary',    onClick: () => {      status.text = `最近点击:${new Date().toLocaleTimeString()}`    },  }))   return new RenderPage({ child: content })} class HelloWindow extends RenderWindow {  constructor() {    super({      title: 'DirectSurface UI Hello',      chrome: 'none',      contentPadding: 0,      contentSpacing: 0,    })    this.setChildren([createHelloPage()])  }} /** 独立业务项目的真实启动入口。宿主卸载时必须调用返回值的 dispose()。 */export async function mountHelloApplication(selector = '#app'): Promise<AppHost> {  await loadDirectSurfaceFonts()  return Application.mount(selector).run(new HelloWindow(), {    theme: MedicalCompactLightTheme,  })} /** 文档站共用的示例运行器只需要页面内容,避免重复创建 Application。 */export function createQuickStartApplicationExample(): RenderPage {  return createHelloPage()}