From 1b6f1e454fff0187d4d30dcf0d5819d4f57f1787 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 29 Aug 2022 01:05:14 +0800
Subject: [PATCH] 新增iframe 播放页 新增日志编辑页

---
 src/components/swichLabel/edit.vue |  524 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 505 insertions(+), 19 deletions(-)

diff --git a/src/components/swichLabel/edit.vue b/src/components/swichLabel/edit.vue
index fa56745..220052c 100644
--- a/src/components/swichLabel/edit.vue
+++ b/src/components/swichLabel/edit.vue
@@ -1,31 +1,457 @@
 <template>
 	<div class="blog-main">
-		<div class="edit-main">
+		<div class="edit-main fade">
 			<div class="edit-info">
-				<div class="edit-info-head">
-					头
+				<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-body">
-					信息
+
+				<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-write">
-				<div class="edit-write-input">输入区</div>
-				<div class="edit-write-preview">对比区</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 =
+		"### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
+	const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \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;
-		width: 100%;
 		display: grid;
 		grid-template-columns: repeat(11, 1fr);
+		grid-gap: 20px;
 	}
 
 	.edit-info {
@@ -33,37 +459,97 @@
 		grid-column-end: 4;
 		display: flex;
 		flex-direction: column;
+		gap: 20px;
 	}
 
 	.edit-info-head,
 	.edit-info-body {
-		width: 100%;
+		width: 80%;
+		margin: 0px auto;
 	}
 
+
 	.edit-info-head {
-		height: 200px;
-		background-color: #aa55ff;
+		height: 300px;
 	}
 
 	.edit-info-body {
-		background-color: #aa007f;
 		height: 100%;
 	}
 
-	.edit-write {
+
+	.edit-info-head,
+	.edit-info-body {
+		display: flex;
+		gap: 10px;
+		flex-direction: column;
+	}
+
+	.edit-body {
 		grid-column-start: 4;
 		grid-column-end: 12;
-		background-color: #ffaaff;
 		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 {
-		width: 100%;
-		background-color: #aa557f;
+		flex: 1;
 	}
 
 	.edit-write-preview {
-		width: 100%;
-		background-color: #55007f;
+		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>

--
Gitblit v1.9.1