aiCodeBlock
aiCodeBlock 组件显示一段源代码，带有语法高亮、语言标签，以及用于复制和代码换行的操作。
XML 元素 |
|
|---|---|
Java 类 |
|
可以在应用程序中任何需要显示代码位置使用。在 aiChat 内部，会自动使用该组件：aiMessageList 会将助手消息的每个围栏代码块渲染为 aiCodeBlock，因此聊天中的代码外观和行为都与应用程序中其他位置的代码相同。
基本用法
在视图的 XML 中声明 aichat 命名空间：
<view xmlns="http://jmix.io/schema/flowui/view"
xmlns:aichat="http://jmix.io/schema/aichat/ui"
title="msg://CodeBlockView.title">| 如果是通过 Studio 顶部操作栏的 Add Component 添加该组件，则会自动添加所需的命名空间。参见 组件工具箱。 |
然后声明一个代码块元素，并在内部的 code 元素内写入源代码：
<aichat:aiCodeBlock id="basicsBlock" language="sql">
<aichat:code><![CDATA[select c.name, count(o.id) as order_count
from CUSTOMER c
left join ORDER_ o on o.customer_id = c.id
group by c.name
order by order_count desc]]></aichat:code>
</aichat:aiCodeBlock>|
需要使用 |
代码块采用其内容的宽度，并且不会超过其容器的宽度。
代码
有两种方式提供代码。
使用内部的 code 元素设置多行源代码。用 CDATA 将其包裹，以便源代码原样传入，如 上文 示例所示。
使用 code 属性设置单行内容，并接受消息键值，当源代码保存在 消息包 中时很有用：
<aichat:aiCodeBlock id="bundleBlock"
language="bash"
code="msg://runCommand.code"/>com.company.demo.view.codeblock/runCommand.code=./gradlew -Pvaadin.productionMode=true bootJar当两者都存在时，内部元素优先。一个存在但为空的 code 元素会导致视图加载失败，这样就无法静默地掩盖属性中声明的代码。
两者都可以省略。此时代码块会渲染为空，在视图控制器中可以稍后填充源代码。
语言
language 属性有两个作用：在代码块的头部放置一个标签，并告诉高亮器该使用哪种语法。
常用语言的 id 常量通过 AiCodeBlockLanguage 获取：
AiCodeBlock codeBlock = uiComponents.create(AiCodeBlock.class);
codeBlock.setLanguage(AiCodeBlockLanguage.JAVA);
codeBlock.setCode("""
@Autowired
private Notifications notifications;
@Subscribe("saveButton")
public void onSaveButtonClick(final ClickEvent<JmixButton> event) {
notifications.show("Saved");
}""");
programmaticBox.add(codeBlock);这些常量只是为了方便使用，并非属性可接受的集合：该属性接受任何字符串。高亮器无法识别的值不会报错，而是将代码作为纯文本渲染。
没有设置语言时，代码块中没有头部行。操作会浮在代码的右上角：
语法高亮需要设置语言，但是设置语言和设置高亮是两个单独的属性，不可互换。是否设置语言决定头部栏是否存在，如果在具有语言的块上设置 highlight="false" 会保留头部和标签，并将代码渲染为纯文本。
复制和换行操作
复制操作是将源代码复制到剪贴板，注意，复制的是原始的代码，而不是带高亮的标记语言。
换行操作设置代码是否换行显示，在代码水平滚动和软换行之间切换。其图标和提示描述的是下一次点击的作用，而不是当前状态。当替换代码块中的代码时，会将换行重置为初始声明的值。
可以通过 copyActionEnabled 或 wrapActionEnabled 禁用操作。禁用的操作完全不渲染：
<aichat:aiCodeBlock id="actionsDisabledBlock"
language="properties"
copyActionEnabled="false"
wrapActionEnabled="false">
<aichat:code><![CDATA[main.datasource.url=jdbc:postgresql://localhost:5432/demo
main.datasource.username=demo
jmix.core.available-locales=en,de]]></aichat:code>
</aichat:aiCodeBlock>|
当浏览器拒绝写入剪贴板时，复制操作会静默失败：不会复制任何内容，也不会告知用户。常见原因是通过应用程序是通过 HTTP 提供服务的，因为浏览器将剪贴板访问限制在安全上下文中。因此，只能在 HTTPS 和 |
本地化
复制和换行操作的标签来自扩展组件的消息包，在 aiCodeBlock.i18n.* 键值下：copy、copied、wrapOn 和 wrapOff。在应用程序的消息包中覆盖这些键值可以对操作标签文本进行本地化。
如需对单一代码块的操作标签本地化，添加内部的 i18n 元素：
<aichat:aiCodeBlock id="i18nBlock" language="yaml">
<aichat:code><![CDATA[name: demo
services:
db:
image: postgres:17
environment:
POSTGRES_DB: demo
POSTGRES_PASSWORD: demo]]></aichat:code>
<aichat:i18n copy="msg://i18nBlock.copy"
copied="msg://i18nBlock.copied"/>
</aichat:aiCodeBlock>com.company.demo.view.codeblock/i18nBlock.copy=Copy the compose file
com.company.demo.view.codeblock/i18nBlock.copied=Compose file copied上面的示例中，换行操作仍使用标准的标签，参考 优先级 了解这两种配置的组合。
样式
代码块将其内部结构作为 shadow part 开放出来，可通过 ::part() 选择器定位。
可通过以下样式属性在 CSS 样式表中自定义该组件的外观。
| 名称 | 描述 |
|---|---|
|
代码块的背景。 |
|
代码块的圆角半径。 |
|
代码的字体系列。 |
|
代码的字体大小。 |
|
操作按钮之间的间隙。 |
|
操作图标的大小。 |
|
不带有语法角色的代码的颜色。 |
|
语言关键字的颜色。 |
|
字符串字面量的颜色。 |
|
数字字面量的颜色。 |
|
注释的颜色。 |
|
声明名称的颜色，例如函数和类。 |
|
类型名称的颜色。 |
|
语言内置标识符的颜色。 |
|
字段和属性名称的颜色。 |
|
标记标签的颜色。 |
|
元数据的颜色，例如注解和预处理器指令。 |
|
确认复制完成的对勾颜色。 |
|
复制操作的字形。 |
|
复制确认显示的字形。 |
|
关闭换行时操作的字形。 |
|
开启换行时操作的字形。 |
图标属性保存的是作为遮罩应用的图像，因此覆盖其中一个就会替换该字形。
这些组件针对 Jmix 的两种主题 Aura 和 Lumo 都进行了样式设置，并遵循主题自身的焦点环、边框、圆角和间距方面的样式变量，因此上面的属性没有单一的默认值。此外，组件还处理了暗黑模式、高对比度模式以及减弱动画效果，并且其布局采用了与文本方向无关的属性来表示，从而能够自动适应文档的文本书写方向。