快速开始

@fx/components、@fx/hooks、@fx/utils、@fx/layouts、@fx/layouts 是从伏羲氏后台抽取的共享包，通过 pnpm workspace 在各端复用。

安装

各包均为 monorepo 内部 workspace 包，在消费方的 package.json 中引用即可：

{
  "dependencies": {
    "@fx/components": "workspace:*",
    "@fx/hooks": "workspace:*",
    "@fx/utils": "workspace:*",
    "@fx/layouts": "workspace:*",
    "@fx/layouts": "workspace:*"
  }
}

按需引入

组件

通用组件（UI 框架无关）来自 @fx/components：

import { FxCard, FxEllipsis, FxImageViewer, FxBtn, FxTable } from "@fx/components"

布局组件来自 @fx/layouts / @fx/layouts，详见 布局文档。

组合式函数

import { useTable, useDebouncedWatch, useImageViewer, useOverflowDetection } from "@fx/hooks"

工具函数

import { deepClone, copyToClipboard, formatTime, throttle, debounce, getEnv, methodTag } from "@fx/utils"

依赖说明

包	运行时依赖
@fx/components	vue、@fx-core/icon、@fx/styles（peerDependencies）
@fx/hooks	vue、@pinia/colada（peerDependencies）
@fx/utils	dayjs
@fx/layouts	vue、@fx-core/icon、@fx/styles、@fx/components
@fx/layouts	上面全部 + vue-router、pinia、@fx/storage

样式说明

FxCard 等组件使用 BEM 命名并引用项目主题变量（--color-surface、--color-border、--color-text-primary、--shadow-soft 等），自动适配暗色模式。 消费方需已集成 Tailwind CSS 并定义对应主题变量，否则组件结构正常但样式会缺失。