金融级交互实战：用 MateChat 打造“数据不出域”的私人银行助理

本文探讨了金融领域如何通过DevUI+MateChat技术组合实现合规的AI交互体验。针对金融App功能复杂但数据安全要求高的痛点，提出了"前端安全沙箱"解决方案：利用DevUI提供金融级组件底座确保合规性，MateChat则专注于对话交互框架，通过插槽机制嵌入本地化业务组件。文章详细介绍了技术选型依据、架构设计思路（本地意图识别+组件化渲染）以及可视化实现方案，展示了如何在不

小雨青年

20727人浏览 · 2025-11-27 13:46:31

小雨青年 · 2025-11-27 13:46:31 发布

前言：当“复杂”遇上“合规”

一、技术选型：为什么是 DevUI + MateChat？

前言：当“复杂”遇上“合规”

如果我们打开手机里的银行 App，第一感觉往往是“功能太强大，但菜单也太深了”。想查个去年的年度账单，或者看一眼理财收益分布，往往需要点击四五次跳转才能找到入口。

在金融领域，我们一直渴望用 AI 对话来简化这些操作。但摆在面前有一座大山，那就是数据安全与合规。我们绝不敢轻易把用户的资产数据发送给公有的通用大模型，这导致了很多金融 App 的智能助手依然停留在“关键词回复”的智障阶段。

今天，我们换一种思路。利用 华为云 DevUI MateChat 的组件化能力，我们能不能在前端构建一个“安全沙箱”？

在这个沙箱里，敏感数据的处理逻辑完全运行在本地或受信的私有接口中，MateChat 只负责做最擅长的事——展示专业的金融图表和交互卡片。这样既保证了体验的智能化，又守住了合规的底线。

为了验证这个想法，我开发了 MateChat Bank Advisor。这是一个模拟私人银行助理的开源项目，大家可以去 GitCode 仓库AtomGit | GitCode - 全球开发者的开源社区,开源代码托管平台看看代码，或者直接点击 https://mate-chat-bank-advisor.vercel.app/ 体验一下“查账只需一句话”。

一、技术选型：为什么是 DevUI + MateChat？

在金融场景做技术选型，“合规”“安全”“专业” 是三大核心诉求，而 DevUI 与 MateChat 的组合恰好精准匹配这些需求。

华为云 DevUI：金融级组件的可靠底座

在金融场景中，我们不需要一个臃肿的全家桶，而需要一个能完美处理“对话交互”的专用容器，同时允许我们灵活地嵌入自定义的业务逻辑。MateChat 正是为此而生。

MateChat：轻量级、高扩展的 AI 交互基座 与传统的聊天机器人平台不同，MateChat 是一个纯粹的前端组件库。它不提供预制的业务组件（如表格、表单），而是专注于把 “AI 对话” 这一件事做到极致，通过高度的开放性来适配复杂的金融需求：

开箱即用的 AI 核心组件： MateChat 提供了构建现代化 Chatbot 所需的所有基础原子组件——包括智能输入框（Input）、消息气泡（Message）、对话流容器（Chat）等。开发者无需手写复杂的 CSS 布局或处理滚动条逻辑，引入即可获得类似 ChatGPT 的流畅对话体验。
“容器化”的插槽机制（Slot）：这是 MateChat 解决金融复杂展示的核心能力。它不仅支持文本渲染，更提供了一个开放的内容插槽。这意味着，你可以将自己开发的“资产饼图”、“转账确认单”或“流水列表”（无论是基于原生 HTML 还是其他图表库）直接“不仅是”嵌入到对话流中。MateChat 负责交互框架，你负责业务内容，两者完美解耦。
纯前端的数据安全闭环：作为一款 UI 组件库，MateChat 不内置任何后端 API 调用。所有的意图识别、数据获取逻辑完全由开发者在本地 JavaScript 中控制。这种“零黑盒”的设计，天然符合银行对“数据不出域”的严苛合规要求。

正是这种“基础组件 + 开放插槽”的架构，让我们能在不引入外部风险的前提下，在前端构建出一个既懂金融业务、又具备现代化交互体验的私人银行助理

项目搭建：用 MateChat CLI 快速启动应用

MateChat 提供的 CLI 工具可以大幅简化搭建流程。

可通过如下命令创建一个应用：

// npm
npm create matechat@latest

// pnpm
pnpm create matechat@latest

这一指令会安装并执行create-matechat，你将会看到一些创建提示：

Please input the project name: matechat-project
Please select the template: Vue Starter

之后我们只要进入项目，即可快速启动项目。

cd <your-project-name>
npm i
npm run dev

二、场景痛点：我们要解决什么？

在金融场景下，用户的核心诉求其实非常明确：高效查询和安全交易。

传统的图形界面（GUI）在面对海量金融功能时显得力不从心。用户想知道“上个月在餐饮上花了多少钱”，在传统 App 里可能需要导出 Excel 自己算。

而对于 AI 交互来说，最大的挑战在于输出的专业度。普通的聊天气泡根本无法承载复杂的 K 线图、基金净值走势或者密密麻麻的交易流水。

我们需要的是一个“懂金融的 UI”。它不仅要能听懂“转账给张三”，还要能瞬间弹出一个包含收款人校验、金额确认的专业卡片，而不是轻飘飘地回一句“好的”。这正是 MateChat 作为一个企业级交互容器的价值所在。

三、架构设计：构建前端“安全沙箱”

为了满足金融级的合规要求，我们在架构设计上极其克制。我们没有引入任何不可控的外部 AI 服务，而是采用了一套“本地意图识别 + 组件化渲染”的方案。

在逻辑层，我们封装了一个 useBankMock.ts 钩子。它扮演了“端侧大脑”的角色，负责在本地解析用户的自然语言指令。

请看这段核心代码，我们是如何在不联网的情况下，精准识别用户意图并返回结构化数据的：

// playground/src/bank-advisor/composables/useBankMock.tsconst processQuery = async (text: string) => {
  // 模拟“风控系统”的校验延迟await new Promise(r => setTimeout(r, 800));
  
  // 本地意图识别：数据不出域，绝对安全if (text.includes('资产') || text.includes('余额')) {
    return {
      type: 'asset_card', // 指示前端渲染资产卡片data: assets,       // 敏感数据直接从本地/私有接口获取reply: '为您查询到当前资产全景如下：'
    };
  } 
  
  if (text.includes('转账')) {
    // 自动提取金额，准备进入交易流程const amount = text.match(/(\d+)/)?.[1] || '0';
    return {
      type: 'transfer_confirm',
      data: { amount, payee: '张三 (已校验)' },
      reply: '请确认转账信息，大额交易需二次验证：'
    };
  }
  // ...
};

这种设计确保了所有的意图判断和数据获取都在可控范围内，完美契合了金融场景对风控与集成逻辑的严苛要求。

四、视觉呈现：让数据“一目了然”

解决了安全问题，下一步是提升体验。金融数据是枯燥的，但 MateChat 的插槽设计让我们可以把数据变成漂亮的组件。

我们设计了一套高颜值的金融组件库。当用户查询资产时，我们不再发送文本，而是渲染一个 AssetPieChart。这个组件利用 SVG 或 ECharts，直观地展示了存款、理财和基金的占比。

而在查询流水时，我们直接嵌入了 DevUI 的 Table 组件。大家可以看到，在 BankLayout.vue 中，我们是如何根据消息类型动态切换组件的：

<McLayoutContent class="chat-content"><template v-for="msg in messages" :key="msg.id"><div v-if="msg.type === 'asset_card'" class="card-msg"><McBubble :content="msg.content" /><div class="widget-container"><AssetPieChart :data="msg.data" /></div></div><div v-else-if="msg.type === 'transaction_table'" class="card-msg"><McBubble :content="msg.content" /><div class="widget-container"><TransactionTable :list="msg.data" /></div></div></template></McLayoutContent>

这种“对话 + 可视化”的组合，极大地降低了用户的认知负荷。用户不再需要在一堆数字中找重点，一眼就能看懂自己的财务状况。