[!info] related notes

• 统一逻辑驱动的联邦UI架构配置模板
• 统一逻辑驱动的联邦UI架构Federated-UI-Architecture-with-Unified-Logic

统一逻辑驱动的联邦UI架构下的开发流程

这种架构的核心在于“逻辑与表现的分离”以及“跨层级的聚合”。

在统一逻辑驱动的联邦 UI 架构下，日常开发流程应该遵循以下步骤：

---

1. 开发流程：从逻辑到表现

如果要开发一个新功能（例如：颜色选择器 ColorPicker），代码编写顺序应该是：

第一步：在 ui-core 中写“大脑”（无头逻辑）

• 动作： 编写纯 TypeScript 函数或状态机。
• 代码： 计算 Hex/RGB 转换、颜色校验逻辑。
• 目的： 确保这套复杂的数学逻辑在 React 和 Vue 中是通用的。

第二步：在 ui-react-shadcn / ui-vue-shadcn 中写“皮肤”（原子组件）

• 动作： 使用 shadcn 命令生成基础组件（如 Slider），或直接在对应的包里写 Vue/React 的原生组件代码。
• 代码： 编写 HTML 结构和 Tailwind 样式。
• 目的： 仅处理“长什么样”，不处理“怎么变”。

第三步：在 ui-react / ui-vue 中写“神经”（框架封装）

• 动作： 编写 useColorPicker (Vue 版) 或 useColorPicker (React 版)。
• 代码： 调用 ui-core 的逻辑，用 ref/reactive 或 useState 包裹，并聚合导出组件。
• 核心实现：

// packages/ui-vue/src/composables/use-color-picker.ts
import { createColorPickerCore } from '@dailyuse/ui-core';
import { ref } from 'vue';

export function useColorPicker() {
  const color = ref('#ffffff');
  const core = createColorPickerCore({ /* ... */ });
  return { color, core };
}

// packages/ui-vue/src/index.ts (关键：聚合层)
export * from './composables/use-color-picker';
export * from '@dailyuse/ui-vue-shadcn'; // 统一导出 shadcn 组件

---

2. 为什么组件放在 ui-vue-shadcn，而封装在 ui-vue？

这种“套娃”式的开发方式看似繁琐，实则为了实现你追求的简洁与复用：

• 隔离原始源码： ui-vue-shadcn 里的代码是 Shadcn 自动生成的，你可以随意修改它的样式（改源码），而不用担心污染业务逻辑。
• 业务层无感切换： 业务层（apps/desktop）永远只从 @dailyuse/ui-react 导入。哪怕哪天你把底层从 shadcn 换成了 MUI 或 Element Plus，你只需要修改 ui-react 的重导出（Re-export）路径，业务代码一行都不用动。

---

3. Storybook 的实战用法

按照你提供的指南，你的 Storybook 应该启动在 ui-react 或 ui-vue 这一层。

如何开发组件故事： 在 packages/ui-vue/src/components/ColorPicker.stories.ts 中：

1. 从 @dailyuse/ui-vue-shadcn 导入 UI 组件。
2. 从 @dailyuse/ui-vue 导入 Composable。
3. 在 Story 中将它们组合起来。

---

4. 日常开发 Check-list

1. 我要改一个按钮的圆角： 去 ui-core 改 Tailwind 变量，或者去 ui-react-shadcn/button.tsx 直接改源码。
2. 我要改颜色选择器的计算公式： 去 ui-core 改 TS 算法。
3. 我要在 Vue 里增加一个自动聚焦的功能： 去 ui-vue 的 Composable 里写 onMounted 逻辑。
4. 我在写业务代码： 我只管从 @dailyuse/ui-react 拿东西。

总结建议

这种模式下，ui-react/vue 是你的总调度中心。

• 组件源码：放在 -shadcn 包中。
• 逻辑封装 (useXxx)：放在 ui-react/vue 包中。
• 最终导出：在 ui-react/vue 的 index.ts 里把它们全部 export * 出来。

既然你的 Storybook 已经能跑起来了，要不要我帮你写一个 ui-vue 层的 index.ts 聚合导出的示例代码，让你体验一下业务端“一行导入”的快感？