# @fmdeui/fmui 中文文档

规范地址：https://npmcn.com/package/%40fmdeui/fmui/

版本：1\.0\.193
npm 元数据更新时间：2026-11-12T10:16:08.868Z
中文译文更新时间：2026-11-15T03:14:01.477Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fmdeui/fmui
原文对照：https://npmcn.com/package/%40fmdeui/fmui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.5 MB，1059 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-03-12T08:20:53.526Z
- 最新版本发布：2026-11-12T10:16:08.515Z
- 近 30 天下载量：2996（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：193（近 12 个月 193 个）

## 中文简介

基于 Element Plus 开发的页面级别组件.

## 安装

```sh
npm install @fmdeui/fmui
```

也可以使用：`pnpm add @fmdeui/fmui`、`yarn add @fmdeui/fmui`、`bun add @fmdeui/fmui`

## README

# fmdeui 组件库

## 项目介绍

fmdeui 是一个基于 Vue 3 的前端组件库，提供了丰富的工具函数、状态管理、国际化等功能，帮助开发者快速构建现代化的前端应用。

## 安装

```bash
# 使用 npm
npm install @fmdeui/fmui

# 使用 pnpm
pnpm add @fmdeui/fmui

# 使用 yarn
yarn add @fmdeui/fmui
```

## 快速开始

### 1\. 基本使用

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import fmdeui from '@fmdeui/fmui';
import '@fmdeui/fmui/dist/style.css';

const app = createApp(App);
app.use(fmdeui);
app.mount('#app');
```

### 2\. 按需导入

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import { useTagsViewRoutes, signalR, setIntroduction } from '@fmdeui/fmui';

const app = createApp(App);
// 配置图标字体
setIntroduction({ scriptUrl: '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js' });
app.mount('#app');
```

## 核心功能

### 1\. 状态管理

#### 标签页管理

```javascript
import { useTagsViewRoutes } from '@fmdeui/fmui';

const { tagsViewRoutes, addTagsViewRoute, closeTagsViewRoute, closeAllTagsViewRoutes } = useTagsViewRoutes();

// 添加标签页
addTagsViewRoute({ path: '/home', name: 'home', meta: { title: '首页' } });

// 关闭标签页
closeTagsViewRoute('/home');

// 关闭所有标签页
closeAllTagsViewRoutes();
```

#### 主题配置

```javascript
import { useThemeConfig } from '@fmdeui/fmui';

const { themeConfig, setThemeConfig } = useThemeConfig();

// 修改主题配置
setThemeConfig({
  theme: 'dark',
  layout: 'vertical',
  primary: '#409EFF'
});
```

#### 用户信息

```javascript
import { useUserInfo } from '@fmdeui/fmui';

const { userInfo, setUserInfo } = useUserInfo();

// 设置用户信息
setUserInfo({
  userId: '1',
  userName: 'admin',
  userAccount: 'admin'
});
```

### 2\. 工具函数

#### 存储工具

```javascript
import { Local, Session } from '@fmdeui/fmui';

// 本地存储
Local.set('key', 'value');
const value = Local.get('key');
Local.remove('key');
Local.clear();

// 会话存储
Session.set('key', 'value');
const value = Session.get('key');
Session.remove('key');
Session.clear();
```

#### 网络请求

```javascript
import { service, request2, getToken, clearAccessTokens } from '@fmdeui/fmui';

// 发送请求
const response = await service.get('/api/user');

// 带参数的请求
const response = await request2('/api/user', {
  method: 'post',
  data: { name: 'admin' }
});

// 获取 token
const token = getToken();

// 清除 token
clearAccessTokens();
```

#### 时间格式化

```javascript
import { formatDate, formatPast } from '@fmdeui/fmui';

// 格式化日期
const dateStr = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');

// 格式化相对时间
const pastStr = formatPast(new Date(Date.now() - 3600000)); // 1小时前
```

#### 验证工具

```javascript
import { verifyEmail, verifyPhone, verifyPassword } from '@fmdeui/fmui';

// 验证邮箱
const isEmail = verifyEmail('test@example.com');

// 验证手机号
const isPhone = verifyPhone('13800138000');

// 验证密码
const isPassword = verifyPassword('Password123');
```

#### 文件下载

```javascript
import { downloadByUrl, downloadByData } from '@fmdeui/fmui';

// 通过 URL 下载
await downloadByUrl('https://example.com/file.pdf', '文件.pdf');

// 通过数据下载
await downloadByData(data, 'data.json', 'application/json');
```

#### Base64 转换

```javascript
import { fileToBase64, base64ToFile } from '@fmdeui/fmui';

// 文件转 Base64
const base64 = await fileToBase64(file);

// Base64 转文件
const file = base64ToFile(base64, 'image.png');
```

### 3\. 钩子函数

#### 权限管理

```javascript
import { auth, auths, hAuth } from '@fmdeui/fmui';

// 单个权限检查
const hasPermission = auth('user:add');

// 多个权限检查
const hasPermissions = auths(['user:add', 'user:edit']);

// 指令形式
// <button v-auth="'user:add'">添加用户</button>
```

#### 国际化

```javascript
import { useLocale, setupI18n } from '@fmdeui/fmui';

// 设置国际化
setupI18n({
  locale: 'zh-cn',
  messages: {
    'zh-cn': {
      hello: '你好'
    },
    'en': {
      hello: 'Hello'
    }
  }
});

// 使用国际化
const { t } = useLocale();
const hello = t('hello');
```

#### 系统信息

```javascript
import { loadSysInfo, updateFavicon } from '@fmdeui/fmui';

// 加载系统信息
await loadSysInfo();

// 更新 favicon
updateFavicon('https://example.com/favicon.ico');
```

#### 空闲超时管理

```javascript
import { initIdleTimeout, updateIdleTimeout, destroyIdleTimeout } from '@fmdeui/fmui';

// 初始化空闲超时（10秒）
initIdleTimeout({ timeout: 10 });

// 更新空闲超时时间（30分钟）
updateIdleTimeout(30 * 60);

// 销毁空闲超时
// destroyIdleTimeout();
```

### 4\. SignalR 实时通信

```javascript
import { signalR, restartSignalR } from '@fmdeui/fmui';

// 监听在线用户列表
signalR.on('OnlineUserList', (data) => {
  console.log('在线用户列表:', data.userList);
  
  // 上下线通知
  ElNotification({
    title: '提示',
    message: `${data.online ? `【${data.realName}】上线了` : `【${data.realName}】离开了`}`,
    type: `${data.online ? 'primary' : 'error'}`,
    position: 'bottom-right',
  });
});

// 监听强制下线
signalR.on('ForceOffline', async (data) => {
  await signalR.stop();
  // 执行登出操作
  // ...
});

// 发送消息
signalR.send('SendMessage', { message: 'Hello' });

// 重新初始化 SignalR（登录后调用）
await restartSignalR();
```

### 5\. 国际化

```javascript
import { i18n, languageList, setupI18n } from '@fmdeui/fmui';

// 可用语言列表
console.log(languageList);

// 设置国际化
setupI18n({
  locale: 'zh-cn',
  messages: {
    'zh-cn': {
      welcome: '欢迎'
    },
    'en': {
      welcome: 'Welcome'
    }
  }
});

// 使用 i18n 实例
const welcome = i18n.t('welcome');
```

### 6\. API 服务

```javascript
import { useApi, useBaseApi } from '@fmdeui/fmui';

// 使用基础 API 服务
const baseApi = useBaseApi('sysAuth');
const response = await baseApi.post(null, 'login', { username: 'admin', password: '123456' });

// 使用自定义 API 服务
const api = useApi({
  getUsers: { method: 'get', url: '/api/users' },
  createUser: { method: 'post', url: '/api/users' }
});

const users = await api.getUsers();
const newUser = await api.createUser({ name: 'admin' });
```

## 高级配置

### 1\. 图标字体配置

```javascript
import { setIntroduction, setCssCdn, setJsCdn } from '@fmdeui/fmui';

// 设置图标字体
setIntroduction({
  scriptUrl: '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js'
});

// 单独设置 CSS CDN
setCssCdn('//at.alicdn.com/t/font_1788044_0dwu4guekcwr.css');

// 单独设置 JS CDN
setJsCdn('//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js');
```

### 2\. 事件总线

```javascript
import { mittBus } from '@fmdeui/fmui';

// 监听事件
mittBus.on('event', (data) => {
  console.log('事件触发:', data);
});

// 触发事件
mittBus.emit('event', { message: 'Hello' });

// 移除事件监听
mittBus.off('event');
```

### 3\. 水印

```javascript
import { Watermark } from '@fmdeui/fmui';

// 创建水印
const watermark = new Watermark({
  text: 'fmdeui',
  fontSize: 14,
  color: '#999',
  opacity: 0.1,
  angle: -45,
  density: 20
});

// 销毁水印
// watermark.destroy();
```

### 4\. 通用函数

```javascript
import { commonFunction, commonFun } from '@fmdeui/fmui';

// 使用 commonFunction
const common = commonFunction();

// 使用 commonFun（已初始化的实例）
const result = commonFun.someMethod();
```

### 5\. 其他工具函数

```javascript
import { other } from '@fmdeui/fmui';

// 设置浏览器标题国际化
other.useTitle();

// 设置 tagsView 名称国际化
const tagsViewName = other.setTagsViewNameI18n(router.currentRoute.value);

// 图片懒加载
other.lazyImg('.lazy-img', imageList);

// 获取全局组件大小
const size = other.globalComponentSize();

// 对象深克隆
const clonedObj = other.deepClone(originalObj);

// 判断是否是移动端
const isMobile = other.isMobile();

// 处理空数组
const filteredList = other.handleEmpty(list);

// 打开外部链接
other.handleOpenLink(menuItem);
```

## 版本信息

当前版本：`1.0.46`

## 注意事项

1.  使用 SignalR 功能时，确保后端已配置相应的 Hub 服务
2.  空闲超时功能会在用户长时间无操作时自动登出
3.  部分功能依赖 Element Plus 组件库
4.  SignalR 实例会存储在 window.**SIGNALR\_INSTANCE** 中，确保全局唯一

## 浏览器兼容性

-   Chrome ≥ 60
-   Firefox ≥ 55
-   Safari ≥ 12
-   Edge ≥ 79

## 许可证

MIT License

## 常见问题

### @fmdeui/fmui 是什么？

基于 Element Plus 开发的页面级别组件\.

### 如何安装 @fmdeui/fmui？

在项目目录运行 npm install @fmdeui/fmui，或使用 pnpm add / yarn add / bun add。

### @fmdeui/fmui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fmdeui/fmui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fmdeui/fmui 可以商用吗？

@fmdeui/fmui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fmdeui/fmui 的下载量有多少？

根据 npm 官方下载统计，@fmdeui/fmui 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,996 次，日均约 100 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fmdeui/fmui 还在维护吗？

最新版本 1\.0\.193 发布于 2026/11/12（3 天前）；至今共发布 193 个版本，其中过去 12 个月发布了 193 个；首次发布于 2026/03/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。