blog/blog-facade.git

inleft

2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473

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%;">
	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
afab3a	399	import MyOwO from '../common/MyOwO.vue'
I	400
1b6f1e	401	import VueMarkdown from 'vue-markdown'
I	402	const exp1 =
	403	"### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
	404	const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
	405
	406	const exp3 = "\r> 「探清水河」\r引用化作「上有竹林深」 "
	407
	408	export default {
	409	components: {
afab3a	410	VueMarkdown,
I	411	MyOwO,
1b6f1e	412	},
I	413	beforeMount() {
	414	queryBlogArticleType({}).then((res) => {
	415	this.blogArticleType = res.data;
	416	})
	417	},
	418	data() {
	419	return {
	420	text: exp1 + exp2 + exp3,
	421	articleTypeId: "",
	422	typeId: "",
	423	blogArticleType: [],
	424	}
	425	},
	426	methods: {
	427	insertInputTxt(id, insertTxt) {
	428	var elInput = document.getElementById(id);
	429	var startPos = elInput.selectionStart
	430	var endPos = elInput.selectionEnd
	431	if (startPos === undefined \|\| endPos === undefined) return
	432	var txt = elInput.value
	433	var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
	434	elInput.value = result
	435	elInput.focus()
	436	elInput.selectionStart = startPos + insertTxt.length
	437	elInput.selectionEnd = startPos + insertTxt.length
	438	},
	439	getCalendarContainer(trigger) {
	440	return trigger => trigger.parentNode;
	441	},
	442	}
	443
	444	}
fa1bd9	445	</script>
I	446
	447	<style lang="less">
1b6f1e	448	.defenseExpand {
I	449	max-height: 820px;
	450	overflow: auto;
	451	}
	452
fa1bd9	453	.edit-main {
I	454	min-height: 860px;
	455	display: grid;
	456	grid-template-columns: repeat(11, 1fr);
1b6f1e	457	grid-gap: 20px;
fa1bd9	458	}
I	459
	460	.edit-info {
	461	grid-column-start: 1;
	462	grid-column-end: 4;
	463	display: flex;
	464	flex-direction: column;
1b6f1e	465	gap: 20px;
fa1bd9	466	}
I	467
	468	.edit-info-head,
	469	.edit-info-body {
1b6f1e	470	width: 80%;
I	471	margin: 0px auto;
fa1bd9	472	}
I	473
1b6f1e	474
fa1bd9	475	.edit-info-head {
1b6f1e	476	height: 300px;
fa1bd9	477	}
I	478
	479	.edit-info-body {
	480	height: 100%;
	481	}
	482
1b6f1e	483
I	484	.edit-info-head,
	485	.edit-info-body {
	486	display: flex;
	487	gap: 10px;
	488	flex-direction: column;
	489	}
	490
	491	.edit-body {
fa1bd9	492	grid-column-start: 4;
I	493	grid-column-end: 12;
	494	display: flex;
1b6f1e	495	gap: 20px;
I	496	flex-direction: column;
	497	}
	498
	499	.edit-tool {
	500	height: 300px;
	501	display: flex;
	502	flex-wrap: wrap;
	503	justify-content: space-evenly;
	504
	505	button {
	506	margin-right: 10px;
	507	}
	508	}
	509
	510	.edit-tool-item {
	511	display: flex;
	512	flex-direction: column;
	513	padding: 10px 20px;
	514	gap: 20px;
	515	}
	516
	517	.edit-write {
	518	display: flex;
	519	flex-wrap: wrap;
	520	gap: 20px;
fa1bd9	521	}
I	522
	523	.edit-write-input {
1b6f1e	524	flex: 1;
fa1bd9	525	}
I	526
	527	.edit-write-preview {
1b6f1e	528	flex: 1;
I	529	}
	530
	531	.edit-article-meta {
	532	display: flex;
	533	}
	534
	535	.edit-article-item {
	536	width: 140px;
	537	display: flex;
	538	padding-right: 10px;
	539	justify-content: flex-end;
	540	align-items: center;
	541	}
	542
	543
	544	.edit-article-value {
	545	width: 50%;
	546	}
	547
	548	.edit-article-config {
	549	width: 50%;
	550	text-align: center;
	551	}
	552
	553	.caogaoTip {
	554	width: 300px;
	555	white-space: initial;
	556	border: 1px solid #d9d9d9;
fa1bd9	557	}
I	558	</style>