@openjiuwen/relay-web

OfficeClaw Web 组件库，包含 React 组件、Hooks 和工具函数。

安装

npm install @openjiuwen/relay-web
# 或
pnpm add @openjiuwen/relay-web

Peer Dependencies

需要确保项目中已安装：

• react >= 18.2.0
• react-dom >= 18.2.0
• @office-claw/shared >= 0.1.0

使用方式

按需导入

// 导入基础组件
import { Button, IconButton, Alert } from '@openjiuwen/relay-web/shared';

// 导入业务组件
import { ConfirmDialog, Lightbox } from '@openjiuwen/relay-web/business';

// 导入 hooks
import { useCountdown, useEscapeKey } from '@openjiuwen/relay-web/hooks';

// 导入 utils
import { compressImage, apiFetch } from '@openjiuwen/relay-web/utils';

// 导入 stores（Zustand 状态管理）
import { useChatStore, useToastStore, useThemeStore } from '@openjiuwen/relay-web/stores';

// 导入样式（CSS 变量 + Tailwind）
import '@openjiuwen/relay-web/styles.css';

直接使用（从主入口导入）

import { Button, ConfirmDialog, useCountdown } from '@openjiuwen/relay-web';
import '@openjiuwen/relay-web/styles.css';

定制替换

UI 一致，逻辑不同

使用原始 UI 组件 + 定制 hook：

import { ConfirmDialog } from '@openjiuwen/relay-web/business';
import { myUseConfirm } from './myUseConfirm';

// 用 ConfirmProvider 包装，注入定制逻辑

UI 不同，逻辑一致

使用定制 UI + 原始 hook：

import { useConfirm } from '@openjiuwen/relay-web/hooks';
import { MyConfirmDialog } from './MyConfirmDialog';

const confirm = useConfirm();
<MyConfirmDialog onConfirm={() => confirm(true)} />

全部定制

import { MyConfirmDialog, myUseConfirm } from './my-components';

导出内容

| 子路径 | 内容 | |--------|------| | shared | 19 个基础 UI 组件（Button, IconButton, Alert 等） | | business | 业务组件（ConfirmDialog, Lightbox, AppModal 等） + cli-output、document-preview、workspace、ppt-studio、rich、icons 等子目录组件 | | hooks | 39 个 hooks（通用 hooks + 业务 hooks） | | utils | 20 个工具函数 | | stores | Zustand stores（useChatStore, useToastStore, useThemeStore 等） | | styles.css | CSS 变量 + Tailwind 样式 | | assets | 静态资源（图片、图标） |

静态资源配置

组件中使用的图片/图标资源需要复制到您的项目中：

# 复制静态资源到 public 目录（首次使用时执行）
cp -r node_modules/@openjiuwen/relay-web/dist/assets/* public/

# Windows PowerShell
Copy-Item -Recurse -Force node_modules/@openjiuwen/relay-web/dist/assets/* public/

# pnpm 用户（路径可能不同）
cp -r .pnpm/@office-claw+web-components@*/node_modules/@openjiuwen/relay-web/dist/assets/* public/

License

MIT