企业官网建设流程全解析

• 前端
• UI组件
• AI 应用

本篇技术指南以 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.0，peer 依赖要求@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。

参数

插槽

类型定义

type IntroductionBackground = 'filled' | 'transparent'; type IntroductionAlign = 'left' | 'center' | 'right';

这些类型同时集中在 introduction-types.ts 中，其中还定义了供其他入口复用的IntroductionProps接口，与上述@Input()一一对应。

基本用法

用于呈现logo、title、subTitle，显示介绍信息。对应仓库演示 basic-demo.component.html：

<mc-introduction [logoImg]="'https://matechat.gitcode.com/logo2x.svg'" [title]="'MateChat'" [subTitle]="'Hi，欢迎使用 MateChat'" ></mc-introduction>

从模板实现看（introduction.component.html），logoImg通过*ngIf="logoImg"条件渲染，只有传入 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-introduction>

description = [ 'MateChat 可以辅助研发人员编码、查询知识和相关作业信息、编写文档等。', '作为AI模型，MateChat 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 MateChat 做的更好。', ];

模板中的*ngIf="description && description.length"保证数组为空时描述区块整体不渲染，不会留下空白间距。

自定义下方补充区域

可通过slot 插槽自定义更多信息，如一些提示词、"猜你想问"等信息。模板最下方的<ng-content></ng-content>声明了默认插槽，其内容会被放置在介绍区块的最底部（位于 logo/标题/副标题/描述之后）：

<mc-introduction [logoImg]="'https://matechat.gitcode.com/logo2x.svg'" [title]="'MateChat'" [subTitle]="'Hi，欢迎使用 MateChat'" > <div class="quick-start"> <i class="icon-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-introduction>

background：filled 或 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 BaseComponent<IntroductionFoundation> { @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两个输入值拼成空格分隔的类名，例如align="right"+background="filled"会得到right filled。对照 introduction.scss 可以看到每个修饰类的具体效果：

• 根元素.mc-introduction是一个flex-direction: column的纵向布局，子项间距 12px；
• &.center：align-items: center，且描述区text-align: center；
• &.left：align-items: flex-start，描述区左对齐；
• &.right：align-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: Record<string, 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；
• 传字符串（如logoImgWidth="5rem"或'100%'）时原样写入内联样式；
• 未设置时该维度不出现在样式对象中，图片保持 intrinsic 尺寸。

模板渲染结构一览

把 introduction.component.html 完整列出，可以清楚看到渲染顺序：

<div class="mc-introduction" [ngClass]="foundation.getIntroductionClasses()"> <div class="mc-introduction-logo-container"> <img *ngIf="logoImg" [src]="logoImg" [alt]="title" [ngStyle]="foundation.getLogoStyle()" /> <div class="mc-introduction-title">{{ title }}</div> </div> <div *ngIf="subTitle" class="mc-introduction-sub-title">{{ subTitle }}</div> <div *ngIf="description && description.length" class="mc-introduction-description"> <div *ngFor="let 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()与默认插槽决定，集成成本极低；
• 典型首屏配置是logoImg+title+subTitle+ 两行description，再配合默认插槽放入"猜你想问"或快捷指令；
• 需要强调文字区域可读性时用background="filled"；页面内容靠左排布时切align="left"，从源码结构看该属性会同时驱动整列容器的对齐，而不仅是文字；
• 尺寸参数对字符串与数字的兼容逻辑（数字自动补 px）由 foundation.ts 统一处理，可放心传入'5rem'、'64px'、64等形式；
• 参数与插槽的完整契约以 introduction.component.ts 中的@Input()声明为准，类型定义见 introduction-types.ts，官方演示代码可在 IntroductionDemo 目录 下逐例对照。

• 前端
• UI组件
• AI 应用