O2 组件库

这套组件库已经不是单纯的组件集合，而是可以直接开始生成页面的 O2 页面基础设施。

你现在可以怎么用

• 直接用模版组件：
  • O2BasicTemplate：普通页面、表单页、详情页、常规表格页
  • O2AppLayout：头部带 Tab + 筛选区 的筛选表格页
• 用统一页面入口自动选模版：
  • O2PageScaffold
• 用规范查询函数拿页面计划：
  • createO2PagePlan(...)
  • resolveO2PagePlan(...)

推荐起手方式

如果你要开始搭具体页面，优先从 O2PageScaffold 开始。

import {
  O2PageScaffold,
  Breadcrumb,
  Button,
  Table,
} from '@lillian10231023/o2-design-system-1'

export function DeliveryTablePage() {
  return (
    <O2PageScaffold pageType="table">
      <div style={{ display: 'grid', gap: 16 }}>
        <Breadcrumb
          items={[
            { key: 'workbench', label: '工作台' },
            { key: 'report', label: '投放报表' },
          ]}
          currentKey="report"
        />
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Button>新建计划</Button>
        </div>
        <Table columns={columns} data={rows} rowKey="id" />
      </div>
    </O2PageScaffold>
  )
}

筛选表格页示例

当页面头部同时需要 Tab + 筛选区 时，直接声明为 filter-table。

import {
  O2PageScaffold,
  DateRangePicker,
  Button,
  Select,
  Table,
} from '@lillian10231023/o2-design-system-1'

const mediaOptions = [
  { key: 'all', label: '全部媒体' },
  { key: 'gdt', label: 'AMS(广点通)' },
]

export function FilterTablePage() {
  return (
    <O2PageScaffold
      pageType="filter-table"
      hasTabs
      hasFilters
      tabs={[
        { key: 'overview', label: '概览' },
        { key: 'detail', label: '明细' },
      ]}
      filters={
        <>
          <Select
            options={mediaOptions}
            ariaLabel="媒体筛选"
            listAriaLabel="媒体筛选选项"
          />
          <DateRangePicker ariaLabel="日期范围筛选" calendarAriaLabel="日期范围面板" />
          <Button>查询</Button>
        </>
      }
    >
      <Table columns={columns} data={rows} rowKey="id" />
    </O2PageScaffold>
  )
}

页面生成计划查询

如果你的页面生成流程需要先判断模版、推荐组件和约束，可以先读取计划对象：

import { createO2PagePlan } from '@lillian10231023/o2-design-system-1'

const plan = createO2PagePlan({
  pageType: 'filter-table',
  hasTabs: true,
  hasFilters: true,
})

console.log(plan.template.componentName)
console.log(plan.composition?.requiredComponents)
console.log(plan.constraints)

当前封装结论

• 开始生成页面时，优先使用 O2PageScaffold。
• 需要精细控制时，直接使用 O2BasicTemplate / O2AppLayout。
• 需要先跑规则判断时，使用 createO2PagePlan。
• 命中现有 O2 组件时，只替换业务内容，不修改组件结构与视觉规范。