<template>
|
<div class="blog-main">
|
<div class="edit-main fade">
|
<div class="edit-info">
|
<div class="edit-info-body blog-container ">
|
配置项
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>标题:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
|
<div class="edit-article-item">
|
<span>分类:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select v-model="typeId" :allowClear="true" mode="default" placeholder="日志分类"
|
:getPopupContainer="getCalendarContainer()" style="width: 100%;">
|
<a-select-option v-for="(item,index) in this.blogArticleType" :key="index"
|
:value="item.id">
|
{{ item.typeName }}
|
</a-select-option>
|
</a-select>
|
</div>
|
|
</div>
|
<div class="edit-article-meta">
|
|
<div class="edit-article-item">
|
<span>主类型:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
|
style="width: 100%;">
|
<a-select-option value="1">
|
markdown
|
</a-select-option>
|
<a-select-option value="2">
|
html
|
</a-select-option>
|
<a-select-option value="3">
|
视频
|
</a-select-option>
|
<a-select-option value="4">
|
音频
|
</a-select-option>
|
<a-select-option value="5">
|
图组
|
</a-select-option>
|
<a-select-option value="9">
|
taking
|
</a-select-option>
|
</a-select>
|
</div>
|
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>引言:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-textarea placeholder="限 700字内" style="max-height: 100px;" />
|
</div>
|
</div>
|
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>是否置顶:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
|
style="width: 100%;">
|
<a-select-option value="0">
|
否
|
</a-select-option>
|
<a-select-option value="1">
|
是
|
</a-select-option>
|
</a-select>
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>公开状态:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
|
style="width: 100%;">
|
<a-select-option value="1">
|
公开
|
</a-select-option>
|
<a-select-option value="2">
|
私人
|
</a-select-option>
|
<a-select-option value="3">
|
密码授权
|
</a-select-option>
|
</a-select>
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>授权密码:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>编辑状态:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
|
style="width: 100%;">
|
<a-select-option value="1">
|
草稿
|
</a-select-option>
|
<a-select-option value="2">
|
发布
|
</a-select-option>
|
</a-select>
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>是否允许评论:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
|
style="width: 100%;">
|
<a-select-option value="0">
|
否
|
</a-select-option>
|
<a-select-option value="1">
|
是
|
</a-select-option>
|
</a-select>
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>外链:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
<div>
|
<a-button type="primary" style="margin-right: 10px;">
|
仅保存配置(含附件)
|
</a-button>
|
<a-button type="primary">
|
创建新的日志
|
</a-button>
|
</div>
|
<div>附件</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>封面:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>图组:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>视频组:</span>
|
</div>
|
<div class="edit-article-value">
|
<a-input placeholder="限 50字内" />
|
</div>
|
</div>
|
</div>
|
|
<div class="edit-info-head blog-container ">
|
<p>基本信息</p>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>上次编辑时间:</span>
|
</div>
|
<div class="edit-article-config">
|
2022-08-27 12:12:12
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>上次更新时间:</span>
|
</div>
|
<div class="edit-article-config">
|
2022-08-27 12:12:12
|
</div>
|
</div>
|
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>归档时间:</span>
|
</div>
|
<div class="edit-article-config">
|
2022-08-27 12:12:12
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>首次发布时间:</span>
|
</div>
|
<div class="edit-article-config">
|
2022-08-27 12:12:12
|
</div>
|
</div>
|
<div class="edit-article-meta">
|
<div class="edit-article-item">
|
<span>创建时间:</span>
|
</div>
|
<div class="edit-article-config">
|
2022-08-27 12:12:12
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="edit-body">
|
<div class="edit-write">
|
<div class="edit-write-input ">
|
<a-textarea id="myInput" style="height: 100%;" v-model="text" class="defenseExpand"
|
@keydown.9.native.prevent="tabFunc" />
|
</div>
|
<div class="edit-write-preview ">
|
<div v-viewer class="markdown-body defenseExpand"
|
style="height: 100%;border: 1px solid #d9d9d9;">
|
<vue-markdown :source="text"></vue-markdown>
|
</div>
|
</div>
|
</div>
|
|
<div class="edit-tool blog-container">
|
|
<div class="edit-tool-item" style="gap: 0px;">
|
<div style="display: flex;width: 350px;">
|
<div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px;">
|
<span>日志选取:</span>
|
</div>
|
<a-select v-model="articleTypeId" mode="default" placeholder=""
|
:getPopupContainer="getCalendarContainer()" style="width: 100%;">
|
<a-select-option value="1">
|
十里平湖霜满天
|
</a-select-option>
|
<a-select-option value="2">
|
寸寸青丝愁华年
|
</a-select-option>
|
<a-select-option value="3">
|
对月形单望相护
|
</a-select-option>
|
<a-select-option value="4">
|
只羡鸳鸯不羡仙
|
</a-select-option>
|
<a-select-option value="5">
|
江水春沉沉
|
</a-select-option>
|
<a-select-option value="9">
|
上有双竹林
|
</a-select-option>
|
</a-select>
|
<a-button style="margin-left: 10px;">
|
<a-icon type="reload"></a-icon>
|
</a-button>
|
</div>
|
|
<div class="edit-tool-item" style="gap: 0px;">
|
<a-button type="primary">
|
调取当前日志内容
|
</a-button>
|
<span class="myTip">(触发前提示手动保存)</span>
|
</div>
|
|
<div style="display: flex;width: 350px;">
|
<div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px">
|
<span>草稿列表:</span>
|
</div>
|
<a-select v-model="articleTypeId" mode="default" placeholder=""
|
:getPopupContainer="getCalendarContainer()" style="width: 100%;">
|
<a-select-option value="1">
|
十里平湖霜满天
|
</a-select-option>
|
<a-select-option value="2">
|
寸寸青丝愁华年
|
</a-select-option>
|
<a-select-option value="3">
|
对月形单望相护
|
</a-select-option>
|
<a-select-option value="4">
|
只羡鸳鸯不羡仙
|
</a-select-option>
|
<a-select-option value="5">
|
江水春沉沉
|
</a-select-option>
|
<a-select-option value="9">
|
上有双竹林
|
</a-select-option>
|
</a-select>
|
<a-button style="margin-left: 10px;">
|
<a-icon type="reload"></a-icon>
|
</a-button>
|
</div>
|
|
|
<div class="edit-tool-item" style="gap: 0px;">
|
<a-button type="primary">
|
调取草稿到内容
|
</a-button>
|
<span class="myTip">(触发前提示手动保存)</span>
|
</div>
|
|
|
</div>
|
<div class="edit-tool-item">
|
<a-button type="primary">
|
同步滚动对比
|
</a-button>
|
<a-button type="primary">
|
插入自定义视频
|
</a-button>
|
<a-button type="primary">
|
插入自定义音频
|
</a-button>
|
</div>
|
<div class="edit-tool-item">
|
<a-button type="primary">
|
仅更新文本框内容到数据库
|
</a-button>
|
|
<a-button type="primary">
|
一键保存所有(含配置,草稿)
|
</a-button>
|
|
<div class="edit-tool-item" style="gap: 0px;">
|
<span class="caogaoTip myTip">auto草稿策略:如果文本框在聚焦状态改变内容后,10秒自动保存一次当前文本框内容,最多同时保存10个</span>
|
<span class="caogaoTip myTip">manual草稿策略:手动保存草稿会另外保存在一个文件夹,最多同时保存10个,手动无cd,按钮防抖1秒</span>
|
<span class="caogaoTip myTip">草稿列表是两者叠加</span>
|
</div>
|
|
</div>
|
|
<div class="edit-tool-item" style="gap: 5px;">
|
|
<a-button type="primary">
|
手动存稿
|
</a-button>
|
<span> 实时保存草稿状态：5秒前</span>
|
|
<span class="myTip">
|
自动存稿时间: <span class="myTip">草稿-auto-2022-08-27 12:12:12</span>
|
</span>
|
<span class="myTip">
|
手动存稿时间: <span class="myTip">草稿-manual-2022-08-27 12:12:15</span>
|
</span>
|
<div class="edit-tool-item" style="gap: 0px;">
|
<span class="caogaoTip myTip">保存文件夹格式</span>
|
<span class="caogaoTip myTip"> caogao/id/auto/xxx.md</span>
|
<span class="caogaoTip myTip">caogao/id/manual/xxx.md</span>
|
</div>
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
queryBlogArticleType
|
} from '../../api/blogArticleType.js'
|
|
import VueMarkdown from 'vue-markdown'
|
const exp1 =
|
"###   十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r\n\n";
|
const exp2 = "###   杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
|
|
const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "
|
|
export default {
|
components: {
|
VueMarkdown
|
},
|
beforeMount() {
|
queryBlogArticleType({}).then((res) => {
|
this.blogArticleType = res.data;
|
})
|
},
|
data() {
|
return {
|
text: exp1 + exp2 + exp3,
|
articleTypeId: "",
|
typeId: "",
|
blogArticleType: [],
|
}
|
},
|
methods: {
|
insertInputTxt(id, insertTxt) {
|
var elInput = document.getElementById(id);
|
var startPos = elInput.selectionStart
|
var endPos = elInput.selectionEnd
|
if (startPos === undefined || endPos === undefined) return
|
var txt = elInput.value
|
var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
|
elInput.value = result
|
elInput.focus()
|
elInput.selectionStart = startPos + insertTxt.length
|
elInput.selectionEnd = startPos + insertTxt.length
|
},
|
getCalendarContainer(trigger) {
|
return trigger => trigger.parentNode;
|
},
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
.defenseExpand {
|
max-height: 820px;
|
overflow: auto;
|
}
|
|
.edit-main {
|
min-height: 860px;
|
display: grid;
|
grid-template-columns: repeat(11, 1fr);
|
grid-gap: 20px;
|
}
|
|
.edit-info {
|
grid-column-start: 1;
|
grid-column-end: 4;
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.edit-info-head,
|
.edit-info-body {
|
width: 80%;
|
margin: 0px auto;
|
}
|
|
|
.edit-info-head {
|
height: 300px;
|
}
|
|
.edit-info-body {
|
height: 100%;
|
}
|
|
|
.edit-info-head,
|
.edit-info-body {
|
display: flex;
|
gap: 10px;
|
flex-direction: column;
|
}
|
|
.edit-body {
|
grid-column-start: 4;
|
grid-column-end: 12;
|
display: flex;
|
gap: 20px;
|
flex-direction: column;
|
}
|
|
.edit-tool {
|
height: 300px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-evenly;
|
|
button {
|
margin-right: 10px;
|
}
|
}
|
|
.edit-tool-item {
|
display: flex;
|
flex-direction: column;
|
padding: 10px 20px;
|
gap: 20px;
|
}
|
|
.edit-write {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
}
|
|
.edit-write-input {
|
flex: 1;
|
}
|
|
.edit-write-preview {
|
flex: 1;
|
}
|
|
.edit-article-meta {
|
display: flex;
|
}
|
|
.edit-article-item {
|
width: 140px;
|
display: flex;
|
padding-right: 10px;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
|
.edit-article-value {
|
width: 50%;
|
}
|
|
.edit-article-config {
|
width: 50%;
|
text-align: center;
|
}
|
|
.caogaoTip {
|
width: 300px;
|
white-space: initial;
|
border: 1px solid #d9d9d9;
|
}
|
</style>
|
