[!info] related notes

• 统一逻辑驱动的联邦UI架构下的开发流程
• 统一逻辑驱动的联邦UI架构Federated-UI-Architecture-with-Unified-Logic

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

---

1. 核心路径映射模板

在 Nx 根目录下的 tsconfig.base.json 中，你需要这样定义别名。这能确保你在任何地方都能通过 @dailyuse/* 这种优雅的方式导入。

JSON

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      /* 1. 视觉协议与无头逻辑层 */
      "@dailyuse/ui-core": ["libs/ui-core/src/index.ts"],
      "@dailyuse/ui-core/*": ["libs/ui-core/src/*"],

      /* 2. React 适配与组件层 (Desktop) */
      "@dailyuse/ui-react": ["libs/ui-react/src/index.ts"],
      "@dailyuse/ui-react/*": ["libs/ui-react/src/*"],

      /* 3. Vue 适配与组件层 (Web) */
      "@dailyuse/ui-vue": ["libs/ui-vue/src/index.ts"],
      "@dailyuse/ui-vue/*": ["libs/ui-vue/src/*"],

      /* 4. 业务 API 层 */
      "@dailyuse/api-client": ["libs/api-client/src/index.ts"]
    }
  }
}

---

2. 包内出口管理 (index.ts)

为了实现你想要的“一下就能导入”，每个子包的 src/index.ts 必须扮演好“接线员”的角色。

libs/ui-core/src/index.ts

TypeScript

// 导出样式变量
export * from './lib/design-tokens';
// 导出无头逻辑核心
export * from './lib/color-picker/core';
export * from './lib/auth/core';
// 导出工具函数
export * from './lib/utils';

libs/ui-react/src/index.ts

TypeScript

// 导出适配层 Hooks
export * from './hooks/use-color-picker';
// 导出从 Shadcn 继承并优化后的原子组件
export * from './components/ui/button';
export * from './components/ui/card';
// 导出复合业务组件
export * from './components/business/user-panel';

---

3. Tailwind 样式继承模板

为了保证 React 和 Vue 的 UI 真正达到“视觉一致”，你需要在 ui-core 中定义预设。

libs/ui-core/tailwind.presets.js

JavaScript

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
        background: 'var(--background)',
      },
      borderRadius: {
        desktop: '8px', // 针对桌面端优化的简洁大方圆角
      }
    }
  },
  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
};

然后在 apps/desktop/tailwind.config.js 中引用：

JavaScript

module.exports = {
  presets: [require('../../libs/ui-core/tailwind.presets.js')],
  content: [
    './src/**/*.{tsx,ts}',
    '../../libs/ui-react/src/**/*.{tsx,ts}', // 关键：也要扫描库文件
  ],
  // ...
};

---

4. 这种配置下的开发体验

配置完成后，你在 Electron 渲染进程中写代码会非常丝滑：

TypeScript

// 简洁、模块化、带有完美的类型补全
import { Button, useColorPicker } from '@dailyuse/ui-react';
import { hexToRgb } from '@dailyuse/ui-core';

const DesktopComponent = () => {
  const { color, setColor } = useColorPicker();
  // ... 逻辑实现
};

给你的专业笔记补充：

Nx 约束建议： 建议开启 Nx 的 eslint-plugin-nx。配置一条规则：禁止 ui-core 导入 ui-react 或 ui-vue。这在架构上被称为“单向依赖约束”，能防止你的底层逻辑包因为不小心混入了框架代码而变得臃肿，维持架构的“纯洁度”。

你现在是准备先从 ui-core 的样式规范开始搭建，还是想先用 Nx 命令把这几个 Libs 的骨架跑起来？