blog/blog-facade.git

inleft

2022-08-31 3c71cc74e6dd5f1015329c64e11e8ec1cd7a97c1

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