fmdeui 组件库

项目介绍

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

安装

# 使用 npm
npm install @fmdeui/fmui

# 使用 pnpm
pnpm add @fmdeui/fmui

# 使用 yarn
yarn add @fmdeui/fmui

快速开始

1. 基本使用

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. 按需导入

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. 状态管理

标签页管理

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

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

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

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

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

主题配置

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

const { themeConfig, setThemeConfig } = useThemeConfig();

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

用户信息

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

const { userInfo, setUserInfo } = useUserInfo();

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

2. 工具函数

存储工具

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();

网络请求

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();

时间格式化

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小时前

验证工具

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

// 验证邮箱
const isEmail = verifyEmail('[email protected]');

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

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

文件下载

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

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

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

Base64 转换

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

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

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

3. 钩子函数

权限管理

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>

国际化

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

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

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

系统信息

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

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

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

空闲超时管理

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

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

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

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

4. SignalR 实时通信

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. 国际化

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 服务

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. 图标字体配置

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. 事件总线

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

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

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

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

3. 水印

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. 通用函数

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

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

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

5. 其他工具函数

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

注意事项

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

浏览器兼容性

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

许可证

MIT License

版本	发布日期	距今
`1.0.193`latest	2026/11/12	3 天前
`1.0.192`	2026/11/11	4 天前
`1.0.191`	2026/11/04	11 天前
`1.0.190`	2026/11/03	12 天前
`1.0.189`	2026/10/31	15 天前
`1.0.188`	2026/10/31	15 天前

@fmdeui/fmui

fmdeui 组件库

项目介绍

安装

快速开始

1. 基本使用

2. 按需导入

核心功能

1. 状态管理

标签页管理

主题配置

用户信息

2. 工具函数

存储工具

网络请求

时间格式化

验证工具

文件下载

Base64 转换

3. 钩子函数

权限管理

国际化

系统信息

空闲超时管理

4. SignalR 实时通信

5. 国际化

6. API 服务

高级配置

1. 图标字体配置

2. 事件总线

3. 水印

4. 通用函数

5. 其他工具函数

版本信息

注意事项

浏览器兼容性

许可证

版本与发布记录

关于 @fmdeui/fmui 的常见问题

@fmdeui/fmui 是什么？

如何安装 @fmdeui/fmui？

@fmdeui/fmui 支持 TypeScript 吗？

@fmdeui/fmui 支持 ESM 还是 CommonJS？

@fmdeui/fmui 可以商用吗？

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

@fmdeui/fmui 还在维护吗？