拷贝漫画PC显示评论

改自Byaidu的拷贝漫画增强插件，只保留评论的加载和发送功能，并重做了ui
目前为 2023-04-23 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         拷贝漫画PC显示评论
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  改自Byaidu的拷贝漫画增强插件，只保留评论的加载和发送功能，并重做了ui
// @author       ljw2487
// @match        *://*.copymanga.com/*
// @match        *://*.copymanga.org/*
// @match        *://*.copymanga.net/*
// @match        *://*.copymanga.info/*
// @match        *://*.copymanga.site/*
// @match        *://*.copymanga.tv/*
// @match        *://copymanga.com/*
// @match        *://copymanga.org/*
// @match        *://copymanga.net/*
// @match        *://copymanga.info/*
// @match        *://copymanga.site/*
// @match        *://copymanga.tv/*
// @license      GNU General Public License v3.0 or later
// @resource     element_css https://unpkg.com/[email protected]/lib/theme-chalk/index.css
// @resource     animate_css https://unpkg.com/[email protected]/animate.min.css
// @require      https://unpkg.com/[email protected]/dist/vue.min.js
// @require      https://unpkg.com/[email protected]/lib/index.js
// @require      https://unpkg.com/[email protected]/dist/axios.min.js
// @require      https://unpkg.com/[email protected]/store.js
// @require      https://unpkg.com/[email protected]/dist/jquery.min.js
// @require      https://unpkg.com/[email protected]/dist/jszip.min.js
// @require      https://unpkg.com/[email protected]/dist/FileSaver.min.js
// @require      https://unpkg.com/[email protected]/crypto-js.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_xmlhttpRequest
// @run-at       document-start
// ==/UserScript==

// retry 拦截器
axios.interceptors.response.use(undefined, (err) => {
  return new Promise((resolve)=>{setTimeout(()=>{resolve()},1000)}).then(() => axios(err.config));
});

function route() {
    console.log('LOAD SUCCESSED', window.document.title)
    // /comic/gengjuesezhuanshengtaiguotoule/chapter/bf86c68c-195a-11ec-943d-00163e0ca5bd
    if (/^\/comic\/.*\/.*$/.test(location.pathname)) comicPage(1)
    else if (/^\/h5\/comicContent\/.*\/.*$/.test(location.pathname)) comicPage(0)
}
route()
///////////////////////////////////////////////////////////////////////
async function loadCSS(){
    var element_css, animate_css;
    if (typeof(GM_getResourceText)=='undefined'){
        await axios.get('https://unpkg.com/[email protected]/lib/theme-chalk/index.css')
        .then(function (response) {
            element_css = response.data;
        })
        await axios.get('https://unpkg.com/[email protected]/animate.min.css')
        .then(function (response) {
            animate_css = response.data;
        })
    }else{
        element_css = GM_getResourceText("element_css");
        animate_css = GM_getResourceText("animate_css");
    }
    GM_addStyle(element_css);
    GM_addStyle(animate_css);
}
/////////////////////////////////////////////////////////////////////
async function comicPage(isPC) {
    loadCSS()
    var comic, chapter, htmlBody, newDiv, newStyle
    if (isPC) comic = window.location.pathname.split('/')[2]
    else comic = window.location.pathname.split('/')[3]
    chapter = window.location.pathname.split('/')[4]
    // console.log('Comic:', comic,'|| Chapter:', chapter)
    //
    htmlBody = document.getElementsByTagName('body')[0]
    console.log(htmlBody)
    newDiv = document.createElement('div')
    newDiv.innerHTML = `
    <div id="app" class="sideComment">
      <el-button
        @click="showComment = !showComment"
        class="showComment"
        :style=" showComment ? 'background-color: rgba(0, 0, 0, 0.7) !important;' : ''"
      >
        查看评论
      </el-button>
      <transition name="slide">
        <div v-if="showComment" :key="elementKey">
          <el-input
            v-model="comment_input"
            placeholder="吐槽"
            style="width: 300px; margin: 20px"
            class="commentCreate"
            @keyup.enter.native="send_comment"
            @focus="is_input=1"
            @blur="is_input=0"
          >
            <el-button slot="append" type="primary" @click="send_comment" class="commentSend">
              发表
            </el-button>
          </el-input>
          <ul style="margin-top:0;" class="commentList">
            <template v-for="(item, index) in comment_data">
              <li style="display:inline-block;">
                <span class="comment" v-bind:index="index">{{item.user_name}} : {{item.comment}}</span>
              </li>
            </template>
          <ul>
        </div>
      </transition>
    </div>`
    newStyle = document.createElement('style')
    newStyle.innerHTML = `
    <style>
      .slide-enter-active,
      .slide-leave-active {
        transition: transform 0.5s;
      }

      .slide-enter {
        transform: translateX(100%);
      }

      .slide-leave-to {
        transform: translateX(100%);
      }
      .sideComment {
        position: fixed;
        right: 15px;
        top: 10%;
        bottom: 10%;
        text-align: right;
        color: white;
        z-index:100;
      }
      .showComment {
        position: relative;
        right: 0px;
        border-radius: 999px;
        color: #777777 !important;
        border: 2px solid #777777 !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        outline: none;
      }
      .showComment:hover {
        color: #b3b3b3 !important;
        border: 2px solid #b3b3b3 !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
      }
      .commentCreate {
        position: relative !important;
        margin: 15px 0 !important;
        border-radius: 999px !important;
      }
      .el-input__inner::placeholder {
        color: #777777 !important;
      }
      .el-input__inner {
        padding-right: 70px;
        color: #b3b3b3 !important;
        border-radius: 999px !important;
        border: 2px solid #777777 !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
      }
      .el-input__inner:focus {
        border: 2px solid #b3b3b3 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
      }
      .el-input-group__append {
        position: absolute !important;
        top: 10px;
        right: 30px;
        border: none !important;
        background-color: rgba(0, 0, 0, 0) !important;
      }
      .commentSend {
        color: #777777 !important;
        border-radius: 999px !important;
      }
      .commentSend:hover {
        color: #b3b3b3 !important;
      }
      .commentList {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 112px;
        bottom: 0;
        margin: 0;
        padding: 0;
        overflow: auto;
        list-style: none;
      }
      .commentList::-webkit-scrollbar {
        display: none;
      }
      .commentList:hover > li {
        background-color: rgba(0, 0, 0, 0.8);
        transition: background-color 0.3s ease-in-out;
      }
      .commentList > li {
        box-sizing: border-box;
        display: inline-block;
        margin-bottom: 15px;
        width: 300px;
        padding: 12px 20px;
        text-align: left;
        word-wrap: break-word;
        color: #b3b3b3;
        border-radius: 22px;
        border: 2px solid #777777;
        background-color: rgba(0, 0, 0, 0.6);
        transition: background-color 0.3s ease-in-out;
      }
    </style>`
    //
    htmlBody.appendChild(newDiv)
    htmlBody.appendChild(newStyle)
    //

    var app = new Vue({
        el: '#app',
        data: {
            comment_data: [], // 评论数据源
            comment_input: '',
            showComment: true,
            elementKey: 0,
        },
        computed: {
        },
        mounted () {
            // window.vuethis = this
            // console.log(window.vuethis)
        },
        methods: {
            send_comment: async function () {
                let token = await cookieStore.get('token');
                await axios.post(
                    'https://api.copymanga.net/api/v3/member/roast',
                    'chapter_id=' + chapter + '&roast=' + this.comment_input + '&_update=true',
                    {
                    headers: {
                        'authorization': 'Token ' + token.value
                    }
                }).then(function (response) {
                    app.comment_input = response.data.message;
                    console.log('评论成功：', response.data)
                });
                await this.load_comment();
            },
            load_comment: async function () {
                await axios.get('https://api.copymanga.site/api/v3/roasts?chapter_id=' + chapter + '&limit=100&offset=0&_update=true')
                .then(function (response) {
                    let list = response.data.results.list
                    app.comment_data = list
                    // 控制台展示评论
                    // console.log('↓↓↓↓评论列表↓↓↓↓')
                    // for (var i = 0; i < list.length; i++) {
                    //     console.log(list[i].user_name, ' : ', list[i].comment)
                    // }
                    // console.log('↑↑↑↑评论列表↑↑↑↑')
                    // console.log('评论请发送：app.send_comment(评论内容)')
                })
            },
        }
    });
    app.load_comment()
}