blog/blog-facade.git

inleft

2022-08-30 afab3a98a65f7fb4f342251238ab3c329e4242dd

commit \| author \| age
fa1bd9	1	<template>
I	2	<div class="blog-main">
afab3a	3	<MyOwO v-if="1==1"></MyOwO>
I	4	<div v-else class="edit-main fade">
fa1bd9	5	<div class="edit-info">
1b6f1e	6	<div class="edit-info-body blog-container ">
I	7	配置项
	8	<div class="edit-article-meta">
	9	<div class="edit-article-item">
	10	<span>标题:</span>
	11	</div>
	12	<div class="edit-article-value">
	13	<a-input placeholder="限 50字内" />
	14	</div>
	15	</div>
	16	<div class="edit-article-meta">
	17
	18	<div class="edit-article-item">
	19	<span>分类:</span>
	20	</div>
	21	<div class="edit-article-value">
	22	<a-select v-model="typeId" :allowClear="true" mode="default" placeholder="日志分类"
	23	:getPopupContainer="getCalendarContainer()" style="width: 100%;">
	24	<a-select-option v-for="(item,index) in this.blogArticleType" :key="index"
	25	:value="item.id">
	26	{{ item.typeName }}
	27	</a-select-option>
	28	</a-select>
	29	</div>
	30
	31	</div>
	32	<div class="edit-article-meta">
	33
	34	<div class="edit-article-item">
	35	<span>主类型:</span>
	36	</div>
	37	<div class="edit-article-value">
	38	<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
	39	style="width: 100%;">
	40	<a-select-option value="1">
	41	markdown
	42	</a-select-option>
	43	<a-select-option value="2">
	44	html
	45	</a-select-option>
	46	<a-select-option value="3">
	47	视频
	48	</a-select-option>
	49	<a-select-option value="4">
	50	音频
	51	</a-select-option>
	52	<a-select-option value="5">
	53	图组
	54	</a-select-option>
	55	<a-select-option value="9">
	56	taking
	57	</a-select-option>
	58	</a-select>
	59	</div>
	60
	61	</div>
	62
	63	<div class="edit-article-meta">
	64	<div class="edit-article-item">
	65	<span>引言:</span>
	66	</div>
	67	<div class="edit-article-value">
	68	<a-textarea placeholder="限 700字内" style="max-height: 100px;" />
	69	</div>
	70	</div>
	71
	72
	73	<div class="edit-article-meta">
	74	<div class="edit-article-item">
	75	<span>是否置顶:</span>
	76	</div>
	77	<div class="edit-article-value">
	78	<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
	79	style="width: 100%;">
	80	<a-select-option value="0">
	81	否
	82	</a-select-option>
	83	<a-select-option value="1">
	84	是
	85	</a-select-option>
	86	</a-select>
	87	</div>
	88	</div>
	89
	90	<div class="edit-article-meta">
	91	<div class="edit-article-item">
	92	<span>公开状态:</span>
	93	</div>
	94	<div class="edit-article-value">
	95	<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
	96	style="width: 100%;">
	97	<a-select-option value="1">
	98	公开
	99	</a-select-option>
	100	<a-select-option value="2">
	101	私人
	102	</a-select-option>
	103	<a-select-option value="3">
	104	密码授权
	105	</a-select-option>
	106	</a-select>
	107	</div>
	108	</div>
	109
	110	<div class="edit-article-meta">
	111	<div class="edit-article-item">
	112	<span>授权密码:</span>
	113	</div>
	114	<div class="edit-article-value">
	115	<a-input placeholder="限 50字内" />
	116	</div>
	117	</div>
	118	<div class="edit-article-meta">
	119	<div class="edit-article-item">
	120	<span>编辑状态:</span>
	121	</div>
	122	<div class="edit-article-value">
	123	<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
	124	style="width: 100%;">
	125	<a-select-option value="1">
	126	草稿
	127	</a-select-option>
	128	<a-select-option value="2">
	129	发布
	130	</a-select-option>
	131	</a-select>
	132	</div>
	133	</div>
	134
	135	<div class="edit-article-meta">
	136	<div class="edit-article-item">
	137	<span>是否允许评论:</span>
	138	</div>
	139	<div class="edit-article-value">
	140	<a-select mode="default" placeholder="" :getPopupContainer="getCalendarContainer()"
	141	style="width: 100%;">
	142	<a-select-option value="0">
	143	否
	144	</a-select-option>
	145	<a-select-option value="1">
	146	是
	147	</a-select-option>
	148	</a-select>
	149	</div>
	150	</div>
	151
	152	<div class="edit-article-meta">
	153	<div class="edit-article-item">
	154	<span>外链:</span>
	155	</div>
	156	<div class="edit-article-value">
	157	<a-input placeholder="限 50字内" />
	158	</div>
	159	</div>
	160	<div>
	161	<a-button type="primary" style="margin-right: 10px;">
	162	仅保存配置(含附件)
	163	</a-button>
	164	<a-button type="primary">
	165	创建新的日志
	166	</a-button>
	167	</div>
	168	<div>附件</div>
	169	<div class="edit-article-meta">
	170	<div class="edit-article-item">
	171	<span>封面:</span>
	172	</div>
	173	<div class="edit-article-value">
	174	<a-input placeholder="限 50字内" />
	175	</div>
	176	</div>
	177	<div class="edit-article-meta">
	178	<div class="edit-article-item">
	179	<span>图组:</span>
	180	</div>
	181	<div class="edit-article-value">
	182	<a-input placeholder="限 50字内" />
	183	</div>
	184	</div>
	185	<div class="edit-article-meta">
	186	<div class="edit-article-item">
	187	<span>视频组:</span>
	188	</div>
	189	<div class="edit-article-value">
	190	<a-input placeholder="限 50字内" />
	191	</div>
	192	</div>
fa1bd9	193	</div>
1b6f1e	194
I	195	<div class="edit-info-head blog-container ">
	196	<p>基本信息</p>
	197
	198	<div class="edit-article-meta">
	199	<div class="edit-article-item">
	200	<span>上次编辑时间:</span>
	201	</div>
	202	<div class="edit-article-config">
	203	2022-08-27 12:12:12
	204	</div>
	205	</div>
	206
	207	<div class="edit-article-meta">
	208	<div class="edit-article-item">
	209	<span>上次更新时间:</span>
	210	</div>
	211	<div class="edit-article-config">
	212	2022-08-27 12:12:12
	213	</div>
	214	</div>
	215
	216	<div class="edit-article-meta">
	217	<div class="edit-article-item">
	218	<span>归档时间:</span>
	219	</div>
	220	<div class="edit-article-config">
	221	2022-08-27 12:12:12
	222	</div>
	223	</div>
	224	<div class="edit-article-meta">
	225	<div class="edit-article-item">
	226	<span>首次发布时间:</span>
	227	</div>
	228	<div class="edit-article-config">
	229	2022-08-27 12:12:12
	230	</div>
	231	</div>
	232	<div class="edit-article-meta">
	233	<div class="edit-article-item">
	234	<span>创建时间:</span>
	235	</div>
	236	<div class="edit-article-config">
	237	2022-08-27 12:12:12
	238	</div>
	239	</div>
fa1bd9	240	</div>
I	241	</div>
1b6f1e	242	<div class="edit-body">
I	243	<div class="edit-write">
	244	<div class="edit-write-input ">
	245	<a-textarea id="myInput" style="height: 100%;" v-model="text" class="defenseExpand"
	246	@keydown.9.native.prevent="tabFunc" />
	247	</div>
	248	<div class="edit-write-preview ">
	249	<div v-viewer class="markdown-body defenseExpand"
	250	style="height: 100%;border: 1px solid #d9d9d9;">
	251	<vue-markdown :source="text"></vue-markdown>
	252	</div>
	253	</div>
	254	</div>
	255
	256	<div class="edit-tool blog-container">
	257
	258	<div class="edit-tool-item" style="gap: 0px;">
	259	<div style="display: flex;width: 350px;">
	260	<div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px;">
	261	<span>日志选取:</span>
	262	</div>
	263	<a-select v-model="articleTypeId" mode="default" placeholder=""
	264	:getPopupContainer="getCalendarContainer()" style="width: 100%;">
	265	<a-select-option value="1">
	266	十里平湖霜满天
	267	</a-select-option>
	268	<a-select-option value="2">
	269	寸寸青丝愁华年
	270	</a-select-option>
	271	<a-select-option value="3">
	272	对月形单望相护
	273	</a-select-option>
	274	<a-select-option value="4">
	275	只羡鸳鸯不羡仙
	276	</a-select-option>
	277	<a-select-option value="5">
	278	江水春沉沉
	279	</a-select-option>
	280	<a-select-option value="9">
	281	上有双竹林
	282	</a-select-option>
	283	</a-select>
	284	<a-button style="margin-left: 10px;">
	285	<a-icon type="reload"></a-icon>
	286	</a-button>
	287	</div>
	288
	289	<div class="edit-tool-item" style="gap: 0px;">
	290	<a-button type="primary">
	291	调取当前日志内容
	292	</a-button>
	293	<span class="myTip">(触发前提示手动保存)</span>
	294	</div>
	295
	296	<div style="display: flex;width: 350px;">
	297	<div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 5px">
	298	<span>草稿列表:</span>
	299	</div>
	300	<a-select v-model="articleTypeId" mode="default" placeholder=""
	301	:getPopupContainer="getCalendarContainer()" style="width: 100%;">
	302	<a-select-option value="1">
	303	十里平湖霜满天
	304	</a-select-option>
	305	<a-select-option value="2">
	306	寸寸青丝愁华年
	307	</a-select-option>
	308	<a-select-option value="3">
	309	对月形单望相护
	310	</a-select-option>
	311	<a-select-option value="4">
	312	只羡鸳鸯不羡仙
	313	</a-select-option>
	314	<a-select-option value="5">
	315	江水春沉沉
	316	</a-select-option>
	317	<a-select-option value="9">
	318	上有双竹林
	319	</a-select-option>
	320	</a-select>
	321	<a-button style="margin-left: 10px;">
	322	<a-icon type="reload"></a-icon>
	323	</a-button>
	324	</div>
	325
	326
	327	<div class="edit-tool-item" style="gap: 0px;">
	328	<a-button type="primary">
	329	调取草稿到内容
	330	</a-button>
	331	<span class="myTip">(触发前提示手动保存)</span>
	332	</div>
	333
	334
	335	</div>
	336	<div class="edit-tool-item">
	337	<a-button type="primary">
	338	同步滚动对比
	339	</a-button>
	340	<a-button type="primary">
	341	插入自定义视频
	342	</a-button>
	343	<a-button type="primary">
	344	插入自定义音频
	345	</a-button>
	346	</div>
	347	<div class="edit-tool-item">
	348	<a-button type="primary">
	349	仅更新文本框内容到数据库
	350	</a-button>
	351
	352	<a-button type="primary">
	353	一键保存所有(含配置,草稿)
	354	</a-button>
	355
	356	<div class="edit-tool-item" style="gap: 0px;">
	357	<span class="caogaoTip myTip">auto草稿策略:如果文本框在聚焦状态改变内容后,10秒自动保存一次当前文本框内容,最多同时保存10个</span>
	358	<span class="caogaoTip myTip">manual草稿策略:手动保存草稿会另外保存在一个文件夹,最多同时保存10个,手动无cd,按钮防抖1秒</span>
	359	<span class="caogaoTip myTip">草稿列表是两者叠加</span>
	360	</div>
	361
	362	</div>
	363
	364	<div class="edit-tool-item" style="gap: 5px;">
	365
	366	<a-button type="primary">
	367	手动存稿
	368	</a-button>
	369	<span> 实时保存草稿状态：5秒前</span>
	370
	371	<span class="myTip">
	372	自动存稿时间: <span class="myTip">草稿-auto-2022-08-27 12:12:12</span>
	373	</span>
	374	<span class="myTip">
	375	手动存稿时间: <span class="myTip">草稿-manual-2022-08-27 12:12:15</span>
	376	</span>
	377	<div class="edit-tool-item" style="gap: 0px;">
	378	<span class="caogaoTip myTip">保存文件夹格式</span>
	379	<span class="caogaoTip myTip"> caogao/id/auto/xxx.md</span>
	380	<span class="caogaoTip myTip">caogao/id/manual/xxx.md</span>
	381	</div>
	382
	383	</div>
	384
	385
	386	</div>
	387
	388
fa1bd9	389	</div>
1b6f1e	390
fa1bd9	391	</div>
I	392	</div>
	393	</template>
	394
	395	<script>
1b6f1e	396	import {
I	397	queryBlogArticleType
	398	} from '../../api/blogArticleType.js'
	399
afab3a	400	import MyOwO from '../common/MyOwO.vue'
I	401
1b6f1e	402	import VueMarkdown from 'vue-markdown'
I	403	const exp1 =
	404	"### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
	405	const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
	406
	407	const exp3 = "\r> 「探清水河」\r引用化作「上有竹林深」 "
	408
	409	export default {
	410	components: {
afab3a	411	VueMarkdown,
I	412	MyOwO,
1b6f1e	413	},
I	414	beforeMount() {
	415	queryBlogArticleType({}).then((res) => {
	416	this.blogArticleType = res.data;
	417	})
	418	},
	419	data() {
	420	return {
	421	text: exp1 + exp2 + exp3,
	422	articleTypeId: "",
	423	typeId: "",
	424	blogArticleType: [],
	425	}
	426	},
	427	methods: {
	428	insertInputTxt(id, insertTxt) {
	429	var elInput = document.getElementById(id);
	430	var startPos = elInput.selectionStart
	431	var endPos = elInput.selectionEnd
	432	if (startPos === undefined \|\| endPos === undefined) return
	433	var txt = elInput.value
	434	var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
	435	elInput.value = result
	436	elInput.focus()
	437	elInput.selectionStart = startPos + insertTxt.length
	438	elInput.selectionEnd = startPos + insertTxt.length
	439	},
	440	getCalendarContainer(trigger) {
	441	return trigger => trigger.parentNode;
	442	},
	443	}
	444
	445	}
fa1bd9	446	</script>
I	447
	448	<style lang="less">
1b6f1e	449	.defenseExpand {
I	450	max-height: 820px;
	451	overflow: auto;
	452	}
	453
fa1bd9	454	.edit-main {
I	455	min-height: 860px;
	456	display: grid;
	457	grid-template-columns: repeat(11, 1fr);
1b6f1e	458	grid-gap: 20px;
fa1bd9	459	}
I	460
	461	.edit-info {
	462	grid-column-start: 1;
	463	grid-column-end: 4;
	464	display: flex;
	465	flex-direction: column;
1b6f1e	466	gap: 20px;
fa1bd9	467	}
I	468
	469	.edit-info-head,
	470	.edit-info-body {
1b6f1e	471	width: 80%;
I	472	margin: 0px auto;
fa1bd9	473	}
I	474
1b6f1e	475
fa1bd9	476	.edit-info-head {
1b6f1e	477	height: 300px;
fa1bd9	478	}
I	479
	480	.edit-info-body {
	481	height: 100%;
	482	}
	483
1b6f1e	484
I	485	.edit-info-head,
	486	.edit-info-body {
	487	display: flex;
	488	gap: 10px;
	489	flex-direction: column;
	490	}
	491
	492	.edit-body {
fa1bd9	493	grid-column-start: 4;
I	494	grid-column-end: 12;
	495	display: flex;
1b6f1e	496	gap: 20px;
I	497	flex-direction: column;
	498	}
	499
	500	.edit-tool {
	501	height: 300px;
	502	display: flex;
	503	flex-wrap: wrap;
	504	justify-content: space-evenly;
	505
	506	button {
	507	margin-right: 10px;
	508	}
	509	}
	510
	511	.edit-tool-item {
	512	display: flex;
	513	flex-direction: column;
	514	padding: 10px 20px;
	515	gap: 20px;
	516	}
	517
	518	.edit-write {
	519	display: flex;
	520	flex-wrap: wrap;
	521	gap: 20px;
fa1bd9	522	}
I	523
	524	.edit-write-input {
1b6f1e	525	flex: 1;
fa1bd9	526	}
I	527
	528	.edit-write-preview {
1b6f1e	529	flex: 1;
I	530	}
	531
	532	.edit-article-meta {
	533	display: flex;
	534	}
	535
	536	.edit-article-item {
	537	width: 140px;
	538	display: flex;
	539	padding-right: 10px;
	540	justify-content: flex-end;
	541	align-items: center;
	542	}
	543
	544
	545	.edit-article-value {
	546	width: 50%;
	547	}
	548
	549	.edit-article-config {
	550	width: 50%;
	551	text-align: center;
	552	}
	553
	554	.caogaoTip {
	555	width: 300px;
	556	white-space: initial;
	557	border: 1px solid #d9d9d9;
fa1bd9	558	}
I	559	</style>