FluentUI/example/qml/component/CodeExpander.qml

150 lines
4.8 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2023-04-05 17:48:17 +08:00
FluExpander{
2023-06-08 13:55:25 +08:00
id:control
2023-04-05 17:48:17 +08:00
property string code: ""
headerText: "Source"
contentHeight:content.height
2023-06-08 13:55:25 +08:00
focus: false
2023-04-05 17:48:17 +08:00
FluMultilineTextBox{
id:content
width:parent.width
2023-06-08 14:23:00 +08:00
activeFocusOnTab: false
activeFocusOnPress: false
readOnly: true
2023-04-06 19:27:37 +08:00
text:highlightQmlCode(code)
textFormat: FluMultilineTextBox.RichText
2023-04-06 17:32:21 +08:00
KeyNavigation.priority: KeyNavigation.BeforeItem
2023-04-05 17:48:17 +08:00
background:Rectangle{
2023-04-06 17:32:21 +08:00
radius: 4
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
border.width: 1
2023-04-05 17:48:17 +08:00
}
}
FluIconButton{
iconSource:FluentIcons.Copy
anchors{
right: parent.right
top: parent.top
rightMargin: 5
topMargin: 5
}
onClicked:{
2023-08-10 16:08:27 +08:00
FluTools.clipText(FluTools.html2PlantText(content.text))
2023-04-05 17:48:17 +08:00
showSuccess("复制成功")
}
}
2023-04-06 19:27:37 +08:00
function htmlEncode(e){
2023-05-25 17:00:48 +08:00
var i,s;
for(i in s={
"&":/&/g,//""//":/"/g,"'":/'/g,
"<":/</g,">":/>/g,"<br/>":/\n/g,
" ":/ /g," ":/\t/g
})e=e.replace(s[i],i);
return e;
2023-04-06 19:27:37 +08:00
}
function highlightQmlCode(code) {
2023-05-25 17:00:48 +08:00
// 定义 QML 关键字列表
var qmlKeywords = [
"FluTextButton",
"FluAppBar",
"FluAutoSuggestBox",
"FluBadge",
"FluButton",
"FluCalendarPicker",
"FluCalendarView",
"FluCarousel",
"FluCheckBox",
"FluColorPicker",
"FluColorView",
"FluComboBox",
"FluContentDialog",
"FluContentPage",
"FluDatePicker",
"FluDivider",
"FluDropDownButton",
"FluExpander",
"FluFilledButton",
"FluFlipView",
"FluFocusRectangle",
"FluIcon",
"FluIconButton",
"FluInfoBar",
"FluMediaPlayer",
"FluMenu",
"FluMenuItem",
"FluMultilineTextBox",
"FluNavigationView",
"FluObject",
"FluPaneItem",
"FluPaneItemExpander",
"FluPaneItemHeader",
"FluPaneItemSeparator",
"FluPivot",
"FluPivotItem",
"FluProgressBar",
"FluProgressRing",
"FluRadioButton",
"FluRectangle",
"FluScrollablePage",
"FluScrollBar",
"FluShadow",
"FluSlider",
"FluTabView",
"FluText",
"FluTextArea",
"FluTextBox",
"FluTextBoxBackground",
"FluTextBoxMenu",
"FluTextButton",
"FluTextFiled",
"FluTimePicker",
"FluToggleSwitch",
"FluTooltip",
"FluTreeView",
"FluWindow",
"FluWindowResize",
"FluToggleButton",
"FluTableView",
"FluColors",
"FluTheme",
"FluStatusView",
"FluRatingControl",
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
2023-06-12 16:46:02 +08:00
"FluAcrylic",
2023-06-18 13:56:30 +08:00
"FluRemoteLoader",
2023-06-20 18:32:10 +08:00
"FluMenuBar",
2023-06-21 11:47:05 +08:00
"FluPagination",
2023-06-28 18:07:39 +08:00
"FluRadioButtons",
2023-06-30 18:47:25 +08:00
"FluImage",
2023-07-28 16:08:58 +08:00
"FluSpinBox",
"FluHttp",
2023-08-07 22:11:08 +08:00
"FluWatermark",
2023-08-08 15:44:10 +08:00
"FluTour",
2023-08-10 18:29:43 +08:00
"FluQRCode",
"FluTimeline",
2023-08-27 12:40:02 +08:00
"FluChart",
2023-08-30 17:18:49 +08:00
"FluRangeSlider",
2023-09-05 16:48:04 +08:00
"FluStaggeredView",
2023-09-11 18:10:50 +08:00
"FluProgressButton",
2023-09-27 15:18:10 +08:00
"FluLoadingButton",
"FluClip"
2023-05-25 17:00:48 +08:00
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
2023-04-06 19:27:37 +08:00
}
2023-04-05 17:48:17 +08:00
}