blog/blog-facade.git

inleft

2022-08-29 1b6f1e454fff0187d4d30dcf0d5819d4f57f1787

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