MateChat Introduction 组件实战：Angular 版 @matechat/ng 中 AI 应用介绍页的完整配置与实现剖析

前端UI组件AI 应用【免费下载链接】MateChat前端智能化场景解决方案UI库轻松构建你的AI应用我们将持续完善更新欢迎你的使用与建议。 官网地址https://matechat.gitcode.com项目地址https://gitcode.com/DevCloudFE/MateChat点击查看免费下载本篇技术指南以 MateChat 组件库 Angular 版matechat/ng的IntroductionComponent选择器mc-introduction为核心系统讲解如何在一个 AI 应用首屏中呈现 logo、标题、副标题与多行描述并支持通过插槽自定义猜你想问等底部区域和align、background等参数控制布局。读完后你可以直接将该组件集成到基于 Angular 20 的聊天应用欢迎页并理解其输入属性、样式类映射与 Foundation 层实现的完整调用链。组件定位Introduction 解决什么问题在 AI 对话类应用中会话开始前通常需要一个介绍页向用户说明当前助手叫什么、能做什么并给出一些引导。Introduction组件正是为此设计用于呈现logo、title、subTitle等介绍信息并可通过description字段补充更多说明文字或通过slot 插槽自定义提示词猜你想问等内容。它同时提供两种使用形态Standalone 组件IntroductionComponent可直接在 Angular 20 的standalone组件中imports使用NgModule 封装IntroductionModule供仍需模块组织的旧式应用通过NgModule引入。两者定义于 introduction.component.ts 与 introduction.module.ts并由 public-api.ts 统一导出到包入口。按需引入从 npm 安装matechat/ng后该包当前版本为 20.1.0peer 依赖要求angular/core与angular/common均为^20.3.0见 package.json按需引入方式如下import { IntroductionComponent } from matechat/ng;在 standalone 组件中直接导入import { CommonModule } from angular/common; import { Component } from angular/core; import { IntroductionModule } from matechat/ng; Component({ selector: app-my-chat, standalone: true, imports: [CommonModule, IntroductionModule], templateUrl: ./my-chat.component.html, }) export class MyChatComponent {}仓库中的官方示例即采用这种写法例如 basic-demo.component.ts。参数参数名类型默认值说明logoImgstring介绍页 logo 链接logoWidthstring \| numberlogo 图片宽度logoHeightstring \| numberlogo 图片高度titlestring介绍页标题subTitlestring介绍页副标题descriptionstring[][]介绍内容backgroundIntroductionBackgroundtransparent背景样式alignIntroductionAligncenter内容对齐方式插槽插槽名返回值说明default--位于最下方的自定义区域类型定义type IntroductionBackground filled | transparent; type IntroductionAlign left | center | right;这些类型同时集中在 introduction-types.ts 中其中还定义了供其他入口复用的IntroductionProps接口与上述Input()一一对应。基本用法用于呈现logo、title、subTitle显示介绍信息。对应仓库演示 basic-demo.component.htmlmc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat /mc-introduction从模板实现看introduction.component.htmllogoImg通过*ngIflogoImg条件渲染只有传入 logo 地址时才会输出img节点img的alt属性会自动取title值对无障碍访问友好。subTitle为空时整行不渲染因此基本用法下页面上只有 logo 与标题。补充描述信息使用description字段增加描述用于介绍更多有用信息。description是字符串数组每一项渲染为一个独立的div行高为 1.5见 introduction.scss 中.mc-introduction-description样式。仓库中的演示description-demo.component.ts展示了典型写法mc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat [description]description /mc-introductiondescription [ MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。, 作为AI模型MateChat 提供的答案可能不总是确定或准确的但您的反馈可以帮助 MateChat 做的更好。, ];模板中的*ngIfdescription description.length保证数组为空时描述区块整体不渲染不会留下空白间距。自定义下方补充区域可通过slot 插槽自定义更多信息如一些提示词、猜你想问等信息。模板最下方的ng-content/ng-content声明了默认插槽其内容会被放置在介绍区块的最底部位于 logo/标题/副标题/描述之后mc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat div classquick-start i classicon-helping/i span点我快速开始/span /div /mc-introduction以上即仓库 slot 示例 slot-demo.component.html 的实际用法——插入一个点我快速开始的引导条。你可以在这里放入任意 Angular 组件推荐问法列表、Prompt 组件、按钮组等具体交互完全由使用方控制Introduction本身不约束插槽内容。设置不同的文字对齐方式通过align参数可用于设置文字的不同对齐方式适用不同的场景。取值为IntroductionAlign类型left | center | right默认center。仓库对齐示例align-demo.component.html并排演示了三种取值mc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat [description]description [align]left /mc-introduction mc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat [description]description /mc-introduction mc-introduction [logoImg]https://matechat.gitcode.com/logo2x.svg [title]MateChat [subTitle]Hi欢迎使用 MateChat [align]right [description]description /mc-introductionbackgroundfilled 或 transparent除对齐方式外background参数控制整体背景默认transparent透明背景直接融入页面设为filled时则呈现填充背景background-color取 devui 全局背景色变量$devui-global-bg并附带 8px 圆角与8px 12px内边距introduction.scss 中.filled规则。当介绍页浮在渐变壁纸或其他装饰背景上时filled可以让文字区域保持可读性。源码剖析输入属性如何变成渲染结果IntroductionComponent是 standalone 组件继承自 base.component.ts 定义的BaseComponent构造函数中创建了一个IntroductionFoundation实例Component({ selector: mc-introduction, standalone: true, imports: [CommonModule], templateUrl: ./introduction.component.html, styleUrls: [./introduction.component.scss], }) export class IntroductionComponent extends BaseComponentIntroductionFoundation { Input() logoImg?: string; Input() title?: string; Input() subTitle?: string; Input() description: string[] []; Input() logoWidth?: number | string; Input() logoHeight?: number | string; Input() background: IntroductionBackground transparent; Input() align: IntroductionAlign center; constructor() { super(); this.foundation new IntroductionFoundation(this.adapter); } }这里的adapter见 base.component.ts 中的get adapter()是一个把组件实例自身暴露为属性读取接口的桥接对象getProp(key)直接读取this[key]。这套 Foundation 模式是 MateChat NG 组件库的通用分层模板只依赖foundation.getXxx()的方法具体逻辑集中在 Foundation 中便于多端复用。align / background 的类名映射模板第一行的[ngClass]foundation.getIntroductionClasses()决定了根元素的修饰类。foundation.ts 中的实现如下getIntroductionClasses() { const align this._adapter.getProp(align) as IntroductionAlign; const background this._adapter.getProp( background, ) as IntroductionBackground; return [align, background].filter(Boolean).join( ); }即把align与background两个输入值拼成空格分隔的类名例如alignrightbackgroundfilled会得到right filled。对照 introduction.scss 可以看到每个修饰类的具体效果根元素.mc-introduction是一个flex-direction: column的纵向布局子项间距 12px.centeralign-items: center且描述区text-align: center.leftalign-items: flex-start描述区左对齐.rightalign-items: flex-end描述区右对齐。也就是说align不仅调整文字对齐还同时调整 logo 容器、副标题、描述与插槽内容这一整列的横向位置。logoWidth / logoHeight 的尺寸处理[ngStyle]foundation.getLogoStyle()负责 logo 图片的尺寸实现同样在 foundation.ts 中getLogoStyle() { const logoWidth this._adapter.getProp(logoWidth) as number | string; const logoHeight this._adapter.getProp(logoHeight) as number | string; const style: Recordstring, string {}; if (logoWidth) { style[width] typeof logoWidth number ? ${logoWidth}px : logoWidth; } if (logoHeight) { style[height] typeof logoHeight number ? ${logoHeight}px : logoHeight; } return style; }由此可以确认几个取值规则传数字如[logoWidth]64时自动补px得到64px传字符串如logoImgWidth5rem或100%时原样写入内联样式未设置时该维度不出现在样式对象中图片保持 intrinsic 尺寸。模板渲染结构一览把 introduction.component.html 完整列出可以清楚看到渲染顺序div classmc-introduction [ngClass]foundation.getIntroductionClasses() div classmc-introduction-logo-container img *ngIflogoImg [src]logoImg [alt]title [ngStyle]foundation.getLogoStyle() / div classmc-introduction-title{{ title }}/div /div div *ngIfsubTitle classmc-introduction-sub-title{{ subTitle }}/div div *ngIfdescription description.length classmc-introduction-description div *ngForlet item of description; let i index{{ item }}/div /div ng-content/ng-content /div几个值得注意的实现细节logo 与标题放在同一个.mc-introduction-logo-container横向容器内display: flex; gap: 8px; align-items: center因此图 标题是一体排布的标题样式为font-size: 32px、font-weight: 700副标题为18px、font-weight: 500所有文本字段都是{{ }}插值渲染天然免疫 HTML 注入不需要额外的 XSS 处理组件生命周期由BaseComponent统一管理ngOnDestroy时调用foundation.destroy()若存在使用时无需关心清理逻辑。在文档站中以 Web Component 形态使用在 MateChat 文档站中同一套演示还会被注册为自定义元素。web-components.ts 中注册了四个 Introduction 相关标签// Introduction组件 [mc-ng-introduction-basic, BasicDemoShowComponent], [mc-ng-introduction-description, DescriptionDemoShowComponent], [mc-ng-introduction-slot, SlotDemoShowComponent], [mc-ng-introduction-align, AlignDemoShowComponent],文档源文件 demo.md 中出现的mc-ng-introduction-basic、mc-ng-introduction-description、mc-ng-introduction-slot、mc-ng-introduction-align标签即对应上述四个演示组件的封装其内部模板与上文 demo-app 中的四个示例一一对应。在自己的 Angular 应用中请始终使用mc-introduction选择器mc-ng-*前缀标签属于文档站的演示载体。小结与实践建议Introduction是纯展示型组件无事件输出、无异步数据源所有表现都由Input()与默认插槽决定集成成本极低典型首屏配置是logoImgtitlesubTitle 两行description再配合默认插槽放入猜你想问或快捷指令需要强调文字区域可读性时用backgroundfilled页面内容靠左排布时切alignleft从源码结构看该属性会同时驱动整列容器的对齐而不仅是文字尺寸参数对字符串与数字的兼容逻辑数字自动补 px由 foundation.ts 统一处理可放心传入5rem、64px、64等形式参数与插槽的完整契约以 introduction.component.ts 中的Input()声明为准类型定义见 introduction-types.ts官方演示代码可在 IntroductionDemo 目录 下逐例对照。赞分享前端UI组件AI 应用【免费下载链接】MateChat前端智能化场景解决方案UI库轻松构建你的AI应用我们将持续完善更新欢迎你的使用与建议。 官网地址https://matechat.gitcode.com项目地址https://gitcode.com/DevCloudFE/MateChat点击查看免费下载相关推荐MateChat matechat/ng Introduction 介绍组件详解mc-introduction 参数、插槽与源码实现MateChat matechat/ng Introduction 介绍组件详解mc introduction 参数、插槽与源码实现 MateChat 的前端UI组件AI 应用MateChat matechat/ng 之 Header 组件构建 AI 应用聊天头部mc-header完整指南MateChat matechat/ng 之 Header 组件构建 AI 应用聊天头部mc header完整指南 本篇指南围绕 MateChat An前端UI组件AI 应用MateChat matechat-ng 技能指南基于 Angular 组件库快速构建 AI 聊天界面MateChat matechat ng 技能指南基于 Angular 组件库快速构建 AI 聊天界面 matechat ng 是 MateChat 仓库中面前端UI组件AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考