@ -18,8 +18,8 @@
id = "toggleSidebarButton" > 打开 / 关闭侧边栏 < / e l - b u t t o n >
< div class = "sidebar" : class = "{ 'active': isSidebarOpen }" >
<!-- 侧边栏内容 -- >
< el -menu class = "sidebar-menu" : class = "{ 'active': isNavbarOpen }" >
< el -sub -menu index = "1" >
< el -menu class = "sidebar-menu" : class = "{ 'active': isNavbarOpen }" :collapse ="isNavbarOpen" >
< el -sub -menu index = "1" class = "horizontal-sub-menu" >
< template # title > 智能助手 < / template >
< el -menu -item index = "1-1" @click ="showContent('polish')" > 润 色 < / el -menu -item >
< el -menu -item index = "1-2" @click ="showContent('rewrite')" > 改 写 < / el -menu -item >
@ -27,12 +27,12 @@
< el -menu -item index = "1-4" @click ="showContent('edit')" > 修 改 < / el -menu -item >
< el -menu -item index = "1-5" @click ="showContent('translate')" > 翻 译 < / el -menu -item >
< / e l - s u b - m e n u >
< el -sub -menu index = "2" >
< el -sub -menu index = "2" class = "horizontal-sub-menu" >
< template # title > 图文转换 < / template >
< el -menu -item index = "2-1" @click ="showContent('ocr')" > OCR < / el -menu -item >
< el -menu -item index = "2-2" @click ="showContent('mindmap')" > 脑 图 生 成 < / el -menu -item >
< / e l - s u b - m e n u >
< el -sub -menu index = "3" >
< el -sub -menu index = "3" class = "horizontal-sub-menu" >
< template # title > 样式生成 < / template >
< el -menu -item index = "3-1" @click ="showContent('manual')" > 手 动 生 成 < / el -menu -item >
< el -menu -item index = "3-2" @click ="showContent('ai')" > 对 话 生 成 < / el -menu -item >
@ -40,7 +40,6 @@
< / e l - m e n u >
<!-- Content Sections -- >
< div v-if ="currentContent" class="content-section" >
< el -button icon = "el-icon-menu" @click ="toggleNavBar()" > 导 航 < / el -button >
<!-- Dynamic content based on navigation selection -- >
< div v-if ="currentContent === 'polish'" > 润 色 内 容 < / div >
< div v-if ="currentContent === 'rewrite'" > 改 写 内 容 < / div >
@ -49,7 +48,7 @@
< div v-if ="currentContent === 'translate'" > 翻 译 内 容 < / div >
< div v-if ="currentContent === 'ocr'" > OCR 内 容 < / div >
< div v-if ="currentContent === 'mindmap'" > 脑 图 生 成 内 容 < / div >
< div v-if ="currentContent === 'manual'" class="p-3" >
< div v-if ="currentContent === 'manual'" >
<!-- 手动输入表单 -- >
< el -form @submit.prevent ="submitForm" >
< el -col :span ="30" >
@ -269,12 +268,14 @@
Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
< / div >
< / div >
< div v-if ="currentContent === 'ai'" class="p-3" >
< div v-if ="currentContent === 'ai'" >
<!-- AI对话框 -- >
< div class = "chat-box border rounded p-3" >
< p v-for ="message in messages" :key="message.id" class="mb-1" > {{ message.text }} < / p >
< el -input v -model = " aiInput " @keyup.enter ="sendMessageToAI" placeholder = "请输入消息"
class = "w-100" > < / e l - i n p u t >
< div class = "chat-container" >
< div class = "messages" id = "messages" > < / div >
< div class = "input-area" >
< input type = "text" id = "userInput" placeholder = "输入您的消息..." >
< button @click ="sendMessage()" > 发 送 < / button >
< / div >
< / div >
< / div >
< / div >
@ -284,159 +285,19 @@
< / div >
< / div >
< / template >
< style >
/*侧边栏样式*/
. sidebar {
position : fixed ;
top : 0 ;
left : 0 ;
width : 350 px ;
height : 100 % ;
overflow - y : hidden ;
transition : transform 0.3 s ease ;
transform : translateX ( - 100 % ) ;
background - color : # f9f9f9 ;
padding - left : 8 px ;
/* 调整内边距，使文字右移 */
padding - right : 8 px ;
/* 调整内边距，使文字右移 */
z - index : 9 ;
}
. sidebar . active {
transform : translateX ( 0 ) ;
}
. sidebar - menu {
display : none ;
flex - direction : column ;
justify - content : space - between ;
}
. sidebar - menu . active {
display : block ;
}
. sidebar - menu . el - menu - item {
flex : 1 ;
text - align : left ;
}
. sidebar - menu . el - menu - item span {
display : block ;
padding : 10 px ;
background - color : # f5f5f5 ;
border - radius : 4 px ;
margin : 5 px ;
transition : background - color 0.3 s ;
}
. sidebar - menu . el - menu - item span : hover {
background - color : # e0e0e0 ;
}
. chat - box {
max - height : 350 px ;
overflow - y : auto ;
}
. preview {
margin - top : 20 px ;
/* 调整预览区与表单之间的距离 */
border : 1 px solid # ccc ;
/* 添加边框 */
padding : 10 px ;
/* 添加内边距 */
border - radius : 4 px ;
/* 添加圆角 */
}
. form - item {
margin - bottom : 1 px ;
/* 减小表单项之间的距离 */
}
< / style >
< script >
import {
DecoupledEditor ,
/ / C l a s s i c E d i t o r ,
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 ,
} from 'ckeditor5' ;
import translations from 'ckeditor5/translations/zh-cn.js' ;
import 'ckeditor5/ckeditor5.css' ;
import '../public/sidebar.css' ;
import { ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker , ElSubMenu } from 'element-plus' ;
import { setConfig } from '../components/plugins'
/ / i m p o r t { g e t U s e r C o n f i g F r o m B a c k e n d , s a v e D a t a , g e t P a g e C o n t e n t , g e t A n d A p p l y U s e r S t y l e s } f r o m ' . / c o m p o n e n t s / u t i l s ' ;
import { getUserConfigFromBackend , saveData , getPageContent } from '../components/utils' ;
import { Export2PDF , Export2Word , ToggleSideBar , Translation } from '../components/plugins' ;
import { useStore } from 'vuex' ;
import router from '../router/index.js' ;
import axios from 'axios' ;
export default {
name : 'CkeditorView' ,
@ -446,7 +307,7 @@ export default {
config : null , / / C K E d i t o r n e e d s t h e D O M t r e e b e f o r e c a l c u l a t i n g t h e c o n f i g u r a t i o n .
editor : DecoupledEditor ,
/ / e d i t o r : C l a s s i c E d i t o r ,
store : useStore ( ) ,
store : useStore ( ) ,
isSidebarOpen : false , / / 侧 边 栏 是 否 打 开
isNavbarOpen : false , / / 侧 边 栏 是 否 打 开
@ -466,256 +327,10 @@ export default {
wordSpacing : ''
} ,
previewStyle : { } ,
aiInput : '' , / / A I 输 入 的 内 容
messages : [ ] , / / 聊 天 记 录
} ;
} ,
mounted ( ) {
/ / 获 取 用 户 的 样 式 配 置
const userConfig = getUserConfigFromBackend ( ) ;
/ / 获 取 用 户 定 义 的 样 式 并 应 用
/ / g e t A n d A p p l y U s e r S t y l e s ( ) ;
this . config = {
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'
] ,
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
] ,
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 , / / ( i n m s ) 3 m i n u t e s
save ( ) {
/ / T O D O s a v e
return saveData ( getPageContent ( ) ) ;
}
} ,
translations : [ translations ]
} ;
this . config = setConfig ( ) ;
this . isLayoutReady = true ;
} ,
methods : {
@ -738,13 +353,9 @@ export default {
this . isSidebarOpen = ! this . isSidebarOpen ;
this . isNavbarOpen = this . isSidebarOpen ;
} ,
toggleNavBar ( ) {
this . isNavbarOpen = ! this . isNavbarOpen ;
} ,
/ / 展 示 表 单
showContent ( formType ) {
this . currentContent = formType ;
this . isNavbarOpen = false ;
} ,
/ / 保 存 用 户 定 义 样 式
submitForm ( ) {
@ -779,24 +390,181 @@ export default {
}
}
} ,
/ / 调 用 大 模 型 A P I
sendMessageToAI ( ) {
/ / 假 设 这 里 有 一 个 A P I 可 以 发 送 消 息 给 A I 并 接 收 回 复
this . messages . push ( { text : this . aiInput } ) ;
this . aiInput = '' ; / / 清 空 输 入 框
/ / 模 拟 A I 回 复
setTimeout ( ( ) => {
this . messages . push ( { text : '这是来自AI的回复' } ) ;
} , 1000 ) ;
/ / A I 生 成 样 式
displayMessage ( text , sender ) {
const messagesDiv = document . getElementById ( 'messages' ) ;
const messageDiv = document . createElement ( 'div' ) ;
messageDiv . className = 'message' ;
/ / 使 用 p r e 元 素 来 格 式 化 显 示 t e x t
/ / 可 以 将 c s s h t m l 代 码 内 容 新 建 一 个 p r e s e t l a n g u a g e 更 好 地 展 示 输 出
const preElement = document . createElement ( 'pre' ) ;
preElement . textContent = text ;
messageDiv . appendChild ( preElement ) ;
messagesDiv . appendChild ( messageDiv ) ;
if ( sender === 'ai' ) {
/ / T O D O 从 返 回 文 本 中 提 取 出 c s s 部 分
preElement . textContent = ` 文心一言： \ n ` + preElement . textContent ;
messageDiv . style . backgroundColor = '#bdc3c7' ;
/ / 预 览 生 成 的 样 式
this . previewStyleAtMessages ( text ) ;
}
/ / m e s s a g e s D i v . s c r o l l T o p = m e s s a g e s D i v . s c r o l l H e i g h t ;
} ,
/ / 发 送 消 息
sendMessage ( ) {
const userInput = document . getElementById ( 'userInput' ) ;
const messageText = userInput . value ;
if ( messageText . trim ( ) === '' ) return ;
/ / 构 造 聊 天 历 史
let chatHistory = [ ] ;
const messages = document . getElementById ( 'messages' ) . children ;
for ( let i = 0 ; i < messages . length ; i ++ ) {
if ( i % 4 == 0 ) {
chatHistory . push ( { Role : 'user' , Content : messages [ i ] . textContent } ) ;
} else if ( i % 4 == 1 ) {
const assistantResponse = messages [ i ] . textContent . replaceAll ( '文心一言：\n' , '' ) ;
chatHistory . push ( { Role : 'assistant' , Content : assistantResponse } ) ;
}
}
console . log ( chatHistory ) ;
/ / D i s p l a y u s e r ' s m e s s a g e
this . displayMessage ( messageText , 'user' ) ;
/ / 向 后 端 调 用 A P I 并 接 受 r e s p o n s e
/ / 根 据 m e s s a g e s 的 内 容 构 造 聊 天 历 史 列 表
/ / T O D O
/ / c o n s t c h a t _ h i s t o r y = [ ]
axios ( {
url : 'http://localhost:14514/admin/ai_layout/style_generate' ,
method : 'POST' ,
data : {
user _input : userInput . value ,
... ( chatHistory . length > 0 && { chat _history : chatHistory } ) ,
}
} )
. then ( response => {
console . log ( response ) ;
this . displayMessage ( response . data . data , 'ai' )
} )
. catch ( error => {
console . error ( 'Error:' , error ) ;
} ) ;
userInput . value = '' ;
} ,
/ / 预 览 生 成 的 样 式
previewStyleAtMessages ( style ) {
const messagesDiv = document . getElementById ( 'messages' ) ;
/ / p r e v i e w 区 域
const previewWrapper = document . createElement ( 'div' ) ;
previewWrapper . style . border = '1px solid #ccc' ;
previewWrapper . style . display = 'flow-root' ;
messagesDiv . appendChild ( previewWrapper ) ;
/ / 添 加 一 个 标 识 ' p r e v i e w ' 的 元 素
const previewLabel = document . createElement ( 'div' ) ;
previewLabel . textContent = 'preview' ;
previewWrapper . appendChild ( previewLabel ) ;
/ / 应 用 生 成 的 样 式 到 预 览 内 容
const previewStyle = document . createElement ( 'style' ) ;
/ / 对 返 回 文 本 进 行 处 理
/ / 提 取 其 中 c s s 代 码 ， 以 c s s 开 头 , 但 不 需 要 ’ c s s ‘ , 最 后 一 个 } 结 尾
const cssRegex = /```css\n([\s\S]*?)```/ ;
const cssMatch = cssRegex . exec ( style ) ;
let cssText ; / / 提 取 的 出 的 原 始 c s s 代 码 ， 用 于 保 存 到 后 端 或 进 一 步 处 理
/ / 如 果 有 多 个 c s s 代 码 ， 只 提 取 第 一 个
if ( cssMatch ) {
cssText = cssMatch [ 0 ] . replace ( 'css' , '' ) . replaceAll ( '```' , '' ) ;
} else {
cssText = style ;
}
previewStyle . textContent = cssText . replace ( /\.ck-content/g , '' ) ;
previewWrapper . appendChild ( previewStyle ) ;
/ / 预 览 的 内 容
let previewElement ;
/ / 提 取 e l e m e n t t a g 和 c l a s s n a m e
const styleRegex = /\.ck-content\s+([a-z]+)\.([a-z-]+)\s*\{/g ;
let match ;
const classNames = [ ] ;
while ( ( match = styleRegex . exec ( cssText ) ) !== null ) {
if ( ! previewElement ) {
previewElement = document . createElement ( match [ 1 ] ) ;
/ / p r e v i e w E l e m e n t . t e x t C o n t e n t = ' A a B b C c D d E e F f ' ;
const previewText = document . createElement ( 'p' ) ;
previewText . textContent = 'AaBbCcDd' ;
previewElement . appendChild ( previewText ) ;
previewWrapper . appendChild ( previewElement ) ;
}
/ / c l a s s N a m e 后 加 一 个 随 机 数 表 明 是 新 的 c l a s s
const newClassName = match [ 2 ] + "_" + Math . floor ( Math . random ( ) * 1000 ) ;
previewStyle . textContent = previewStyle . textContent . replaceAll ( match [ 2 ] , newClassName ) ;
classNames . push ( newClassName ) ;
}
if ( previewElement ) {
previewElement . className = classNames . join ( ' ' ) ;
}
/ / 创 建 按 钮 容 器
const buttonsMessageDiv = document . createElement ( 'div' ) ;
buttonsMessageDiv . className = 'preview-buttons' ;
buttonsMessageDiv . style . display = 'flex' ;
buttonsMessageDiv . style . justifyContent = 'flex-end' ;
buttonsMessageDiv . style . marginTop = '10px' ;
/ / 创 建 s a v e 按 钮
const saveButton = document . createElement ( 'el-button' ) ;
saveButton . innerHTML = '<svg t="1731509644125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6346" width="20" height="20"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-938.666667C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-3.413333 611.541334a34.944 34.944 0 0 1-9.386667 16.682666 38.058667 38.058667 0 0 1-30.72 11.050667 38.954667 38.954667 0 0 1-40.106667-27.946667L308.053333 576.426667a38.4 38.4 0 0 1 54.186667-54.229334l93.013333 93.184 190.293334-337.365333a42.666667 42.666667 0 0 1 58.88-16.426667c20.608 12.714667 27.392 39.466667 15.36 60.458667l-211.2 374.826667z" fill="#000000" p-id="6347"></path></svg>' ;
saveButton . style . marginLeft = '10px' ;
saveButton . style . width = '40px' ;
saveButton . style . height = '40px' ;
saveButton . onclick = ( ) => {
/ / s a v e
/ / T O D O 将 生 成 的 样 式 保 存 到 后 端
/ / 确 认 样 式 的 名 称 这 是 用 户 选 择 使 用 s t y l e 时 看 到 的
/ / s t y l e D e f i n i t i o n : [ n a m e : ' s t y l e N a m e ' , e l e m e n t : ' e l e m e n t ' , c l a s s e s : [ c l a s s N a m e ] ]
const styleName = prompt ( "请输入样式名称：" ) ;
/ / 构 造 s t y l e D e f i n i t o n 发 送 到 后 端
const styleDefinition = {
name : styleName ,
element : previewElement . tagName ,
classes : classNames
} ;
console . log ( styleDefinition ) ;
console . log ( cssText ) ; / / 保 存 的 c s s 代 码
} ;
/ / 创 建 c l e a r 按 钮
const clearButton = document . createElement ( 'el-button' ) ;
clearButton . innerHTML = '<svg t="1731509926355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8154" width="20" height="20"><path d="M1011.43552 981.92384l-68.4032-394.40384h23.10144c18.5856 0 33.54624-14.97088 33.54624-33.55648V306.16576c0-18.5856-14.97088-33.55648-33.54624-33.55648H648.6528V37.71392c0-18.5856-14.97088-33.55648-33.55648-33.55648H408.59648c-18.5856 0-33.55648 14.97088-33.55648 33.55648v234.88512H57.5488c-18.5856 0-33.54624 14.97088-33.54624 33.55648v247.79776c0 18.5856 14.97088 33.55648 33.54624 33.55648h23.10144L12.24704 981.9136c-0.38912 1.9456-0.512 3.87072-0.512 5.6832 0 18.5856 14.97088 33.54624 33.55648 33.54624h933.10976c1.93536 0 3.88096-0.12288 5.6832-0.512 18.31936-3.08224 30.57664-20.51072 27.35104-38.7072zM114.33984 362.94656h351.03744V94.50496h92.928v268.4416h351.03744v134.22592H114.33984V362.94656zM718.336 930.816V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H387.9424V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H112.78336l58.20416-335.55456h681.5744L910.76608 930.816H718.336z m0 0" fill="#2C2C2C" p-id="8155"></path></svg>' ;
clearButton . style . marginLeft = '10px' ;
clearButton . style . width = '40px' ;
clearButton . style . height = '40px' ;
clearButton . onclick = ( ) => {
/ / c l e a r 清 楚 当 前 所 有 的 m e s s a g e 和 按 钮
const messagesDiv = document . getElementById ( 'messages' ) ;
while ( messagesDiv . firstChild ) {
messagesDiv . removeChild ( messagesDiv . firstChild ) ;
}
} ;
/ / 显 示 按 钮
buttonsMessageDiv . appendChild ( saveButton ) ;
buttonsMessageDiv . appendChild ( clearButton ) ;
messagesDiv . appendChild ( buttonsMessageDiv ) ;
}
} ,
components : {
/ / 导 入 组 件
ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker , ElSubMenu
} ,
created ( ) {
if ( ! this . store . state . user . is _login ) {
router . push ( { name : 'login' } ) ;
created ( ) {
if ( ! this . store . state . user . is _login ) {
router . push ( { name : 'login' } ) ;
}
}
} ;
lc
6 days ago