@oneflowui/ui 0.8.4 → 0.8.6

package/README.en.md

@@ -110,6 +110,19 @@ import '@oneflowui/ui/styles'
 
 Note: starting from `0.5.4`, the plugin entry is separated from the root entry. Use `@oneflowui/ui/plugin` for `app.use(...)`, and keep named imports on `@oneflowui/ui`.
 
+If you want a stricter import boundary, stable subpath exports are also available:
+
+```ts
+import { useVirtualListStateCache } from '@oneflowui/ui/composables'
+import type { DataRecord } from '@oneflowui/ui/types'
+```
+
+Recommended convention:
+- Import components and common capabilities from the root `@oneflowui/ui` entry.
+- Import composables and pure types from `@oneflowui/ui/composables` and `@oneflowui/ui/types` when you want a clearer dependency boundary.
+- If you only want tokens and theme layers without plugin registration, use `@oneflowui/ui/theme`.
+- Keep `@oneflowui/ui/styles` as the full legacy-compatible style entry.
+
 ### Theme Layers
 
 OneUI now ships with a neutral default theme and an optional product skin without changing component logic.
@@ -127,8 +140,103 @@ document.documentElement.dataset.ofTheme = 'neutral'
 document.documentElement.dataset.ofTheme = 'ops-console'
 ```
 
+If you want to decouple “style injection” from “plugin registration”, prefer the dedicated theme entry:
+
+```ts
+import '@oneflowui/ui/theme'
+```
+
 This structure is meant to keep the component layer reusable while letting product-specific styling live above it.
 
+### ThemeScope Wrapper
+
+When a single page needs two visual contexts at once, prefer the `ThemeScope` component. It automatically writes `data-of-theme` and `data-of-theme-scope` on the wrapper, so consumers do not need to hand-write attributes.
+
+```vue
+<script setup lang="ts">
+import { DataTable, ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="ops-preview">
+    <div class="ops-preview__panel">
+      <h3>Scoped ops-console preview</h3>
+      <p>This subtree inherits ops-console tokens while the outer page stays neutral.</p>
+    </div>
+  </ThemeScope>
+</template>
+```
+
+Supported values currently match the global theme list:
+
+- `neutral`
+- `ops-console`
+
+Direct `data-of-theme-scope` usage is still compatible for older code, but new consumers should use `ThemeScope`.
+
+### ThemeScope Scene Component
+
+If you want to reuse "local theme + title + description + meta/footer slots" together, use `ThemeScopeScene`. It is a lightweight scene shell component that fits enterprise back offices, ops consoles, and task centers.
+
+```vue
+<script setup lang="ts">
+import { DataTable, ThemeScopeScene } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScopeScene
+    theme="ops-console"
+    tag="section"
+    eyebrow="Enterprise Scene"
+    title="Task Overview"
+    description="This region automatically receives ops-console tokens."
+  >
+    <template #meta>
+      <span class="scene-chip">ThemeScopeScene</span>
+    </template>
+
+    <DataTable :rows="rows" :columns="columns" />
+
+    <template #footer>
+      <small>footer / notes / actions</small>
+    </template>
+  </ThemeScopeScene>
+</template>
+```
+
+`ThemeScopeScene` still reuses `ThemeScope` under the hood, so this is non-breaking. It just packages the common business shell into a reusable component.
+
+### Virtual List State Cache
+
+If a virtual list remounts often and you want to keep `scrollTop`, `containerHeight`, and `invalidateVersion`, reuse the same state by key.
+`createVirtualListState()` is still available, while `useVirtualListStateCache()` is the helper for sharing one state across remounts.
+
+```ts
+import { useVirtualList, useVirtualListStateCache } from '@oneflowui/ui'
+
+const virtualListState = useVirtualListStateCache('ai-message-list')
+
+const { visibleItems, totalHeight, offsetY } = useVirtualList({
+  items: messages,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+```
+
+## Release & Verification
+
+If you need to review the current traceable release materials, start with these docs:
+
+- Current evidence index: [`docs/plans/2026-03-22-release-0.8.6-evidence-index.md`](docs/plans/2026-03-22-release-0.8.6-evidence-index.md)
+- Release proof: [`docs/plans/2026-03-22-release-0.8.6-proof.md`](docs/plans/2026-03-22-release-0.8.6-proof.md)
+- Verification result: [`docs/plans/2026-03-22-release-0.8.6-verification.md`](docs/plans/2026-03-22-release-0.8.6-verification.md)
+- Pre-release smoke: [`docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md`](docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md)
+- Package entrypoints verification: [`docs/plans/2026-03-22-oneui-package-entrypoints-verification.md`](docs/plans/2026-03-22-oneui-package-entrypoints-verification.md)
+- Changelog: [`docs/CHANGELOG-v0.8.6.md`](docs/CHANGELOG-v0.8.6.md)
+
+The current public npm version should be checked against the latest release proof, and publish, pack, dry-run, and dual-host smoke checks all have separate evidence.
+
 ---
 
 ## Usage Examples
@@ -204,6 +312,194 @@ toast.success('Saved successfully')
 toast.error('Operation failed')
 ```
 
+### DatabaseView middleware presets
+
+You can compose reusable `DatabaseView` middleware presets for toast, analytics, and optimistic updates:
+
+```ts
+import {
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewPresetBundle,
+  createDatabaseViewPresetMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+} from '@oneflowui/ui'
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+If you prefer a single factory that returns a ready-to-use middleware, use the official preset bundle helper:
+
+```ts
+const presetBundle = createDatabaseViewPresetBundle({
+  toast: {
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  },
+  analytics: {
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  },
+  optimistic: {
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  },
+})
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware: presetBundle.middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+`createDatabaseViewPresetMiddleware` is the one-liner version when you only need the final middleware object:
+
+```ts
+const middleware = createDatabaseViewPresetMiddleware({
+  toast: {
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  },
+  analytics: {
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  },
+  optimistic: {
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  },
+})
+```
+
+### ThemeScope Scene Template
+
+If you want to evolve `ThemeScope` from a local wrapper into a business scene template, use it as the page shell that organizes the region structure. This fits enterprise dashboards, ops consoles, and task boards: the outer shell fixes the visual context while the inner area hosts cards, tables, metrics, and side notes.
+
+```vue
+<script setup lang="ts">
+import { ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="enterprise-scene">
+    <header class="enterprise-scene__header">
+      <h3>Enterprise Scene</h3>
+      <p>Theme, layout, and business content are reused together as one template.</p>
+    </header>
+
+    <div class="enterprise-scene__body">
+      <div class="enterprise-scene__summary">...</div>
+      <DataTable :rows="rows" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+The repository's `src/dev/examples/database/DatabaseEnterpriseDemo.vue` is the dev/examples-level reference for this kind of scene template. It shows the "ThemeScopeScene + DatabaseView + middleware" composition pattern that you can copy into your own project and turn into a real enterprise page.
+
+### Dev Examples / Enterprise Demo
+
+`src/dev/examples/database/DatabaseEnterpriseDemo.vue` is a dev/examples-level consumption pattern used to show a more complete enterprise-style page composition. It is documentation and development sample material, not an npm-exported component, and it does not change the public export surface of `@oneflowui/ui`.
+The repository also ships `src/dev/examples/database/DatabasePresetDemo.vue` as a shorter official preset-bundle example, focused on direct `createDatabaseViewPresetBundle` / `actions.middleware` consumption.
+
+If your business app needs something similar, copy the composition idea from the example and wire it to your own data source and action contract instead of depending on a separate production export.
+
+### Combined Consumption Example
+
+If you want to use theme scoping, database action middleware, and virtual list state caching in the same business surface, keep them inside one wrapper component. This is the closest pattern to a real app page and the easiest one to copy.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ThemeScope,
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+  useVirtualList,
+  useVirtualListStateCache,
+} from '@oneflowui/ui'
+
+const containerRef = ref<HTMLElement | null>(null)
+const virtualListState = useVirtualListStateCache('task-feed')
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+
+const { visibleItems } = useVirtualList({
+  items: view.records,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+
+const columns = [
+  { key: 'title', label: 'Task', width: 'fill' },
+  { key: 'status', label: 'Status', width: 120 },
+  { key: 'priority', label: 'Priority', width: 100 },
+]
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>Task Overview</h3>
+      <p>The outer shell uses scoped ops-console tokens while actions, list rendering, and cached state share the same component entry points.</p>
+    </header>
+
+    <div ref="containerRef" class="task-surface__list">
+      <DataTable :rows="visibleItems" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+These capabilities can be used independently or combined like above; all of them are non-breaking additions and do not require consumer API changes.
+
 ---
 
 ## Local Development

package/README.md

@@ -88,6 +88,19 @@ app.use(OneflowUI)
 app.mount('#app')
 ```
 
+如果需要更细粒度的导入边界，可以直接使用稳定子路径入口：
+
+```ts
+import { useVirtualListStateCache } from '@oneflowui/ui/composables'
+import type { DataRecord } from '@oneflowui/ui/types'
+```
+
+推荐约定：
+- 组件与公共能力优先从 `@oneflowui/ui` 根入口导入。
+- composables 和纯类型如果希望导入意图更清晰，可分别从 `@oneflowui/ui/composables` 与 `@oneflowui/ui/types` 导入。
+- 如果只想注入 token 和主题层，不想顺带注册插件，可改用 `@oneflowui/ui/theme`。
+- 样式全量入口仍保留 `@oneflowui/ui/styles`，兼容现有消费方式。
+
 ### 按需引入
 
 ```ts
@@ -114,12 +127,107 @@ document.documentElement.dataset.ofTheme = 'neutral'
 document.documentElement.dataset.ofTheme = 'ops-console'
 ```
 
+如果你希望把“样式注入”和“组件插件注册”拆开，推荐改用更明确的主题入口：
+
+```ts
+import '@oneflowui/ui/theme'
+```
+
 这套结构的目标是：
 
 1. 组件默认保持中性、可复用
 2. 业务系统通过主题皮肤注入品牌感或中控台气质
 3. 后续可继续扩展更多主题，而不需要修改组件 API
 
+### ThemeScope 包装组件
+
+如果同一页面里需要并存两种视觉语境，优先使用 `ThemeScope`。这个组件会自动给 wrapper 注入 `data-of-theme` 和 `data-of-theme-scope`，业务方不需要手写属性。
+
+```vue
+<script setup lang="ts">
+import { DataTable, ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="ops-preview">
+    <div class="ops-preview__panel">
+      <h3>局部 ops-console 预览</h3>
+      <p>这里会继承 ops-console 的 token，而外层仍然保持全局 neutral。</p>
+    </div>
+  </ThemeScope>
+</template>
+```
+
+`ThemeScope` 当前支持的主题值与全局主题一致：
+
+- `neutral`
+- `ops-console`
+
+老代码里直接手写的 `data-of-theme-scope` 仍然兼容，但新代码优先使用组件入口。
+
+### ThemeScope 场景组件
+
+如果你想把“局部主题 + 标题 + 说明 + meta/footer 插槽”一起复用，直接用 `ThemeScopeScene`。它是一个轻量的场景壳层组件，适合企业后台、运营控制台、任务中心这类页面。
+
+```vue
+<script setup lang="ts">
+import { DataTable, ThemeScopeScene } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScopeScene
+    theme="ops-console"
+    tag="section"
+    eyebrow="Enterprise Scene"
+    title="任务总览"
+    description="这个区域会自动获得 ops-console token。"
+  >
+    <template #meta>
+      <span class="scene-chip">ThemeScopeScene</span>
+    </template>
+
+    <DataTable :rows="rows" :columns="columns" />
+
+    <template #footer>
+      <small>footer / notes / actions</small>
+    </template>
+  </ThemeScopeScene>
+</template>
+```
+
+`ThemeScopeScene` 内部继续复用 `ThemeScope` 的 token 作用域，所以它仍然是 non-breaking 的增强，只是把常见业务壳层收成了一个可复用组件。
+
+### 虚拟列表状态缓存
+
+如果虚拟列表会频繁 remount，但你希望保留 `scrollTop`、`containerHeight` 和 `invalidateVersion`，可以按 key 复用同一份状态。
+`createVirtualListState()` 仍然可用，而 `useVirtualListStateCache()` 适合把同一份状态挂在多个 remount 之间。
+
+```ts
+import { useVirtualList, useVirtualListStateCache } from '@oneflowui/ui'
+
+const virtualListState = useVirtualListStateCache('ai-message-list')
+
+const { visibleItems, totalHeight, offsetY } = useVirtualList({
+  items: messages,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+```
+
+## 发布与验收
+
+如果你需要核对当前可追溯的发布材料，优先看这几份文档：
+
+- 当前版本证据索引：[`docs/plans/2026-03-22-release-0.8.6-evidence-index.md`](docs/plans/2026-03-22-release-0.8.6-evidence-index.md)
+- 发布 proof：[`docs/plans/2026-03-22-release-0.8.6-proof.md`](docs/plans/2026-03-22-release-0.8.6-proof.md)
+- 验收结果：[`docs/plans/2026-03-22-release-0.8.6-verification.md`](docs/plans/2026-03-22-release-0.8.6-verification.md)
+- 预发布验证：[`docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md`](docs/plans/2026-03-22-oneui-theme-scope-middleware-composer-pre-release-verification.md)
+- 子路径入口治理：[`docs/plans/2026-03-22-oneui-package-entrypoints-verification.md`](docs/plans/2026-03-22-oneui-package-entrypoints-verification.md)
+- 版本日志：[`docs/CHANGELOG-v0.8.6.md`](docs/CHANGELOG-v0.8.6.md)
+
+当前 npm 公开版本以最新 release proof 为准，对应的发布、pack、dry-run 和双宿主 smoke 都有独立留痕。
+
 ---
 
 ## 页面级方案
@@ -175,6 +283,194 @@ type DatabaseViewActions = {
 
 如果接入的是 `provider` 模式，建议把 `onFetch` / `onRefresh` 作为必配项；如果接入的是 `local` 模式，则重点只需要保证 `onUpdateRecord`、`onCreateRecord`、`onDeleteRecord` 和 `onSaveView` 这几类页面动作可回传。
 
+### Middleware presets
+
+如果页面想复用 toast、分析埋点或乐观更新逻辑，可以直接组合 `useDatabaseView` 提供的 middleware presets：
+
+```ts
+import {
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewPresetBundle,
+  createDatabaseViewPresetMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+} from '@oneflowui/ui'
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+如果你更想要一个“一键拿到可直接消费的 middleware”的入口，可以优先用官方 preset 工厂：
+
+```ts
+const presetBundle = createDatabaseViewPresetBundle({
+  toast: {
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  },
+  analytics: {
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  },
+  optimistic: {
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  },
+})
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware: presetBundle.middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+```
+
+`createDatabaseViewPresetBundle` 会把常用 preset 先组装好，再暴露给业务方按需复用；`createDatabaseViewPresetMiddleware` 则适合直接塞进 `actions.middleware`，用于最小接入，例如：
+
+```ts
+const middleware = createDatabaseViewPresetMiddleware({
+  toast: {
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  },
+  analytics: {
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  },
+  optimistic: {
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  },
+})
+```
+
+### ThemeScope 场景模板
+
+如果你想把 `ThemeScope` 从“局部 wrapper”升级成“业务场景模板”，可以直接把它当成页面壳层来组织区域结构。这个模板适合企业后台、运营控制台、任务看板这类页面：外层固定视觉语境，内层再放业务卡片、数据表、统计块和侧边说明。
+
+```vue
+<script setup lang="ts">
+import { ThemeScope } from '@oneflowui/ui'
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="enterprise-scene">
+    <header class="enterprise-scene__header">
+      <h3>Enterprise Scene</h3>
+      <p>主题、布局和业务内容一起作为模板复用。</p>
+    </header>
+
+    <div class="enterprise-scene__body">
+      <div class="enterprise-scene__summary">...</div>
+      <DataTable :rows="rows" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+仓库里的 `src/dev/examples/database/DatabaseEnterpriseDemo.vue` 就是这一类场景组件的 dev/examples 级参考实现。它展示的是“ThemeScopeScene + DatabaseView + middleware”的组合方式，便于复制到自家项目里改造成真正的企业页。
+
+### Dev Examples / Enterprise Demo
+
+`src/dev/examples/database/DatabaseEnterpriseDemo.vue` 是 dev/examples 级的消费范式，用来展示更完整的企业版页面组合方式。它属于开发示例和文档参考，不是 npm 包对外导出的组件，不会改变 `@oneflowui/ui` 的公开导出面。
+仓库同时提供 `src/dev/examples/database/DatabasePresetDemo.vue` 作为更短的 preset bundle 官方示例，重点展示 `createDatabaseViewPresetBundle` / `actions.middleware` 的直接消费方式。
+
+如果你在业务工程里需要类似的页面，建议直接复制示例里的组合思路，再按自己的数据源和动作契约接入，而不是依赖一个额外的生产级导出入口。
+
+### 组合消费示例
+
+如果你要在同一块业务区域里同时使用主题作用域、数据库动作中间件和虚拟列表状态缓存，可以把三者放进同一个组件壳层。这个写法更接近真实业务页，也最适合作为复制模板。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ThemeScope,
+  composeDatabaseViewMiddlewares,
+  createDatabaseViewAnalyticsMiddleware,
+  createDatabaseViewOptimisticMiddleware,
+  createDatabaseViewToastMiddleware,
+  useDatabaseView,
+  useVirtualList,
+  useVirtualListStateCache,
+} from '@oneflowui/ui'
+
+const containerRef = ref<HTMLElement | null>(null)
+const virtualListState = useVirtualListStateCache('task-feed')
+
+const middleware = composeDatabaseViewMiddlewares(
+  createDatabaseViewToastMiddleware({
+    onSuccess: (message) => toast.success(message),
+    onError: (message) => toast.error(message),
+  }),
+  createDatabaseViewAnalyticsMiddleware({
+    onEvent: (event) => console.log('[db-view]', event.phase, event.action),
+  }),
+  createDatabaseViewOptimisticMiddleware({
+    apply: ({ payload }) => updateLocalRecord(payload),
+    revert: ({ payload }) => revertLocalRecord(payload),
+  }),
+)
+
+const view = useDatabaseView({
+  tableId: 'tbl-1',
+  actions: {
+    middleware,
+    onCellEdit: saveCellEdit,
+  },
+})
+
+const { visibleItems } = useVirtualList({
+  items: view.records,
+  itemHeight: 60,
+  containerRef,
+  state: virtualListState,
+})
+
+const columns = [
+  { key: 'title', label: '任务', width: 'fill' },
+  { key: 'status', label: '状态', width: 120 },
+  { key: 'priority', label: '优先级', width: 100 },
+]
+</script>
+
+<template>
+  <ThemeScope theme="ops-console" tag="section" class="task-surface">
+    <header class="task-surface__header">
+      <h3>任务总览</h3>
+      <p>外层是局部 ops-console token，内部动作、列表和状态缓存都复用同一套组件入口。</p>
+    </header>
+
+    <div ref="containerRef" class="task-surface__list">
+      <DataTable :rows="visibleItems" :columns="columns" />
+    </div>
+  </ThemeScope>
+</template>
+```
+
+这三个能力可以独立使用，也可以像上面这样组合使用；它们都是非 breaking 增强，不要求业务方修改现有组件 API。
+
 ### Selected record / detail workspace
 
 当前 dev app 已经把“选中记录 -> detail workspace”这条链路接起来了：点击 table / kanban / gallery / timeline 中的条目，会把当前记录送入详情工作区，再由 `DetailLayout`、`PropPanel`、`CommentItem` 这组组件展示主内容、属性和活动记录。

package/dist/components/ai/AiMessageList.vue.js

@@ -1,7 +1,7 @@
 import o from "./AiMessageList.vue2.js";
 /* empty css                   */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d42e9b32"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-76bed64f"]]);
 export {
   a as default
 };