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