日志添加组件

 src/components/mini/box10-add.vue

New file
@@ -0,0 +1,263 @@
<template>
    <div class="myFrom">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="标题">
                <a-input v-model="form.title" placeholder="限 50字内" />
            </a-form-model-item>

            <a-form-model-item label="模式切换">
                <a-switch v-model="form.online" />
                <span class="myTip">
                    本地编辑/由系统生成文件
                </span>
            </a-form-model-item>


            <a-form-model-item label="日志文件" v-show="!form.online">
                <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :default-file-list="form.blogFileList">
                    <a-button>
                        <a-icon type="upload" /> 限 md/html 文件
                    </a-button>
                </a-upload>
            </a-form-model-item>

            <a-form-model-item label="日志内容" v-show="form.online">
                <a-input v-model="form.content" type="textarea" placeholder="限10k字数" />
            </a-form-model-item>

            <a-form-model-item label="分类">
                <a-select v-model="form.class" :allowClear="true" mode="multiple" placeholder="多选(至少一个)"
                    :getPopupContainer="getCalendarContainer()">
                    <a-select-option value="shanghai">
                        Zone one
                    </a-select-option>
                    <a-select-option value="beijing">
                        Zone two
                    </a-select-option>
                    <a-select-option value="beijing2">
                        Zone two
                    </a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="偏好">
                <a-switch v-model="form.preference" />
            </a-form-model-item>

            <div v-show="form.preference" class="myBorder" style="padding:10px;">
                <a-form-model-item label="草稿模式">
                    <a-switch v-model="form.tempSave" />
                    <span v-show="form.tempSave" class="myTip">
                        临时存储,将不会发布该篇日志
                    </span>
                </a-form-model-item>

                <a-form-model-item label=" 文件类型">
                    <a-radio-group v-model="form.blogType">
                        <a-radio value="Markdown">
                            Markdown
                        </a-radio>
                        <a-radio value="Html">
                            Html
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>


                <a-form-model-item label="标签">
                    <template v-for="(tag, index) in tags">
                        <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                            <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
                                {{ `${tag.slice(0, 20)}...` }}
                            </a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
                            {{ tag }}
                        </a-tag>
                    </template>
                    <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
                        :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm" />
                    <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                        <a-icon type="plus" /> New Tag
                    </a-tag>
                </a-form-model-item>


                <a-form-model-item label="封面">
                    <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
                        :default-file-list="form.coverFileList" class="upload-list-inline">
                        <a-button>
                            <a-icon type="upload" /> jpg/png/jpeg..
                        </a-button>
                    </a-upload>
                </a-form-model-item>

                <a-form-model-item label="定时">
                    <a-date-picker v-model="form.publishDate" show-time type="date" placeholder="发布时间"
                        style="width: 100%;" :disabledDate="disabledDate"
                        :getCalendarContainer="getCalendarContainer()" />
                </a-form-model-item>



                <div v-bind:class="{'myBorder':form.lock}">

                    <a-form-model-item label="加锁">
                        <a-switch v-model="form.lock" />
                        <span v-show="!form.lock" class="myTip">
                            默认为公开
                        </span>
                    </a-form-model-item>

                    <div v-show="form.lock ">
                        <a-form-model-item label="阅读权限">
                            <a-radio-group v-model="form.auth">
                                <a-radio value="private">
                                    私人
                                </a-radio>
                                <a-radio value="password">
                                    密码授权
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>

                        <a-form-model-item label="授权密码" v-show="form.auth=='password'">
                            <a-input v-model="form.password" type="password" placeholder="Password">
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-model-item>
                    </div>

                </div>

            </div>

        </a-form-model>
    </div>
</template>

<script>
    import moment from "moment";
    export default {
        data() {
            return {
                blogFileList: [],
                coverFileList: [
                    // {
                    // uid: '-1',
                    // name: 'xxx.png',
                    // status: 'done',
                    // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                    // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                    // } 
                ],
                tags: [],
                inputVisible: false,
                inputValue: '',
                labelCol: {
                    span: 5
                },
                wrapperCol: {
                    span: 19
                },
                form: {
                    preference: true,
                    title: '',
                    content: '',
                    class: [],
                    tempSave: false,
                    blogType: "Markdown",
                    publishDate: "",
                    lock: false,
                    auth: "private",
                    password: "",
                    blogFileList: [],
                    coverFileList: [
                        // {
                        // uid: '-1',
                        // name: 'xxx.png',
                        // status: 'done',
                        // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                        // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                        // } 
                    ],
                },
            };
        },
        methods: {
            disabledDate(current) {
                return current < moment().subtract(1, "day");
            },
            getCalendarContainer(trigger) {
                return trigger => trigger.parentNode;
            },
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                console.log(tags);
                this.tags = tags;
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(function() {
                    this.$refs.input.focus();
                });
            },

            handleInputChange(e) {
                this.inputValue = e.target.value;
            },

            handleInputConfirm() {
                const inputValue = this.inputValue;
                let tags = this.tags;
                if (inputValue && tags.indexOf(inputValue) === -1) {
                    tags = [...tags, inputValue];
                }
                console.log(tags);
                Object.assign(this, {
                    tags,
                    inputVisible: false,
                    inputValue: '',
                });
            },
            onSubmit() {
                console.log('submit!', this.form);
            },
        },
    };
</script>

<style lang="less">
    .myTip {
        font-size: 10px;
        color: #999;
    }

    .myBorder {
        border: 1px solid #999;
    }

    .ant-upload-list-item-info {
        a {
            color: #999;
        }
    }

    /* tile uploaded pictures */
    .upload-list-inline>.ant-upload-list-item {
        float: left;
        width: 100px;
        margin-right: 8px;
    }

    .upload-list-inline>.ant-upload-animate-enter {
        animation-name: uploadAnimateInlineIn;
    }

    .upload-list-inline>.ant-upload-animate-leave {
        animation-name: uploadAnimateInlineOut;
    }
</style>

 src/components/mini/tagInfo.vue

@@ -10,10 +10,20 @@
                <a-icon slot="dot" type="form" style="font-size: 18px;" />
                <h4>我...</h4>
                <p>
                    <ul>
                        <li> 尘世间一个迷途小码农</li>
                        <li> 喜欢钢琴~喜欢吉他 </li>
                    </ul>
                <ul>
                    <li> 尘世间一个迷途小码农</li>
                    <li> 喜欢钢琴~喜欢吉他 </li>
                    <li> 爱音乐,也爱看番 </li>
                    <li> B界的白嫖怪</li>
                    <li> PC单机的<em style="font-size: 10px;">伪</em>硬核玩家 </li>
                    <li>

                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
                        我的小老弟&御用暖床怪
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
                        <span style="font-size: 10px;color: #999">(小乖)</span>
                    </li>
                </ul>
                </p>
            </a-timeline-item>

@@ -28,13 +38,18 @@
                <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
                <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
                <br>
                <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
                <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
                <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象
                <br>但我的眼里,彼时彼刻已全是她的身影..
                <br>几分神,我顿了顿,遥遥头:不是,我是说...我对你的...一时语塞
                <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
                <br>
                <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
                <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
                <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                <br>客车要发动了,我停下双手,想起也是同样的在5年前的一个场景
                <br>我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步
                <br>却踏不起我迟疑的步伐..
                <br>"哎..给我一个拥抱吧"..我试探下张了双臂,她稍微停了下,还是靠了过来..
                <br>
                <br>只须臾片刻,便消千万年间
                <br>离开她的怀抱后,我比了比个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                <br>
                <br>end..希望我们的故事还没有终点..
            </a-timeline-item>
@@ -42,11 +57,11 @@
            <a-timeline-item color="<white></white>">
                <a-icon slot="dot" type="align-left" style="font-size: 18px;" />

                    <br><em>爱她所爱,思她所思,为她承担伤痛</em>
                    <br>度过苦难 无论贫寒,无论卑贱或富贵
                    <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
                    <br>为她收起翅膀
                    <br>不离不弃,直至永远
                <br><em>爱她所爱,思她所思,为她承担伤痛</em>
                <br>度过苦难 无论贫寒,无论卑贱或富贵
                <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
                <br>为她收起翅膀
                <br>不离不弃,直至永远
            </a-timeline-item>
        </a-timeline>


 src/components/swichLabel/main1-show.vue

@@ -12,25 +12,40 @@
                :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
                <boxRight></boxRight>
            </a-drawer>

            <a-modal v-model="visible" title="日志添加" on-ok="handleOk" >
                <template slot="footer">
                    <a-button key="back" @click="handleCancel">
                        暂缓
                    </a-button>
                    <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                        完事..
                    </a-button>
                </template>
                <box10 ref="modal" ></box10>
            </a-modal>

        </div>
        <div class="blog-main">
			
			
            <a-row>
                <a-col v-bind="colApiLeft">
                    <boxLeft></boxLeft>
                </a-col>
                <a-col v-bind="colApiMain ">
					

                    <a-button @click="showDrawer1">
                        小抽屉1
                    </a-button>
                    <a-button @click="showDrawer2">
                        小抽屉2
                    </a-button>
                    <a-button @click="showModal">
                        日志
                        <a-icon type="plus-circle" style="margin-left: 0px;"/>
                    </a-button>
                    <router-view class="fade"></router-view>
                </a-col>
				

                <a-col v-bind="colApiRight" ref="myDrawer">
                    <boxRight></boxRight>
                </a-col>
@@ -41,6 +56,7 @@
</template>

<script>
    import box10 from "../mini/box10-add.vue"
    import boxLeft from "../group/boxLeft.vue"
    import boxRight from "../group/boxRight.vue"
    import articleList from "../group/articleList.vue"
@@ -49,15 +65,30 @@
    export default {

        components: {
            box10,
            boxLeft,
            boxRight,
            articleList,
            articleListScorll,
			
			


        },
        methods: {
			 
            showModal() {
                this.visible = true;
            },
            handleOk(e) {
                console.log(this.$refs.modal.form);
		
                this.loading = true;
                setTimeout(() => {
                    this.visible = false;
                    this.loading = false;
                }, 3000);
            },
            handleCancel(e) {
                this.visible = false;
            },
            afterVisibleChange(val) {},
            showDrawer1() {
                this.visible1 = true;
@@ -74,6 +105,8 @@
        },
        data() {
            return {
                loading: false,
                visible: false,
                visible1: false,
                visible2: false,
                colApiLeft: {
@@ -145,7 +178,8 @@
        background-color: white;
        border-radius: 15px;
    }
    .holdHeight{

    .holdHeight {
        min-height: 780px;
    }