@ feedmepos/ mf- 常见

本套件提供:

• 共享门户 shell 组件

• 共享核心Store pinia 商店

• 其他共享公用事业,如:i18n、国家等

更改日志

见 变动情况 关于每个版本的修改细节.

Remy 融合指南

概览

通用软件包为将Remy AI助手整合到微前端提供了简化的界面. 共同一揽子计划的责任只是:

1. 点击 Remy 图标时注册回调
2. 基于召回注册显示/隐藏 Remy 图标
3. 单击图标时触发回调

使用量

1. 登记Remy回电

在您的微前端( 例如 ), mf-menu),记录在点击Remy图标时将触发的回调:

import { useCoreStore } from '@feedmepos/common'

const coreStore = useCoreStore()

// Register your callback
coreStore.registerOnRemyClicked(() => {
  // Your Remy logic here
  // For example: open Remy dialog, activate Remy session, etc.
  console.log('Remy icon clicked!')
})

2. 自动图标显示

注册回调时:

• 这个 publicSetting.aiSettings.remy.enable 将自动设定为 true
• Remy 图标将出现在桌面、 移动和平板视图
• 图标是显示雷米动画的视频元素

3. 图标点击行为

当用户点击Remy图标时:

• 将触发已注册的回调
• 您控制接下来会发生什么( 打开对话框、 启动会话等 )

执行细节

桌面 (Portal-Desktop.vue)

• 图标出现在用户信息旁边的标题中
• 在调试和存储前键之前的位置

移动( Portal Mobile.vue) :

• 图标出现在页脚导航中
• 位于菜单按钮旁边

平板电脑( PortalTablet.vue)

• 图标出现在页眉中
• 类似桌面视图的位置

示例:全面整合

// In your microfrontend's main component or setup
import { onMounted } from 'vue'
import { useCoreStore } from '@feedmepos/common'

onMounted(async () => {
  const coreStore = useCoreStore()
})

福利

1. 脱钩:常见的套件不需要知道雷米的落实细节
2. 弹性: 每个微前端可以执行自己的Remy行为
3. 简单 API: 只有一种登记方法,图标可见度是自动的
4. 一致的 UX: 图标在所有视图中在同一位置出现