ZSX's AI Summary

ZSX's AI

文章主要介绍了几种不同的组件，包括LinkWithIcon、Badge、Poetry、Alert、Chat、Folding、Pic和MediumZoom以及Quote。这些组件各自具有独特的功能和用法，例如LinkWithIcon用于添加自定义图标链接，Badge用于显示超链接的徽章，Poetry用于展示诗歌，Alert用于显示提示框，Chat用于实现聊天功能，Folding用于折叠面板内容，Pic用于展示图片，MediumZoom用于放大图片，Quote用于引用文本。此外，还介绍了如何通过使用这些组件来创建复杂的用户界面和交互体验。

本摘要由AI生成，仅供参考，内容准确性请以原文为准

LinkWithIcon 组件测试#

这是一个测试文档，用于演示 LinkWithIcon 组件的功能。

基本使用#

GitHub Twitter YouTube B站知乎

自定义图标#

使用 GitHub 图标的示例链接使用 Twitter 图标的示例链接使用 YouTube 图标的示例链接

自定义颜色和大小#

GitHub (自定义颜色和大小) Twitter (自定义颜色和大小)

自定义类名#

GitHub (自定义类名)

Badge 组件测试#

基本用法#

示例徽章

超链接功能测试#

纯图标链接徽章#

Poetry 诗歌组件测试#

基本用法#

床前明月光，疑是地上霜。举头望明月，低头思故乡。

带标题和作者#

静夜思

李白

床前明月光，疑是地上霜。举头望明月，低头思故乡。

完整示例#

将进酒

李白

君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

《全唐诗》卷一百六十四

Alert 提示组件测试#

基本用法#

提醒

这是一个默认类型的提示框

不同类型的提示框#

提醒

这是一个提示类型的提示框

信息

这是一个信息类型的提示框

问题

这是一个问题类型的提示框

警告

这是一个警告类型的提示框

错误

这是一个错误类型的提示框

带自定义标题的提示框#

自定义标题

这是一个带自定义标题的提示框

注意事项

这是一个带自定义标题的警告提示框

带卡片样式的提示框#

提醒

这是一个带卡片样式的提示框

信息卡片

这是一个带卡片样式和自定义标题的信息提示框

带扁平样式的提示框#

提醒

这是一个带扁平样式的提示框

错误信息

这是一个带扁平样式和自定义标题的错误提示框

带自定义内容的提示框#

多行内容

这是第一行内容

这是第二行内容

列表项一
列表项二
列表项三

带自定义图标和颜色的提示框#

提醒

这是一个带自定义图标和颜色的提示框

自定义样式

这是一个带自定义图标、颜色和标题的提示框

Chat 聊天组件测试#

基本用法#

张

张三

你好！

你好，张三！

我

张

张三

今天天气怎么样？

今天天气很好，阳光明媚！

我

Markdown 渲染#

李

李四

你会使用 Markdown 吗？

当然会！

这是一个标题，这是粗体文本，这是斜体文本。

列表项 1
列表项 2
列表项 3

console.log("Hello, World!");

我

HTML 渲染#

王

王五

你能渲染 HTML 吗？

HTML 渲染测试

这是一个红色粗体文本。

我

撤回和删除消息#

赵

赵六

你好，最近在忙什么？

我删除了这条信息

对方撤回了一条消息

刚才不小心发错了，重新说一下：最近在学习 Astro 框架。

我

对方撤回了一条消息

我删除了这条信息

完整聊天示例#

小明

晚上好！

我

晚上好，小明！

小明

你今天学习了什么？

我

我今天学习了 Astro 组件开发，还创建了一个 Chat 组件。

它支持：

左右消息布局
Markdown 渲染
HTML 渲染
撤回消息提示
删除消息提示
支持头像图片
支持显示名称

对方撤回了一条消息

小明

听起来很厉害！能给我看看效果吗？

我删除了这条信息

我

当然可以！你现在看到的就是 Chat 组件的效果。

小明

太棒了！我也想学习 Astro 框架。

我

加油！ Astro 是一个很棒的框架，值得学习。

学习如逆水行舟，不进则退。

头像和名称示例#

2026-01-05 10:00

张三

你好，我是张三！