@ -13,19 +13,43 @@
< / div >
< / div >
< / div >
< el -button type = "primary" @click ="toggleSidebar()" style = "display:none"
id = "toggleSidebarButton" > 打开 / 关闭侧边栏 < / e l - b u t t o n >
< div class = "sidebar" : class = "{ 'active': isSidebarOpen }" >
<!-- 侧边栏内容 -- >
< el -menu default -active = " 1 " class = "el-menu-vertical-demo sidebar-menu" >
< el -menu -item index = "1" @click ="showForm('manual')" >
< span > 手动输入 < / span >
< / e l - m e n u - i t e m >
< el -menu -item index = "2" @click ="showForm('ai')" >
< span > AI 输入 < / span >
< / e l - m e n u - i t e m >
< / e l - m e n u >
< div v-if ="currentForm === 'manual'" class="p-3" >
< / div >
< el -button type = "primary" @click ="toggleSidebar()" style = "display:none"
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" >
< 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 >
< el -menu -item index = "1-3" @click ="showContent('summary')" > 摘 要 < / el -menu -item >
< 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" >
< 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" >
< 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 >
< / e l - s u b - m e n u >
< / 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 >
< div v-if ="currentContent === 'summary'" > 摘 要 内 容 < / div >
< div v-if ="currentContent === 'edit'" > 修 改 内 容 < / div >
< 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" >
<!-- 手动输入表单 -- >
< el -form @submit.prevent ="submitForm" >
< el -col :span ="30" >
@ -60,12 +84,16 @@
< el -col :span ="12" >
< el -select v-model ="formData.fontSize" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "12px" style = "font-size: 12px;" > 12 px < / e l - o p t i o n >
< el -option value = "14px" style = "font-size: 14px;" > 14 px < / e l - o p t i o n >
< el -option value = "16px" style = "font-size: 16px;" > 16 px < / e l - o p t i o n >
< el -option value = "18px" style = "font-size: 18px;" > 18 px < / e l - o p t i o n >
< el -option value = "20px" style = "font-size: 20px;" > 16 px < / e l - o p t i o n >
< el -option value = "22px" style = "font-size: 22px;" > 18 px < / e l - o p t i o n >
< el -option value = "29.3px" style = "font-size: 29.3px;" > 二号 < / e l - o p t i o n >
< el -option value = "24px" style = "font-size: 24px;" > 小二 < / e l - o p t i o n >
< el -option value = "21.3px" style = "font-size: 21.3px;" > 三号 < / e l - o p t i o n >
< el -option value = "20px" style = "font-size: 20px;" > 小三 < / e l - o p t i o n >
< el -option value = "18.6px" style = "font-size: 18.6px;" > 四号 < / e l - o p t i o n >
< el -option value = "16px" style = "font-size: 16px;" > 小四 < / e l - o p t i o n >
< el -option value = "14px" style = "font-size: 14px;" > 五号 < / e l - o p t i o n >
< el -option value = "12px" style = "font-size: 12px;" > 小五 < / e l - o p t i o n >
< el -option value = "10px" style = "font-size: 10px;" > 六号 < / e l - o p t i o n >
< el -option value = "8.6px" style = "font-size: 8.6px;" > 小六 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - c o l >
< el -col :span ="12" >
@ -89,7 +117,8 @@
< el -option value = "Helvetica"
style = "font-family: Helvetica;" > Helvetica < / e l - o p t i o n >
< el -option value = "Times New Roman"
style = "font-family: 'Times New Roman';" > Times New Roman < / e l - o p t i o n >
style = "font-family: 'Times New Roman';" > Times
New Roman < / e l - o p t i o n >
< el -option value = "serif" style = "font-family: serif;" > serif < / e l - o p t i o n >
< el -option value = "sans-serif"
style = "font-family: sans-serif;" > sans - serif < / e l - o p t i o n >
@ -169,20 +198,24 @@
< el -form -item label = "字体阴影:" >
< el -select v-model ="formData.textShadow" @change="updatePreview" >
< el -option value = "" > 请选择 < / e l - o p t i o n >
< el -option value = "2px 2px 4px rgba(0,0,0,0.5)"
style = "text-shadow: 2px 2px 4px rgba(0,0,0,0.5);" > 阴影1 < / e l - o p t i o n >
< el -option value = "4px 4px 8px rgba(0,0,0,0.5)"
style = "text-shadow: 4px 4px 8px rgba(0,0,0,0.5);" > 阴影2 < / e l - o p t i o n >
< el -option value = "6px 6px 12px rgba(0,0,0,0.5)"
style = "text-shadow: 6px 6px 12px rgba(0,0,0,0.5);" > 阴影3 < / e l - o p t i o n >
< el -option value = "-1px -1px 1px #aaa"
style = "text-shadow: -1px -1px 1px #aaa;" > 阴影4 < / e l - o p t i o n >
< el -option value = "0px 4px 1px rgba(0, 0, 0, 0.5)"
style = "text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.5);" > 阴影5 < / e l - o p t i o n >
< el -option value = "4px 4px 5px rgba(0, 0, 0, 0.7)"
style = "text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.7);" > 阴影6 < / e l - o p t i o n >
< el -option value = "0px 0px 7px rgba(0, 0, 0, 0.4)"
style = "text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);" > 阴影7 < / e l - o p t i o n >
< el -option value = "1px 1px 2px pink"
style = "text-shadow: 1px 1px 2px pink;" > 阴影1 < / e l - o p t i o n >
< el -option value = "#FC0 1px 0 10px"
style = "text-shadow: #FC0 1px 0 10px;" > 阴影2 < / e l - o p t i o n >
< el -option value = "1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue"
style = "text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;" > 阴影3 < / e l - o p t i o n >
< el -option value = "2px 2px #777"
style = "text-shadow: 2px 2px #777;" > 阴影4 < / e l - o p t i o n >
< el -option value = "-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee"
style = "text-shadow: -1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;" > 阴影5 < / e l - o p t i o n >
< el -option
value = "1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF"
style = "text-shadow: 1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;" > 阴影6 < / e l - o p t i o n >
< el -option value = "5px 5px #666,7px 7px #eee"
style = "text-shadow: 5px 5px #666,7px 7px #eee;" > 阴影7 < / e l - o p t i o n >
< el -option
value = "0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50"
style = "text-shadow: 0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;" > 阴影8 < / e l - o p t i o n >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
@ -236,7 +269,7 @@
Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
< / div >
< / div >
< div v-if ="current Form === 'ai'" class="p-3">
< div v-if ="current Content === 'ai'" class="p-3">
<!-- AI对话框 -- >
< div class = "chat-box border rounded p-3" >
< p v-for ="message in messages" :key="message.id" class="mb-1" > {{ message.text }} < / p >
@ -245,15 +278,87 @@
< / div >
< / div >
< / div >
< / div >
< / 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 {
/ / D e c o u p l e d E d i t o r ,
ClassicEditor ,
DecoupledEditor
/ / C l a s s i c E d i t o r
AccessibilityHelp ,
Alignment ,
Autoformat ,
@ -326,7 +431,7 @@ import {
} from 'ckeditor5' ;
import translations from 'ckeditor5/translations/zh-cn.js' ;
import 'ckeditor5/ckeditor5.css' ;
import { ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker } from 'element-plus' ;
import { ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker , ElSubMenu } from 'element-plus' ;
/ / 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'
@ -337,12 +442,13 @@ export default {
return {
isLayoutReady : false ,
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 .
/ / e d i t o r : D e c o u p l e d E d i t o r
editor : ClassicEditor
editor : DecoupledEditor ,
/ / e d i t o r : C l a s s i c E d i t o r
isSidebarOpen : false , / / 侧 边 栏 是 否 打 开
currentForm : '' , / / 当 前 侧 边 栏 显 示 的 表 单
isNavbarOpen : false , / / 侧 边 栏 是 否 打 开
currentContent : '' , / / 当 前 侧 边 栏 显 示 的 表 单
formData : {
fontFamily : '' ,
color : '' ,
@ -627,10 +733,15 @@ export default {
/ / 打 开 / 关 闭 侧 边 栏
toggleSidebar ( ) {
this . isSidebarOpen = ! this . isSidebarOpen ;
this . isNavbarOpen = this . isSidebarOpen ;
} ,
toggleNavBar ( ) {
this . isNavbarOpen = ! this . isNavbarOpen ;
} ,
/ / 展 示 表 单
showForm ( formType ) {
this . currentForm = formType ;
showContent ( formType ) {
this . currentContent = formType ;
this . isNavbarOpen = false ;
} ,
/ / 保 存 用 户 定 义 样 式
submitForm ( ) {
@ -678,7 +789,7 @@ export default {
} ,
components : {
/ / 导 入 组 件
ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker
ElButton , ElInput , ElSelect , ElOption , ElForm , ElFormItem , ElMenu , ElMenuItem , ElColorPicker , ElSubMenu
}
} ;
< / script >
