优化友链布局，月台窗口自适应，处理hls取消后仍然缓存问题

 src/components/group/MyVideo.vue

@@ -1,10 +1,11 @@
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}" :afterClose="afterClose">
            <videoDetail ref="videoDetail"></videoDetail>
        <a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','height': '750px'}" :afterClose="afterClose" >
            <videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
        </a-modal>
    </div>

</template>

<script>
@@ -13,6 +14,14 @@
    export default {
        components: {
            videoDetail,
        },
        mounted() {
            this.juseWidth(document.body.clientWidth)
            window.onresize = () => {
                return (() => {
                    this.juseWidth(document.body.clientWidth)
                })();
            };
        },
        watch: {
            // '$route'(to, from) {
@@ -36,9 +45,22 @@
            return {
                visible: false,
                articleId: "",
                myWidth: 410,
                showFade: true,
            }
        },
        methods: {
            juseWidth(screenWidth) {
                this.showFade = true;
                if (screenWidth > 1000) {
                    this.myWidth = 1000
                } else if (screenWidth > 767) {
                    this.myWidth = 600
                } else {
                    this.myWidth = 410
                    this.showFade = false;
                }
            },
            showModal(param) {
                this.visible = true;
                this.$nextTick(function() {
@@ -56,4 +78,7 @@
</script>
<style scoped>




</style>

 src/components/mini/box-17-linkAdd.vue

@@ -19,6 +19,7 @@
                    </a-select-option>
                </a-select>
            </a-form-model-item>
			

            <a-form-model-item label="avatar" prop="avatar">
                <a-input v-model="form.avatar" placeholder="链接图片地址" />
@@ -53,7 +54,7 @@
                    url: '',
                    avatar: '',
                    remark: '',
                    linkType: '',
                    linkType: undefined,
                    topValue: 50,
                    isNewWindowOpen: 1
                },
@@ -90,8 +91,8 @@
                        },
                        {
                            trigger: 'blur',
                            pattern: /^((https|http)?:\/\/)[^\s]+/,
                            message: '仅支持 https | http'
                            pattern: /^((https|http)?:\/\/)+/,
                            message: '仅支持 https:// | http://'
                        }
                    ],
                    linkType: [{
@@ -103,8 +104,8 @@
                        required: false,
                    }, {
                        trigger: 'blur',
                        pattern: /^((https|http)?:\/\/)[^\s]+/,
                        message: '仅支持 https | http'
                        pattern: /^((https|http)?:\/\/)+/,
                        message: '仅支持 https:// | http://'
                    }],

                }

 src/components/mini/box-friend.vue

@@ -191,24 +191,31 @@
    @media screen and (min-width: 1600px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(100% / 5 - 1.875rem);
            width: calc(100% / 5 - 1.875rem);
            width: -webkit-calc(100% / 5 - 4rem);
            width: calc(100% / 5 - 4rem);
        }
    }

    @media screen and (max-width: 1599px) and (min-width: 768px) {
    @media screen and (max-width: 1599px) and (min-width: 1439px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(100% / 4 - 1.875rem);
            width: calc(100% / 4 - 1.875rem);
            width: -webkit-calc(100% / 3 - 8rem);
            width: calc(100% / 3 - 8rem);
        }
    }
    @media screen and (max-width: 1438px) and (min-width: 791px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(100% / 4 - 2.3rem);
            width: calc(100% / 4 - 2.3rem);
        }
    }

    @media screen and (max-width: 767px) and (min-width: 501px) {
    @media screen and (max-width: 790px) and (min-width: 501px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(100% / 3 - 1.875rem);
            width: calc(100% / 3 - 1.875rem);
            width: -webkit-calc(100% / 3 - 2.3rem);
            width: calc(100% / 3 - 2.3rem);
        }
    }

@@ -216,8 +223,8 @@
    @media screen and (max-width: 500px) and (min-width: 319px) {
        .link-box a {
            margin: 0 0.75rem 1.5rem;
            width: -webkit-calc(50% - 1.5rem);
            width: calc(50% - 1.5rem);
            width: -webkit-calc(100% / 3 - 1.5rem);
            width: calc(100% / 3 - 1.5rem);
        }

        .blog-main {

 src/components/mini/box10-add.vue

@@ -24,7 +24,7 @@
            <a-form-model-item label="日志文件" v-show="!form.online">
                <a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
                    @change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
                    :data="{'fileType':fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
                    :data="{'fileType':myConstant.fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
                    <a-button>
                        <a-icon type="upload" />限 markdown/html
                    </a-button>
@@ -102,7 +102,7 @@

                <a-form-model-item label="封面">
                    <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
                        :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile"
                        :data="{'fileType':myConstant.fileTypeCover}" @change="handleChangeCoverFile"
                        :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
                        accept=".jpg,.png,.jpeg">
                        <!-- :disabled="form.coverFileList.length>=1" -->
@@ -213,8 +213,7 @@
            };

            return {
                fileTypeMarkDown: myConstant.fileTypeMarkDown,
                fileTypeCover: myConstant.fileTypeCover,
                myConstant: myConstant,
                blogArticleType: [],
                tags: [],
                inputVisible: false,

 src/components/mini/box13-reply.vue

@@ -232,8 +232,8 @@
                    }],
                    "homePage": [{
                        trigger: 'blur',
                        pattern: /^((https|http)?:\/\/)[^\s]+/,
                        message: '仅支持 https | http'
                        pattern: /^((https|http)?:\/\/)+/,
                        message: '仅支持 https:// | http://'
                    }, {
                        trigger: 'blur',
                        max: 50,

 src/components/mini/box14-video.vue

@@ -271,27 +271,25 @@
        overflow: hidden;
    }

    @media screen and (max-width:1024px) {
    @media screen and (min-width:768px) {
        .gridClass {
            grid-template-columns: repeat(2, 1fr);
        }
    }
	
    @media screen and (max-width:767px) {
        .gridClass {
            grid-row-gap: 2rem;
            grid-column-gap: 0rem;
            grid-template-columns: repeat(1, 1fr);

	
            .entry-preview {
                display: block;
            }

	
            .thumbnail_box {
                min-width: 100%;
            }
        }


    }

    @media screen and (min-width:1025px) {
        .gridClass {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

 src/components/mini/box15-videoPlayBox.vue

@@ -3,13 +3,18 @@
        <div>
            正在播放: <span> {{playingVideoData.title}} </span>
        </div>
        <div class="myVideo">
        <div class="myVideo fade">
            <div id="videoPlay" ref="myVdeoPlay"></div>
        </div>
        <div style="border-radius: 0 0 4px 4px;">
            <div style="padding: 10px 0px;">
                音量 :
                <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
            </div>
            <div style="padding: 10px 0px;">
                播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
                {{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
                <a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
            </div>
            <a-collapse activeKey="playHistory">
                <a-collapse-panel key="playHistory" header="播放记录">
@@ -18,7 +23,9 @@
                            <a-tooltip placement="bottomRight" title="播放/暂停">
                                <div @click="togglePlay" class="playItem">
                                    {{item.title}}
                                    <a-icon type="youtube" class="playIcon" />
                                    <span v-if="!isPlaying " class="myTip">(已暂停)</span>
                                    <a-icon type="youtube" class="playIcon "
                                        v-bind:class="{ activeElement: isPlaying }" />
                                </div>
                            </a-tooltip>
                        </div>
@@ -52,6 +59,8 @@
                volumeInit: 0.1,
                isPlaying: false,
                swichLock: false,
                currentTime: 0,
                duration: 0,
                playingVideoData: {
                    img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                    url: "",
@@ -59,7 +68,7 @@
                    title: "",
                    id: ""
                },

                hls: null,
            }
        },
        mounted() {
@@ -74,13 +83,23 @@

            this.dp.on('pause', function() {
                _this.$message.info("停止播放")
                this.isPlaying = false;
                _this.isPlaying = false;
            });

            this.dp.on('play', function() {
                _this.$message.info("开始播放..")
                this.isPlaying = true;
                _this.isPlaying = true;
                _this.duration = _this.dp.video.duration;
                _this.currentTime = _this.dp.video.currentTime;
            });
            this.dp.on('timeupdate', function() {
                //_this.$message.info("进度..")
                _this.currentTime = _this.dp.video.currentTime;
            });
            this.dp.on('volumechange', function() {
                _this.volumeInit = _this.dp.video.volume;
            });

        },
        methods: {
            togglePlay() {
@@ -89,6 +108,9 @@
            },
            changeVolume(value) {
                this.dp.volume(value, true, false);
            },
            changeTime(time) {
                this.dp.seek(time)
            },
            //切换视频源
            swichPlay(videoId) {
@@ -106,11 +128,12 @@
                this.$message.info("切换视频源..", 1)
                this.swichLock = !this.swichLock;


                this.startPlay(tempData)

                setTimeout(() => {
                    this.swichLock = !this.swichLock;
                }, 5000);
                }, 2000);

                //通知父组件更换评论信息
                this.$emit("swichPlay", tempData)
@@ -130,18 +153,29 @@
            },
            //加载播放
            startPlay(videoData) {
                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (this.hls != null) {
                    this.hls.destroy();
                }

                this.adjustOrder(videoData)

                this.playingVideoData = videoData

                this.isPlaying = false;
                this.dp.switchVideo(this.playingVideoData, null)

                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (videoData.type == "customHls") {
                    this.hls = new Hls();
                }

                setTimeout(() => {
                    this.dp.switchVideo(this.playingVideoData)
                }, 500);
            },
            //播放器初始化
            init() {
                var _this = this;
                this.dp = new DPlayer({
                    element: document.getElementById("videoPlay"),
                    //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
@@ -152,7 +186,7 @@
                    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
                    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
                    preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
                    volume: this.volumeInit, // 初始化音量
                    volume: _this.volumeInit, // 初始化音量
                    playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
                    contextmenu: [
                        //右键菜单
@@ -172,15 +206,17 @@
                        // },
                    ],
                    video: {
                        pic: this.defalutImg, // 视频封面
                        pic: _this.defalutImg, // 视频封面
                        // url: videoInfo.url,
                        //url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                        type: "normal",
                        customType: {
                            customHls: function(video, player) {
                                const hls = new Hls()
                                hls.loadSource(video.src)
                                hls.attachMedia(video)
                                //const hls = new Hls()
                                if (_this.hls != null) {
                                    _this.hls.loadSource(video.src)
                                    _this.hls.attachMedia(video)
                                }
                            }
                        }
                    }
@@ -205,7 +241,7 @@
        padding: 10px;
        border-radius: 5px;
        margin: 10px;
        transition: all .5s;
        transition: all .3s;
        position: relative;
    }

@@ -214,7 +250,8 @@
    }

    .playItem:active {
        transform: scale(0.75) translate3d(0, 0, 0);
        // transform: scale(0.75) translate3d(0, 0, 0);
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
    }


@@ -227,7 +264,7 @@

    .myVideo {
        position: relative;
        width: 300px;
        width: 315px;
        height: 180px;
        background-color: #565656;
        border-radius: 10px;
@@ -240,5 +277,28 @@
        border-radius: 5px;
    }

	
    .activeElement {
        -webkit-animation: free_download 1s linear alternate infinite;
        animation: free_download 1s linear alternate infinite;
    }

    @-webkit-keyframes free_download {
        0% {
            -webkit-transform: scale(1);
        }

        100% {
            -webkit-transform: scale(1.2);
        }
    }

    @keyframes free_download {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.2);
        }
    }
</style>

 src/components/mini/box16-videoDetail.vue

@@ -1,13 +1,16 @@
<template>
    <div>
        <div class="boxMain ">
    <div class="boxMain">
        <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
        </div>
        <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
            <pre>{{introduce}}</pre>
        </div>
        <div class="articleComment fadeInRight">
            <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
        <div v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <div class="introduce myShadow" v-if="introduce!=''">
                <pre style="white-space: pre-line;">{{introduce}}</pre>
            </div>
            <div class="articleComment ">
                <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
                    :foldReply="true" />
            </div>
        </div>
    </div>

@@ -40,9 +43,11 @@
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.errorMsg = "日志id参数缺失";
                } else {
                    this.$nextTick(function() {
                        this.$refs.myComment.updateCommentList(this.articleId);
                    })
                    if (this.newValue != this.oldValue) {
                        this.$nextTick(function() {
                            this.$refs.myComment.updateCommentList(this.articleId);
                        })
                    }
                }
            },
        },
@@ -54,6 +59,7 @@
                introduce: "",
                secret: "",
                myLock: false,
                showFade: true,
                videoData: {
                    img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                    url: "",
@@ -67,6 +73,7 @@
        methods: {
            swichPlay(videoData) {
                this.introduce = videoData.introduce;
                this.articleId = videoData.id
                this.$refs.myComment.updateCommentList(videoData.id);
            },
            showVideo(item) {
@@ -85,7 +92,7 @@
            loadData() {

                if (this.$refs.videoPlayBox.isPlaying) {
                    this.$message.info("上个视频正在播放中")
                    this.$message.info("视频源已切换..", 6)
                }

                if (this.myLock) {
@@ -157,9 +164,17 @@

    .boxMain {
        user-select: none;
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        clear: both;
        gap: 2rem;
        max-height: 100%;
    }

    .playBox {
        display: flex;
        justify-content: center;
        padding: 5px 20px;
        padding: 20px 0px;
    }

    .myShadow {
@@ -167,4 +182,18 @@
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
            -8px -8px 18px #ffffff;
    }

    .introduce {
        padding: 20px 20px 5px;
        margin-bottom: 20px;
    }

    @media screen and (max-width: 1023px) {
        .boxMain {
            grid-template-columns: repeat(1, 1fr);
            gap: 0rem;
        }

    }

</style>

 src/components/mini/tagInfo.vue

@@ -1,5 +1,6 @@
<template>
    <!-- 异步加载组件  消息总线独立 状态管理  常量抽取 模块重构 jtx使用  css优化-->
    <!-- 异步加载组件  消息总线独立 状态管理  常量抽取 模块重构 jsx使用  css优化-->
    <!-- 好用的黑色 #292a2d -->
    <div class="swichTag ">
        <a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
        <a-timeline pending="...">
@@ -44,7 +45,6 @@
                </ul>
            </a-timeline-item>
 -->

            <!-- 
  它叫 faye's theme 出自高瞰/的独立游戏(寻找天堂)