ui

oc-ui · package · G9-UI组件 · Layer 3

① 作用

SolidJS UI 组件库。src/components/ 含 50+ 基础组件(button/avatar/dialog/context-menu/diff-changes/icon 等,每个 .tsx 配套 .css 与 .stories.tsx),基于 @kobalte/core 无障碍原语;exports 将 ./components/*.tsx 直接映射为组件子路径(package.json:37)。同时提供 hooks(use-filtered-list)、context(dialog/file/i18n/marked/worker-pool)、theme 主题系统、i18n 词典、v2 新一代组件目录及 storybook 脚手架(src/storybook/scaffold.tsx)。

② 提供能力

· 50+ 基础 UI 组件(按钮/对话框/下拉/悬浮卡/图标等)
· Markdown 渲染管线(marked.tsx + worker-pool + shiki 流式高亮)
· Theme 主题解析与上下文(theme/index.ts、theme/context.tsx)
· i18n 多语言词典与 plural 规则(i18n/en.ts、context/i18n.tsx)
· File/Dialog/WorkerPool 等全局 context
· 图标集:provider/file/app 三类 sprite(provider-icons/types.ts 等)

③ 依赖(上游)

无内部依赖(或为叶子/外部)

④ 被依赖(下游)

节点机制证据
appworkspace-dep@opencode-ai/app/package.json dependencies.@opencode-ai/ui
console-appworkspace-dep@opencode-ai/console-app/package.json dependencies.@opencode-ai/ui
enterpriseworkspace-dep@opencode-ai/enterprise/package.json dependencies.@opencode-ai/ui
session-uiworkspace-dep@opencode-ai/session-ui/package.json dependencies.@opencode-ai/ui
stats-appworkspace-dep@opencode-ai/stats-app/package.json dependencies.@opencode-ai/ui
tuiworkspace-dep@opencode-ai/tui/package.json dependencies.@opencode-ai/ui
desktopsemantic-depstage-01 @opencode-ai/desktop
storybooksemantic-depstage-01 @opencode-ai/storybook

⑤ 为什么存在(why)

设计意图(官方)

将跨 app/session-ui/enterprise 复用的无头基础组件与渲染原语独立成库,保证视觉一致性与按需导入(sideEffects 仅 css)。

改造关联

官方底座,未被本机装配层直接引用

⑥ 怎么用(how)

怎么用

典型场景与协作

模块内部结构 DAG(236 模块 · 197 边 · 组级视图) 内部结构基线 v1.18.29,v1.18.35 包级结构未变(36 包集合逐一致)

按目录分组的组级视图:点击组节点下钻查看组内模块依赖;点击模块节点查看完整路径。

组级视图