774 lines
20 KiB
Vue
774 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<div class="editor-page" v-loading="addLoading">
|
|||
|
|
<!-- 页面头部 -->
|
|||
|
|
<div class="page-header">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<div class="title-section">
|
|||
|
|
<i class="el-icon-edit-outline title-icon"></i>
|
|||
|
|
<h1 class="page-title">wangeditor 富文本文档编辑器</h1>
|
|||
|
|
</div>
|
|||
|
|
<p class="page-description">使用富文本编辑器创建和管理文档，支持文本格式化、链接、列表等功能</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-actions">
|
|||
|
|
<el-button type="info" icon="el-icon-view" @click="handlePreview">
|
|||
|
|
预览文档
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="success" icon="el-icon-document" @click="handleSave">
|
|||
|
|
保存文档
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="warning" icon="el-icon-upload2" @click="handelAddDocument">
|
|||
|
|
修改文档
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 文档配置区域 -->
|
|||
|
|
<div class="config-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<i class="el-icon-setting"></i>
|
|||
|
|
<span>文档配置</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="config-content">
|
|||
|
|
<div class="config-row">
|
|||
|
|
<div class="config-item">
|
|||
|
|
<label class="required">文档标题</label>
|
|||
|
|
<el-input
|
|||
|
|
v-model="addParams.title"
|
|||
|
|
placeholder="请输入文档标题"
|
|||
|
|
@input="handleAutoSave"
|
|||
|
|
size="medium"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="config-item">
|
|||
|
|
<label class="required">文档类型</label>
|
|||
|
|
<el-select
|
|||
|
|
v-model="addParams.type"
|
|||
|
|
placeholder="请选择文档类型"
|
|||
|
|
@change="handleAutoSave"
|
|||
|
|
size="medium"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in TypeList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value">
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 编辑器区域 -->
|
|||
|
|
<div class="editor-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<i class="el-icon-edit-outline"></i>
|
|||
|
|
<span>富文本编辑器</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="editor-container">
|
|||
|
|
<Toolbar
|
|||
|
|
:editor="editor"
|
|||
|
|
:defaultConfig="toolbarConfig"
|
|||
|
|
:mode="mode"
|
|||
|
|
style="border-bottom: 1px solid #ccc"
|
|||
|
|
/>
|
|||
|
|
<Editor
|
|||
|
|
style="height: 600px; overflow-y: hidden;"
|
|||
|
|
v-model="addParams.content"
|
|||
|
|
:defaultConfig="editorConfig"
|
|||
|
|
:mode="mode"
|
|||
|
|
@onCreated="onCreated"
|
|||
|
|
@onChange="handleEditorChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 预览文档对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
title="文档预览"
|
|||
|
|
:visible.sync="previewVisible"
|
|||
|
|
width="80%"
|
|||
|
|
:before-close="handlePreviewClose"
|
|||
|
|
class="preview-dialog"
|
|||
|
|
>
|
|||
|
|
<div class="preview-content">
|
|||
|
|
<div v-html="addParams.content"></div>
|
|||
|
|
|
|||
|
|
<div v-if="!addParams.content" class="preview-empty">
|
|||
|
|
<i class="el-icon-document"></i>
|
|||
|
|
<p>暂无内容</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="previewVisible = false">关闭</el-button>
|
|||
|
|
<el-button type="primary" @click="handlePrintPreview">打印预览</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Vue from 'vue'
|
|||
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|||
|
|
import { updateDocument } from '../../../api/documentManagement'
|
|||
|
|
import Index from './index'
|
|||
|
|
export default Vue.extend({
|
|||
|
|
components: { Editor, Toolbar },
|
|||
|
|
mixins: [Index],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
editor: null,
|
|||
|
|
html: '<p>hello</p>',
|
|||
|
|
toolbarConfig: {
|
|||
|
|
excludeKeys: [],
|
|||
|
|
insertKeys: {
|
|||
|
|
index: 0,
|
|||
|
|
keys: ['bold', 'italic', 'underline', 'through', 'code', 'sub', 'sup', 'clearStyle']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
editorConfig: {
|
|||
|
|
placeholder: '请在此输入文档内容...',
|
|||
|
|
MENU_CONF: {}
|
|||
|
|
},
|
|||
|
|
mode: 'default',
|
|||
|
|
addParams:{
|
|||
|
|
title:'',
|
|||
|
|
content:'',
|
|||
|
|
type:'',
|
|||
|
|
lang:"",
|
|||
|
|
imageUrl: '',
|
|||
|
|
},
|
|||
|
|
lastSaveTime: '',
|
|||
|
|
autoSaveTimer: null,
|
|||
|
|
isSaving: false, // 新增：控制自动保存提示的显示
|
|||
|
|
previewVisible: false, // 新增：控制预览对话框的显示
|
|||
|
|
currentTime: '', // 新增：记录预览时间
|
|||
|
|
TypeList:[
|
|||
|
|
{
|
|||
|
|
value:"1",
|
|||
|
|
label:"服务条款"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value:"2",
|
|||
|
|
label:"api文档"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value:"3",
|
|||
|
|
label:"挖矿教程"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value:"0",
|
|||
|
|
label:"其他"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
addLoading:false,
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async fetchUpdateDocument(params){
|
|||
|
|
this.setLoading('addLoading', true);
|
|||
|
|
const res = await updateDocument(params)
|
|||
|
|
if (res && res.code == 200) {
|
|||
|
|
this.$message.success(this.$t('backendSystem.updateSuccess'));
|
|||
|
|
this.$router.push({ path: `/${this.$i18n.locale}/documentManagement` })
|
|||
|
|
}
|
|||
|
|
this.setLoading('addLoading', false);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onCreated(editor) {
|
|||
|
|
this.editor = Object.seal(editor)
|
|||
|
|
|
|||
|
|
// 编辑器创建后，如果有恢复的内容，设置到编辑器中
|
|||
|
|
if (this.addParams.content) {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
editor.setHtml(this.addParams.content)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handelAddDocument(){
|
|||
|
|
if (!this.addParams.type) {
|
|||
|
|
this.$message({
|
|||
|
|
message: '请填写文档类型',
|
|||
|
|
type: 'warning',
|
|||
|
|
duration: 4000,
|
|||
|
|
showClose: true
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.addParams.lang = this.$i18n.locale
|
|||
|
|
this.addParams.id = this.$route.query.id
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.fetchUpdateDocument(this.addParams)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handlePreview() {
|
|||
|
|
this.previewVisible = true
|
|||
|
|
this.currentTime = new Date().toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit',
|
|||
|
|
second: '2-digit'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handlePreviewClose() {
|
|||
|
|
this.previewVisible = false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handlePrintPreview() {
|
|||
|
|
const printWindow = window.open('', '_blank');
|
|||
|
|
if (printWindow) {
|
|||
|
|
printWindow.document.write(`
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>${this.addParams.title || '文档预览'}</title>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: 'Arial', sans-serif;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
.preview-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 50px 0;
|
|||
|
|
color: #95a5a6;
|
|||
|
|
}
|
|||
|
|
.preview-empty i {
|
|||
|
|
font-size: 40px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
${this.addParams.content || '<div class="preview-empty"><i>📄</i><p>暂无内容</p></div>'}
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
`);
|
|||
|
|
printWindow.document.close();
|
|||
|
|
printWindow.print();
|
|||
|
|
printWindow.close();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleSave() {
|
|||
|
|
this.manualSave()
|
|||
|
|
this.$message({
|
|||
|
|
message: '内容已保存到本地，请尽快发布，关闭页面可能丢失内容',
|
|||
|
|
type: 'success',
|
|||
|
|
duration: 4000,
|
|||
|
|
showClose: true
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleEditorChange() {
|
|||
|
|
this.handleAutoSave()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleAutoSave() {
|
|||
|
|
// 显示正在保存状态
|
|||
|
|
this.isSaving = true
|
|||
|
|
|
|||
|
|
if (this.autoSaveTimer) {
|
|||
|
|
clearTimeout(this.autoSaveTimer)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.autoSaveTimer = setTimeout(() => {
|
|||
|
|
this.saveToLocalStorage()
|
|||
|
|
}, 1500) // 减少到1.5秒，提高响应速度
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
saveToLocalStorage() {
|
|||
|
|
try {
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const saveData = {
|
|||
|
|
title: this.addParams.title,
|
|||
|
|
content: this.addParams.content,
|
|||
|
|
type: this.addParams.type,
|
|||
|
|
timestamp: new Date().toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit',
|
|||
|
|
second: '2-digit'
|
|||
|
|
}),
|
|||
|
|
lastModified: Date.now()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
localStorage.setItem('editor_draft', JSON.stringify(saveData))
|
|||
|
|
this.lastSaveTime = saveData.timestamp
|
|||
|
|
this.isSaving = false
|
|||
|
|
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('自动保存失败:', error)
|
|||
|
|
this.isSaving = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
loadFromLocalStorage() {
|
|||
|
|
try {
|
|||
|
|
const savedData = localStorage.getItem('editor_draft')
|
|||
|
|
if (savedData) {
|
|||
|
|
const data = JSON.parse(savedData)
|
|||
|
|
|
|||
|
|
// 检查数据是否过期（7天）
|
|||
|
|
const isExpired = Date.now() - (data.lastModified || 0) > 7 * 24 * 60 * 60 * 1000
|
|||
|
|
|
|||
|
|
if (isExpired) {
|
|||
|
|
console.log('本地数据已过期，清除缓存')
|
|||
|
|
localStorage.removeItem('editor_draft')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用 $nextTick 确保 DOM 更新后再设置内容
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.addParams.title = data.title || ''
|
|||
|
|
this.addParams.content = data.content || ''
|
|||
|
|
this.addParams.type = data.type || '1'
|
|||
|
|
this.lastSaveTime = data.timestamp || ''
|
|||
|
|
|
|||
|
|
// 如果编辑器已经创建，直接设置内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.editor.setHtml(data.content || '')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('恢复数据失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
clearDraft() {
|
|||
|
|
localStorage.removeItem('editor_draft')
|
|||
|
|
this.lastSaveTime = ''
|
|||
|
|
this.isSaving = false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 新增：手动保存方法
|
|||
|
|
manualSave() {
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
this.saveToLocalStorage()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 页面卸载前处理
|
|||
|
|
handleBeforeUnload(event) {
|
|||
|
|
// 自动保存，不提示用户
|
|||
|
|
if (this.addParams.title || this.addParams.content) {
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
this.saveToLocalStorage()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 新增：获取文档类型名称
|
|||
|
|
getDocumentTypeName(type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case '1':
|
|||
|
|
return '服务条款';
|
|||
|
|
case '2':
|
|||
|
|
return 'api文档';
|
|||
|
|
case '3':
|
|||
|
|
return '挖矿教程';
|
|||
|
|
case '0':
|
|||
|
|
return '其他';
|
|||
|
|
default:
|
|||
|
|
return '未知类型';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
// 先恢复数据
|
|||
|
|
this.loadFromLocalStorage()
|
|||
|
|
|
|||
|
|
// 添加页面卸载前的保存保护
|
|||
|
|
window.addEventListener('beforeunload', this.handleBeforeUnload)
|
|||
|
|
|
|||
|
|
// 延迟设置默认内容，避免覆盖恢复的数据
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (!this.addParams.content) {
|
|||
|
|
this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
|
|||
|
|
}
|
|||
|
|
}, 1500)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
this.saveToLocalStorage()
|
|||
|
|
|
|||
|
|
// 移除事件监听器
|
|||
|
|
window.removeEventListener('beforeunload', this.handleBeforeUnload)
|
|||
|
|
|
|||
|
|
if (this.autoSaveTimer) {
|
|||
|
|
clearTimeout(this.autoSaveTimer)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const editor = this.editor
|
|||
|
|
if (editor == null) return
|
|||
|
|
editor.destroy()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
beforeRouteLeave(to, from, next) {
|
|||
|
|
// 确保获取最新的编辑器内容
|
|||
|
|
if (this.editor) {
|
|||
|
|
this.addParams.content = this.editor.getHtml()
|
|||
|
|
}
|
|||
|
|
this.saveToLocalStorage()
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 页面整体样式 */
|
|||
|
|
.editor-page {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
min-height: 60vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页面头部样式 */
|
|||
|
|
.page-header {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: white;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-left {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title-icon {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
color: #ffd700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin: 0;
|
|||
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-description {
|
|||
|
|
font-size: 16px;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
margin: 0;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-actions .el-button {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-actions .el-button:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 配置区域样式 */
|
|||
|
|
.config-section {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 24px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
padding-bottom: 16px;
|
|||
|
|
border-bottom: 2px solid #f8f9fa;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header i {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
color: #667eea;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-row {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-item label {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #495057;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.required::after {
|
|||
|
|
content: '*';
|
|||
|
|
color: #e74c3c;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编辑器区域样式 */
|
|||
|
|
.editor-section {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 24px;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.editor-container {
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: white;
|
|||
|
|
min-height: 650px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设置编辑器高度 */
|
|||
|
|
.editor-container .w-e-text-container {
|
|||
|
|
height: 600px !important;
|
|||
|
|
min-height: 600px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 编辑器内容区域样式 */
|
|||
|
|
.editor-container .w-e-text {
|
|||
|
|
height: 600px !important;
|
|||
|
|
min-height: 600px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 保存状态样式 */
|
|||
|
|
.save-status {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
background: #67c23a;
|
|||
|
|
color: white;
|
|||
|
|
padding: 12px 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
animation: slideIn 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideIn {
|
|||
|
|
from {
|
|||
|
|
transform: translateX(100%);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
transform: translateX(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 预览对话框样式 */
|
|||
|
|
.preview-dialog .el-dialog__body {
|
|||
|
|
padding: 20px;
|
|||
|
|
max-height: 70vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__header {
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-bottom: 1px solid #ebeef5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__header .el-dialog__title {
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer {
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-top: 1px solid #ebeef5;
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer .dialog-footer {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer .dialog-footer .el-button {
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer .dialog-footer .el-button:first-child {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer .dialog-footer .el-button:last-child {
|
|||
|
|
background-color: #667eea;
|
|||
|
|
border-color: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-dialog .el-dialog__footer .dialog-footer .el-button:last-child:hover {
|
|||
|
|
background-color: #5a67d8;
|
|||
|
|
border-color: #5a67d8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 预览内容样式 - 简化版本 */
|
|||
|
|
.preview-content {
|
|||
|
|
background: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-empty {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 50px 20px;
|
|||
|
|
color: #95a5a6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-empty i {
|
|||
|
|
font-size: 48px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-empty p {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.editor-page {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-actions {
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-row {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-status {
|
|||
|
|
bottom: 10px;
|
|||
|
|
right: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Element UI 组件样式优化 */
|
|||
|
|
.el-input, .el-select {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input__inner, .el-select .el-input__inner {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input__inner:focus, .el-select .el-input__inner:focus {
|
|||
|
|
border-color: #667eea;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-tag {
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style src="@wangeditor/editor/dist/css/style.css"></style>
|