@fmdeui/fmui 1.0.26 → 1.0.27

package/README.md

@@ -1,36 +1,60 @@
-## fmdeui  组件库
+# fmdeui 组件库
 
-## "@vitejs/plugin-vue": "^5.2.4",  升级到6.0.4编译报错
-## vite 6.3.5 
+## 项目介绍
 
+fmdeui 是一个基于 Vue 3 的前端组件库，提供了丰富的工具函数、状态管理、路由管理、国际化等功能，帮助开发者快速构建现代化的前端应用。
 
+## 安装
 
+```bash
+# 使用 npm
+npm install @fmdeui/fmui
 
+# 使用 pnpm
+pnpm add @fmdeui/fmui
 
-## 自定义路由配置
+# 使用 yarn
+yarn add @fmdeui/fmui
+```
 
-import { router, initRouter, configureRoutes, setPathPrefix, setDynamicViewsModules } from '@fmdeui/router';
+## 快速开始
 
-// 配置路由
-configureRoutes({
-  dynamicRoutes: [...],
-  staticRoutes: [...],
-  pathPrefix: '/@' // 可选
-});
+### 1. 基本使用
 
-// 设置动态视图模块映射
-const modules = import.meta.glob('./views/**/*.vue');
-setDynamicViewsModules(modules);
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import fmdeui from '@fmdeui/fmui';
+import '@fmdeui/fmui/dist/style.css';
 
-// 初始化路由
-const routerInstance = initRouter();
-app.use(routerInstance);
+const app = createApp(App);
+app.use(fmdeui);
+app.mount('#app');
+```
 
+### 2. 按需导入
 
-# 1. 覆盖方式（默认）
-import { configureRoutes, initRouter } from '@fmdeui/router';
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router, initRouter, useTagsViewRoutes, signalR } from '@fmdeui/fmui';
 
-// 不设置 merge 或设置为 false，使用覆盖方式
+const app = createApp(App);
+// 配置并初始化路由
+// ...
+app.mount('#app');
+```
+
+## 核心功能
+
+### 1. 路由管理
+
+#### 配置路由
+
+```javascript
+import { configureRoutes, initRouter, setDynamicViewsModules } from '@fmdeui/fmui';
+
+// 配置路由
 configureRoutes({
   dynamicRoutes: [
     {
@@ -58,39 +82,378 @@ configureRoutes({
   ]
 });
 
-// 结果：完全替换原有的路由配置
+// 设置动态视图模块映射
+const modules = import.meta.glob('./views/**/*.vue');
+setDynamicViewsModules(modules);
+
+// 初始化路由
+const routerInstance = initRouter();
+app.use(routerInstance);
+```
 
-##  2. 合并方式
-import { configureRoutes, initRouter } from '@fmdeui/router';
+#### 路由配置选项
 
-// 设置 merge: true，使用合并方式
-configureRoutes({
-  dynamicRoutes: [
-    {
-      path: '/custom',
-      name: 'custom',
-      component: () => import('./layout/index.vue'),
-      children: [
-        {
-          path: 'page',
-          name: 'customPage',
-          component: () => import('./views/custom/page.vue'),
-          meta: { title: '自定义页面' }
-        }
-      ]
+| 选项 | 类型 | 说明 | 默认值 |
+|------|------|------|--------|
+| dynamicRoutes | Array | 动态路由配置 | [] |
+| staticRoutes | Array | 静态路由配置 | [] |
+| pathPrefix | String | 路由路径前缀 | '' |
+| merge | Boolean | 是否与默认路由合并 | false |
+
+### 2. 状态管理
+
+#### 标签页管理
+
+```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'
+});
+```
+
+### 3. 工具函数
+
+#### 存储工具
+
+```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');
+```
+
+### 4. 钩子函数
+
+#### 权限管理
+
+```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'
     }
-  ],
-  staticRoutes: [
-    {
-      path: '/register',
-      name: 'register',
-      component: () => import('./views/register/index.vue'),
-      meta: { title: '注册', isPublic: true }
+  }
+});
+
+// 使用国际化
+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();
+```
+
+### 5. SignalR 实时通信
+
+```javascript
+import { signalR } 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' });
+```
+
+### 6. 国际化
+
+```javascript
+import { i18n, languageList, setupI18n } from '@fmdeui/fmui';
+
+// 可用语言列表
+console.log(languageList);
+
+// 设置国际化
+setupI18n({
+  locale: 'zh-cn',
+  messages: {
+    'zh-cn': {
+      welcome: '欢迎'
+    },
+    'en': {
+      welcome: 'Welcome'
     }
-  ],
-  merge: true  // 启用合并
+  }
+});
+
+// 使用 i18n 实例
+const welcome = i18n.t('welcome');
+```
+
+### 7. 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' }
 });
 
-// 结果：在原有路由基础上追加新的路由
-// dynamicRoutes = [原有路由, ...自定义路由]
-// staticRoutes = [原有路由, ...自定义路由]
+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();
+```
+
+## 版本信息
+
+当前版本：`1.0.26`
+
+## 注意事项
+
+1. 使用 SignalR 功能时，确保后端已配置相应的 Hub 服务
+2. 空闲超时功能会在用户长时间无操作时自动登出
+3. 路由配置需要在应用启动时完成
+4. 部分功能依赖 Element Plus 组件库
+
+## 浏览器兼容性
+
+- Chrome ≥ 60
+- Firefox ≥ 55
+- Safari ≥ 12
+- Edge ≥ 79
+
+## 许可证
+
+MIT License

package/es/hooks/composables/useDialogEvents.d.ts

@@ -0,0 +1,28 @@
+import { App } from 'vue';
+/**
+ * 表单事件数据类型
+ */
+export interface FormSubmitData {
+    name: string;
+    data: any;
+}
+export interface FormFieldChangeData {
+    fieldName: string;
+    value: any;
+    isValid: boolean;
+}
+/**
+ * 表单事件处理器类型定义
+ */
+export interface FormEventHandlers {
+    onFormSubmit: (data: FormSubmitData) => Promise<void>;
+    onFormReset: () => void;
+    onFieldChange: (data: FormFieldChangeData) => void;
+    onFormValidate: (errors: Record<string, string>) => void;
+    onFormDialogClose: () => void;
+    onFormDialogOpen: () => void;
+}
+/**
+ * 创建表单事件总线
+ */
+export declare const provideFormEvents: (handlers: any, app?: App) => void, useFormEvents: () => any;

package/es/hooks/composables/useEventBus.d.ts

@@ -0,0 +1,31 @@
+import { InjectionKey, App } from 'vue';
+/**
+ * 事件映射类型
+ */
+export type EventMap = Record<string, (...args: any[]) => void>;
+/**
+ * 事件总线配置
+ */
+export interface EventBusConfig<T extends EventMap> {
+    name: string;
+    defaultHandlers?: T;
+    strict?: boolean;
+}
+/**
+ * 创建类型安全的事件总线
+ * @param config 配置项
+ */
+export declare function createEventBus<T extends EventMap>(config: string | EventBusConfig<T>): {
+    /**
+     * 在顶层组件中提供事件处理器
+     */
+    provideEvents(handlers: T, app?: App): void;
+    /**
+     * 在子组件中注入事件处理器
+     */
+    useEvents(): T;
+    /**
+     * 获取注入键（用于高级场景）
+     */
+    getKey(): InjectionKey<T>;
+};

package/es/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './useInfo';
 export * from './dateTimeShortCust';
 export * from './idleTimeout';
 export * from './useVxeTableOptionsHook';
+export * from './composables/useDialogEvents';

package/es/index.mjs

@@ -34,6 +34,7 @@ export { initBackEndControlRoutes, setDynamicViewsModules } from './packages/rou
 export { initFrontEndControlRoutes } from './packages/router/frontEnd.mjs';
 export { judgementIdCard, verifiyNumberInteger, verifyAccount, verifyAndSpace, verifyCarNum, verifyCnAndSpace, verifyEmail, verifyEnAndSpace, verifyFullName, verifyIPAddress, verifyIdCard, verifyNumberCnUppercase, verifyNumberComma, verifyNumberIntegerAndFloat, verifyNumberPercentage, verifyNumberPercentageFloat, verifyPassword, verifyPasswordPowerful, verifyPasswordStrength, verifyPhone, verifyPostalCode, verifyTelPhone, verifyTextColor, verifyUrl } from './packages/utils/toolsValidate.mjs';
 export { loadSysInfo, updateFavicon } from './packages/hooks/sysInfo.mjs';
+export { provideFormEvents, useFormEvents } from './packages/hooks/composables/useDialogEvents.mjs';
 export { restartSignalR, signalR } from './packages/utils/signalR.mjs';
 export { router } from './packages/router/createRouter.mjs';
 export { saulVModel } from './packages/utils/saulVModel.mjs';

package/es/packages/hooks/composables/useDialogEvents.mjs

@@ -0,0 +1,33 @@
+import { createEventBus } from './useEventBus.mjs';
+
+const defaultHandlers = {
+  onFormSubmit: async () => {
+    console.warn("[FormEvents] onFormSubmit \u672A\u5B9E\u73B0");
+  },
+  onFormReset: () => {
+    console.warn("[FormEvents] onFormReset \u672A\u5B9E\u73B0");
+  },
+  onFieldChange: () => {
+    console.warn("[FormEvents] onFieldChange \u672A\u5B9E\u73B0");
+  },
+  onFormValidate: () => {
+    console.warn("[FormEvents] onFormValidate \u672A\u5B9E\u73B0");
+  },
+  onFormDialogClose: () => {
+    console.warn("[FormEvents] onFormDialogClose \u672A\u5B9E\u73B0");
+  },
+  onFormDialogOpen: () => {
+    console.warn("[FormEvents] onFormDialogOpen \u672A\u5B9E\u73B0");
+  }
+};
+const {
+  provideEvents: provideFormEvents,
+  useEvents: useFormEvents
+} = createEventBus({
+  name: "formEvents",
+  defaultHandlers,
+  strict: true
+  // 开发环境严格检查
+});
+
+export { provideFormEvents, useFormEvents };

package/es/packages/hooks/composables/useEventBus.mjs

@@ -0,0 +1,39 @@
+import { inject, provide } from 'vue';
+
+function createEventBus(config) {
+  const options = typeof config === "string" ? { name: config, strict: true } : config;
+  const injectionKey = /* @__PURE__ */ Symbol(`eventBus:${options.name}`);
+  return {
+    /**
+     * 在顶层组件中提供事件处理器
+     */
+    provideEvents(handlers, app) {
+      if (app) {
+        app.provide(injectionKey, handlers);
+      } else {
+        provide(injectionKey, handlers);
+      }
+    },
+    /**
+     * 在子组件中注入事件处理器
+     */
+    useEvents() {
+      const events = inject(injectionKey);
+      if (options.strict && !events) {
+        console.warn(
+          `[EventBus] \u26A0\uFE0F "${options.name}" \u672A\u627E\u5230 provide\uFF01
+\u8BF7\u786E\u4FDD\u5728\u9876\u5C42\u7EC4\u4EF6\u4E2D\u8C03\u7528\u4E86 provideEvents()`
+        );
+      }
+      return events || options.defaultHandlers || {};
+    },
+    /**
+     * 获取注入键（用于高级场景）
+     */
+    getKey() {
+      return injectionKey;
+    }
+  };
+}
+
+export { createEventBus };

package/es/packages/hooks/index.mjs

@@ -5,3 +5,4 @@ export { loadSysInfo, updateFavicon } from './sysInfo.mjs';
 export { hasPrivilege, hasRoleCode, isAdmin, isMember, isNormalUser, isSupperAdmin, isTenantAdmin, orgId, orgName, posId, posName, roles, tenantId, userAccount, userEmail, userFriendName, userId, userName, userPhone } from './useInfo.mjs';
 export { useDateTimeShortCust } from './dateTimeShortCust.mjs';
 export { destroyIdleTimeout, initIdleTimeout, updateIdleTimeout } from './idleTimeout.mjs';
+export { provideFormEvents, useFormEvents } from './composables/useDialogEvents.mjs';