A-soul视频分区插件

自定义分区

目前为 2022-01-11 提交的版本。查看 最新版本

// ==UserScript==
// @name         A-soul视频分区插件
// @namespace    http://tampermonkey.net/
// @version      0.1.4
// @description  自定义分区
// @author       tuntun
// @match        https://www.bilibili.com/*
// @icon         https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';
  GM_addStyle(`
    .tuntun-setting-popover {
      width: 300px;
      // height: 200px;
      background-color: white;
      border-radius: 20px;
      position: absolute;
      left: -120px;
      top: 43px;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      transition: opacity 0.5s, height 0.25s;
    }

    .tuntun-setting-none {
      opacity: 0;
      height: 0;
      overflow: hidden;
    }

    .tuntun-setting-form {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tuntun-setting-btn {
      margin: 0 auto;
      width: 84px;
      height: 38px;
      background-color:#b8a6d9;
      border: none;
      border-radius:10px;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:17px;
      text-decoration:none;
      text-shadow:0px 0px 0px #9752cc;
    }
    .tuntun-setting-btn:hover {
      background-color:#bc80ea;
    }
    .tuntun-setting-btn:active {
      position:relative;
      top:1px;
    }

    .tuntun-setting-input {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    .tuntun-setting-input div {
      margin-right: 10px
    }

    .tuntun-setting-input input,select{
      width: 200px;
      border: 1px solid #ccc;
      padding: 7px 0px;
      border-radius: 3px;
      padding-left: 5px;
      transition: border 0.25s
    }

    .tuntun-setting-input input:focus{
      outline: none;
      border: 1px solid #B8A6D9;
    }

    .tuntun-setting-input select:focus{
      outline: none;
      border: 1px solid #B8A6D9;
    }
    
    .tuntun-setting-imgRadius {
      padding-left: 0px !important;
    }
  `);

  const getTemplete = (videoKey, imgUrl = '') => {
    return `
    <section class="bili-grid">
      <div class="video-card-list is-main">
        <div class="area-header" style="z-index: 1000;">
          <div class="left tuntun-part-left">
            <a id="A-soul分区" class="the-world area-anchor" data-id="8"></a>
            <img class="icon tuntun-part-img" src="${imgUrl}"></img>
            <a
              class="title"
              href="https://search.bilibili.com/all?keyword=${videoKey}"
              target="_blank"
              >
              <span>${videoKey}分区</span>
            </a>
          </div>
          <div class="right" style="position: relative;">
            <div id="tuntun-setting" style="position: relative;">
              <button class="primary-btn roll-btn">
                <span>设置</span></button
              >
              <div
                class="tuntun-setting-popover tuntun-setting-none"
              >
                <form class="tuntun-setting-form">
                  <div class="tuntun-setting-input">
                    <div>分区名称:</div>
                    <input type="text" name="name" />
                  </div>
                  <div class="tuntun-setting-input">
                    <div>分区图片:</div>
                    <input type="text" name="picUrl" />
                  </div>
                  <div class="tuntun-setting-input">
                    <div>图片圆角:</div>
                    <input class="tuntun-setting-imgRadius" type="range" min="0" max="50"/>
                  </div>
                  <div class="tuntun-setting-input">
                    <div>时间范围:</div>
                    <select name="timeRange" id="">
                      <option value="7">一周之内</option>
                      <option value="30" selected>一月之内</option>
                      <option value="90">三个月之内</option>
                      <option value="0">不限时间</option>
                    </select>
                  </div>
                  <input class="tuntun-setting-btn" type="submit" value="确认" />
                </form>
              </div>
            </div>
            <button id="refreshVideo" class="primary-btn roll-btn">
              <svg style="transform: rotate(0deg)">
                <use xlink:href="#widget-roll"></use></svg><span>换一换</span></button
            >
            <a
              class="primary-btn see-more tuntun-see-more"
              href="https://search.bilibili.com/all?keyword=${videoKey}"
              target="_blank"
              ><span>查看更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
          </div>
        </div>
        <div class="video-card-body">
        </div>
      </div>
      <aside>
        <div class="aside-wrap">
          <div class="aside-head">
            <div class="area-header">
              <div class="left">
                <!----><!----><a
                  class="title rank-title"
                  href="https://www.bilibili.com/v/virtual"
                  target="_blank"
                ><span>排行榜</span></a>
              </div>
              <div class="right">
                <a
                  class="primary-btn see-more"
                  href="https://www.bilibili.com/v/virtual"
                  target="_blank"
                  ><span>更多</span><svg><use xlink:href="#widget-arrow"></use></svg></a>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </section>
    `;
  };

  let asideBody = `
  <div class="aside-body">
          <div class="aside-core">
            <div class="bili-rank-list-video bili-rank-list-video__grid">
              <ul class="bili-rank-list-video__list video-rank-list">
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="1"
                      >1</span
                    ><a
                      href="//www.bilibili.com/video/BV1Hi4y1R7gy"
                      class="rank-video-card"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><div class="rank-video-card__image">
                        <picture class="v-img rank-video-card__cover"
                          ><!---->
                          <source
                            srcset="
                              //i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q.webp
                            "
                            type="image/webp" />
                          <img
                            src="//i2.hdslb.com/bfs/archive/c92ce434742fb724af5577de2485a1eaff8aa226.jpg@192w_108h_1c_100q"
                            alt="B站以前的LV6 VS 现在的LV6 2.0"
                            loading="lazy"
                            onload=""
                        /></picture>
                      </div>
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="B站以前的LV6 VS 现在的LV6 2.0"
                        >
                          B站以前的LV6 VS 现在的LV6 2.0
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="2"
                      >2</span
                    ><a
                      href="//www.bilibili.com/video/BV1Rb4y1Y7Pw"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【自制动画】《鬼灭之刃》无限城篇(香奈乎单挑童磨 片段)"
                        >
                          【自制动画】《鬼灭之刃》无限城篇(香奈乎单挑童磨 片段)
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="3"
                      >3</span
                    ><a
                      href="//www.bilibili.com/video/BV1Z44y177Wt"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="小伙买了80个模型,爆肝一周,只为在家建造一个迷你世界"
                        >
                          小伙买了80个模型,爆肝一周,只为在家建造一个迷你世界
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="4"
                      >4</span
                    ><a
                      href="//www.bilibili.com/video/BV1mi4y1R7rT"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="准备好了么?来点刺激的!!!【嘉然】"
                        >
                          准备好了么?来点刺激的!!!【嘉然】
                        </h3>
                      </div></a
                    >
                  </div>
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="5"
                      >5</span
                    ><a
                      href="//www.bilibili.com/video/BV1VD4y1c788"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="顶上海鲜战争12分钟总集篇"
                        >
                          顶上海鲜战争12分钟总集篇
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="6"
                      >6</span
                    ><a
                      href="//www.bilibili.com/video/BV14r4y1S71X"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【原神手书】荒泷一斗 【Misfit Lunatic】"
                        >
                          【原神手书】荒泷一斗 【Misfit Lunatic】
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="7"
                      >7</span
                    ><a
                      href="//www.bilibili.com/video/BV1jL411L7Vm"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="【平成三萌】摇起来迎接2022~~~~~~"
                        >
                          【平成三萌】摇起来迎接2022~~~~~~
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="8"
                      >8</span
                    ><a
                      href="//www.bilibili.com/video/BV1tY411p7G5"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="你瞧瞧现在哪儿有萌新啊"
                        >
                          你瞧瞧现在哪儿有萌新啊
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span class="bili-rank-list-video__item--index" data-index="9"
                      >9</span
                    ><a
                      href="//www.bilibili.com/video/BV1ji4y1R7LL"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="女生想让男朋友知道的事有哪些?"
                        >
                          女生想让男朋友知道的事有哪些?
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
                <li class="bili-rank-list-video__item">
                  <div class="bili-rank-list-video__item--wrap">
                    <span
                      class="bili-rank-list-video__item--index"
                      data-index="10"
                      >10</span
                    ><a
                      href="//www.bilibili.com/video/BV12L4y1E7G2"
                      class="rank-video-card rank-video-card__concise"
                      target="_blank"
                      data-mod="partition_rank"
                      data-idx="content"
                      data-ext="click"
                      ><!---->
                      <div class="rank-video-card__info">
                        <h3
                          class="rank-video-card__info--tit"
                          title="看到朋友脱单我比si了还难受"
                        >
                          看到朋友脱单我比si了还难受
                        </h3>
                      </div></a
                    >
                  </div>
                  <!---->
                </li>
              </ul>
            </div>
            <!----><!---->
          </div>
    </div>`

  const Tool = {
    // 大数转万
    formatBigNumber: (num) => {
      return num > 10000 ? `${(num / 10000).toFixed(2)}万` : num
    },
    // 字符串转DOM
    s2d: (string) => {
      return new DOMParser().parseFromString(string, 'text/html').body
        .childNodes[0]
    },
    // 发布时间格式化
    diffTime: (time) => {
      let upDate = new Date(parseInt(time, 10) * 1000);
      let nowDate = new Date();
      let nowTime = nowDate.getTime(),
          upTime = upDate.getTime(),
          Day = 24 * 60 * 60 * 1000,
          Hours = 60 * 60 * 1000,
          Minutes = 60 * 1000,
          diffDay = parseInt((nowTime - upTime) / Day),
          diffHours = parseInt((nowTime - upTime) / Hours),
          diffMinutes = Math.floor((nowTime - upTime) / Minutes);
      if(diffDay != 0 && diffDay < 7) {
        if ( diffDay === 1 ) {
          return '昨天'
        }
        return diffDay + '天前';
      }
      else if(diffDay === 0 && diffHours != 0) {
        return diffHours + '小时前';
      }
      else if(diffDay === 0 && diffHours === 0 && diffMinutes != 0) {
        return diffMinutes + '分钟前';
      }
      else if (diffDay === 0 && diffHours === 0 && diffMinutes === 0) {
        return '刚刚';
      }
      else {
        let month = upDate.getMonth() + 1;
        let day = upDate.getDate();
        if (nowDate.getFullYear() !== upDate.getFullYear()) {
          return `${upDate.getFullYear()}-${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
        }
        return `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
      }    
    },
    // 判断发布时间与现在时间是否过长
    isTimeTooLate: (time, rangeDay = 30) => {
      let day = parseInt(rangeDay, 10);
      if (day === 0) {
        return false;
      }
      let upData = new Date(parseInt(time, 10) * 1000);
      let nowTime = new Date().getTime(),
          upTime = upData.getTime(),
          Day = 24 * 60 * 60 * 1000,
          diffDay = parseInt((nowTime - upTime) / Day);
      if (diffDay > day) {
        return true;
      }
      return false;
    }
  }

  const API = {
    // 封装get方法
    Get: async (props) => {
      const { url: baseUrl, params = {} } = props;
      let pStr = Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join('&');
      let url = `${baseUrl}?${pStr}`;
      try {
        let res = await fetch(url, {
          credentials: "include"
        });
        return (await res.json()).data;
      } catch (error) {
        console.error('Get Error', error);
      }
    },
    // 通过关键词获取视频数据
    getVideo: async (keyWord, page = 1) => {
      try {
        let res = await API.Get({
          url: 'https://api.bilibili.com/x/web-interface/search/type',
          params: {
            search_type: 'video',
            keyword: keyWord,
            page: page,
          }
        });
        return res.result;
      } catch (error) {
        console.log('getVideo', error);
      }
    },
  }
  
  let videoList = [];
  let page = 1;
  let searchPage = 1;
  let bvList = [];
  let pageSize = 10;
  let videoKey = GM_getValue('videoKey', 'A-soul');
  let rangeDay = GM_getValue('rangeDay', '30');
  let imgBorderRadius = GM_getValue('imgBorderRadius', '15');
  let defaultImgUrl = 'https://i2.hdslb.com/bfs/face/48d65a10a2c643dddc4a51e0a60fae892393417a.jpg';
  let imgUrl = GM_getValue('imgUrl', defaultImgUrl);

  // 获取数据并渲染
  const getVideoCardTemplete = (data) => {
    let videoCardBody = document.querySelector('.video-card-body');
    videoCardBody.innerHTML = '';
    data.forEach((item, index) => {
      if (index < pageSize) {
        const {
          bvid, pic, mid,
          upic, author, play,
          like, duration, pubdate } = item;
        let title = item.title.replace(/<em class="keyword">(.*?)<\/em>/g, '$1');
        let domStr = `
        <div class="bili-video-card">
          <div class="bili-video-card__skeleton hide">
            <div class="bili-video-card__skeleton--cover"></div>
            <div class="bili-video-card__skeleton--info">
              <div class="bili-video-card__skeleton--face"></div>
              <div class="bili-video-card__skeleton--right">
                <p class="bili-video-card__skeleton--text"></p>
                <p class="bili-video-card__skeleton--text short"></p>
                <p class="bili-video-card__skeleton--light"></p>
              </div>
            </div>
          </div>
          <div class="bili-video-card__wrap __scale-wrap">
            <a
              href="//www.bilibili.com/video/${bvid}"
              target="_blank"
              data-mod="partition_recommend"
              data-idx="content"
              data-ext="click"
              ><div class="bili-video-card__image __scale-player-wrap">
                <div class="bili-video-card__image--wrap">
                  <div class="bili-watch-later" style="display: none">
                    <svg class="bili-watch-later__icon">
                      <use xlink:href="#widget-watch-later"></use></svg><span
                      class="bili-watch-later__tip"
                      style="display: none"
                    ></span>
                  </div>
                  <picture class="v-img bili-video-card__cover"
                    ><!---->
                    <source
                      srcset="
                        ${pic}@672w_378h_1c_100q.webp
                      "
                      type="image/webp" />
                    <img
                      src="${pic}@672w_378h_1c_100q"
                      alt="${title}"
                      loading="lazy"
                      onload=""
                  /></picture>
                  <div class="v-inline-player"></div>
                </div>
                <div class="bili-video-card__mask">
                  <div class="bili-video-card__stats">
                    <div class="bili-video-card__stats--left">
                      <span class="bili-video-card__stats--item"
                        ><svg class="bili-video-card__stats--icon">
                          <use xlink:href="#widget-play-count"></use></svg><span class="bili-video-card__stats--text"
                          >${Tool.formatBigNumber(play)}</span
                        ></span
                      ><span class="bili-video-card__stats--item"
                        ><svg class="bili-video-card__stats--icon">
                          <use xlink:href="#widget-agree"></use></svg><span class="bili-video-card__stats--text"
                          >${Tool.formatBigNumber(like)}</span
                        ></span
                      >
                    </div>
                    <span class="bili-video-card__stats__duration">${duration}</span>
                  </div>
                </div>
              </div></a
            >
            <div class="bili-video-card__info __scale-disable">
              <a
                href="//space.bilibili.com/${mid}"
                target="_blank"
                data-mod="partition_recommend"
                data-idx="content"
                data-ext="click"
                ><div class="v-avatar bili-video-card__avatar">
                  <picture class="v-img v-avatar__face"
                    ><!---->
                    <source
                      srcset="
                        ${upic.substr(5)}@72w_72h.webp
                      "
                      type="image/webp" />
                    <img
                      src="${upic.substr(5)}@72w_72h"
                      alt="${author}"
                      loading="lazy"
                      onload="" /></picture
                  ><!---->
                </div></a
              >
              <div class="bili-video-card__info--right">
                <a
                  href="//www.bilibili.com/video/${bvid}"
                  target="_blank"
                  data-mod="partition_recommend"
                  data-idx="content"
                  data-ext="click"
                  ><h3
                    class="bili-video-card__info--tit"
                    title="${title}"
                  >
                    ${title}
                  </h3></a
                >
                <p class="bili-video-card__info--bottom">
                  <a
                    class="bili-video-card__info--owner"
                    href="//space.bilibili.com/${mid}"
                    target="_blank"
                    data-mod="partition_recommend"
                    data-idx="content"
                    data-ext="click"
                    ><span class="bili-video-card__info--author">${author}</span
                    ><span class="bili-video-card__info--date"
                      >· ${Tool.diffTime(pubdate)}</span
                    ></a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        `;
        videoCardBody.appendChild(Tool.s2d(domStr));
      }
    });
  };

  // 更新视频
  const refreshVideo = async () => {
    let firstVideoIndex = (page - 1) * pageSize;
    let lastVideoIndex = firstVideoIndex + pageSize - 1;
    while(videoList.length < lastVideoIndex + 1) {
      let data = await API.getVideo(videoKey, searchPage);
      data.forEach((item) => {
        if (!Tool.isTimeTooLate(item.pubdate, rangeDay)) {
          if (bvList.indexOf(item.bvid) === -1) {
            videoList.push(item);
            bvList.push(item.bvid);
          }
        }
      });
      searchPage++;
    };
    page++;
    let applyData = videoList.slice(firstVideoIndex, lastVideoIndex + 1)
    getVideoCardTemplete(applyData);
  };

  // 填入框架
  let main = document.querySelector('.bili-layout');
  let gridAll = document.querySelectorAll('.bili-grid');
  let templete = getTemplete(videoKey, imgUrl);
  main.insertBefore(Tool.s2d(templete), gridAll[2]);

  // 第一次获取数据并渲染
  const applyFirstData = async () => {
    refreshVideo();
  };
  applyFirstData();
  // 换一换按钮添加更新视频事件
  let refreshVideoBtn = document.querySelector('#refreshVideo');
  refreshVideoBtn.addEventListener('click', refreshVideo);

  let aside = document.querySelector('.aside-wrap');
  // popover
  const showpopover = (x, y) => {
    return `
    <div id="asoul-popover" style="position: absolute; z-index: 2000;  top: ${y}px; left: ${x}px;">
      <div class="v-popover is-top" style="padding-bottom: 0px; margin-left: 0px; pointer-events: none;">
        <div class="v-popover-content bili-rank-list-video">
          <div class="rank-video-card__popover">
            <div class="rank-video-card__popover--top">
              <div class="rank-video-card__image rank-video-card__popover--image">
                <picture class="v-img rank-video-card__cover rank-video-card__popover--cover">
                  <!---->
                  <source srcset="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h.webp"
                    type="image/webp"><img
                    src="//i1.hdslb.com/bfs/archive/6ac4c468f90987ecd2a51f1753f7d043560ac271.jpg@192w_108h"
                    alt="小伙买了80个模型,爆肝一周,只为在家建造一个迷你世界" loading="lazy" onload="">
                </picture>
              </div>
              <div class="rank-video-card__info rank-video-card__popover--info">
                <h3 class="rank-video-card__popover--tit" title="小伙买了80个模型,爆肝一周,只为在家建造一个迷你世界">小伙买了80个模型,爆肝一周,只为在家建造一个迷你世界
                </h3>
                <p class="rank-video-card__popover--author"><span>拜托了小翔哥</span><span> · 12-29</span></p>
              </div>
            </div>
            <ul class="rank-video-card__popover--stats">
              <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                  <use xlink:href="#widget-play-count"></use>
                </svg><span>93万</span></li>
              <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                  <use xlink:href="#widget-danmaku"></use>
                </svg><span>3931</span></li>
              <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                  <use xlink:href="#widget-favorite"></use>
                </svg><span>1.3万</span></li>
              <li class="rank-video-card__popover--stats__item"><svg class="rank-video-card__popover--icon">
                  <use xlink:href="#widget-coin"></use>
                </svg><span>7.6万</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    `
  }

  // 侧边
  aside.append(Tool.s2d(asideBody));

  let setting = document.querySelector('#tuntun-setting');
  let settingBtn = setting.children[0];
  let settingPop = setting.children[1];
  let settingForm = settingPop.children[0];
  let partNameInput = settingForm.children[0].children[1];
  let partImgUrlInput = settingForm.children[1].children[1];
  let partImgDom = document.querySelector('.tuntun-part-img');
  console.dir(partImgDom);
  partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  let radiusRangeInput = document.querySelector('.tuntun-setting-imgRadius');
  let partTimeRangeInput = settingForm.children[3].children[1];

  // 设置按钮点击事件
  settingBtn.addEventListener('click', () => {
    if (settingPop.className === 'tuntun-setting-popover tuntun-setting-none') {
      settingPop.className = 'tuntun-setting-popover';
    } else {
      settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
    }
    partNameInput.value = videoKey;
    partImgUrlInput.value = imgUrl;
    partTimeRangeInput.value = rangeDay;
    radiusRangeInput.value = imgBorderRadius;
    partImgDom.style.borderRadius = `${imgBorderRadius}%`;
  });

  // videoKey改变
  const videoKeyChange = (newKey) => {
    let seeMoreBtn = document.querySelector('.tuntun-see-more');
    let headerLeft = document.querySelector('.tuntun-part-left');
    videoKey = newKey;
    videoList = [];
    page = 1;
    searchPage = 1;
    bvList = [];
    GM_setValue('videoKey', newKey);
    seeMoreBtn.href = `https://search.bilibili.com/all?keyword=${newKey}`;
    headerLeft.children[2].href = `https://search.bilibili.com/all?keyword=${newKey}`;
    headerLeft.children[2].children[0].innerHTML = `${newKey}分区`;
    refreshVideo();
  }

  // imgUrl改变
  const imgUrlChange = (newUrl) => {
    let partImgDom = document.querySelector('.tuntun-part-img');
    imgUrl = newUrl;
    GM_setValue('imgUrl', newUrl);
    partImgDom.src = newUrl;
  }

  // 设置img的圆角
  radiusRangeInput.addEventListener('change', () => {
    partImgDom.style.borderRadius = `${radiusRangeInput.value}%`;
  });
  const imgBorderRadiusChange = (newRadiusNum) => {
    imgBorderRadius = newRadiusNum;
    GM_setValue('imgBorderRadius', newRadiusNum);
  }

  // 时间范围改变
  const timeRangeChange = (timeRange) => {
    rangeDay = timeRange;
    videoList = [];
    page = 1;
    searchPage = 1;
    bvList = [];
    GM_setValue('rangeDay', timeRange);
    refreshVideo();
  }

  // 设置表单确认
  settingForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if (partNameInput.value !== videoKey) {
      videoKeyChange(partNameInput.value);
    }
    if (partImgUrlInput.value !== imgUrl) {
      imgUrlChange(partImgUrlInput.value);
    }
    if (radiusRangeInput.value !== imgBorderRadius) {
      imgBorderRadiusChange(radiusRangeInput.value);
    }
    if (partTimeRangeInput.value !== rangeDay) {
      timeRangeChange(partTimeRangeInput.value);
    }
    settingPop.className = 'tuntun-setting-popover tuntun-setting-none';
  });


  // settingBtn.addEventListener('')

  // 鼠标移入
  // aside.addEventListener('mousemove', (e) => {
  //   if (e.target.className === 'bili-rank-list-video__item--wrap') {
      
  //   }
  //   let option = e.target.getBoundingClientRect();
  // })
  // aside.addEventListener('mouseleave', () => {
  //   document.body.removeChild(document.querySelector('#asoul-popover'));
  // })
})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址