统一逻辑驱动的联邦UI架构Federated-UI-Architecture-with-Unified-Logic

**基于 Monorepo 的多框架 Headless 逻辑分层模式**。这种模式通过将“原子样式”、“框架无关逻辑”与“框架特定实现”彻底分离，实现了 UI 的高度一致性和代码的最大化复用。

#status / growing #type / concept

[!info] related notes

统一逻辑驱动的联邦UI架构配置模板

storybook在联邦UI架构下的配置

统一逻辑驱动的联邦UI架构下的开发流程 [! info] related notes federated-ui-architecture-config-template storybook-module-federation-config

统一逻辑驱动的联邦UI架构_Federated-UI-Architecture-with-Unified-Logic

核心架构拆解

为了方便你记录到笔记中，我们可以将该架构分为四个逻辑层级：

1. 视觉协议层 (Design Tokens Layer)

对应包： ui-core (CSS 部分)
定义： 存储所有与框架无关的视觉参数，如颜色（Hex/HSL）、圆角（Radius）、阴影（Shadow）、间距（Spacing）以及 Tailwind 的基础配置。
价值： 它是应用的“视觉单一真理源”。确保了你的 Electron 桌面端和 Vue 网页端在视觉质感上完全等价。

2. 无头逻辑层 (Headless Logic Layer)

对应包： ui-core (Typescript 部分)
定义： 纯逻辑的“核心驱动器”（Core Engines）。它只负责状态机计算（如颜色转换算法、拖拽逻辑、校验规则），不引用任何 Vue 或 React 的 API。
价值： 逻辑的一次性定义，跨框架复用。这避免了在不同框架间重写复杂的业务算法。

3. 框架适配层 (Framework Adapter Layer)

对应包： ui-react / ui-vue
定义： 将 ui-core 中的“无头逻辑”封装为框架特有的响应式 Hook（如 React 的 useColorPicker 或 Vue 的 useColorPicker）。
价值： 桥接层。它利用各框架的特性（Vue 的 computed 或 React 的 useEffect）来消费逻辑，但不改变逻辑本身。

4. 组件实现层 (Component Implementation Layer)

对应包： ui-react (Shadcn) / ui-vue (Shadcn-Vue)
定义： 最终的 UI 展现。引用适配层的方法，配合 HTML 模板完成渲染。
价值： 实现“模块化导入”的最终体现，支持通过 index.ts 统一导出，供应用端调用。

为什么这个模式适合你？（专业优势）

维度	传统模式 (Tight Coupling)	联邦 UI 模式 (This Pattern)
一致性	难。React 改了阴影，Vue 往往忘了改。	易。修改 `ui-core` 全局同步。
开发体验	在应用中调试逻辑，启动慢。	在 Storybook 中独立开发组件，毫秒级响应。
代码冗余	算法逻辑在不同项目中 Copy-Paste。	算法逻辑在 `ui-core` 统一维护，按需导入。
跨框架迁移	几乎不可能。	只需要重写适配层和组件层，核心逻辑不动。

架构示意图 (Notation)

Plaintext

[ 应用层 ]     Desktop (React)          Web (Vue)
                    |                      |
[ 适配层 ]     ui-react (Hooks)        ui-vue (Composables)
                    \                    /
[ 核心层 ]        @dailyuse/ui-core (Logic & Styles)

给你的笔记建议（操作指南）

约束原则： 规定 ui-core 严禁导入 react 或 vue 的任何包。这样能保证核心逻辑的纯净。
样式注入： 建议在 ui-core 中导出一个基础的 tailwind.config.presets，然后 React 和 Vue 的应用分别引用这个预设，确保样式配置的继承。
命名规范： 统一使用 useXxx 作为跨框架适配层的命名，这样在阅读代码时，心智模型是统一的。

你想让我为你整理一份这个架构在 Nx 中的 tsconfig 路径配置模板，以便你直接粘贴到项目中实现完美的别名导入吗？