src/components/swichLabel/edit.vue

@@ -1,31 +1,460 @@
<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 MyOwO from '../common/MyOwO.vue'

   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,
         MyOwO,
      },
      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 +462,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>