diff --git a/ckeditor5/handbook.md b/ckeditor5/handbook.md index 602ba84..11bc06b 100644 --- a/ckeditor5/handbook.md +++ b/ckeditor5/handbook.md @@ -1,5 +1,5 @@ ### 运行 -``` +```bash npm install npm run serve ``` @@ -8,7 +8,7 @@ npm run serve 见`App.vue`、`main.js` ### 添加插件 -直接修改`App.vue`,见Export2Word插件 +插件定义在`./components/plugins.js`中,添加方式见Export2Word插件 #### Export2Word插件 bug1：图片导出为word会恢复原始大小，而不是在编辑器中显示的大小。 @@ -20,6 +20,7 @@ bug2: 导出格式部分错误，字体颜色可以正常显示但背景颜色 #### 智能润色 选中需要处理的文本后，点击对应按钮即可触发实现，对应逻辑需要实现，框架已搭建。见插件Translate +具体的输出可以显示在侧边栏中，修改侧边栏中智能润色子菜单部分`App.vue`44-48行，如果需要与大模型交互，可以参考271-279行和`sendMessage, displayMessage`函数 #### 智能格式排版 · 样式库的管理和编辑 @@ -27,7 +28,7 @@ bug2: 导出格式部分错误，字体颜色可以正常显示但背景颜色 https://ckeditor.com/docs/ckeditor5/latest/features/style.html 编辑器初始化时 -``` +```javascript // 配置文件定义样式 import { ClassicEditor, Style } from 'ckeditor5'; @@ -51,8 +52,11 @@ ClassicEditor .then( /* ... */ ) .catch( /* ... */ ); ``` -``` -// 定义对应样式的css格式 +初始化配置，可以通过修改`./components/utils`中的`setConfig`函数和`getUserConfigFromBackend`函数和初始化时对应部分。 +应用样式需要修改`getAndApplyUserStyles`函数。需要和后端配合。 +需要在目录页面（或其他位置）增加一个用户自定义配置的功能。 +```css +/* 定义对应样式的css格式*/ .ck.ck-content h3.category { font-family: 'Bebas Neue'; font-size: 20px; diff --git a/ckeditor5/prompt_generate_style.md b/ckeditor5/prompt_generate_style.md index 7db368b..0d198a3 100644 --- a/ckeditor5/prompt_generate_style.md +++ b/ckeditor5/prompt_generate_style.md @@ -1,5 +1,5 @@ ### 角色 -你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。 +你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。 如果用户提出与生成CSS样式无关的问题，请回答“对不起，我无法回答该问题” ### 任务 为以下元素生成 CSS 样式类： 标题：（i为标题级别，如 h1, h2 等） @@ -9,8 +9,10 @@ 代码块：
 所有样式都需在 .ck-content 中定义，格式为：
 ``` css
-.ck-content element.class { ... }
+.ck-content element.className { ... }
 ```
+### 输出
+仅输出你编写的 CSS 内容，不要对其进行解释和输出其他内容。!important
 ### 示例
 生成一个文本块样式，生成的样式如下所示。 
 ``` css
@@ -25,5 +27,64 @@
     box-shadow: 5px 5px 0 #ffe6ef; 
 }
 ```
-### 输出
-仅输出你编写的 CSS 内容，不要对其进行解释和输出其他内容。
\ No newline at end of file
+生成一个代码框样式，生成的样式如下所示：
+```css
+.ck-content pre.fancy-code {
+	border: 0;
+	margin-left: 2em;
+	margin-right: 2em;
+	border-radius: 10px;
+}
+
+.ck-content pre.fancy-code::before {
+	content: '';
+	display: block;
+	height: 13px;
+	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
+	margin-bottom: 8px;
+	background-repeat: no-repeat;
+}
+
+.ck-content pre.fancy-code-dark {
+	background: #272822;
+	color: #fff;
+	box-shadow: 5px 5px 0 #0000001f;
+}
+```
+生成一个块引用样式，生成的样式如下所示
+```css
+.ck-content blockquote.side-quote {
+	font-family: 'Oswald';
+	font-style: normal;
+	float: right;
+	width: 35%;
+	position: relative;
+	border: 0;
+	overflow: visible;
+	z-index: 1;
+	margin-left: 1em;
+}
+
+.ck-content blockquote.side-quote::before {
+	content: '“';
+	position: absolute;
+	top: -37px;
+	left: -10px;
+	display: block;
+	font-size: 200px;
+	color: #e7e7e7;
+	z-index: -1;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p {
+	font-size: 2em;
+	line-height: 1;
+}
+
+.ck-content blockquote.side-quote p:last-child:not(:first-child) {
+	font-size: 1.3em;
+	text-align: right;
+	color: #555;
+}
+```
diff --git a/ckeditor5/public/sidebar.css b/ckeditor5/public/sidebar.css
new file mode 100644
index 0000000..5e083fe
--- /dev/null
+++ b/ckeditor5/public/sidebar.css
@@ -0,0 +1,127 @@
+/*侧边栏样式*/
+.sidebar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 350px;
+	height: 100%;
+	overflow-y: hidden;
+	transition: transform 0.3s ease;
+	transform: translateX(-100%);
+	background-color: #f9f9f9;
+	padding-left: 8px;
+	/* 调整内边距，使文字右移 */
+	padding-right: 8px;
+	/* 调整内边距，使文字右移 */
+	z-index: 9;
+	border-right: 5px solid #aec7e5;
+	resize: horizontal;
+	overflow: auto;
+}
+
+.sidebar.active {
+	transform: translateX(0);
+}
+
+.sidebar-menu {
+	flex-direction: row;
+	justify-content: space-between;
+	/* background-color: rgb(182, 229, 244); */
+	border-radius: 19px;
+	/* 添加圆角 */
+	display: flex;
+}
+
+.sidebar-menu .el-sub-menu {
+	display: flex;
+	flex-direction: column;
+}
+
+.sidebar-menu .el-menu-item {
+	flex: 1;
+	text-align: left;
+	background-color: #9cd6ce;
+	border-radius: 8px;
+	/* 添加圆角 */
+	margin: 2px 0;
+	/* 添加间距 */
+}
+
+.sidebar-menu .el-menu-item span {
+	display: block;
+	padding: 10px;
+	background-color: #ffffff;
+	border-radius: 4px;
+}
+
+.sidebar-menu .el-menu-item span:hover {
+	background-color: #e0e0e0;
+}
+
+.preview {
+	margin-top: 20px;
+	/* 调整预览区与表单之间的距离 */
+	border: 1px solid #ccc;
+	/* 添加边框 */
+	padding: 10px;
+	/* 添加内边距 */
+	border-radius: 4px;
+	/* 添加圆角 */
+}
+
+.form-item {
+	margin-bottom: 1px;
+	/* 减小表单项之间的距离 */
+}
+
+.chat-container {
+	display: flex;
+	flex-direction: column;
+	height: 90vh;
+	justify-content: space-between;
+}
+
+.messages {
+	flex: 1;
+	overflow-y: auto;
+	margin-bottom: 10px;
+}
+
+.message pre {
+	white-space: pre-wrap;
+	/* 保留空白符，但允许自动换行 */
+	word-wrap: break-word;
+	/* 允许长单词换行 */
+}
+
+.input-area {
+	display: flex;
+}
+
+.input-area input {
+	flex: 1;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+.input-area button {
+	padding: 10px 15px;
+	background-color: #2980b9;
+	color: white;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	margin-left: 5px;
+}
+
+.input-area button:hover {
+	background-color: #3498db;
+}
+
+.message {
+	margin: 5px 0;
+	padding: 10px;
+	border-radius: 4px;
+	background-color: #ecf0f1;
+}
\ No newline at end of file
diff --git a/ckeditor5/src/App.vue b/ckeditor5/src/App.vue
index 93d6775..1ae2e3b 100644
--- a/ckeditor5/src/App.vue
+++ b/ckeditor5/src/App.vue
@@ -18,8 +18,8 @@
 				id="toggleSidebarButton">打开/关闭侧边栏
 			

 				
-				
-					
+				
+					
 						
 						润色
 						改写
@@ -27,12 +27,12 @@
 						修改
 						翻译
 					
-					
+					
 						
 						OCR
 						脑图生成
 					
-					
+					
 						
 						手动生成
 						对话生成
@@ -40,7 +40,6 @@
 				
 				
 				

-					导航
 					
 					
润色内容

 					
改写内容

@@ -49,7 +48,7 @@
 					
翻译内容

 					
OCR内容

 					
脑图生成内容

-					

+					

 						
 						
 							
@@ -269,12 +268,14 @@
 							Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
 						

 					

-					

+					

 						
-						

-							
{{ message.text }}

-							
+						

+							

+							

+								
+								
+							

 						

 					

 				

@@ -284,158 +285,16 @@
 		

 	

 
-
 
diff --git a/ckeditor5/src/components/plugins.js b/ckeditor5/src/components/plugins.js
index 5980994..e77f49d 100644
--- a/ckeditor5/src/components/plugins.js
+++ b/ckeditor5/src/components/plugins.js
@@ -1,18 +1,101 @@
 import {
-    Plugin,
-    ButtonView,
+	AccessibilityHelp,
+	Alignment,
+	Autoformat,
+	AutoImage,
+	AutoLink,
+	Autosave,
+	BalloonToolbar,
+	Base64UploadAdapter,
+	BlockQuote,
+	Bold,
+	Code,
+	CodeBlock,
+	Essentials,
+	FindAndReplace,
+	FontBackgroundColor,
+	FontColor,
+	FontFamily,
+	FontSize,
+	GeneralHtmlSupport,
+	Heading,
+	Highlight,
+	HorizontalLine,
+	ImageBlock,
+	ImageCaption,
+	ImageInline,
+	ImageInsert,
+	ImageInsertViaUrl,
+	ImageResize,
+	ImageStyle,
+	ImageTextAlternative,
+	ImageToolbar,
+	ImageUpload,
+	Indent,
+	IndentBlock,
+	Italic,
+	Link,
+	LinkImage,
+	List,
+	ListProperties,
+	Markdown,
+	MediaEmbed,
+	Mention,
+	PageBreak,
+	Paragraph,
+	PasteFromMarkdownExperimental,
+	PasteFromOffice,
+	RemoveFormat,
+	SelectAll,
+	SpecialCharacters,
+	SpecialCharactersArrows,
+	SpecialCharactersCurrency,
+	SpecialCharactersEssentials,
+	SpecialCharactersLatin,
+	SpecialCharactersMathematical,
+	SpecialCharactersText,
+	Strikethrough,
+	Style,
+	Subscript,
+	Superscript,
+	Table,
+	TableCaption,
+	TableCellProperties,
+	TableColumnResize,
+	TableProperties,
+	TableToolbar,
+	TextTransformation,
+	TodoList,
+	Underline,
+	Undo,
+
+	Plugin,
+	ButtonView,
 	createDropdown,
 	Collection,
 	addListToDropdown,
 } from 'ckeditor5';
+import translations from 'ckeditor5/translations/zh-cn.js';
 import { asBlob } from 'html-docx-js-typescript'
 import { saveAs } from 'file-saver';
 import {
-    getStyle,
-    getPageContent
+	getStyle,
+	getPageContent,
+	getUserConfigFromBackend,
+	saveData
 } from './utils';
 
 // 导出为docx插件
+function exportWord(){
+	const pageContent = getPageContent();
+	const style = getStyle();
+	const page = '' + style + '' + pageContent + ''
+
+	// console.log(page);
+	asBlob(page).then(data => {
+		saveAs(data, 'file.docx') // save as docx file
+	}); // asBlob() return Promise
+}
 class Export2Word extends Plugin {
 	init() {
 		const editor = this.editor;
@@ -27,22 +110,20 @@ class Export2Word extends Plugin {
 				tooltip: true,
 
 				// 图标 直接插入svg文件
-				icon: ''
-
+				icon: '',
+				keystroke: 'Ctrl+W'
 			});
 
 			// Execute a callback function when the button is clicked
 			button.on('execute', () => {
-				const pageContent = getPageContent();
-				const style = getStyle();
-				const page = '' + style + '' + pageContent + ''
-
-				// console.log(page);
-				asBlob(page).then(data => {
-					saveAs(data, 'file.docx') // save as docx file
-				}); // asBlob() return Promise
+				exportWord();
+			});
+			
+			// 添加快捷键 Ctrl+W 导出为docx
+			editor.keystrokes.set('Ctrl+W', (event, cancel) => {
+				exportWord();
+				cancel();
 			});
-
 			return button;
 		});
 
@@ -66,7 +147,22 @@ class Export2Word extends Plugin {
 
 	}
 }
+
 // 导出为PDF插件
+function printPDF() {
+	const pageContent = getPageContent();
+	console.log(pageContent);
+	const style = getStyle();
+	// 去掉element中的 ck-focused ck-weight_selected消除页面和图片的蓝边
+	const page = '' + style + '' + pageContent.replaceAll('ck-focused', 'ck-blurred').replaceAll('ck-weight_selected', '') + ''
+	const newWindow = window.open('', 'PrintDocument', 'height=600,width=700,top=50,left=50');
+	newWindow.document.write(page);
+	newWindow.document.close();
+	newWindow.print();
+	newWindow.onafterprint = function () {
+		newWindow.close();
+	}
+}
 class Export2PDF extends Plugin {
 	init() {
 		const editor = this.editor;
@@ -81,30 +177,26 @@ class Export2PDF extends Plugin {
 				tooltip: true,
 
 				// 图标 直接插入svg文件
-				icon: ''
-
+				icon: '',
+				keystroke: 'Ctrl+P'
 			});
 
 			// Execute a callback function when the button is clicked
 			button.on('execute', () => {
-				const pageContent = getPageContent();
-				console.log(pageContent);
-				const style = getStyle();
-				// 去掉element中的 ck-focused ck-weight_selected消除页面和图片的蓝边
-				const page = '' + style + '' + pageContent.replaceAll('ck-focused', 'ck-blurred').replaceAll('ck-weight_selected', '') + ''
-				const newWindow = window.open('', 'PrintDocument', 'height=600,width=700,top=50,left=50');
-				newWindow.document.write(page);
-				newWindow.document.close();
-				newWindow.print();
-				newWindow.onafterprint = function () {
-					newWindow.close();
-				}
+				printPDF();
+			});
+
+			// 添加快捷键 Ctrl+P 导出为PDF
+			editor.keystrokes.set('Ctrl+P', (event, cancel) => {
+				printPDF();
+				cancel();
 			});
 
 			return button;
 		});
 	}
 }
+
 // 智能润色插件
 class Translation extends Plugin {
 	init() {
@@ -174,8 +266,9 @@ class Translation extends Plugin {
 		});
 	}
 }
-// 侧边栏
-class ToggleSideBar extends Plugin{
+
+// 侧边栏按钮
+class ToggleSideBar extends Plugin {
 	// constructor(toggleSidebar) {
 	// 	super();
 	// 	this.toggleSidebar = toggleSidebar;
@@ -200,7 +293,6 @@ class ToggleSideBar extends Plugin{
 			button.on('execute', () => {
 				// 打开sidebar
 				const bt = document.getElementById("toggleSidebarButton");
-				console.log(bt);
 				bt.click();
 			});
 
@@ -209,4 +301,288 @@ class ToggleSideBar extends Plugin{
 	}
 }
 
-export { Export2Word, Export2PDF, Translation, ToggleSideBar };
\ No newline at end of file
+// 保存按钮
+class SaveButton extends Plugin {
+	// constructor(toggleSidebar) {
+	// 	super();
+	// 	this.toggleSidebar = toggleSidebar;
+	// }
+	init() {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add('SaveButton', () => {
+			// The button will be an instance of ButtonView.
+			const button = new ButtonView();
+
+			button.set({
+				label: '保存',
+				// withText: true
+				tooltip: true,
+				// 图标 直接插入svg文件
+				icon: '',
+				keystroke: 'Ctrl+S'
+
+			});
+
+			// Execute a callback function when the button is clicked
+			button.on('execute', () => {
+				saveData(getPageContent())
+			});
+
+			return button;
+		});
+
+		// 添加快捷键 Ctrl+S 保存
+		editor.keystrokes.set('Ctrl+S', (event, cancel) => {
+			saveData(getPageContent());
+			cancel();
+		});
+	}
+}
+
+// 配置CKEditor5
+function setConfig() {
+	// 获取用户的样式配置
+	const userConfig = getUserConfigFromBackend();
+	return {
+		toolbar: {
+			items: [
+				'undo',
+				'redo',
+				'|',
+				'heading',
+				'style',
+				'|',
+				'fontSize',
+				'fontFamily',
+				'fontColor',
+				'fontBackgroundColor',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'|',
+				'link',
+				'insertImage',
+				'insertTable',
+				'highlight',
+				'codeBlock',
+				'blockquote',
+				'|',
+				'alignment',
+				'bulletedList',
+				'numberedList',
+				'outdent',
+				'indent',
+				'|', 'ExportToWord', 'ExportToPDF', 'translate', 'SideBar', 'SaveButton'
+			],
+			shouldNotGroupWhenFull: true
+		},
+		plugins: [
+			AccessibilityHelp,
+			Alignment,
+			Autoformat,
+			AutoImage,
+			AutoLink,
+			Autosave,
+			BalloonToolbar,
+			Base64UploadAdapter,
+			BlockQuote,
+			Bold,
+			Code,
+			CodeBlock,
+			Essentials,
+			FindAndReplace,
+			FontBackgroundColor,
+			FontColor,
+			FontFamily,
+			FontSize,
+			GeneralHtmlSupport,
+			Heading,
+			Highlight,
+			HorizontalLine,
+			ImageBlock,
+			ImageCaption,
+			ImageInline,
+			ImageInsert,
+			ImageInsertViaUrl,
+			ImageResize,
+			ImageStyle,
+			ImageTextAlternative,
+			ImageToolbar,
+			ImageUpload,
+			Indent,
+			IndentBlock,
+			Italic,
+			Link,
+			LinkImage,
+			List,
+			ListProperties,
+			Markdown,
+			MediaEmbed,
+			Mention,
+			PageBreak,
+			Paragraph,
+			PasteFromMarkdownExperimental,
+			PasteFromOffice,
+			RemoveFormat,
+			SelectAll,
+			SpecialCharacters,
+			SpecialCharactersArrows,
+			SpecialCharactersCurrency,
+			SpecialCharactersEssentials,
+			SpecialCharactersLatin,
+			SpecialCharactersMathematical,
+			SpecialCharactersText,
+			Strikethrough,
+			Style,
+			Subscript,
+			Superscript,
+			Table,
+			TableCaption,
+			TableCellProperties,
+			TableColumnResize,
+			TableProperties,
+			TableToolbar,
+			TextTransformation,
+			TodoList,
+			Underline,
+			Undo,
+			Export2Word, Translation, Export2PDF, ToggleSideBar, SaveButton
+		],
+		balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
+		//自定义设置字体
+		fontFamily: {
+			// 自定义字体
+			options: userConfig.fontFamily.options,
+			// 启用对所有字体名称的支持
+			supportAllValues: true,
+		},
+		fontSize: {
+			// 五号，小四，四号，小三，三号，小二，二号
+			options: userConfig.fontSize.options,
+			supportAllValues: true
+		},
+		heading: {
+			options: [
+				{
+					model: 'paragraph',
+					title: 'Paragraph',
+					class: 'ck-heading_paragraph'
+				},
+				{
+					model: 'heading1',
+					view: 'h1',
+					title: 'Heading 1',
+					class: 'ck-heading_heading1'
+				},
+				{
+					model: 'heading2',
+					view: 'h2',
+					title: 'Heading 2',
+					class: 'ck-heading_heading2'
+				},
+				{
+					model: 'heading3',
+					view: 'h3',
+					title: 'Heading 3',
+					class: 'ck-heading_heading3'
+				},
+				{
+					model: 'heading4',
+					view: 'h4',
+					title: 'Heading 4',
+					class: 'ck-heading_heading4'
+				},
+				{
+					model: 'heading5',
+					view: 'h5',
+					title: 'Heading 5',
+					class: 'ck-heading_heading5'
+				},
+				{
+					model: 'heading6',
+					view: 'h6',
+					title: 'Heading 6',
+					class: 'ck-heading_heading6'
+				}
+			]
+		},
+		htmlSupport: {
+			allow: [
+				{
+					name: /^.*$/,
+					styles: true,
+					attributes: true,
+					classes: true
+				}
+			]
+		},
+		image: {
+			toolbar: [
+				'toggleImageCaption',
+				'imageTextAlternative',
+				'|',
+				'imageStyle:inline',
+				'imageStyle:wrapText',
+				'imageStyle:breakText',
+				'|',
+				'resizeImage'
+			]
+		},
+		initialData:
+			'',
+		language: 'zh-cn',
+		link: {
+			addTargetToExternalLinks: true,
+			defaultProtocol: 'https://',
+			decorators: {
+				toggleDownloadable: {
+					mode: 'manual',
+					label: 'Downloadable',
+					attributes: {
+						download: 'file'
+					}
+				}
+			}
+		},
+		list: {
+			properties: {
+				styles: true,
+				startIndex: true,
+				reversed: true
+			}
+		},
+		mention: {
+			feeds: [
+				{
+					marker: '@',
+					feed: [
+						/* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */
+					]
+				}
+			]
+		},
+		menuBar: {
+			isVisible: true,
+			removeItems: ['help'],
+		},
+		placeholder: 'Type or paste your content here!',
+		// 用户可以自定义和管理样式
+		style: {
+			definitions: userConfig.style.definitions
+		},
+		table: {
+			contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
+		},
+		autosave: {
+			waitingTime: 180000, // (in ms)  3minutes
+			save() {
+				// TODO save
+				return saveData(getPageContent());
+			}
+		},
+		translations: [translations]
+	}
+}
+export { Export2Word, Export2PDF, Translation, ToggleSideBar, setConfig };
\ No newline at end of file
diff --git a/ckeditor5/src/components/utils.js b/ckeditor5/src/components/utils.js
index 1b1bacb..a65a8c8 100644
--- a/ckeditor5/src/components/utils.js
+++ b/ckeditor5/src/components/utils.js
@@ -75,11 +75,6 @@ export function getUserConfigFromBackend() {
                 name: 'Code (bright)',
                 element: 'pre',
                 classes: ['fancy-code', 'fancy-code-bright']
-            },
-            {
-                name: 'GradientBorder',
-                element: 'p',
-                classes: ['gradientborder']
             }
         ]
     } = options;
@@ -140,4 +135,4 @@ export function getAndApplyUserStyles() {
     styleElement.innerHTML = styles;
     document.head.appendChild(styleElement);
     return styles;
-}
\ No newline at end of file
+}
diff --git a/ckeditor5/vue.config.js b/ckeditor5/vue.config.js
index ffdb44b..5977699 100644
--- a/ckeditor5/vue.config.js
+++ b/ckeditor5/vue.config.js
@@ -9,7 +9,8 @@ module.exports = defineConfig({
   configureWebpack: {
     plugins: [
       AutoImport({
-        resolvers: [ElementPlusResolver()]
+        resolvers: [ElementPlusResolver(),]
+        // 自动导入图标组件
       }),
       Components({
         resolvers: [ElementPlusResolver()]