<Toolbar
:editor="editorRef"
:defaultConfig="toolbarConfig"
/>
<Editor
v-model="valueHtml"
:defaultConfig="editorConfig"
@onChange="handleChange"
@onCreated="handleCreated"
@onDestroyed="handleDestroyed"
@onFocus="handleFocus"
@onBlur="handleBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
历史记录
<button class="close-btn" @click="toggleHistory">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
{{ item.title }}
{{ item.date }}
</template>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.editor-layout {
position: relative;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
}
/* 固定头部样式 */
.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
padding: 0 20px;
background: #ffffff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: all 0.3s ease;
}
.back-btn {
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.back-btn:hover {
background: #f0f5ff;
transform: translateX(-2px);
}
.back-btn svg {
width: 20px;
height: 20px;
color: #4a6cf7;
}
.app-title {
flex: 1;
text-align: left;
font-size: 1.4rem;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 0.5px;
}
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.history-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 15px;
background: #f0f5ff;
border: none;
border-radius: 20px;
color: #4a6cf7;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.history-btn:hover {
background: #e1e9ff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(74, 108, 247, 0.2);
}
.history-btn svg {
width: 18px;
height: 18px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(118, 75, 162, 0.3);
}
.user-avatar:hover {
transform: scale(1.05);
box-shadow: 0 6px 15px rgba(118, 75, 162, 0.4);
}
.avatar-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
}
.avatar-placeholder svg {
width: 18px;
height: 18px;
color: white;
}
/* 固定工具栏样式 */
.fixed-toolbar {
position: fixed;
top: 60px; /* 在头部下方 */
left: 0;
right: 0;
z-index: 999;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid #eaeef5;
padding: 0 10px;
}
/* 编辑器容器样式 */
.editor-container {
margin-top: 110px; /* 头部高度 + 工具栏高度 */
height: calc(100vh - 150px);
/*overflow-y: auto;*/
padding: 20px;
background: white;
border-radius: 12px;
/*margin-left: 20px;
margin-right: 20px;*/
margin-left: auto;
margin-right: auto;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
width: 1000px; /* 固定宽度 */
}
/* 历史记录侧边栏 */
.history-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 380px;
height: 100vh;
background: white;
z-index: 2000;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
}
.history-sidebar.active {
right: 0;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #eee;
}
.sidebar-header h2 {
color: #333;
font-weight: 600;
}
.close-btn {
background: none;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.close-btn:hover {
background: #f5f7fa;
}
.close-btn svg {
width: 20px;
height: 20px;
color: #666;
}
.history-list {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.history-item {
padding: 15px;
border-radius: 8px;
margin-bottom: 10px;
background: #f9fbfd;
transition: all 0.2s ease;
cursor: pointer;
border-left: 3px solid #4a6cf7;
}
.history-item:hover {
background: #edf3ff;
transform: translateX(5px);
}
.history-title {
font-weight: 500;
color: #1a1a1a;
margin-bottom: 5px;
}
.history-date {
font-size: 0.85rem;
color: #666;
}
/* 历史记录遮罩 */
.sidebar-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1500;
backdrop-filter: blur(2px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.app-header {
padding: 0 10px;
}
.app-title {
font-size: 1.1rem;
}
.history-btn span {
display: none;
}
.editor-container {
margin-left: 10px;
margin-right: 10px;
padding: 15px;
}
.history-sidebar {
width: 85%;
}
}
/* 滚动条美化 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.page-container {
overflow-y: auto; /* 启用页面级滚动 */
}
.gradient-text {
/* 渐变背景（与头像的渐变颜色保持一致） */
background: linear-gradient(135deg, #00ffe9 0%, #e70fff 100%);
/* 将背景裁剪为文字形状（兼容 Safari/Chrome） */
-webkit-background-clip: text;
background-clip: text;
/* 文字透明，显示背景渐变 */
color: transparent;
/* 可选：增强文字重量，让渐变更明显 */
font-weight: 700;
}
</style>
写一个保存按钮用于向后端发送保存请求
立即下载 
sanitize-cep工具：规范巴西CEP格式的JavaScript库 （9个子文件） 
sanitize-cep.js 847B
我的内容管理
展开
