🏠 前台应用首页

概述

前台的 ApplicationHome 是用户在前台点击应用后看到的页面。它展示应用的基本信息（名称、描述），并提供编辑按钮来修改应用配置。

与设置中心 ApplicationHome 的区别

特性	前台 ApplicationHome	设置中心 ApplicationHome
用途	展示应用信息	管理所有应用
入口	前台导航 → 应用	Setup → Applications
操作	查看 + 编辑当前应用	CRUD 全部应用
视图	单个应用详情	应用列表

核心功能

1. 双模式支持

组件支持两种数据获取模式：

• SPA 模式：通过 props.appName 传入应用名
• 路由模式：通过 Next.js 的 useParams().app_name 获取

2. 应用数据获取

通过 useApplication hook 获取应用数据，返回统一的数据结构。

3. 编辑功能

点击"编辑"按钮通过 ApplicationForm ref 打开编辑模态框，ApplicationForm 复用设置中心的同一组件。

页面状态

状态	显示内容
加载中	Card heading="Loading..." + 加载提示文字
错误	Card heading="Error" + 错误详情
无应用	Card heading="Home" + "this is home page"
正常	Card 显示应用名称、描述 + 编辑按钮

页面结构

技术要点

• 数据 Hook：useApplication(app_name)
• 路由支持：Next.js useParams()
• 组件复用：与设置中心共用 ApplicationForm
• 组件库：@salesforce/design-system-react 的 Card, Button, Icon
• Ref 通信：通过 useRef + openEdit() 模式控制 ApplicationForm

截图