demo

 README.md

@@ -1,4 +1,26 @@
## blog-facade

blog的前端代码

####
	 
     Baby Song - 陈奕迅 (Eason Chan)
	 
       词：岑宁儿
	 
       曲：岑宁儿
	 
       你的眼睛 像颗水晶通透
	 
       里面有一个无穷无尽的宇宙
	 
       小小的你 在你小小的梦里
	 
       把我所有大大的事情都吹进风里
	 
       我为我将对你撒的谎先跟你道歉
	 
       当你发现黑白不是那么的分明
	 
       世界不是那么的公平
	   
       private_20211220115946-fafd79d26a6282393032857fea3a663e.mp4
       private_20211220115945-fafd79d26a6282393032857fea3a663e.mp4

 babel.config.js

New file
@@ -0,0 +1,13 @@
module.exports = {
    presets: ["@vue/app",'@vue/babel-preset-jsx'],
    plugins: [
        [
            "import",
            {
                libraryName: "ant-design-vue",
                libraryDirectory: "es",
                style: true
            }
        ]
    ]
};

 es.md

New file
@@ -0,0 +1,242 @@

    

# 两种分词器使用的最佳实践 
    索引时用ik_max_word，在搜索时用ik_smart。
       { "arttitle": {
                "type": "text",
                "analyzer": "ik_max_word",
                "search_analyzer": "ik_smart"
                }
         }
	
# 字段禁止动态添加映射  
    "dynamic" :"strict",
# 日期动态格式化 
    "dynamic_date_formats":"yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis",

#  别名
+ 别名添加
        POST _aliases
        {
        "actions" : [{"add" : {"index" : "student" , "alias" : "in1"}}]
        }
		
+ 别名删除
        POST /_aliases
        {
            "actions": [
                {"remove": {"index": "school", "alias": "in1"}}
            ]
        }
+ 别名修改
        POST _aliases
        {
        "actions" : [{"remove" : {"index" : "student" , "alias" : "in1"}}],
        "actions" : [{"add" : {"index" : "student" , "alias" : "in2"}}]
        }

# config
    "tagContainer": "智能标签,#转两个数组?",
	
    ```
    {
        "settings": {
            "number_of_shards": "5",
            "number_of_replicas": "1"
        },
        "mappings": {
            "dynamic": "strict",
            "dynamic_date_formats": "yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis",
            "properties": {
                "fileName": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_max_word"
                },
                "description": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_smart"
                },
                "title": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_max_word"
                },
				
                "videoText": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_smart"
                },
				
                "tags": {
                    "type": "keyword"
                },
				
                "personTags": {
                    "type": "keyword"
                },
				
                "labelTags": {
                    "type": "keyword"
                },
				
                "deptId": {
                    "type": "keyword"
                },
                "storeType": {
                    "type": "integer"
                },
                "id": {
                    "type": "integer"
                },
	
				
                "typeId": {
                    "type": "integer"
                },
	
                "createTime": {
                    "format": "yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis",
                    "type": "date"
                },
	
				 
                "groupId": {
                    "type": "integer"
                },
                "status": {
                    "type": "integer"
                },
                "uploadStatus": {
                    "type": "integer"
                },
                "duration": {
                    "type": "integer"
                },
                "height": {
                    "type": "integer"
                },
                "width": {
                    "type": "integer"
                },
	
                "dirId": {
                    "type": "integer"
                },
                "videoBitrate": {
                    "type": "integer"
                },
	
	
                "fileMd5": {
                    "type": "keyword"
                },
	
	
                "programId": {
                    "type": "integer"
                },
				
                "videoId": {
                    "type": "integer"
                },
                "userId": {
                    "type": "keyword"
                },
                "userName": {
                    "type": "keyword"
                },
	
                "size": {
                    "type": "long"
                },
                "cateId": {
                    "type": "integer"
                },
	
                "cateIdLeaf": {
                    "type": "integer"
                },
                "mediaStatus": {
                    "type": "integer"
                },
	
                "decodeStatus": {
                    "type": "integer"
                },
                "isCollect": {
                    "type": "integer"
                },
	
	
	
                "fps": {
                    "type": "integer",
                    "index": false
                },
                "audioBitrate": {
                    "type": "integer",
                    "index": false
                },
                "previewUrl": {
                    "type": "text",
                    "index": false
                },
                "originalFile": {
                    "type": "text",
                    "index": false
                },
                "coverUrl": {
                    "type": "text",
                    "index": false
                },
                "format": {
                    "type": "text",
                    "index": false
                },
                "videoCodec": {
                    "type": "text",
                    "index": false
                },
                "audioCodec": {
                    "type": "text",
                    "index": false
                }
	
	
	
	
            }
        }
    }
	
```
```

	
    #remove
    "videoText": "顺丰到付的",
    "recordList": null,
    "fileCountNumber": null,
    "fileCountSize": null,
    "flagRecordList": null,
    "groupFileList": null,
    "sizeMB": "20.83",
	
	
    cateIdLeaf
    tags
	
    groupId
    programId
    videoCodec
    audioCodec
    duration
    videoBitrate
    audioBitrate
    fps
    width
    height

 es_index.txt

New file
@@ -0,0 +1,180 @@
 

    PUT /sfc_media

    {
        "settings": {
            "number_of_shards": "5",
            "number_of_replicas": "1"
        },
            "aliases": {
                "sfc_media_1": {},
			
            },
        "mappings": {
            "dynamic": "strict",
            "dynamic_date_formats": "yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis",
            "properties": {
                "fileName": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_max_word"
                },
                "description": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_smart"
                },
                "title": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_max_word"
                },
	
                "videoText": {
                    "type": "text",
                    "analyzer": "ik_max_word",
                    "search_analyzer": "ik_smart"
                },
	
                "tags": {
                    "type": "keyword"
                },
	
                "personTags": {
                    "type": "keyword"
                },
	
                "labelTags": {
                    "type": "keyword"
                },
	
                "deptId": {
                    "type": "keyword"
                },
                "storeType": {
                    "type": "integer"
                },
                "id": {
                    "type": "integer"
                },
	
	
                "typeId": {
                    "type": "integer"
                },
	
                "createTime": {
                    "format": "yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis",
                    "type": "date"
                },
	
	
                "groupId": {
                    "type": "integer"
                },
                "status": {
                    "type": "integer"
                },
                "uploadStatus": {
                    "type": "integer"
                },
                "duration": {
                    "type": "integer"
                },
                "height": {
                    "type": "integer"
                },
                "width": {
                    "type": "integer"
                },
	
                "dirId": {
                    "type": "integer"
                },
                "videoBitrate": {
                    "type": "integer"
                },
	
	
                "fileMd5": {
                    "type": "keyword"
                },
	
	
                "programId": {
                    "type": "integer"
                },
	
                "videoId": {
                    "type": "integer"
                },
                "userId": {
                    "type": "keyword"
                },
                "userName": {
                    "type": "keyword"
                },
	
                "size": {
                    "type": "long"
                },
                "cateId": {
                    "type": "integer"
                },
	
                "cateIdLeaf": {
                    "type": "integer"
                },
                "mediaStatus": {
                    "type": "integer"
                },
	
                "decodeStatus": {
                    "type": "integer"
                },
                "isCollect": {
                    "type": "integer"
                },
	
	
	
                "fps": {
                    "type": "integer",
                    "index": false
                },
                "audioBitrate": {
                    "type": "integer",
                    "index": false
                },
                "previewUrl": {
                    "type": "text",
                    "index": false
                },
                "originalFile": {
                    "type": "text",
                    "index": false
                },
                "coverUrl": {
                    "type": "text",
                    "index": false
                },
                "format": {
                    "type": "text",
                    "index": false
                },
                "videoCodec": {
                    "type": "text",
                    "index": false
                },
                "audioCodec": {
                    "type": "text",
                    "index": false
                }
	
	
	
	
            }
        }
    }

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,34 @@
{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "ant-design-vue": "^1.7.8",
    "axios": "^0.24.0",
    "babel-plugin-import": "^1.13.3",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.6",
    "jquery": "^3.6.0",
    "jsdom": "^18.1.1",
    "location": "0.0.1",
    "navigator": "^1.0.1",
    "spark-md5": "^3.0.2",
    "vue": "^2.6.10",
    "vue-simple-uploader": "^0.7.6",
    "vuex": "^3.6.2",
    "xmlhttprequest": "^1.8.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "less-loader": "^6.2.0",
    "sass-loader": "^12.3.0",
    "vue-template-compiler": "^2.6.10"
  }
}

 postcss.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

 public/favicon.ico

 public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>default</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 src/App.vue

New file
@@ -0,0 +1,77 @@
<template>
    <div id="app" class="app app1">
        <!-- vue router
        axios
        less
        vuex
        vuels -->
        <!-- <demo/> -->
        <!-- <div id="nav">
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
        </div>
        <router-view/> -->

        <!-- 将上传组件全局注册 -->
        <!-- <global-uploader></global-uploader> -->
        <pp></pp>
    </div>
</template>

<script>
    import globalUploader from '@/components/globalUploader.vue'
    import HelloWorld from '@/components/HelloWorld.vue'
    import demo from '@/components/demo.vue'
    // import pp from '@/components/test1/parent1.vue'
    import pp from '@/components/layouts/test.vue'

    export default {
        name: 'app',
        data() {
            return {}
        },
        components: {
            globalUploader,
            HelloWorld,
            demo,
            pp

        },
        computed: {},
        created() {},
        watch: {},
    }
</script>
<style>
    .app {
        overflow: auto;
        border: none;
    }
	
    #app,body,html {
      height: 100%;
    }
	
    .scrollbar {
        margin: 0 auto;
    }

    .app1::-webkit-scrollbar {
        /*滚动条整体样式*/
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 8px;
        height: 5px;
    }

    .app1::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        background: #aaa;
    }

    .app1::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 8px;
        background: #FFFFFF;
    }
</style>

 src/assets/logo.png

 src/components/HelloWorld - 副本.vue

New file
@@ -0,0 +1,57 @@
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 src/components/HelloWorld.vue

New file
@@ -0,0 +1,57 @@
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 src/components/demo.vue

New file
@@ -0,0 +1,48 @@
<!-- 一个上传事例文件 -->
<template>
    <div>
        <el-button @click="upload">上传</el-button>
    </div>
</template>

<script>
    import Bus from '@/js/bus';
    import $ from 'jquery'
	
    export default {
        components: {},
        data() {
            return {}
        },
        mounted() {
            // 文件选择后的回调
            Bus.$on('fileAdded', () => {
                console.log('文件已选择')
            });

            // 文件上传成功的回调
            Bus.$on('fileSuccess', () => {
                console.log('文件上传成功')
            });
        },
        computed: {},
        methods: {
            upload() {
                // 打开文件选择框
                Bus.$emit('openUploader', {
                    id: Math.ceil(Math.random()*10000)  ,// 传入的参数
					
					 
                })
            }
        },
        destroyed() {
            Bus.$off('fileAdded');
            Bus.$off('fileSuccess');
        },
    }
</script>

<style scoped lang="scss">

</style>

 src/components/globalUploader.vue

New file
@@ -0,0 +1,534 @@
<template>
    <div id="global-uploader">
        <!-- 上传 -->
        <uploader ref="uploaderId" :options="options" :autoStart="false" @file-added="onFileAdded"
            @file-success="onFileSuccess" @file-progress="onFileProgress" @file-error="onFileError"
            @file-complete="onFileComplete" class="uploader-app">
            <uploader-unsupport></uploader-unsupport>

            <uploader-btn id="global-uploader-btn" :directory="false" :attrs="attrs" ref="uploadBtn">选择文件</uploader-btn>

            <uploader-list v-show="panelShow">
                <div class="file-panel" slot-scope="props" :class="{'collapse': collapse}">
                    <div class="file-title">
                        <h2>文件列表</h2>
                        <div class="operate">
                            <el-button @click="fileListShow" type="text" :title="collapse ? '展开':'折叠' ">
                                <i class="iconfont" :class="collapse ? 'inuc-fullscreen': 'inuc-minus-round'"></i>
                            </el-button>
                            <el-button @click="close" type="text" title="关闭">
                                <i class="iconfont icon-close"></i>
                            </el-button>
                        </div>
                    </div>

                    <ul class="file-list">
                        <li v-for="file in props.fileList" :key="file.id">
                            <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true">
                            </uploader-file>
                        </li>
                        <div class="no-file" v-if="!props.fileList.length"><i class="iconfont icon-empty-file"></i>
                            暂无待上传文件</div>
                    </ul>
                </div>
            </uploader-list>

        </uploader>

    </div>
</template>

<script>
    /**
     *   全局上传插件
     *   调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
     *   监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
     *            Bus.$on('fileSuccess', fn); 文件上传成功的回调
     */

    import {
        ACCEPT_CONFIG
    } from '@/js/config';
    import Bus from '@/js/bus';
    import SparkMD5 from 'spark-md5';
    import $ from 'jquery';
    import Element from 'element-ui';

    // 这两个是我自己项目中用的，请忽略
    // import {Ticket} from '@/assets/js/utils';
    // import api from '@/api';

    export default {
        data() {
            return {
                options: {
                    //target: "http://192.168.21.184:8089/aa",
                    chunkSize: 6 * 1024 * 1024,
                    fileParameterName: 'upFile',
                    forceChunkSize: true,
                    maxChunkRetries: 3,
                    testChunks: true, //是否开启服务器分片校验
                    // 服务器分片校验函数，秒传及断点续传基础
                    checkChunkUploadedByResponse: function(chunk, message) {
                        let resp = JSON.parse(message);
                        if (!resp.success) {
                            console.error("校验分片异常")
                            return false;
                        }

                        //已经秒传
                        if (resp.result.chunkIndex != null && resp.result.chunkIndex[chunk.offset] > 0) {
                            console.log(chunk.offset + 1 + "已经秒传..")
                            return true;
                        }
                        console.log(chunk.offset + 1 + "正常上传..")

                        return false;
                    },
                    headers: {
                        // Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
                    },
                    query() {
                        //aa: "bbb";
                    }
                },
                attrs: {
                    accept: ACCEPT_CONFIG.getAll()
                },
                panelShow: true, //选择文件后，展示上传panel
                collapse: true,
            }
        },
        mounted() {
            Bus.$on('openUploader', query => {
                this.params = query || {};

                if (this.$refs.uploadBtn) {
                    $('#global-uploader-btn').click();
                }
            });
        },
        computed: {
            //Uploader实例
            uploader() {
                return this.$refs.uploaderId.uploader;
            }
        },
        methods: {
            onFileAdded(file) {
				
                this.panelShow = true;
                this.computeMD5(file);

                Bus.$emit('fileAdded');
            },

            onFileComplete(rootFile) {
                console.log(11111)
                console.log(rootFile)
            },
            onFileProgress(rootFile, file, chunk) {
                console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
            },
            onFileSuccess(rootFile, file, response, chunk) {
                console.log("上传完成回调", response);
                let res;
                try {
                    if (typeof response =="string") {
                        res = JSON.parse(response);
                    } else {
                        res = response;
                    }
                    // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
                    if (!res.success) {
                        this.$message({
                            message: res.errmsg,
                            type: 'error'
                        });
                        // 文件状态设为“失败”
                        this.statusSet(file.id, 'failed');
                        return
                    }

                } catch (ex) {
                    console.log(ex)
                }

                var $this = this;


                // 文件状态设为“合并中”
                $this.statusSet(file.id, 'merging');

                //请求合并
                $this.$axios.get('http://192.168.21.184:8001/commonFileUpload/doMerge?mainMD5=' + file.uniqueIdentifier +
                        "&mediaId=" + localStorage.getItem("mediaId"))
                    .then(function(response) {

                        if (response.data.success) {
                            // 文件合并成功
                            Bus.$emit('fileSuccess');
                            $this.statusRemove(file.id);

                            console.log('文件合并成功');
                            console.log('上传成功');
                            console.log("文件上传结束" + new Date().getTime())
                        } else {
                            //请求合并异常 
                            $this.statusRemove(file.id);
                            $this.statusSet(file.id, 'mergingExcetion');
                        }

                    })
                    .catch(function(error) {
                        console.error(error);
                        $this.$message({
                            message: "合并异常",
                            type: 'error'
                        });
                        $this.statusRemove(file.id);
                        $this.statusSet(file.id, 'mergingExcetion');
                    });


            },

            onFileError(rootFile, file, response, chunk) {
                this.$message({
                    message: response,
                    type: 'error'
                })
            },

            /**
             * 计算md5，实现断点续传及秒传
             * @param file
             */
            computeMD5(file) {
                let fileReader = new FileReader();
                let time = new Date().getTime();
                console.log("文件上传开始" + new Date().getTime())
                let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

                let currentChunk = 0;
                const chunkSize = 6 * 1024 * 1024; //md5计算时切片大小
                let chunks = Math.ceil(file.size / chunkSize);

                let spark = new SparkMD5.ArrayBuffer();

                // 文件状态设为"计算MD5"
                this.statusSet(file.id, 'md5');
                file.pause();

                loadNext();

                fileReader.onload = (e => {
                    spark.append(e.target.result);

                    if (currentChunk < chunks) {
                        currentChunk++;
                        loadNext();

                        // 实时展示MD5的计算进度
                        this.$nextTick(() => {
                            $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100)
                                .toFixed(0) + '%')
                        })
                    } else {
                        let md5 = spark.end();
                        this.computeMD5Success(md5, file);
                        console.log(
                            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`
                        );
                    }
                });

                fileReader.onerror = function() {
                    this.error(`文件${file.name}读取出错，请检查该文件`)
                    file.cancel();
                };

                function loadNext() {
                    let start = currentChunk * chunkSize;
                    let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                    fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
                }
            },

            computeMD5Success(md5, file) {
                //1.初始化分片上传请求,获取分片参数

                //计算内网ip是否联通,选择上传接口url,如果是

                let $this = this;
                //this.$axios.post('http://192.168.21.184:8001/commonFileUpload/createShardPost', {
                this.$axios.post('http://192.168.21.184:8001/sfcMedia/addMedia', {
                        storeType: "0",
                        title: file.name,
                        typeId: "4",
                        dirId: "7",
                        uploadDto: {
                            internalHostList:["192.168.40.149:9000"],
                            mainMD5: md5,
                            size: file.size,
                            fileName: file.name,
                            ext: file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length), //文件名没有点号会异常
                            type: file.type
                        }
                    }, {
                        headers: {
                            'Sys-Access-Token': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbktleU5hbWUiOiJTeXMtQWNjZXNzLVRva2VuIiwidXNlck5hbWUiOiJhZG1pbiIsImV4cCI6MTY0MTM3OTQ0NX0.FQXRgkLXlmgpLDcP2cbZZBNwCEDZJoeoHen6OZz5Wbk",
                        }
                    }).then(function(response) {
                        console.log("文件上传请求初始化");
                        console.log(response);
                        if (response.data.success) {
                            let uploadOptions = response.data.result;

                            localStorage.setItem("mediaId",uploadOptions.mediaId)
                            let uploadURLArray = uploadOptions.uploadUrlList;
							
							
                            console.log("文件上传url", uploadURLArray)
                            // 将自定义参数直接加载uploader实例的opts上
                            let opts = $this.uploader.opts;

                            //opts.target = "http://192.168.21.184:8001/commonFileUpload/doUpload"; //上传接口
                            opts.target = function(file, chunk, isTest, obj) {
                                //定义分片检测url
                                if (isTest) {
                                    return "http://192.168.21.184:8001/commonFileUpload/checkShardStatus"
                                }
                                let chunkUploadUrl = uploadURLArray[chunk.offset]
                                if (chunkUploadUrl == undefined || chunkUploadUrl == null || chunkUploadUrl ==
                                    "") {
                                    console.error("获取分片上传链接异常 chunkNumber:{}", (chunk.offset + 1))
                                    return "";
                                }
                                return chunkUploadUrl;
                            }

                            //分片请求成功后处理
                            opts.processResponse = function(response, cb, file, chunk) {
                                console.log("分片" + (chunk.offset + 1) + "上传成功", response)

                                //通知服务器分片上传状态
                                $this.$axios.get(
                                        'http://192.168.21.184:8001/commonFileUpload/updateProgress?mainMD5=' +
                                        file.uniqueIdentifier +
                                        "&chunk=" + (chunk.offset + 1) +
                                        "&chunkSize=" + (chunk.loaded)
                                    )
                                    .then(function(re) {
                                        console.log("分片更新上传进度成功", re)
                                        cb(null, re.data)
                                    })
                                    .catch(function(error) {
                                        console.error("分片更新上传进度异常", error);
                                        cb(null, error)
                                    });

                            }

                            opts.processParams = function(params, file, chunk, isTest) {
                                if (isTest) {
                                    return params;
                                }
                                return {};
                            }

                            opts.method = "octet";
                            opts.testMethod = "GET"; //调用分片上传验证请求类型
                            opts.uploadMethod = "PUT"; //调用分片上传时使用的http方法请求类型

                            //opts.chunkSize = uploadOptions.chunkSize; //切片大小
                            $this.params.mainMD5 = md5; //mainMD5参数
                            $this.params.chunkNumber = opts.chunkNumber; //分片索引参数
                            Object.assign(opts, {
                                query: {
                                    ...$this.params,
                                }
                            })

                            file.uniqueIdentifier = md5;
                            file.resume();
                            $this.statusRemove(file.id);
                        } else {
                            //中断上传
                            file.cancel();
                        }
                    })
                    .catch(function(error) {
                        console.error(error);
                        //中断上传
                        file.cancel();
                        return;
                    });


            },

            fileListShow() {
                let $list = $('#global-uploader .file-list');

                if ($list.is(':visible')) {
                    $list.slideUp();
                    this.collapse = true;
                } else {
                    $list.slideDown();
                    this.collapse = false;
                }
            },
            close() {
                this.uploader.cancel();

                this.panelShow = false;
            },

            /**
             * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
             * @param id
             * @param status
             */
            statusSet(id, status) {
                let statusMap = {
                    md5: {
                        text: '校验MD5',
                        bgc: '#fff'
                    },
                    merging: {
                        text: '合并中',
                        bgc: '#e2eeff'
                    },
                    mergingExcetion: {
                        text: '合并异常',
                        bgc: '#e2eeff'
                    },
                    transcoding: {
                        text: '转码中',
                        bgc: '#e2eeff'
                    },
                    failed: {
                        text: '上传失败',
                        bgc: '#e2eeff'
                    }
                }

                this.$nextTick(() => {
                    $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
                        'position': 'absolute',
                        'top': '0',
                        'left': '0',
                        'right': '0',
                        'bottom': '0',
                        'zIndex': '1',
                        'backgroundColor': statusMap[status].bgc
                    }).text(statusMap[status].text);
                })
            },
            statusRemove(id) {
                this.$nextTick(() => {
                    $(`.myStatus_${id}`).remove();
                })
            },

            error(msg) {
                this.$notify({
                    title: '错误',
                    message: msg,
                    type: 'error',
                    duration: 2000
                })
            }
        },
        watch: {},
        destroyed() {
            Bus.$off('openUploader');
        },
        components: {}
    }
</script>

<style>
    #global-uploader {
        position: fixed;
        z-index: 20;
        right: 15px;
        bottom: 15px;
    }

    #global-uploader .uploader-app {
        width: 1820px;
    }

    #global-uploader .file-panel {
        background-color: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 7px 7px 0 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    #global-uploader .file-panel .file-title {
        display: flex;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        border-bottom: 1px solid #ddd;
    }

    #global-uploader .file-panel .file-title .operate {
        flex: 1;
        text-align: right;
    }

    #global-uploader .file-panel .file-list {
        position: relative;
        height: 240px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
    }

    #global-uploader .file-panel .file-list>li {
        background-color: #fff;
    }

    #global-uploader .file-panel.collapse .file-title {
        background-color: #E7ECF2;
    }

    #global-uploader .no-file {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
    }

    #global-uploader .uploader-file-icon:before {
        content: "" !important;
    }

    #global-uploader .uploader-file-actions>span {
        margin-right: 6px;
    }

    #global-uploader .uploader-file-icon[icon=image] {
        background: url(../images/image-icon.png);
    }

    #global-uploader .uploader-file-icon[icon=video] {
        background: url(../images/video-icon.png);
    }

    #global-uploader .uploader-file-icon[icon=document] {
        background: url(../images/text-icon.png);
    }

    /* 隐藏上传按钮 */
    #global-uploader-btn {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
</style>

 src/components/layouts/blog-main.css

New file
@@ -0,0 +1,537 @@
/*常用元素*/
body {
    background: url(../static/background.jpg) no-repeat fixed 50% 50%;
    /*background: url(background.jpg)  fixed 50% 50%;*/
    /*background-color: #dddddd;*/
    background-size: cover;
    width: 100%;
    height: 100%;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

p {
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 20px;
}

/*---------
|   头部   |
 ----------*/
.blog-head {
    position: fixed;
    top: 0px;
    z-index: 999;
}

/*---------
|   主体   |
 ----------*/
.blog-main {
    padding-top: 80px;
    padding-left: 6%;
    padding-right: 7%;
    padding-bottom: 2%;
}

/*---------
|   脚部   |
 ----------*/
.blog-footer {
    background-color: #141414;
    color: #757575;
    text-align: center;
    /*position: fixed;*/
    bottom: 0px;
    z-index: 200;
    width: 100%;
}

/*左右两边的盒子容器*/
.blog-cell-main-container {
    opacity: 0.8;
    padding: 0px 25px 10px;
}

/*左边部分*/
.blog-left-side-portion {
    position: sticky;
    top: 80px;
    padding-left: 2%;
    /*padding-right: 2%;*/
    z-index: 100;
}

/*中间部分*/
.blog-body {
    padding-top: 10px;
    /*padding-left: 3%;*/
    /*padding-right: 3%;*/
}

/*右边部分*/
.blog-right-side-portion {
    position: sticky;
    top: -19%;
    padding-top: 10px;
    /*padding-left: 2%;*/
    /*padding-right: 2%;*/
    z-index: 100;
}

div .blog-right-side-meta div {
    padding-left: 6%;
    padding-right: 6%;
    margin-bottom: 3%;
}

/*---------------------
|   核心盒子构成start   |
------- ---------------*/
.blog-left-side-scroll-portion, .blog-right-side-container {
    border-radius: 15px;
    background-color: white;

    line-height: 1.4;
    white-space: nowrap; /*规定段落中的文本不进行换行：*/
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    max-height: 200px;
    /*margin-top: 10px;*/
    /*min-height: 200px;*/

    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

.blog-right-side-container {
    padding-top: 10px;
    padding-bottom: 20px;
    overflow: hidden;
}

.blog-right-side-scroll-portion {
    padding-top: 10px;
    max-height: 150px;

    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid #999;
}

/*预留滚动条的宽度*/
.blog-left-side-scroll-portion, .blog-right-side-scroll-portion {
    padding-right: 5px;
}

/*预留滚动条的宽度*/
.blog-left-side-scroll-portion:hover, .blog-right-side-scroll-portion:hover {
    padding-right: 0px;
}

.blog-left-side-scroll-portion:hover::-webkit-scrollbar {
    display: block;
}

.blog-right-side-scroll-portion:hover::-webkit-scrollbar {
    display: block;
}

.blog-left-side-scroll-portion::-webkit-scrollbar, .blog-right-side-scroll-portion::-webkit-scrollbar {
    width: 5px;
    display: none;
}

.blog-left-side-scroll-portion::-webkit-scrollbar-thumb, .blog-right-side-scroll-portion::-webkit-scrollbar-thumb {
    background-color: rgba(153, 154, 170, 0.3);
    border-radius: 2px;
}

/*margin滚动条上偏移*/
.blog-left-side-scroll-portion::-webkit-scrollbar-track,.layui-layer-content::-webkit-scrollbar-track{
    margin-top: 20px;
    margin-bottom: 20px;
}

/*layui弹出层不要滚动条*/
.layui-layer-content::-webkit-scrollbar {
    width: 7px;
    height: 20%;
    display: none;
}

.layui-layer-content::-webkit-scrollbar-thumb {
    background-color: rgba(76, 77, 79, 0.3);
    border-radius: 2px;
}

.layui-layer-content:hover::-webkit-scrollbar {
    display: block;
}

/*---------------------
|   核心盒子构成end     |
------- ---------------*/

/*遗留无用部分,用来显示过长的部分*/
something:hover::after {
    /*content: attr(data-customer);*/
    /*content: "kiki超超超超超超超超超超超超长的 陈奕迅 baby song 歌词 ";*/
    content: "";
    background: #F2F2F2;
    /*border: 1px solid #E5E5E5;*/
    box-shadow: 0 2px 4px 0 rgba(56, 62, 71, 0.10);
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 13px;
    color: #202332;

    word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
    word-wrap: break-word;

    max-width: 90%; /*如果一个单词太长，则截断 CSS 属性 word-break 指定了怎样在单词内断行。 white-space: normal;*/
    max-height: 10%;

    /*position: relative;*/
    z-index: 500;
    top: 13%;
    left: 15%;
}

/*切出按钮*/
.blog-comment-left-guide {
    position: fixed;
    top: 45%;
    left: -12px;
    padding-left: 15px;
    padding-top: 15px;

    background-color: white;
    width: 20px;
    height: 30px;

    display: block;
    border-radius: 20%;
    opacity: 0.3;
    z-index: 200;
}

.blog-comment-right-guide {
    position: fixed;
    top: 45%;
    right: -12px;
    padding-left: 2px;

    padding-right: 13px;
    padding-top: 15px;

    background-color: white;
    width: 20px;
    height: 30px;
    display: block;
    border-radius: 20%;
    opacity: 0.3;
    z-index: 200;
}

/*头像部分*/
.blog-avatar {
    border-radius: 15px;
    background-color: white;
}

.blog-avatar img {
    width: 60px;
    height: auto;
    border-radius: 50%;
    display: block;
    margin: 10px auto 10px;
    padding-top: 10px;
}

.blog-user-message {
    text-align: center;
    font-size: 15px;
    color: #555;
    padding-top: 10px;
    padding-bottom: 10px;
}

.blog-user-message span {
    display: block;
    padding-bottom: 5px;
}

/*日志部分*/
.blog-log-list {
    line-height: 1.6;
    padding-left: 3%;
    padding-right: 3%;

    flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.blog-log-item {
    border-left: 2px solid rgba(222, 229, 231, .45);
    width: 23%;
    margin-bottom: 10px;
}

.blog-log-item:first-child {
    border-left: none;
}

.blog-log-item a span:first-child {
    color: #999;
}

.blog-log-item a span:last-child {
    font-weight: 600;
    font-size: 15px;
}

.blog-log-item span {
    display: block;
}

/*归档部分*/

.blog-pigeonhole {
    font-size: 15px;
}

.blog-pigeonhole-p {
    width: 20%;
    text-align: center;
    line-height: 20px;
    border-radius: 6px 6px 6px 6px;
    /*background-color: #edf0f3;*/
    margin-left: 3%;
    margin-bottom: 3%;
    opacity: 0.7;
}

.blog-pigeonhole-list {
    line-height: 1.6;
    padding-left: 3%;
    padding-right: 3%;
    /*display: flex; !*弹性盒子*!*/
    /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/

    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    flex-wrap: wrap; /*让弹性盒元素在必要的时候拆行：*/
    align-content: flex-start;
    -webkit-align-content: flex-start;

}

.blog-pigeonhole-item {
    min-width: 22%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 5%;
}

.blog-pigeonhole-item a span:first-child {
    height: 22px;
    background-color: #edf0f3;
    border-radius: 6px 6px 0 0;
    opacity: .8;
    color: #999aaa;
    line-height: 22px;
    margin-bottom: 1px;
    text-align: center;
}

.blog-pigeonhole-item a span:last-child {
    height: 22px;
    background-color: #f6f8fa;
    border-radius: 0 0 6px 6px;
    color: #555666;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
}

.blog-pigeonhole-item span {
    display: block;
}

/*文章部分*/
.blog-article {
    margin-bottom: 20px;
    border-radius: 15px;
    border: none;
    /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
}

.article-meta {
    padding: 30px 30px 10px;
    background-color: white;
    border-radius: 15px;
}

.article-title {
    color: #555;
    font-size: 25px;
    padding-bottom: 15px;
    margin-top: 0 !important;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.article-split-line {
    width: 100%;
    height: 2px;
    overflow: hidden;
    font-size: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    border-color: rgba(237, 241, 242, .6);

    border-bottom: 1px solid rgba(222, 229, 231, .45);
    display: block
}

.article-message-info {
    text-align: center;
}

.article-message-info li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

.article-message-info li span {
    padding-left: 0px;
}

.article-summary {
    max-height: 200px;
    overflow: hidden;
}

.article-summary p {
    text-align: center;
}

.article-read-btn {
    text-align: center;
    display: block;
}

.btn {
    display: inline-block;
    padding: 0 20px;
    color: #555;
    background: #fff;
    border: 2px solid #555;
    text-decoration: none;
    border-radius: 2px;

    line-height: 2;
    font-size: 14px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    cursor: pointer;

    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.btn:hover {
    background: #262a30;
    color: #fff;
}

/*文章图片部分*/
.item-thumb {
    min-height: 250px;
    position: relative;
    display: block;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 15px;
}

.item-thumb {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb:hover {
    transform: scale(1.05);
}

.item-thumb-small {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb-small:hover {
    transform: scale(1.05);
}

.blog-right-side-portion-title {
    display: block;
    font-size: 15px;
    padding-bottom: 8px;

}

span.title-remark::after {
    content: "(按字母索引)";
    color: #999;
    font-size: 10px;
}

.blog-right-side-exchange {
    padding-top: 5px;
}

/*右边的部分*/
.blog-right-side-meta span {
    /*word-break: keep-all;*/
    /*word-wrap: break-word;*/
    color: #999;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;

    white-space: nowrap; /* normal文本换行*/

    word-break: keep-all;
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

div .blog-right-side-meta a span:hover {
    background: #5FB878;
    color: #fff;
    white-space: normal;
    word-break: break-word; /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
    height: 20%;
    z-index: 600;
}

 src/components/layouts/box1.vue

New file
@@ -0,0 +1,61 @@
<template>
        <div class="blog-avatar">
            <img :src="avatar">
            <div class="blog-user-message">
                <span>{{name}}</span>
                <span>{{sentence}}</span>
                <span>
                    <a-icon type="environment" />{{location}}
                </span>
            </div>
        </div>
	 
</template>

<script>
    export default {
        name: "box",
        data() {
            return {
                avatar: "http://t.inleft.com/share/media_photo/xigong.png",
                name: "inleft",
                sentence: "十里寒塘路,烟花一半醒",
                location: "广州"
            }
        }
    }
</script>

</script>

<style lang="less">
	
    /*头像部分*/
    .blog-avatar {
        border-radius: 15px;
        background-color: white;

        img {
            width: 60px;
            height: auto;
            border-radius: 50%;
            display: block;
            margin: 10px auto 10px;
            padding-top: 10px;
        }
    }

    /* 一言 */
    .blog-user-message {
        text-align: center;
        font-size: 15px;
        color: #555;
        padding-top: 10px;
        padding-bottom: 10px;

        span {
            display: block;
            padding-bottom: 5px;
        }
    }
</style>

 src/components/layouts/box2.vue

New file
@@ -0,0 +1,96 @@
<template>
    <div class="blog-left-side-scroll-portion">
        <div>
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list1">
                    <a href="#">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </a>
                </div>
            </div>
            <div class="blog-log-list">
                <div class="blog-log-item" v-for="item in list2">
                    <a href="#">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: "日志",
                    count: 10
                }, {
                    name: "分类",
                    count: 12
                }, {
                    name: "标签",
                    count: 14
                }],
                list2: [{
                    name: "Tag",
                    count: 133
                }, {
                    name: "专题",
                    count: 10
                }, {
                    name: "偏好",
                    count: 12
                }, {
                    name: "星标",
                    count: 14
                }]
            }
        }
    }
</script>

</script>

<style lang="less">
    /*日志部分*/
    .blog-log-list {
        line-height: 1.6;
        padding-left: 3%;
        padding-right: 3%;

        flex-wrap: wrap;
        /*让弹性盒元素在必要的时候拆行：*/
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .blog-log-item {
        border-left: 2px solid rgba(222, 229, 231, .45);
        width: 23%;
        margin-bottom: 10px;

        :first-child {
            border-left: none;
        }

        a span:first-child {
            color: #999;
        }

        a span:last-child {
            font-weight: 600;
            font-size: 15px;
        }

        span {
            display: block;
        }
    }
</style>

 src/components/layouts/box3.vue

New file
@@ -0,0 +1,149 @@
<template>
    <div class="blog-left-side-scroll-portion">
        <span class="blog-pigeonhole">归档信息</span>
        <div>
            <p class="blog-pigeonhole-p">2020</p>
            <div class="blog-pigeonhole-list">

                <div class="blog-pigeonhole-item" v-for="item in list2020">
                    <a href="#">
                        <span>{{item.month}}月</span>
                        <span>{{item.count}}篇</span>
                    </a>
                </div>
            </div>
        </div>
        <div>
            <p class="blog-pigeonhole-p">2019</p>
            <div class="blog-pigeonhole-list">

                <div class="blog-pigeonhole-item" v-for="item in list2019">
                    <a href="#">
                        <span>{{item.month}}月</span>
                        <span>{{item.count}}篇</span>
                    </a>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        data() {
            return {
                list2019: [{
                    month: "12",
                    count: 10
                }, {
                    month: "10",
                    count: 11
                }, {
                    month: "9",
                    count: 9
                }],
                list2020: [{
                    month: "12",
                    count: 8
                }, {
                    month: "10",
                    count: 7
                }, {
                    month: "9",
                    count: 6
                }, {
                    month: "8",
                    count: 5
                }, {
                    month: "7",
                    count: 4
                }, {
                    month: "6",
                    count: 3
                }, {
                    month: "5",
                    count: 2
                }, {
                    month: "4",
                    count: 1
                }]
            }
        }
    }
</script>

</script>

<style lang="less">
    /*归档部分*/

    .blog-pigeonhole {
        font-size: 15px;
    }

    .blog-pigeonhole-p {
        width: 20%;
        text-align: center;
        line-height: 20px;
        border-radius: 6px 6px 6px 6px;
        /*background-color: #edf0f3;*/
        margin-left: 3%;
        margin-bottom: 3%;
        opacity: 0.7;
    }

    .blog-pigeonhole-list {
        line-height: 1.6;
        padding-left: 3%;
        padding-right: 3%;
        /*display: flex; !*弹性盒子*!*/
        /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/

        display: flex;
        display: -webkit-flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;

        flex-wrap: wrap;
        /*让弹性盒元素在必要的时候拆行：*/
        align-content: flex-start;
        -webkit-align-content: flex-start;

    }

    .blog-pigeonhole-item {
        min-width: 22%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        margin-bottom: 5%;

        a span:first-child {
            height: 22px;
            background-color: #edf0f3;
            border-radius: 6px 6px 0 0;
            opacity: .8;
            color: #999aaa;
            line-height: 22px;
            margin-bottom: 1px;
            text-align: center;
        }

        a span:last-child {
            height: 22px;
            background-color: #f6f8fa;
            border-radius: 0 0 6px 6px;
            color: #555666;
            line-height: 20px;
            font-weight: 600;
            text-align: center;
        }

        span {
            display: block;
        }
    }
	
	
</style>

 src/components/layouts/box4.vue

New file
@@ -0,0 +1,63 @@
<template>
    <div class="blog-right-side-container">
        <div>
            <span class="blog-right-side-portion-title">{{title}}</span>
        </div>
        <div class="blog-right-side-scroll-portion">
            <div class="blog-right-side-meta" v-for="item in list">
                <div>
                    <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        props: {
            title: "",
            list: ""
        },
        data() {
            return {
				
            }
        }
    }
</script>

</script>

<style lang="less">
    /*右边的部分*/
    .blog-right-side-meta span {
        /*word-break: keep-all;*/
        /*word-wrap: break-word;*/
        color: #999;
        font-size: 13px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;

        white-space: nowrap;
        /* normal文本换行*/

        word-break: keep-all;
        transition-property: background-color;
        transition-duration: .2s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
    }

    div .blog-right-side-meta a span:hover {
        background: #5FB878;
        color: #fff;
        white-space: normal;
        word-break: break-word;
        /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
        height: 20%;
        z-index: 600;
    }
</style>

 src/components/layouts/boxLeft.vue

New file
@@ -0,0 +1,33 @@
<template>
    <div class="blog-left-side-portion fadeInLeft">
        <div class="blog-cell-main-container ">
            <box1></box1>
        </div>
        <div class="blog-cell-main-container ">
            <box2></box2>
        </div>
        <div class="blog-cell-main-container ">
            <box3></box3>
        </div>
    </div>
</template>

<script>
    import box1 from "./box1.vue"
    import box2 from "./box2.vue"
    import box3 from "./box3.vue"
    export default {
        components: {
            box1,
            box2,
            box3,
        },
        data() {
            return {}
        }
    }
</script>

</script>
<style lang="less">
</style>

 src/components/layouts/boxRight.vue

New file
@@ -0,0 +1,90 @@
<template>
    <div class="blog-right-side-portion fadeInRight">
        <div class="blog-cell-main-container ">
            <box4 v-bind="vo1"></box4>
        </div>
        <div class="blog-cell-main-container ">
            <box4 v-bind="vo2"></box4>
        </div>
        <div class="blog-cell-main-container ">
            <box4 v-bind="vo3"></box4>
            <div class="blog-right-side-exchange">
            </div>
        </div>
        <div class="blog-cell-main-container ">
            <box4 v-bind="vo4"></box4>
        </div>

    </div>
</template>

<script>
    import box4 from "./box4.vue"
    export default {
        components: {
            box4,
        },
        data() {
            return {
                vo1: {
                    title: "最近热读",
                    list: [{
                        name: "Baby Song- 陈奕迅 ",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超超超超超超超超超超超长的标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超超超超长的标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超超超超超超超超超超超长的标题",
                    }, {
                        name: "Baby Song- 陈奕迅 ",
                    }]
                },
                vo2: {
                    title: "最多点赞",
                    list: [{
                        name: "Baby Song- 陈奕迅 ",
                    }, {
                        name: "Baby Song- 陈奕迅 超 超超超超超超长的标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }]
                },
                vo3: {
                    title: "友情链接",
                    list: [{
                        name: "inleft.com",
                    }, {
                        name: "b.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                    }, {
                        name: "Baby Song ",
                    }]
                },
                vo4: {
                    title: "统计信息",
                    list: [{
                        name: "已稳定运行:101天",
                    }, {
                        name: "上次更新:2020-05-27",
                    }, {
                        name: "累计访问:10000次",
                    }, {
                        name: "累计访客:1001名",
                    }]
                }
            }
        }
    }
</script>

</script>
<style lang="less">
</style>

 src/components/layouts/test.vue

New file
@@ -0,0 +1,304 @@
<template>
    <div id="components-layout-basic">
        <a-layout>
            <a-layout-header>Header</a-layout-header>
            <a-layout>
                <div class="blog-main">
                    <a-row type="flex" justify="space-around" align="middle">
                        <a-col v-bind="colApiLeft">
                            <boxLeft></boxLeft>
                        </a-col>
                        <a-col v-bind="colApiMain">
                            <box1></box1>
                        </a-col>
                        <a-col v-bind="colApiRight">
                            <boxRight></boxRight>
                        </a-col>
                    </a-row>
                </div>
                <!-- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider>
                <a-layout-content>Content</a-layout-content>
                <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider> -->
            </a-layout>
            <a-layout-footer>Footer</a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import boxLeft from "./boxLeft.vue"
    import boxRight from "./boxRight.vue"
    import box1 from "./box1.vue"
    export default {
        components: {
            boxLeft,
            boxRight,
            box1
        },
        data() {
            return {
                sliderApi: {
                    collapsible: true, //是否可收起

                    collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
                },
                colApiLeft: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 8,
                    xl: 8,
                    xxl: 6,
                },
                colApiRight: {
                    xs: 0,
                    sm: 0,
                    md: 0,
                    lg: 0,
                    xl: 0,
                    xxl: 4,
                },
                colApiMain: {
                    xs: 24,
                    sm: 24,
                    md: 24,
                    lg: 14,
                    xl: 14,
                    xxl: 14,
                }
            }
        }
    }
</script>

<style lang="less">
    .blog-main {
        padding-left: 5%;
        padding-right: 5%;
    }

    #components-layout-basic {
        text-align: center;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;

        .ant-layout-header,
        .ant-layout-footer {
            background: #7dbcea;
            color: #fff;
        }

        .ant-layout-footer {
            line-height: 1.5;
        }

        .ant-layout-sider {
            background: #3ba0e9;
            color: #fff;
            line-height: 120px;
        }

        .ant-col,
        .ant-layout-content {
            // background: rgba(16, 142, 233, 1);
            // color: #fff;
            line-height: 120px;
            height: 100%;
        }

        >.ant-layout {
            width: 100%;
            min-height: 100%;
        }

        >.ant-layout:last-child {
            margin: 0;
        }
    }
	
	
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 400;
        }
	
        span,
        p {
            font-size: 17px;
            letter-spacing: 0.8px;
            line-height: 30px;
        }
	
        .fadeInLeft {
            -webkit-animation-name: "fadeInLeft";
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
        }
	
        .fadeInRight {
            -webkit-animation-name: "fadeInRight";
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
        }
	
        /*左右两边的盒子容器*/
        .blog-cell-main-container {
            opacity: 0.8;
            padding: 0px 25px 10px;
        }
	
        /*左边部分*/
        .blog-left-side-portion {
            position: sticky;
            top: 80px;
            padding-left: 2%;
            /*padding-right: 2%;*/
            z-index: 100;
        }
	
	
        /*---------------------
        |   核心盒子构成start   |
        ------- ---------------*/
        .blog-left-side-scroll-portion,
        .blog-right-side-container {
            border-radius: 15px;
            background-color: white;
	
            line-height: 1.4;
            white-space: nowrap;
            /*规定段落中的文本不进行换行：*/
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
            max-height: 200px;
            /*margin-top: 10px;*/
            /*min-height: 200px;*/
	
            overflow-x: hidden;
            overflow-y: auto;
            display: block;
        }
	
	
        /*预留滚动条的宽度*/
        .blog-left-side-scroll-portion,
        .blog-right-side-scroll-portion {
            padding-right: 5px;
        }
	
        /*预留滚动条的宽度 缩减*/
        .blog-left-side-scroll-portion:hover,
        .blog-right-side-scroll-portion:hover {
            padding-right: 0px;
        }
	
        .blog-left-side-scroll-portion:hover::-webkit-scrollbar {
            display: block;
        }
	
        .blog-right-side-scroll-portion:hover::-webkit-scrollbar {
            display: block;
        }
	
        .blog-left-side-scroll-portion::-webkit-scrollbar,
        .blog-right-side-scroll-portion::-webkit-scrollbar {
            width: 5px;
            display: none;
        }
	
        .blog-left-side-scroll-portion::-webkit-scrollbar-thumb,
        .blog-right-side-scroll-portion::-webkit-scrollbar-thumb {
            background-color: rgba(153, 154, 170, 0.3);
            border-radius: 2px;
        }
	
        /*margin滚动条上偏移*/
        .blog-left-side-scroll-portion::-webkit-scrollbar-track,
        .layui-layer-content::-webkit-scrollbar-track {
            margin-top: 20px;
            margin-bottom: 20px;
        }


    // 动画
    @-webkit-keyframes fadeInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-120px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translateX(-120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(120px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translateX(120px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @-webkit-keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
</style>

 src/components/test1/article.vue

New file
@@ -0,0 +1,16 @@
<template>
    <div>
        <span v-for="(item, index) in articles" :key="index">{{item}},</span>
    </div>
</template>

<script>
    export default {
        props: ['articles'],
        data(){
            return {
                "name":"名咩咩咩咩"
            }
        }
    }
</script>

 src/components/test1/parent1.vue

New file
@@ -0,0 +1,27 @@
<template>
    <div class="section">
        <com-article :articles="articleList" ref="myCom"></com-article>
    </div>
</template>

<script>
    import comArticle from './article.vue'
    export default {
        name: 'HH',
        components: {
            comArticle
        },
        props: {
            articleList: ""
        },
        data() {
            return {
                // articleList: ['红楼梦', '西游记', '三国演义']
            }
        },
        mounted() {
            const comB = this.$refs.myCom;
            console.log(comB.name); // Vue.js
        }
    }
</script>

 src/components/test2/article.vue

New file
@@ -0,0 +1,16 @@
<template>
    <div>
        <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
    </div>
</template>

<script>
    export default {
        props: ['articles'],
        methods: {
            emitIndex(index) {
                this.$emit('onEmitIndexEvent', index)
            }
        }
    }
</script>

 src/components/test2/parent1.vue

New file
@@ -0,0 +1,28 @@
// 父组件中
<template>
    <div class="section">
        <com-article :articles="articleList" @onEmitIndexEvent="onEmitIndexMethod"></com-article>
        <p>{{currentIndex}}</p>
    </div>
</template>

<script>
    import comArticle from './article.vue'
    export default {
        name: 'HelloWorld',
        components: {
            comArticle
        },
        data() {
            return {
                currentIndex: -1,
                articleList: ['红楼梦', '西游记', '三国演义']
            }
        },
        methods: {
            onEmitIndexMethod(idx) {
                this.currentIndex = idx
            }
        }
    }
</script>

 src/components/test3/article.vue

New file
@@ -0,0 +1,22 @@
// 子组件中
<template>
    <div class="com_a">
        <span>{{messageA}}</span>
        <p>获取父组件的值为: {{parentVal}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                messageA: 'this is old'
            }
        },
        computed: {
            parentVal() {
                return this.$parent.msg;
            }
        }
    }
</script>

 src/components/test3/parent1.vue

New file
@@ -0,0 +1,30 @@
// 父组件中
<template>
    <div class="hello_world">
        <div>{{msg}}</div>
        <com-a></com-a>
        <button @click="changeA">点击改变子组件值</button>
    </div>
</template>

<script>
    import ComA from './article.vue'
    export default {
        name: 'HelloWorld',
        components: {
            ComA
        },
        data() {
            return {
                msg: 'Welcome'
            }
        },

        methods: {
            changeA() {
                // 获取到子组件A
                this.$children[0].messageA = 'this is new value'
            }
        }
    }
</script>

 src/components/test4/A.vue

New file
@@ -0,0 +1,35 @@
// A.vue

<template>
    <div>
        <comB></comB>
        <button @click="changeA">点击改变for</button>
        <br />tt: {{tt}}
    </div>
</template>

<script>
    import comB from './B.vue'
    export default {
        name: "A",
        data() {
            return {
                "tt": "fff"
            }
        },

        provide: {
            for: "demo"
        },
        components: {
            comB
        },
        methods: {
            changeA() {
                // 获取到子组件A
                this.for = 'this is new value'
                this.tt = Math.random()
            }
        }
    }
</script>

 src/components/test4/B.vue

New file
@@ -0,0 +1,24 @@
// B.vue

<template>
    <div>
        B:{{demo}}
        <comC></comC>
    </div>
</template>

<script>
    import comC from './C.vue'
    export default {
        name: "B",
        inject: ['for'],
        data() {
            return {
                demo: this.for
            }
        },
        components: {
            comC
        }
    }
</script>

 src/components/test4/C.vue

New file
@@ -0,0 +1,18 @@
// C.vue
<template>
    <div>
        C:{{demo}}
    </div>
</template>

<script>
    export default {
        name: "C",
        inject: ['for'],
        data() {
            return {
                demo: this.for
            }
        }
    }
</script>

 src/components/test5/A.vue

New file
@@ -0,0 +1,18 @@
<template>
    <div>
        <component-a ref="comA"></component-a>
    </div>
</template>
<script>
    import componentA from "./B.vue"
    export default {
        components: {
            componentA
        },
        mounted() {
            const comA = this.$refs.comA;
            console.log(comA.name); // Vue.js
            comA.sayHello(); // hello
        }
    }
</script>

 src/components/test5/B.vue

New file
@@ -0,0 +1,17 @@
<template>
	
</template>
<script>
    export default {
        data() {
            return {
                name: 'Vue.js'
            }
        },
        methods: {
            sayHello() {
                console.log('hello')
            }
        }
    }
</script>

 src/components/test6/EventBus.js

New file
@@ -0,0 +1,2 @@
import Vue from 'vue'
export const EventBus = new Vue()

 src/components/test6/additionNum.vue

New file
@@ -0,0 +1,28 @@
<template>
    <div>
        <div>下次加:{{ num}}</div>
		
        <button @click="additionHandle">+加法器</button>
    </div>
</template>

<script>
    import {
        EventBus
    } from './EventBus.js'
    console.log(EventBus)
    export default {
        data() {
            return {
                num: 1
            }
        },
        methods: {
            additionHandle() {
                EventBus.$emit('addition', {
                    num: this.num++
                })
            }
        }
    }
</script>

 src/components/test6/showNum.vue

New file
@@ -0,0 +1,22 @@
// showNum.vue 中接收事件

<template>
    <div>计算和: {{count}}</div>
</template>

<script>
    import {EventBus} from './EventBus.js'
    export default {
        data() {
            return {
                count: 0
            }
        },

        mounted() {
            EventBus.$on('addition', param => {
                this.count = this.count + param.num;
            })
        }
    }
</script>

 src/components/test6/test.vue

New file
@@ -0,0 +1,17 @@
<template>
    <div>
        <show-num-com></show-num-com>
        <addition-num-com></addition-num-com>
    </div>
</template>

<script>
    import showNumCom from './showNum.vue'
    import additionNumCom from './additionNum.vue'
    export default {
        components: {
            showNumCom,
            additionNumCom
        }
    }
</script>

 src/components/test7/childA.vue

New file
@@ -0,0 +1,33 @@
// 子组件childA

<template>
    <div id="childA">
        <h1>我是A组件</h1>
        <button @click="transform">点我让B组件接收到数据</button>
        <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                AMessage: 'Hello，B组件，我是A组件'
            }
        },
        computed: {
            BMessage() {
                // 这里存储从store里获取的B组件的数据
                return this.$store.state.BMsg
            }
        },
        methods: {
            transform() {
                // 触发receiveAMsg，将A组件的数据存放到store里去
                this.$store.commit('receiveAMsg', {
                    AMsg: this.AMessage
                })
            }
        }
    }
</script>

 src/components/test7/childB.vue

New file
@@ -0,0 +1,33 @@
// 子组件 childB

<template>
    <div id="childB">
        <h1>我是B组件</h1>
        <button @click="transform">点我让A组件接收到数据</button>
        <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                BMessage: 'Hello，A组件，我是B组件'
            }
        },
        computed: {
            AMessage() {
                // 这里存储从store里获取的A组件的数据
                return this.$store.state.AMsg
            }
        },
        methods: {
            transform() {
                // 触发receiveBMsg，将B组件的数据存放到store里去
                this.$store.commit('receiveBMsg', {
                    BMsg: this.BMessage
                })
            }
        }
    }
</script>

 src/components/test7/store.js

New file
@@ -0,0 +1,25 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
    // 初始化A和B组件的数据，等待获取
    AMsg: '',
    BMsg: ''
}

const mutations = {
    receiveAMsg(state, payload) {
        // 将A组件的数据存放于state
        state.AMsg = payload.AMsg
    },
    receiveBMsg(state, payload) {
        // 将B组件的数据存放于state
        state.BMsg = payload.BMsg
    }
}

export default new Vuex.Store({
    state,
    mutations
})

 src/components/test7/test.vue

New file
@@ -0,0 +1,18 @@
<template>
    <div>
        <ChildA/>
        <ChildB/>
    </div>
</template>

<script>
    import ChildA from './childA' // 导入A组件
    import ChildB from './childB' // 导入B组件

    export default {
        components: {
            ChildA,
            ChildB
        } // 注册A、B组件
    }
</script>

 src/components/test8/test.vue

New file
@@ -0,0 +1,20 @@
<script>
    import MyComponent from "../test1/parent1.vue"

    export default {
        name: "xx",

        render: function(createElement) {
            var h = this.$createElement
            var test = {
                props: {
                    articleList: ['红楼梦', '西记', '三国演']
                }
            }
            return ( < MyComponent {
                    ...test
                } > < /MyComponent>)

            }
        };
</script>

 src/images/image-icon.png

 src/images/text-icon.png

 src/images/video-icon.png

 src/js/bus.js

New file
@@ -0,0 +1,3 @@
import Vue from 'vue';

export default new Vue();

 src/js/config.js

New file
@@ -0,0 +1,8 @@
export const ACCEPT_CONFIG = {
    image: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
    video: ['.mp4', '.rmvb', '.mkv', '.wmv', '.flv'],
    document: ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf', '.txt', '.tif', '.tiff'],
    getAll(){
        return [...this.image, ...this.video, ...this.document]
    },
};

 src/main.js

New file
@@ -0,0 +1,26 @@
import Vue from 'vue';
import App from './App';
import uploader from 'vue-simple-uploader'

import 'element-ui/lib/theme-chalk/index.css';

import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
import $ from 'jquery'

import axios from 'axios'
import Element from 'element-ui'
import store from "@/components/test7/store.js"

Vue.prototype.$axios = axios
Vue.use(Antd);
Vue.use(Element)
Vue.use(uploader)
// Vue.component(Button.name, Button);

// Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    store,
}).$mount('#app');

 vue.config.js

New file
@@ -0,0 +1,27 @@
// vue.config.js for less-loader@6.0.0
module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        "primary-color": "#1DA57A", // 全局主色
                        "link-color": "#1890ff", // 链接色
                        "success-color": "#52c41a", // 成功色
                        "warning-color": "#faad14", // 警告色
                        "error-color": "#f5222d", // 错误色
                        "font-size-base": "14px", // 主字号
                        "heading-color": "rgba(0, 0, 0, 0.85) ", // 标题色
                        "text-color": "rgba(0, 0, 0, 0.65) ", // 主文本色
                        "text-color-secondary": "rgba(0, 0, 0, 0.45) ", // 次文本色
                        "disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
                        "border-radius-base": "4px", // 组件 / 浮层圆角 "border-color-base": "#d9d9d9" ,// 边框色
                        "box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15) " // 浮层阴影
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },
};